async & await 1. async & await es8에서 도입되었습니다. 비동기 함수를 선언합니다. 2. 즉시 실행함수(Immediately invoked function expression, IIFE) 외부 함수 없이 바로 await를 쓰고 싶을 때 아래처럼 활용합니다. 3. 예외 처리 try와 catch 이벤트 루프 1. 이벤트 루프 Heap 단순히 메모리 영역을 지칭하는 용어입니다. 변수 등의 정보를 저장합니다. 콜스택 최상단에 있는 실행 컨텍스트가 실행되면서... » read more
Promise - state 1. Promise의 3가지 상태 promise 객체는 ‘상태'를 가지고 있습니다. Pending(대기) : 비동기 처리 로직이 완료되지 않은 상태 FulFilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 promise객체를 console.log()로 불러오면 상태 값이 나옵니다. Promise - 에러 처리 1. 에러 처리 - reject then의 2번째... » read more
1. Promise Chaining 비동기 작업을 순차적으로 해야하는 경우가 있습니다. 그때 순차적으로 비동기 작업이 끝나고 다음 비동기 작업이 실행해야 하는 경우 사용합니다. 1번 abc, 2번 bbc 2. then의 cb의 반환 값 then의 콜백함수는 여러 타입의 값을 반환할 수 있습니다. 2.1. 값의 반환 첫 번째 비동기에서 2를 return하기 때문에 두 번째 비동기는 2가 console.log에 출력됩니다. 2.2. promise... » read more
1. Promise es6에서 처음 도입되었습니다. 비동기 동작을 처리합니다. Promise는 클래스입니다. Promise 클래스를 인스턴스화 시켜서 객체를 만들어 사용합니다. 반환된 promise로 원하는 비동기 동작을 처리합니다. Promise는 ‘State’와 ‘resolve’, ‘reject’ 함수를 이해하면 됩니다. 2. Promise 구현하기 resolve : 비동기 로직이 성공했을 때 실행할 함수 reject : 비동기 로직이 실패했을 때 실행할 함수 3. resolve 이해하기 4. reject 이해하기... » read more
1. 정의 함수의 매개변수가 함수이면 매개변수로 받은 함수를 콜백함수라고 부릅니다. 영어 그대로의 의미예요. 1.1. 추가 용어 고차 함수(Higher Order Function): 매개변수를 함수로 받은 함수입니다. (외부에서 콜백함수를 전달 받음 함수예요.) 일급 함수 함수를 다른 변수와 동일하게 다루는 것이 일급함수입니다. 함수형 프로그래밍의 특징 중의 하나가 ‘일급함수'입니다. 함수를 변수에 할당 가능 함수를 또 다른 함수 인자로 전달 가능... » read more
1. 동기 (Synchronouse) 현재 실행 중인 코드가 끝나야 다음 코드가 실행되는 것입니다. 장점 : 순서대로 실행해서 순서가 보장 단점 : 실행 중인 task가 종료되어야 다음 task가 실행되기 때문에 앞에 실행하는 코드가 무겁고 오래 걸리면 뒤에 코드가 실행하는데 오래 걸립니다. (안 됩니다.) 이 때 task가 불로킹(blocking)된다고 합니다. ex) ‘alert()’는 확인 누를 때까지 다음 코드가 실행되지 않습니다.... » read more
들어가기 22.03.29 추가 : 위 에러 코드는 upstream으로 바로 push를 잘못한 상황입니다. (이후부터는 origin으로 제대로 업데이트 했습니다.) (아래 내용은 그것과 별개의 문제입니다.) 이번 원티드 프리온보딩 과제를 진행하면서 위 에러로 인해서 작업 파일을 삭제하고 프로젝트의 클론을 다시 받은 것만 총 6번이었고 헤매었던 시간만 4시간 이상이 되는 것 같습니다. 잠자는 시간 포함해서 48시간 밖에 안 되는 짧은... » read more
리덕스 최근에 많이 사용하는 전역 상태 관리 방식은 Recoil입니다. 리덕스에서는 비동기 처리를 위해서는 Redux Thunk나 Redux Saga와 같은 미들웨어를 사용해야 했는데 recoil은 비동기 처리를 기반으로 작성되었기 때문에 바로 활용할 수가 있습니다. 하지만 기존 사용자가 많은 것은 Redux입니다. 기존 사용자가 많은 경우 사용자 커뮤니티가 잘 구축되어 있기 때문에 유지 보수가 편리하며 문제 발생 시 더 도움을... » read more
주제: TypeScript 리액트와 웹팩, 바벨 웹팩 모듈 번들러입니다. 모듈은 하나의 파일이고, 번들은 여러 파일을 합쳐서 하나의 파일을 만들어 준 결과 파일입니다. 번들러는 번들을 해 줍니다. 리엑트 개발을 할 때 수 많은 파일이 어디에서 시작되는지 신경쓰지 않고 서로 import하며 개발을 할 수 있게 해주는 것이 웹팩입니다. 원래 JS에서 코드를 작성할 때 순서가 가장 중요했는데 웹팩 덕분에... » read more
들어가기 이번 과제는 ‘쇼핑몰 상품 관리 페이지 만들기’였습니다. 처음 과제를 받았을 때 설계서에 써있는 내용들이 너무 많아서 어떤 것을 어떻게 해야 할 지 모를 정도로 정신이 없었습니다. 하지만 팀원들과 해야할 부분을 분담하고 마지막 날에는 모두 같이 27시간 동안 잠도 자지 않으면서 열심히 과제를 마무리했습니다. 과제의 양이 많아서 나중에는 코드의 질에 대해서 신경을 쓰지 못한 부분이... » read more