개발로그

Promise 객체가 가진 핸들러들 .then(), .catch(), .finally() 는 모두 비동기적으로 실행된다. console.log('Start!'); Promise.resolve('Promise!').then(res => console.log(res)); console.log('End!'); // 아래와 같이 출력 // Start! // End! // Promise! 위 코드를 보면 Promise를 바로 resolve 해주어도 then이 실행되는 것은 동기 코드보다 나중이다. 왜 그럴까? 마이크로태스크(Microtasks)와 매크로태스크(Macrotasks) 이 때 등장하는 것이 바로 마이크로태스크다. ECMA에선 위와 같은 비동기 처리를 위해 PromiseJobs라는 내부 큐를 명시하는데 ..

Promise에는 5가지 정적 메서드가 있다. Promise.all Promise.allSettled Promise.race Promise.resolve Promise.reject 이 중 가장 유용하고 많이 쓰이는 것은 Promise.all 일 것이다. 그래서 공부겸 직접 구현해보았다. Promise.all 직접 구현해보기 function all(iterable = []) { if (!iterable || !iterable.length) return Promise.resolve([]); return new Promise((resolve, reject) => { const result = iterable.map(() => ({ state: 'pending', value: undefined })); iter..

Promise ES6에서 등장한 Promise 객체는 자바스크립트에서의 비동기 처리를 획기적으로 변화시켜주었다. 기존에 '콜백 지옥'이라 불리던 것을 해결하며 더 명료한 코드를 작성할 수 있도록 해준다. Promise 객체 속성 Promise는 catch, finally, then 등의 메소드를 가지고 있고 state와 result라는 내부 프로퍼티를 가지고 있다. Promise는 3가지 state를 갖는다. pending - 비동기 처리가 아직 완료되지 않은 상태 fulfilled - 비동기 처리가 성공적으로 끝나 resolve가 호출된 상태 rejected - 비동기 처리 중 오류가 발생해 reject가 호출된 상태 위 상태에 따른 result는 아래와 같다. pending 상태 - undefined..

# 좋은 아키텍쳐란? 다른것들끼리 분리해라. 컴포넌트를 언제 어떻게 쪼갤지에 대해선 의견이 분분하지만, 강사님 개인적인 의견으로는 map으로 리스트 데이터를 뿌려주는 경우 별도의 컴포넌트로 감싸주는걸 선호한다. 한 눈에 보기 더 쉽기 때문! 쪼갤까 말까 싶을때가 쪼갤때다! 나중에 더 비대해질 경우 버그날까 쪼개기 더 어렵다. # 커뮤니케이션 이 부분은 아래 링크 작성자께서 정리를 잘해주셔서 발췌해왔습니다. https://github.com/soongyu/woowa-tech-learning-react-typescript/blob/master/week02-2.md soongyu/woowa-tech-learning-react-typescript 우아한테크러닝 3기 React&TypeScript 기록. Cont..

# 자바스크립트 ## 변수와 값. 프로그래밍 언어는 서양사람들이 만들었다. 그래서 그들의 문화, 철학, 사상이 녹아있다. 논리, 합리주의를 중요시함. 그런 측면으로 프로그래밍 언어도 구성되어 있다. 기저에 절대불변의 원칙을 세워두고 (공리) (예. 1+1=2) 이것들을 기반으로 하나씩 차곡차곡 쌓아간다. 자바스크립트에서 '값'이라고 정의한 녀석들은 변수에 넣을수 있다. var x = 10; let y = 10; const z = 10; 자바스크립트에서는 함수도 값이라고 정의함. function foo() { } let y = foo; 그래서 함수를 변수에 대입 가능하다. 자바스크립트는 모든 함수가 값을 반환한다고 정의함. return 으로 반환하거나, return이 없으면 undefined 반환. new..

오늘 한 일 인프런 [Vue.js 완벽 가이드] 진도율 77% 돌파 라우터 네비게이션 가드 학습 및 실습. async & await 학습 및 실습. 공부 내용 라우터 네비게이션 가드는 페이지를 이동하기 전에 라우터 단에서 한 번 막아주어 무언가 작업할 수 있는 기능이다. 컴포넌트 라이프사이클 훅(created)에서 데이터를 받아오면 페이지 이동된 후에도 이전 데이터가 보여지는데 네비게이션 가드로 이것을 해결할 수 있다. VueRouter의 해당 path에 beforeEnter 함수를 추가한다. 해당 함수는 (to, from, next) 세가지 인자를 받는다. to: 이동할 페이지, from: 현재 페이지, next(): (모든 할 일을 마친 뒤) 다음 페이지로 이동. (실행 안시키면 이동 안함) asyn..

오늘 한 일 Vue.js 완벽가이드 인프런 강좌 [중간정리 및 스타일링]까지 30% 수강 및 실습. 자바스크립트 노랭이 책 [7장 함수표현식] 완독. 공부 내용 axios / Promise axios는 Promise 객체를 반환하므로 .then과 .catch를 이용하여 비동기 처리를 할 수 있다. Promise 객체는 ES6에서 정의된 것으로, 콜백함수지옥을 해결해 줄 수 있다. new Promise로 객체 인스턴스를 만드는 순간 Promise는 대기 상태에 있게 된다. 그리고 http호출을 통해 값을 받아오게 되면 response를 가진 이행 상태가 된다. 그러나 값을 받아오지 못하면 실패 상태가 된다. 이것을 코드로 표현하면 다음과 같다. new Promise(function(resolve, reje..