상권's

오늘은 ES8에서 도입된 async/await에 대해서 알아보겠습니다. 코드스테이츠 수강 당시에 async/await에 대해서 단순히 '프로미스를 동기적으로 처리할 수 있다.' 이렇게만 기억하고 사용했습니다. 사실 딱 저렇게 표현하는 게 정확한 거 같지만 조금 더 추가적으로 학습해보도록 하겠습니다. async/await은 프로미스를 기반으로 동작합니다. async/await를 사용하면 프로미스의 then/catch/finally 후속 처리 메서드 없이 마치 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있습니다. await 키워드는 반드시 async 함수 내부에서 사용해야 합니다. async 키워를 사용해 async 함수를 정의하면 언제나 프로미스를 반환합니다. 명시적으로 프로미스를 반환하지..

앞 선 TIL 56에서 프로미스에 대해서 간단하게 복습했었습니다. 오늘은 프로미스를 조금 더 자세하게 알아보도록 하겠습니다. TIL 56에서 프로미스를 '자바스크립트에서 비동기 처리에 사용되는 객체입니다.'라고 설명드렸습니다. 프로미스는 비동기 처리를 위한 콜백 패턴이 콜백 헬이나 에러 처리가 곤란한 문제들을 극복하기 위해 ES6에서 도입되었습니다. 콜백헬은 다들 익히 들어보셔서 잘 아실테니 에러 처리에 대해서 간단하게 알아보겠습니다. try { setTimeout(() => { throw new Error('Error 입니다'); }, 1000); } catch (e) { console.error('캐치한 에러', e); } try 블록 내에서 호출한 setTimeout 함수에 의해 1초 후에 에러를 ..

오늘은 개인 프로젝트의 서버를 1차적으로 완성 시켰습니다. api는 구현이 끝났고 다른 설정 부분은 클라이언트 부분이 끝날 쯤 마무리 지을 예정입니다. 테스트 코드를 구현하는데 매번 비슷한 코드만 구현하는 거 같아 아쉬움이 있습니다. 매번 똑같은 방법으로 프로젝트를 진행하게 되면 개인적인 성장이 이뤄지지 않기 때문에 더 많이 학습하고 빨리 취업할 수 있도록 노력해야겠습니다. 팀 프로젝트 때부터 백엔드를 담당하다 보니 많이 까먹어서 학습과 함께 병행하며 구현할 예정입니다. 오늘 서버 구현을 다 마치고 클라이언트 화면 구성을 짜봤습니다. theMenu는 직장인들의 평생 숙제와 같은 점심 메뉴를 고를 때 도움을 줄 수 있는 웹 어플리케이션입니다. 몇 가지 질문에 대한 답변을 선택하면 거기에 맞는 메뉴는 제공해..

앞 선 TIL 54에서 모든 자바스크립트 파일을 브라우저에서 한 번에 로딩할 경우의 문제점에 대해서 간단하게 알아봤었습니다. 오늘은 조금 더 구체적으로 브라우저 렌더링 과정에 대해서 알아보고 script 태그의 async / defer 어트리뷰트도 함께 다뤄보겠습니다. 브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수한 텍스트입니다. 이러한 HTML 파일을 브라우저의 렌더링 엔진이 파싱하고 브라우저가 이해할 수 있는 자료구조인 DOM을 생성합니다. DOM이 생성되는 순서를 알아보겠습니다. 1. HTML 파일을 읽어 들여 메모리에 저장한 다음 메모리에 저장된 바이트를 인터넷을 경유하여 응답 2. 응답된 바이트 형태의 HTML 문서는 meta 태그의 charset 어트리뷰트에 의한..

3.4 ~ 3.7 코로나에 걸린 건 아닌데 감기 몸살에 걸리면서 학습을 제대로 하지 못함. Bookdam 프로젝트의 리팩토링과 testcode, test 환경에서 부족한 부분이 보여서 수정함. 개인 프로젝트 theMenu 계획 단계 돌입. 3.8 ~ 3.11 theMenu 클라이언트, 서버환경 구축 후 서버 먼저 구현에 돌입. 데이터 베이스 세팅, 라우터, 컨트롤러 구현하고, 유저 api와 testcode 전부 구현함. 앞 서 학습했던 자바스크립트, 노드 복습. 데이터 베이스 개론과 실습이라는 책을 읽기 시작함. 지난 10일은 아쉬움이 컸습니다. 11일 자로 건강이 완전히 회복되어서 학습하고 코드 구현까지 열심히 진행해야겠습니다. 개인 프로젝트와 북담 프로젝트 관련해서 계속해서 작업을 했지만, 블로그의 ..

벌써 수료한지 한 달이 지났습니다. 명절 이후 바로 이사를 진행하면서 일주일정도 가볍게 학습했고 3주 정도 열심히 리팩토링도 하고 자바스크립트, 노드 학습을 진행했습니다. 개인 프로젝트를 진행할까 고민도 많이 했지만, 팀 프로젝트 결과물이 엉망이라면 4주의 시간이 아까울 거 같아 리팩토링 먼저 진행을 했습니다. 리팩토링의 계획은 1. 쿠키 관련 모듈 만들기, 2. try/catch 에러 처리, 3. 테스트코드 작성, 마지막으로 access token과 refresh token db 활용하기 였습니다. 먼저, 쿠키의 경우 모듈이 아닌 미들웨어로 만들어서 진행했더라면 어땠을까라는 아쉬움이 있습니다. 너무 오랫동안 리팩토링에 몰두하는 것은 옳지 않은 것 같아 미들웨어로의 분리는 다음 개인 프로젝트 때 진행할 ..

오늘은 클로저에 대해서 더 자세하게 알아보겠습니다. 코드스테이츠 수강 중일 때도 클로저에 대해서 학습을 했었고, 수료 후에도 복습을 하긴 했는데 솔직히 정확하게 이해하고 있다고 말을 하긴 어려웠습니다. 동일한 어려움을 겪는 분들이 있으시면 이 글을 통해서 도움을 드릴 수 있길 바랍니다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 먼저 MDN에서는 클로저를 위와 같이 정의하고 있습니다. 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는 렉시컬 스코프를 따릅니다. const x = 1; function foo () { const x = 10; boo(); } function boo () { console.log(x); } foo()..

오늘은 지난 실핼 컨텍스트를 학습하며 끝에 언급했던 렉시컬 환경에 대해서 학습해보도록 하겠습니다. 렉시컬 환경은 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로, 실행 컨텍스트를 구성하는 컴포넌트입니다. 쉽게 표현한다면, 렉시컬 환경은 스코프를 구분하여 식별자를 등록하고 관리하는 저장소의 역할을 합니다. 실행 컨텍스트는 LexicalEnvironment, VariableEnvironment 두 컴포넌트로 구성됩니다. 생성 초기에는 둘 다 하나의 렉시컬 환경을 참조하지만, 몇 가지 상황을 마주하면 VariableEnvironment를 위한 렉시컬 환경이 별도로 생성되는 데, 오늘은 컴포넌트 별로 구분하지 않고 렉시컬 환경으로 통일해서 간략하게 알아보겠습니다. 소스코드가..