박한영(Ryan)의 개발 블로그

우아한테크코스 레벨 1 미션을 하며 바닐라 JS로 SPA 앱을 만들게 되었다. 동적 렌더를 하기 위해서는 JS를 통해 DOM Element를 추가해야 했다. 리액트만 사용했던 터라 JS로 DOM Element를 추가하는 방법에 대해 진지하게 고민해본 적은 없었다. 이번 기회에 학습해보니 DOM Element를 추가할 수 있는 방법에는 크게 두 가지가 있었다. 바로 createElement와 innerHTML이다. 둘은 결과물만 놓고 보았을 때는 유사하지만, 사용 방법이나 동작 방식, 그리고 그에 따른 장단점에 차이가 존재했다. 이번 포스팅을 통해 두 방식의 사용법에 대해 간단히 알아보고, 둘을 비교해보겠다. 목차는 다음과 같다. 1. 소개 1-1. createElement 1-2. innerHTML 2...

공부를 하던 중 실행 컨텍스트와 관련된 개념이 쉽사리 정리되지 않았다. 실행 컨텍스트, 스코프, 렉시컬 환경 등 비슷해 보이는 개념들 사이에서 혼란에 빠졌다. 실행 컨텍스트 개념을 한번은 확실히 이해하고 넘어가고 싶다는 마음에 모던 자바스크립트 Deep Dive 책을 바탕으로 관련 내용을 정리하고자 한다. 용어 정리 실행 컨텍스트(Execution Context) 실행 컨텍스트란 무엇일까? 공신력이 있는 글들에서 실행 컨텍스트에 대한 정의를 발췌해 정리해봤다. 코어 자바스크립트: "실행할 코드에 제공할 환경 정보들을 모아놓은 객체” 모던 자바스크립트 Deep Dive: "식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 매커니즘으로, 모든 실행 컨텍..