전체 글

리액트의 Suspense를 활용해 선언적으로 UI를 작성해보자 React에서 데이터를 fetch하고 로딩중인지 에러가 발생했는지를 판별하고 그에 맞는 UI를 보여주는 작업은 자주 반복되는 일이다. 이번에 회사에서 React 18로 업그레이드 하면서 일부분에 이것을 선언적으로 작성할 수 있게 도와주는 Suspense를 도입했다. 이 글에서는 Suspense가 무엇인지 알아보고 실제로 적용하는 예시를 보여주려고 한다. Suspense란? React에서 제시한 동시성 컨셉과 관련된 것이다. Suspense는 비동기적으로 데이터를 불러오거나 컴포넌트를 dynamic import할 때 발생할 수 있는 지연 시간을 더 효과적으로 관리할 수 있도록 도와준다. Suspense를 활용하면 비동기 로직을 컴포넌트의 상위 ..

SPA란? 참고 개요 WEB API로 제공되는 HashChangeEvent, History를 활용해 브라우저 이동을 감지하거나 조작할 수 있다. HashChangeEvent 페이지 내 특정 위치로 스크롤할 때 사용되는 API이다. URL에 붙은 해시값(#)의 변경을 감지할 수 있다. 예시) function locationHashChanged() { if (location.hash === "#somecoolfeature") { somecoolfeature(); } } window.addEventListener("hashchange", locationHashChanged); History 브라우저의 세션 히스토리를 조작할 수 있게 해주는 API이다. 글로벌 객체인 history로 접근 가능하다. back, ..

버블링 한 요소에 이벤트가 발생하면 최상단 조상 요소를 만날 때까지 이벤트가 위로 전파되는 현상 아래 예시코드를 실행하면 1번!, 2번! alert 창이 차례로 뜬다. 요소에 발생한 이벤트가 까지 위로 전파된 것이다. 클릭해 주세요. 이벤트가 전파되지 않게 막고 싶다면 stopPropagation을 활용할 수 있다. 클릭해 주세요. 캡쳐링 이벤트가 최상위 조상에서 시작해 아래로 전파되는 현상 우리가 자주 쓰는 addEventListener의 capture 옵션을 줘서 캡쳐링 단계에서 이벤트를 잡아낼 수 있다. removeEventListener로 이벤트를 지울 때도 capture 옵션을 똑같이 줘야 한다. // 캡쳐링 element.addEventListener("click", foo, true); //..

HTML (Hypertext Markup Language) 웹 페이지를 표시하기 위해 개발된 언어이다. 구조적인 문서를 만들 수 있는 방법을 제공한다. 브라우저는 HTML 문서를 해석해서 웹페이지로 보여주는 역할을 한다. DOCTYPE Hello World! HTML 최상단에 형태로 작성한다. 웹 브라우저에 해당 문서의 버전이나 타입을 알려주는 역할을 한다. DOCTYPE을 선언하지 않으면 브라우저는 쿼크모드로 문서를 해석한다. 💡 쿼크모드 - 브라우저 하위 호환성을 위해 존재하며 현대의 웹 표준과는 다르게 동작할 수 있다. : 문서의 제목을 정의 : 불러올 자바스크립트 파일을 정의 그 외 , 등 리소스를 연결한다. 문서의 메타데이터를 나타낸다. 인코딩 방식, 저자, 뷰포트 설정, 페이지 설명과 같은 정..

자바스크립트 스코프 개념을 정확히 알아야하는 이유는 현재 사용되는 변수가 어디에서 선언된 변수인지 정확히 알 수 있기 때문이다. 스코프는 식별자의 유효범위를 말한다. 여기서 식별자에는 변수, 함수, 매개변수 등이 있다. 스코프는 연결리스트 형태로 함수 객체 안에서 [[Scope]] 프로퍼티에 저장된다. 이렇게 관리되는 것을 스코프 체인이라고 한다. 함수가 실행되면 새로운 실행 컨텍스트가 만들어지는데 이 실행 컨텍스트는 자신이 사용할 스코프 체인을 이렇게 만든다. 현재 실행되고 있는 함수 객체의 [[Scope]] 프로퍼티를 복사 새롭게 생성된 변수 객체를 해당 체인의 제일 앞에 추가 예시 코드를 보자. const a = 1; const outer = function () { const b = 2; cons..

목적 개발 내용을 바로 확인할 수 있는 환경 소스 관리가 쉬운 환경 일관된 코드 스타일을 유지할 수 있는 환경 (extra) 타입스크립트를 사용할 수 있는 환경 폴더를 생성하고 프로젝트를 만들어주자. npm init -y 1. eslint, prettier 설정 eslint와 prettier 세팅을 먼저 해보자 eslint는 일관된 코드 스타일을 가져가기 위해 사용한다. prettier는 eslint와 다르게 indent, tabSize 등을 통일시켜 코드를 보기 좋게 만드는데 도움이 된다. eslint 먼저 eslint 관련 의존성을 설치해보자 npm i -D eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plug..

프로토타입의 정의 자바스크립트는 프로토타입 기반 언어이다. 프로토타입 객체를 통해 객체의 메서드와 속성들을 상속한다. 자바스크립트에서는 객체를 생성할 때 자신의 부모 객체와 연결되는 링크를 가지게 된다. 프로토타입의 이해 프로토타입을 알아보기 위해 간단한 Person 생성자를 만들어보겠습니다. function Person(name, age) { this.name = name; this.age = age; this.sayHi = function () { console.log("HI"); }; } console.dir(Person); // 1 const person1 = new Person("heeji", 100); console.dir(person1); // 2 1의 결과 2의 결과 생성된 person1 ..

클로저의 정의 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합 - mdn 생성된 당시의 스코프체인을 기억하는 함수 함수가 선언될 때의 렉시컬 환경을 기억하는 함수 클로저의 이해 function makeFunc() { const name = "Mozilla"; function displayName() { console.log(name); } return displayName; } const myFunc = makeFunc(); myFunc(); 함수만 봐서는 리턴된 displayName에서는 name이라는게 없기 때문에 에러가 날 것 같이 생겼다. 하지만 클로저가 형성되어 name 변수에 대한 데이터를 가지고 있기 때문에 에러가 나지 않는다. name이 있는 어휘적 환경에 대한 참조..

일급객체 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. 일반적으로 적용 가능한 연산이라고 하면 다음과 같은 것들이 있다. 변수에 할당될 수 있다. 다른 함수의 인자로 전달될 수 있다. 함수에서 반환될 수 있다. 일급함수 함수를 일급 객체로 취급하는 것을 말한다. 즉, 함수들이 다른 변수처럼 다루어질 때 일급 함수를 가진다고 한다. 1. 변수에 값으로서 함수를 할당할 수 있다. const foo = () => { console.log("bar"); }; foo(); 예제를 보면 변수 foo에 함수를 할당한 다음 함수를 호출할 때 해당 변수를 사용하는 것을 볼 수 있다. 2. ..

SPA는 하나의 페이지를 사용하는 어플리케이션이다. 이 방식을 사용하는 것은 react, vue 등이 있습니다. 그럼 SPA가 무엇인지, 장점과 단점엔 무엇이 있는지 알아보겠습니다. Single Page Application (SPA)란? SPA와 MPA (Multi Page Application) 비교 SPA를 이해하기 위해서는 먼저 전통 방식인 MPA에 대해 알아볼 필요가 있습니다. MPA에서는 각 페이지마다 별도의 HTML이 존재합니다. 사용자가 페이지를 이동할 때마다 새로운 HTML을 서버로부터 요청하고 브라우저가 이를 파싱합니다. 장점: 페이지에 필요한 리소스들만 모아 관리하고 로드할 수 있어 효율적인 리소스 관리가 가능합니다. 단점: 느린 네트워크 환경에서는 사용자 경험이 떨어질 수 있습니다...

자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있습니다. 그럼에도 동시에 여러 작업이 실행되는 것처럼 보이는 것은 비동기 방식을 사용하고 있기 때문입니다. 이런 비동기 처리는 이벤트 루프로 이루어집니다. 동시성? 동시성은 여러 작업이 겹쳐서 실행되는 것처럼 보이게 만드는 방식입니다. 병렬성은 실제로 여러 작업이 동시에 실행되는 것을 의미합니다. 자바스크립트 이벤트 루프는 동시성 방식입니다. 이벤트 루프 이벤트 루프는 Call Stack, Macro Task Queue (Task Queue), Micro Task Queue, render queue로 이루어져 있습니다. Call Stack 함수가 실행되어 실행 컨텍스트가 생성되고 콜스택에 쌓입니다. Macro Task Queu..

싱글스레드. 자바스크립트는 싱글 스레드 언어입니다. 스레드는 뭘까요? 스레드는 프로세스 내에서 실행되는 가장 작은 실행 단위를 말합니다. 💡 프로세스란? 프로그램이 메모리에 로드되어 CPU의 실행시간을 받은 것을 의미합니다. 싱글 스레드 방식은 스레드가 한 개란 뜻으로, 한 번에 하나의 작업만 수행할 수 있다는 특징을 가지고 있습니다. 그래서 하나의 작업이 오래 걸리면 다음 작업이 오래 대기하게 되어 전체 실행 시간이 길어지는 문제가 있습니다. 아래 예시에서 볼 수 있듯이 중간에 정말 많은 연산을 진행하는 코드가 존재한다면 end가 콘솔에 찍히기까지 시간이 오래걸릴 것입니다. console.log("start"); for (let i = 0; i < 10000000000000; i++) { // 많은 연..