일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- react-hook
- Netflix
- 코코아톡
- Vanilla
- Clone
- 마무리
- 자바스크립트
- Hook
- expo
- vanilla js
- 클론코딩
- react-native
- TiMER
- Firebase
- CSS
- Project
- 프로젝트
- Nicolas
- github
- Nomad coder
- 바닐라 자바스크립트
- coding
- HTML
- 느낀 점
- 계획
- 오류
- Nomad
- scflix
- javascript
- Today
- Total
목록JavaScript (18)
꾸매코딩
비동기 처리의 중요성 시간이 걸리는 코드를 비동기 처리하지 않으면 문제가 발생할 수 있음 Ex) 서버에서 Data를 받아와서 출력해야 하는 상황에 비동기 처리를 하지 않으면 Data를 받을때 까지 기다리며 다음 코드들도 기다리게 됨 Promise의 문제 점 체이닝(.then .then .then ...)을 계속하다 보면 코드의 가독성이 떨어짐 Async / Await 비동기 처리방식인 콜백 함수와 프로미스(promise)의 단점을 보완 비동기 처리 패턴 중 가장 최근에 나온 문법 프로미스를 간결하고 동기적으로 실행되는것 처럼 보이게 만들어주는 API Async를 사용하면 함수의 코드 블록이 자동으로 Promise로 변환 됨 Async / Await 사용 방법 function 앞에 async 키워드 Pro..
Spread . . . 으로 나타낸다. Array, Object들 안에 있는 요소(element)를 개별적으로 뽑아낼 수 있다. 뽑아낸 요소들로 새로운 Array, Object 만들기가 용이하다. Spread는 변수를 가져가서 풀어 헤친다(Unpack) [Array] const number = [1, 2, 3] //배열을 풀어 헤쳐서 개별 값들을 출력해줌 console.log(...number) //1 2 3 console.log(number) //[1, 2, 3] const english = ['a', 'b'] //새 배열로 만들어 사용하기 편함 const newArr = [...number, ...english] console.log(newArr) //[1, 2, 3, 'a', 'b'] [Object..
프로미스(promise)를 이해하기 위해서는 JavaScript가 어떤 식으로 작동하는지 알아야 한다. 싱글 쓰레드 언어인 JavaScript는 비동기 처리를 위해서 콜백(Call Back)을 이용해 이를 보완하였다. 하지만 Call Back이 중첩되면서 코드의 복잡도가 증가하고, 예외처리에 어려움이 생기기 시작했다. 이러한 점을 보안하기 위해 프로미스(promise)가 만들어졌다. 비동기 처리 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행함. 비동기 처리 예 - setTimeout() // 1 console.log("First"); // 2 setTimeout(() => { console.log("Second") }, 3000) // 3 console.log("Third") 위..
Destructuring 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. [MDN] 객체나 배열에서 필요한 값을 개별 변수에 저장하는 것 객체 디스트럭처링 (Object destructuring) const settings = { notifications: { follow: true }, color: { theme: "yello" }, }; // 프로퍼티 key값을 기준으로 Destructuring되어 할당된다. const { notifications: { follow }, color} = settings; console.log(follow, color); // true { theme: 'yello' } 예시 //선언 co..
절대 경로 설정 방법 프로젝트 최상위 폴더(root)에 jsconfig.json 파일을 추가한 뒤 아래 코드 입력 { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } 경로 (Path) 문서, 파일, 그림 등의 위치 예) C:\Users\Someone\Desktop\Example 상대 경로 (Relative Path) 현재 위치를 기준으로 나타냄 상위 폴더, 하위 폴더, 현재 폴더 (동일한 Level)를 연결함 예) 상위 폴더 : ../디렉토리명/파일명 하위 폴더 : ./디렉토리명/파일명 현재 폴더 : ./파일명 import Home from '../routes/Home'; 절대 경로 (Absolute Path) 루트(root) 디렉토리를 ..
Arrow function ES6 문법 중 하나 this, arguments, super 또는 new.target을 바인딩하지 않음 항상 익명 메소드 함수가 아닌 곳에 적합 - 생성자로 사용할 수 없음. Arrow function 선언 // 함수 표현식 function() { ... } // 화살표 함수 표현식 () => { ... } // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 때 num => { ... } // 매개변수가 하나일 때, 소괄호 생략 가능 // implicit return → 함수와 return 식이 한줄이면, 중괄호{}를 생략하고 암묵적으로 return 된다. num => { return num++ } num => num++ // 위 표현과 동일 () => ..