일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 프로그래머스
- React Hooks
- 파이썬 enumerate
- 내일배움캠프 최종 프로젝트
- 파이썬 list
- 타입스크립트
- 내일배움캠프 프로젝트
- 타입스크립트 props
- 리액트 프로젝트
- useState
- typeScript
- 리액트 팀 프로젝트
- 내배캠 프로젝트
- 한글 공부 사이트
- 타입스크립트 리액트
- 내일배움캠프
- 파이썬 slice
- 파이썬 반복문
- 그리드 정렬
- 리액트 훅
- js
- 코딩테스트
- 자바스크립트
- Next 팀 프로젝트
- REACT
- 리액트 페이지 이동
- 리액트
- 파이썬 for
- JavaScript
- 파이썬 for in
- Today
- Total
목록JavaScript (49)
aotoyae
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bSOo7v/btsCzFlh1pv/X3RwdqBHK7AgzA0mrYLlwk/img.png)
깃허브 업로드 시 firebase나 오픈 api를 이용할 때 key를 숨기는 방법! 저 album.html의 script에서 사용 중이던 key를 숨길 것이다! 1. 같은 위치에 숨길 파일인 key.js를 만들어주고 키들을 넣어준다! 2. album.html로 돌아와 key.js를 불러오고 값들을 설정해준다. 3. 마지막으로 .gitignore 파일을 만들고 숨길 파일인 key.js의 경로를 적어준 뒤 커밋한다! ** firebase api 키 숨기는 법을 검색하니 react를 이용하는 글이 많았는데, 아직 배우기 전이라 이해하기 어려워서 오픈 api 이용했을 때 사용했던 방법으로 시도해보니 똑같이 잘 숨겨졌다!
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Wxppn/btsB1NQxGJw/8w8CuEKKcSgSbUGT53CoxK/img.png)
String.replaceAll : 전체 문자열에서 특정 문자를 설정한 문자로 바꿔준다. const str1 = "Hello World"; console.log(str1.replace(/l/, "~")); // He~lo World console.log(str1.replace(/l/g, "~")); // He~~o Wor~d console.log(str1.replaceAll("l", "~")); // He~~o Wor~d 별로 차이가 없어보이지만 특수문자가 있을 땐 확실히 가독성이 좋아진다. const str1 = "I'm [aoto]. This is Haru's [Car]."; console.log(str1.replace(/\[/g, "~").replace(/\]/g, "~")); // I'm ~aot..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bfujbj/btsBXRUnJQR/bdvLrO1kED2unMHAEdE371/img.png)
: 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능 : 다른 작업을 하다가 다시 돌아와서 next() 해주면 멈췄던 부분부터 이어서 실행 + Redux saga 에서 많이 쓰고 있다.. function 옆에 *을 붙여서 만들고 내부에 yield 키워드를 사용한다. 이 yield에서 함수의 실행을 멈출 수 있다! 제너레이터 함수를 실행하면 제너레이터 객체가 반환된다. ❗️ 제너레이터 객체엔 next() 메소드가 있는데, 사용해 보자! function* fn() { console.log(1); yield 1; console.log(2); yield 2; console.log(3); console.log(4); yield 3; return "finish"; } const a = fn(); console.l..
복습! ❗️ async를 사용하면 then보다 가독성이 좋아진다! asait은 async 함수 내에서만 쓸 수 있다. 일반 함수에서 쓰면 에러 발생 function getName(name) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(name); }, 1000); }); } async function showName() { const result = await getName("aoto"); // 기다렸다가 console.log(result); // 넣어준다 } console.log("시작"); showName(); // 1초 후 "aoto" try { } : 성공 시 실행 catch { } : 실패 시 실행 const f1..
❗️ Promise를 이용하지 않아도 좀 더 간단하게 비동기를 작성할 수 있는 방법! function 앞에 async를 쓰면 Promise를 쓰지 않아도 자동적으로 함수 안 코드들이 Promise로 바뀐다. // function fetchUser() { // return new Promise((resolve, reject) => { // // do network reqeust in 10 secs... // resolve(`aotoyae`); // }); // } async function fetchUser() { // do network reqeust in 10 secs... return `aotoyae`; } const user = fetchUser(); user.then(console.log); co..
복습! const pr = new Promise((resolve, reject) => { setTimeout(() => { resolve("OK"); // reject(new Error("ERROR")); resolve를 지우고 이 부분을 쓰면 Error가 뜬다. }, 1000); }); console.log("START"); pr.then((result) => { console.log(result); }) .catch((err) => { console.log(err); }) .finally(() => { console.log("END"); }); // "START" // 1초 후 "OK" // "END" const f1 = () => { return new Promise((res, rej) => { s..
resolve : 성공 시 실행 함수 reject : 실패 시 실행 함수 ❗️ 이렇게 어떤 일이 완료된 후 실행되는 함수를 callback 함수라 한다. // 새로운 Promise가 만들어질 때는 , executor(내가 전달한 콜백 함수)가 바로 실행된다 const promise = new Promise((resolve, reject) => { // doing some heavy work (network, read files) // 네트워크를 이용하거나 파일을 읽어오는 활동을 할 땐 시간이 오래 걸리니 // 실행이 완료된 후 넘어가는 동기적이 아니라 // 실행이 완료되지 않아도 다음으로 넘어가게 비동기적 함수를 이용해야 한다. console.log(`doing someting...`); setTimeo..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/T08zJ/btsBYrVlgYN/jiARF1dYtTm3Pmk3UQA1u1/img.png)
: ES6에 추가된 스펙 : 이전에 비슷한 객체를 만들 때 사용했던 생성자 함수 대신 쓸 수 있다! 기존 생성자 함수 사용 const User = function (name, age) { this.name = name; this.age = age; this.showName = function () { console.log(this.name); }; }; const aoto = new User("aoto", 30); console.log(aoto.name); // "aoto" class 사용 constructor : 객체를 만들어 주는 생성자 메서드 class User2 { constructor(name, age) { this.name = name; // 객체를 초기화하는 값 this.age = age; ..