IT 엘도라도

jQuery에서 벗어나 바닐라 JS를 공부하면서(참고) 정말 낯설었던 부분 중 하나를 꼽으라면 DOM 엘리먼트들을 다루는 Web API가 아니었나 싶다. 특히, DOM 엘리먼트의 크기나 위치와 관련된 정보를 참조하는 Web API들이 익숙하지 않아서 매번 MDN을 방문하지 않을 수 없었다. 그런데 계속 사용하다 보니 매번 찾았던 것만 또 찾는 것 같아서, 이번 기회에 자주 사용되는 DOM 엘리먼트의 크기 및 위치 관련 Web API들을 깔끔하게 정리해보기로 하였다. 잘 검색하는 것도 중요하지만 자주 사용되고 헷갈리는 부분은 한 번 직접 정리해서 나만의 것으로 만드는 것이 중요하다고 생각했기 때문이다. 우선, 본 포스팅의 내용을 사진 두 장으로 요약하자면 다음과 같다. 각 API에 대한 설명은 사진 하단에..

본 포스팅은 JavaScript에서 정규식을 어떻게 사용할 수 있는지만 설명한다. 즉, 정규식 자체의 개념에 대해서는 설명을 생략한다. 만약 정규식 자체의 개념에 대해 알고 싶다면 이 포스팅을 참고하기 바란다. 프로그래밍 언어와는 독립적으로 정규식 자체의 개념에 대해 설명하고 있는 포스팅이다. 1. 정규식 표현 방법 JavaScript에서 정규식은 RegExp 타입의 객체로 표현된다. 정규식 객체를 생성하는 방법은 다음과 같이 두 가지이다. 정규식 객체 생성 방법 예시 설명 정규식 리터럴 사용 (슬래시(/)로 감싸는 패턴) /\w+\s/g; 스크립트가 불러와지는 시점에 컴파일 된다. 정규식 옵션(= 플래그)들은 닫는 슬래시 뒤에 나열하면 된다. 상수인 정규식이라면 이 방식을 사용하는 것이 성능적으로 이득..

React를 공부하면서 react-router-dom 패키지에서 제공하는 클라이언트 사이드 라우팅의 동작 원리를 알고 싶어졌다. 그러다 보니 react-router-dom 패키지에서 클라이언트 사이드 라우팅을 구현할 때 내부적으로 사용하는 history 패키지의 동작 원리를 공부해야 했고, 이를 이해하기 위해서는 다시 또 history 패키지에서 내부적으로 사용하는 HTML5 history API에 대해서도 공부해야 했다. 이번 포스팅에서는 그렇게 공부한 내용들을 깔끔하게 정리해보도록 할 것이다. 먼저 HTML5 history API부터 알아보도록 하자. 1. HTML5 history API 대부분의 현대 브라우저들은 HTML5 history API를 통해 현재 브라우저 탭의 세션 히스토리(방문 기록)를..

npm으로 Node.js 패키지들을 관리하는 프로젝트의 경우, 프로젝트 루트 폴더에는 Node.js 패키지들이 설치된 node_modules 폴더와 함께 package.json, package-lock.json 파일이 위치하고 있다. 이번 포스팅에서는 Node.js 패키지를 활용하여 프로젝트를 진행하는 개발자들이 node_modules 폴더, package.json 파일, 그리고 package-lock.json 파일에 대해 최소한으로 알고 있어야 하는 것들에 대해 정리해보기로 하였다. 틀린 내용이 있다면 댓글로 지적 바란다. ※ Node.js 및 npm에 대한 기본적인 내용은 여기를 참고하기 바란다. ※ 본 포스팅은 npm 6까지 사용하던 lockfileVersion 1을 기준으로 작성되어, 최신 loc..

1. JavaScript 모듈 시스템 파일 단위의 모듈화는 코드의 재활용성을 극대화시킴으로써 애플리케이션 개발의 생산성을 엄청나게 향상시킨다. 그런데 초창기 JavaScript는 모듈 시스템이라는 것을 갖추고 있지 않았다. 그나마 가지고 있는 것이라고는 태그를 통해 또 다른 JavaScript 소스 파일들을 서버에게 요청하는 방식이었는데, 각각의 태그에 의해 로드된 JavaScript 코드들은 사실상 하나의 파일 안에 작성된 것처럼 동작했다. 즉, 로드된 각 JavaSript 소스 파일마다 독립적인 파일 스코프를 가지고 있는 것이 아니라 하나의 전역 객체를 공유하는 방식이었던 것이다. 이로 인해 서로 다른 JavaScript 소스 파일에 존재하는 변수나 함수들이 같은 이름을 가짐으로써 충돌하는 문제들이 ..

1. 비동기 프로그래밍 (Asynchronous Programming) 동기적(Synchronous) 실행은 코드가 작성된 순서대로 실행되는 것이라면, 비동기적(Asynchronous) 실행은 코드가 작성된 순서와 무관하게 실행되는 것을 말한다. 동기적 실행은 어떠한 작업이 완료되기 전까지 반드시 기다려야 하지만, 비동기적 실행은 그 작업이 완료되기 전까지 다른 작업을 수행할 수 있다는 특징이 있다. 비동기 프로그래밍은 프로그램의 성능을 획기적으로 향상하는 한편, 코드가 작성된 순서대로 실행되는 것이 아니기 때문에 많은 프로그래머들이 디버깅에 어려움을 겪곤 한다. 그래서 많은 프로그래밍 언어들은 비동기 프로그래밍의 편의를 돕기 위해 여러 기능들을 제공하곤 한다. 이번 포스팅에서는 JavaScript가 제..

1. 개요 - JavaScript는 프로토타입 기반의 언어 JavaScript는 객체 지향 언어임에도 불구하고 다른 객체 지향 언어(Java, Python 등)와 달리 클래스(Class)의 개념이 존재하지 않는다. 그래서 다른 객체 지향 언어를 공부하다가 새롭게 JavaScript를 공부하기 시작하는 사람들은 주로 이 부분에서 많은 혼란을 겪는다. JavaScript는 클래스 대신 프로토타입(Prototype)이라는 개념을 통해 객체 지향 프로그래밍을 지원하는데, 실제로 JavaScript를 사용하는 상당수의 사람들은 프로토타입의 개념을 정확히 이해하지 못하고 사용하는 경우가 많다. 하지만 JavaScript는 프로토타입 기반의 언어라 불릴 만큼 프로토타입에서 시작하여 프로토타입으로 끝나기 때문에, Ja..

JavaScript를 공부하는 사람이라면 한 번쯤은 JavaScript가 단일 쓰레드 기반의 프로그래밍 언어라는 말을 들은 적이 있을 것이다. 그렇다면 setTimeout() 함수로 특정 시간을 기다림과 동시에 다른 코드를 동작시키는 등의 비동기 처리는 어떻게 가능한 것일까? 단일 쓰레드라면 스택이 하나이므로 모든 작업은 하나씩 순서대로 이뤄져야 하기에 이는 말이 안 된다. 이를 이해하기 위해서는 JavaScript의 런타임에 대한 이해가 필요하다. 필자도 이에 대한 이해가 부족하여 이번 기회에 직접 찾아보며 공부해보았고, 그 결과를 이 포스팅에 정리하고자 한다. 혹시 틀린 점이 있다면 댓글로 지적해주기 바란다. 1. JavaScript 런타임 런타임이란 해당 프로그래밍 언어로 작성된 코드가 구동되는 환..

1. Node.js Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임을 의미한다. 런타임이란 해당 프로그래밍 언어로 작성된 코드가 구동되는 환경을 말한다. 브라우저가 대표적인 JavaScript 런타임이다. 결국 Node.js란 JavaScript 코드가 구동되는 환경을 말하며, 브라우저 외부에서도 JavaScript 프로그래밍이 가능하게 하였다. 다음과 같은 두 가지 방식으로 JavaScript 런타임을 제공한다. REPL (Read, Evaluate, Print, Loop) : 사용자의 입력을 받아(Read) 그 코드를 평가(Evaluate) 및 실행하고, 그 결과를 화면에 출력(Print)해주는 작업을 반복(Loop)한다. 이는 윈도우의 cmd 혹은 리눅스의 터미널 등..

BOM과 DOM의 핵심적인 개념은 그 이름에 담겨 있다. BOM은 Brower Object Model, DOM은 Document Object Model이다. Object Model이란 객체 지향 모델, 즉 무언가를 객체(Object)들로서 표현하는 형식을 일컫는다. 따라서 BOM은 웹 브라우저 자체를 객체들로 표현하는 형식을 말하며, DOM은 웹 페이지(문서)의 내용을 객체들로 표현하는 형식을 말한다. 무엇보다 중요한 둘의 공통점은 바로 JavaScript와 같은 스크립트 언어가 웹 브라우저/페이지를 쉽게 제어 및 조작할 수 있도록 한다는 것이다. 이번 포스팅에서는 BOM과 DOM의 개념을 간단히 정리하고, 이와 관련된 이벤트 캡쳐링 및 버블링의 개념도 한 번 알아보도록 하자. 1. DOM (Docume..