all22개
이메일 정규표현식 만들기
최근에 이메일 정규표현식을 만들 일이 있었는데요, 0부터 시작해서 만든 과정을 공유드릴까 합니다. 이메일 정규표현식에는 정답이 없습니다. 이메일 표준을 정규표현식으로 완벽하게 표현할 수 없을 뿐만 아니라, 기능의 스펙이나 사용환경에 따라서 달라지기 때문입니다. 표준을 읽고 구현하는 기능에 따라 튜닝할 수 있는 능력이 필요합니다. RFC 표준을 찾을 때 가장
[Webpack] HMR이란?
Webpack 같은 번들러로 개발환경을 설정하다보면 HMR이라는 기능을 만날 수 있습니다. HMR(Hot Module Replacement)는 개발 환경에서 코드가 변경된 것을 그 부분만 바로바로 반영하는 기술입니다. 어떻게 파일에서 변경된 부분만 반영할 수 있을까요? 한번 알아봅시다. Hot-Reloading 옛 JS 개발 환경에 HMR이란 개념에 앞서
유니코드와 JavaScript
자바스크립트의 문자열에서와 macOS에서 파일 이름에 사용하는 문자열 인코딩은 다르다는 사실 알고 계셨나요? 이번에 파일 이름을 처리할 일이 있었는데, 이 인코딩 차이 때문에 기대한 것과 다른 결과가 나와서 당황했습니다. macOS의 파일시스템에 '안녕.txt'란 파일이 있다고 해봅시다. 이 파일을 자바스크립트로 읽어서 file.name.length를 확인
유한 상태 기계(FSM)를 활용한 채점 추적기 구현
알고리즘 문제 플랫폼에서 제출한 코드가 성공하면 자동 제출하는 기능을 만드는데, 채점 상태를 추적하기 위한 Tracker가 필요했다. Tracker는 채점관련 이벤트를 받고 현재 상태와 받은 이벤트에 따라 상태를 전이한다는 점에서 FSM(유한 상태 기계)를 적용하면 좋겠다는 생각이 들었다. 안타깝게도 오토마타 강의를 듣지 않아서 유한 상태 기계가 뭔지 공부
[JS] Execution Context(실행 컨텍스트)
실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리다. 실행 컨텍스트는 '코드가 실행되기 위해 필요한 환경 정보들을 모아놓은 객체'다. 실행 컨텍스트가 생성되는 시점에서 호이스팅이 발생하고, 외부 환경 정보를 구성하고, this 값을 설
[JS] 제너레이터
제너레이터를 사용하면 여려 개의 값을 필요에 따라 하나씩 반환할 수 있다. Generator function 제너레이터를 만들기 위해서는 '제너레이터 함수'라고 불리는 function*이 필요하다. <code class="language-js code-highlight"><span class="code-line"><span class="token keywo
Web Worker
"어떤 기능이 무조건 2초 뒤에 실행되게 보장해주세요!"라는 요구사항을 받았다고 해보자. setTimeout으로 2초 뒤에 그 기능을 실행하도록 하면 될까? 자바스크립트는 싱글 스레드로 동작하기 때문에, call stack에서 3초 이상 걸리는 작업이 있는 경우 그 기능은 3초를 넘겨 동작하게 될 것이다. <code class="language-js cod
번들 분석으로 CRA 성능 개선하기
문제점 기능 구현이 거의 완료된 SPA의 메인화면을 lighthouse로 분석했다. 그 결과 largest contentful paint(LCP)와 total blocking time이 안좋다는 것을 알 수 있었다. LCP가 저하되는 원인은 느린 서버 응답시간, 자바스크립트와 css 렌더 블로킹, 느린 리소스 로딩 시간, 클라이언트 측 렌더링이 있다. 이
Yarn?
Yarn? JavaScript로 프로젝트를 하면 패키지 관리는 필수적이다. 패키지를 관리하기 위해 툴을 사용하는데, 보통 가장 먼저 접하게 되는 것은 NPM이다. Node.js의 공식 패키지 관리자인 만큼, Node.js를 설치하면 같이 설치돼서 많이 사용하는 것 같다. 비공식 패키지 관리자로는 대표적으로 2016년에 페이스북이 개발한 Yarn이 있다. 현
[JS] Debounce와 Throttle
디바운스와 쓰로틀링은 이벤트의 발생 빈도를 제한하여 최적화하는 기법이다. 두 기법이 뭔지, 차이점은 뭔지 알아보자. Debounce(디바운스) 먼저 바운싱이란 용어는 전자공학에서 기계적인 접점을 가진 스위치에서 접점이 붙거나 떨어지는 그 짧은 순간에 고속으로 여러번 on/off 되는 현상을 말한다. 한 번만 on/off가 발생하길 원하는데 불필요한 인풋이
[JS] Bundling (번들링)
번들링의 탄생 배경 번들링은 모듈화된 소스 코드를 브라우저에서 실행할 수 있는 파일로 한데 묶어주는 작업이다. 왜 번들링이 필요할까? ES modules이 2015년에 도입되기 전에는 JavaScript 모듈화를 네이티브에서 진행할 수 없었다. 모둘 시스템이 없을 때는 HTML 파일에 스크립트 파일을 불러와서 사용할 경우 전역 공간에 모든 변수가 노출될 수
[V8] 배열 내부 처리 이해하기
배열은 자바스크립트의 핵심 기능중 하나고 정말 자주 사용한다. 자주 사용하는 만큼, '잘' 사용해야 한다. 배열을 잘 사용하기 위해 배열의 내부를 살펴보자. 모든 자바스크립트 엔진을 보기는 힘드니까, 가장 많이 사용하는 엔진인 V8을 볼 것이다. Element kinds V8은 정수형 이름을 가지는 프로퍼티(보통 Array constructor로 만들어진
[JS] sort는 어떤 알고리즘을 사용할까?
Array.prototype.sort() 우리는 배열의 요소를 정렬하고 싶을 때 sort 메서드를 사용한다. <code class="language-js code-highlight"><span class="code-line">arr<span class="token punctuation">.</span><span class="token method funct
Vanilla Javascript로 구현하는 SPA - 상태관리 시스템
필요성 이전에 만들었던 컴포넌트를 사용하다보면 한가지 문제점이 발생한다. 자식 컴포넌트들끼리 상태 공유가 필요하면, 그 상태가 공통 부모까지 끌어올려져야 한다. 이 문제를 props drilling 문제라고 한다. React에서도 똑같은 문제가 발생한다. 문제에 대한 해결법 중 하나가 중앙 집중식 저장소를 사용하는 것이다. 상태를 컴포넌트 외부에 둠으로써
Vanilla Javascript로 구현하는 SPA - 라우팅
SPA Router Single-Page Application(SPA)는 기존 멀티 페이지 웹 어플리케이션과 다르게 경로가 변경되도 새로 페이지를 불러오지 않는다. 대신 URL 경로에 따라 올바른 콘텐츠를 그때 그때 그려준다. 이 일을 'Router'가 해준다. 모든 router는 최소 2개의 핵심 기능을 제공해야한다. 어플리케이션의 모든 경로를 저장한
Vanilla Javascript로 구현하는 SPA - 컴포넌트 만들기
발단 새로운 프로젝트가 '웹 페이지'보다는 '어플리케이션'에 가까웠으면 했기에 SPA로 개발되면 좋을 것 같다고 생각했다. 이전에 React를 사용해봤었기 때문에 또 React를 사용하면 수월하게 개발할 수 있었지만, 프로젝트 크기가 작아서 React로 개발해봤자 뭔가 새로 배울게 없을 것 같았다. 그래서 "프로젝트 규모가 작으니까 vanilla javas
[JS] 옵저버 패턴 (Observer Pattern)
옵저버 패턴? 옵저버 패턴은 객체의 상태 변화를 관찰하는 옵저버들의 목록을 객체에 등록해서 상태 변화가 발생할 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다. 즉, 어떤 객체의 상태가 변하면 연관된 객체들에게 알림을 보내는 디자인 패턴이다. 이 패턴의 핵심은 상태를 가진 객체(subject)인 '발행기관(publ
[JS] 네트워크 요청
AJAX AJAX(Asynchronous Javascript And XML)는 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 접근법을 의미한다. AJAX 그 자체가 특정 기술을 가리키는 것이 아니다. AJAX를 통해 XML 뿐만 아니라 JSON, HTML, 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다. A
[JS] 이벤트
이벤트(event)는 무언가 일어났다는 신호다. 브라우저에서의 이벤트는, 예를 들어, 사용자가 버튼을 클릭했을 때나 웹페이지가 로드 되었을 때 같은 것이다. 모든 DOM 노드는 이런 신호를 만들어 낸다. 이벤트는 일반적인 제어 흐름과는 다른 접근 방식이 필요하다. 이벤트가 발생하면 누군가 이를 감지해서 처리해주어야 한다. 브라우저는 이벤트를 감지할 수 있으
[JS] 객체 프로퍼티 심화
객체의 프로퍼티는 '키-값'이 전부가 아니다. 객체 프로퍼티 추가 구성 옵션 몇 가지와, getter/setter 함수에 대해 알아보자. 프로퍼티 플래그(Flag) 객체 프로퍼티는 '값'과 함께 '플래그'라는 특별한 프로퍼티 세 가지를 갖는다. writable: true이면 값을 수정할 수 있다. enumerable: true이면 반복문을 사용해 나열할
[JS] 가비지 컬렉션
자바스크립트는 메모리 관리를 수행한다. 만들어 놓은 값들 중 더이상 사용하지 않는 것들을 가비지 콜렉터를 통해 찾아내 삭제한다. 가비지 컬렉션 기준 '도달 가능성(reachability)' 개념을 사용해 메모리를 관리한다. '도달 가능성'이란 어떻게든 접근하거나 사용할 수 있는 값을 의미한다. 도달 가능한 값은 root부터 시작해서 root가 참조하는 객체
[JS] 프로미스(Promises)
비동기 동작 많은 프로그램들은 바깥 세상에 있는 것들과 상호작용을 한다. 네트워크를 통해 무언가 요구할 수도 있고, 하드디스크에서 뭔가 들고올 수도 있다. 필요한 것들을 요청한 후, 이것들을 받을 때까지 기다려야 받은 것에 대한 추가작업이 가능할 것이다. 요청에 대한 기다림을 처리하는 방법에는 크게 두 가지 모델이 있다. **동기 모델(synchronous