목록~2022 작성 글 (113)
상권's
앞 선 TIL 54에서 모든 자바스크립트 파일을 브라우저에서 한 번에 로딩할 경우의 문제점에 대해서 간단하게 알아봤었습니다. 오늘은 조금 더 구체적으로 브라우저 렌더링 과정에 대해서 알아보고 script 태그의 async / defer 어트리뷰트도 함께 다뤄보겠습니다. 브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수한 텍스트입니다. 이러한 HTML 파일을 브라우저의 렌더링 엔진이 파싱하고 브라우저가 이해할 수 있는 자료구조인 DOM을 생성합니다. DOM이 생성되는 순서를 알아보겠습니다. 1. HTML 파일을 읽어 들여 메모리에 저장한 다음 메모리에 저장된 바이트를 인터넷을 경유하여 응답 2. 응답된 바이트 형태의 HTML 문서는 meta 태그의 charset 어트리뷰트에 의한..
오늘은 클로저에 대해서 더 자세하게 알아보겠습니다. 코드스테이츠 수강 중일 때도 클로저에 대해서 학습을 했었고, 수료 후에도 복습을 하긴 했는데 솔직히 정확하게 이해하고 있다고 말을 하긴 어려웠습니다. 동일한 어려움을 겪는 분들이 있으시면 이 글을 통해서 도움을 드릴 수 있길 바랍니다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 먼저 MDN에서는 클로저를 위와 같이 정의하고 있습니다. 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는 렉시컬 스코프를 따릅니다. const x = 1; function foo () { const x = 10; boo(); } function boo () { console.log(x); } foo()..
오늘은 지난 실핼 컨텍스트를 학습하며 끝에 언급했던 렉시컬 환경에 대해서 학습해보도록 하겠습니다. 렉시컬 환경은 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로, 실행 컨텍스트를 구성하는 컴포넌트입니다. 쉽게 표현한다면, 렉시컬 환경은 스코프를 구분하여 식별자를 등록하고 관리하는 저장소의 역할을 합니다. 실행 컨텍스트는 LexicalEnvironment, VariableEnvironment 두 컴포넌트로 구성됩니다. 생성 초기에는 둘 다 하나의 렉시컬 환경을 참조하지만, 몇 가지 상황을 마주하면 VariableEnvironment를 위한 렉시컬 환경이 별도로 생성되는 데, 오늘은 컴포넌트 별로 구분하지 않고 렉시컬 환경으로 통일해서 간략하게 알아보겠습니다. 소스코드가..
오늘은 자바스크립트의 동작 원리를 깊이 있게 이해할 수 있는 실행 컨텍스트에 대해 알아보겠습니다. 모든 코드는 실행 컨텍스트를 통해 실행되고 관리됩니다. ECMAScript에서 구분하고 있는 다음 4가지의 소스코드가 실행 컨텍스트를 생성합니다. 여기서 ECMAScript란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말하며 자바스크립트를 표준화하기 위해 만들어졌습니다. 출처 위키백과 전역 코드 : 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않음=> 전역 스코프 생성 함수 코드 : 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않음 => 지역 스..
오늘은 코드스테이츠 수강 중에 개인적으로 학습했던 TDD(Supertest) 복습하면서 북담의 테스트 코드를 만들어보다가 맞이한 에러에 대해서 알아보겠습니다. 지난 주 목요일부터 supertest 복습하고 코드를 구현했습니다. describe나 it은 잘 구현했었는데 before로 테스트용 데이터를 넣는 부분에서 고생을 했습니다. TDD 학습을 인프런의 김정환님 강의로 했었는데 강의에서는 Sequelize cli가 아닌 define으로 테이블을 정의했습니다. const app = require('../app'); const request = require('supertest'); const models = require('../models'); const should = require('should');..
앞 서 알아봤던 스코프에 이어서 함께 학습할 수 있는 var, let, const 키워드를 자세하게 알아보고 추가적으로 호이스팅까지 알아보겠습니다. 먼저 변수의 선언에 대해서 알아보겠습니다. 변수 선언은 변수를 생성하는 것으로, 값을 저장하기 위해 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해 값을 저장할 수 있게 준비하는 것입니다. 자바스크립트 엔진은 변수 선언을 선언 단계, 초기화 단계에 거쳐 수행합니다. 선언 단계는 변수 이름을 해당 스코프에 등록해 자바스크립트 엔진에 변수의 존재를 알리는 것이며, 초기화 단계는 값을 저장하기 위한 메모리 공간을 확보하고 최초로 값을 할당하는 것인데, 암묵적으로 undefined를 할당해 초기화하는 것입니다. var 키워드를 사용한 변수 선..
지금까지 학습하면서 스코프에 대해서 알고 있다고 생각을 했으나 누가 물어봤을 때 정확하게 답변을 하지 못하는 제 모습에 정확하게 정리하는 것이 필요하다는 생각이 들었습니다. 스코프란, 모든 식별자들은 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위를 의미합니다. 이러한 스코프는 전역 스코프와 지역 스코프로 구분할 수 있습니다. 전역 스코프는 말 그래도 코드의 가장 바깥 영역을 의미하는 전역에서 만들어서 지는 스코프이며, 지역 스코프는 함수 몸체 내부를 의미하는 지역에서 만들어지는 스코프입니다. 조금 더 자세하게 알아본다면, 스코프는 모든 식별자가 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위입니다. 이 때 선언된 지역과 하위 지역에서만 유효합니다...
오늘 북담의 try/catch 리팩토링이 1차가 끝났습니다. try/catch를 사용하지 않고 예외처리를 했다 보니 많이 복잡했던 코드가 간편해질 수 있었습니다. express 공식 문서를 조금 더 빨리 보고 학습했더라면 프로젝트 초기부터 잘 반영했을텐데라는 아쉬움도 있지만, 지금이라도 학습하고 반영했다는 점에서 다행이라는 생각을 했습니다. db 관련된 에러는 다음 주에 더 자세하게 확인하고 처리할 예정입니다. 아티클 생성 부분에서 column으로 들어갈 값이 많은데 요소가 없을 때 발생하는 에러를 어떻게 처리해야할지 고민 중에 있습니다. Sequelize의 에러로 처리할 지 아니면 req.body로 확인할 지에 대해서는 더 학습해볼 예정입니다. 그리고 이 예외로 발생하는 에러에 대해서도 추가적으로 학습..