Next.js란 리액트 전용의 다양한 기능을 제공하는 웹 개발 프레임워크 vercel이 직접 개발 및 운영 중인 오픈소스이다. Next.js vs React Next.js는 프레임워크이고 React는 라이브러리이다. 프레임워크는 프레임워크가 지원하는 기능 중 하나를 골라 사용하는 것을 권장한다. 자유도가 낮고 기능 구현의 주도권이 프레임워크에 있다. 라이브러리는 어떤 기능을 가져다 쓰든 개발자 마음이다. 자유도가 높고 기능 구현의 주도권이 개발자에게 있다. 그러면 자유도가 낮은 Next를 왜 사용할까? 다양한 기능을 공식적으로 제공해준다는 장점과 함께 다음의 기능들이 매우 편리하고 성능향상에 좋기 때문이다. 1. 파일 시스템 기반 라우팅 next.js는 두 가지 버전의 라우터를 제공한다. Page Rou..

JS vs TS JS는 인터프리터 언어이다. 코드를 한 줄씩 읽어가면서 명령을 처리한다. JS는 동적 타이핑 언어이다. 변수의 자료형이 런타임에 결정되어 JS엔진에 의해 자유롭게 변경된다. 따라서 발생하는 오류들은 런타임 오류들이다. TS는 컴파일 언어이다. 코드 작성이 끝나면 빌드 작업을 통해 코드를 JS로 한 번 바꾸어 준 후 코드를 실행한다. TS는 정적 타이핑 언어이다. 변수의 자료형을 명시적으로 개발자가 지정해 컴파일 단계에서 타입이 올바른지 판단한다. 따라서 발생하는 오류들은 컴파일 오류들이다. 그러나 모든 런타임 오류를 타입스크립트로 방지할 수는 없다고 한다. 타입스크립트는 node.js 나 브라우저가 해석할 수 없다. 따라서 js 코드로 변환해 주는 작업이 필요하다. 타입스크립트의 동작 과..

SSR 서버가 웹 화면을 그리는 주체가 된다. 관련 프레임워크 ex) Next.js, Flask Static Sites 방식에 영감을 얻어 SSR방식이 도입된다. 서버에서 필요한 데이터 모두를 가져와서 서버 안에서 html을 만들고, 만들어진 html 파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에 보낸다. 클라이언트로 전달된 html문서는 바로 유저에게 보여줄 수 있게 된다. 통신 과정 사용자가 클라이언트에 요청을 보냄 서버는 리소스를 확인하고 이를 해석하고 변환하는 컴파일링 과정을 통하여 즉시 렌더링 가능한 HTML 파일을 생성 클라이언트에 전달되는 순간 이미 렌더링 될 준비가 되어 있으므로 즉시 렌더링 이때 JS파일은 읽히기 전 이므로 사이트 자체의 조작은 불가능한 상태 클라이언트가 J..

클래스형 컴포넌트의 생명주기 컴포넌트의 생명주기 과정은 컴포넌트가 실행되거나 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 과정을 설명합니다. 크게 Mount, Update, UnMount로 나누어집니다. Mount 컴포넌트가 처음 실행되는 시기입니다. 컴포넌트는 초기화 되고 DOM에 최초로 그려집니다. 1. 컴포넌트의 base state가 constructor에 의해서 초기화됩니다. (constructor : 컴포넌트의 생성자 메서드로, 가장 먼저 실행하는 메서드입니다. state와 props를 접근하여 값을 할당할 수 있습니다.) 2. getDerivedStateFromProps 실행합니다. (props로) 3. 초기화가 완료되면 render() 메서드가 실행이 됩니다. 컴포넌트를 렌더링 해주는..

리액트에서는 배열을 렌더링 시 배열 요소의 고유한 key값을 통해 컴포넌트의 변화를 빠르게 식별하고 파악하는 것을 돕는다. key값을 설정해주지 않으면 리액트 자체적으로 error를 발생시키는데 이는 key 값을 설정해주지 않았을 때 발생하는 부작용을 막기 위해서이다. 예를 들어 다음과 같은 배열이 있다고 해보자 const list = [1, 2]; 이 배열의 맨 앞에 3을 추가해보자. list = [3, 1, 2]; 가장 효율적으로 배열을 수정하는 방법은 맨 앞에 3을 추가해 주는 방법일 것이다. 그러나 리액트 DOM이 렌더링 될 때는 이전 virtual dom과 변화가 일어난 후의 virtual dom을 비교하므로, 즉 변화한 부분을 비교하므로 1번이 3번으로 바뀐 것인지, 3이 맨 앞에 추가된 것인..

real DOM vs virtual DOM real DOM 브라우저에서 웹 페이지를 렌더링할 때 사용하는 트리 구조로, HTML 요소와 그 속성, 텍스트 등을 나타낸다. 실제 DOM을 조작하면 웹 페이지가 다시 그려지고 업데이트되는데, 이 과정이 비교적 비용이 크다. Virtual DOM React에서는 UI를 표현하는 가상의 DOM 트리를 생성한다. 이는 실제 DOM과 동일한 구조를 가지지만, 브라우저에 직접 적용되지 않고 메모리 상에 존재한다. 렌더링 과정 HTML을 파싱하여 DOM 객체를 생성하고, CSS를 파싱하여 스타일 규칙을 만듦 이 두개를 합쳐서 실제로 웹 브라우저에 보여져야할 요소를 표현한 "렌더 트리" 라는 것을 만듦 이 렌더 트리를 기준으로 레이아웃을 배치하고 색을 칠하는 등의 작업을 ..

비동기 처리 비동기 처리는 프로그램이 작업을 동시에 수행하는 것처럼 보이게 하는 처리 방법이다. 쉽게 말하면 일을 미뤄두고 다른 코드가 다 실행된 후 미뤄둔 일을 실행하는 처리 방식이다. 비동기 처리 과정 JS 코드가 실행될 때 비동기 함수를 만나면 비동기 함수에 등록된 코드는 event loop에 들어가고 해당 함수를 탈출해 나머지 코드를 실행한다. 이때 이벤트 루프는 queue 형태라고 생각하면 편하다. 기본적으로 선입 선출 구조이나 비동기처리 시 대기 시간을 정해두었다면 해당 대시 시간만큼만 event loop에 머물게 된다. Event Loop 이벤트 루프는 아래의 그림과 같이 나타낼 수 있다. 여기서 중요한 개념은 stack과 queue이다. call stack 위의 그림에 있는 stack은 흔..

표준 DOM 이벤트에서 정의한 이벤트 흐름 캡처링 단계 : 이벤트가 하위 요소로 전파하는 단계 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계 ⇒ 가장 처음 이벤트 핸들러가 동작하는 순간 버블링 단계: 이벤트가 상위 요소로 전파되는 단계 이벤트가 발생하면 가장 먼저 'window' 객체에서부터 'target'까지 이벤트 전파가 일어납니다. (캡쳐링 단계) 그리고 나서 타깃에 도달하면 타깃에 등록된 이벤트 핸들러가 동작하고, (타깃 단계) 이후 다시 widnow 객체로 이벤트가 전파됩니다. (버블링 단계) 캡쳐링 단계에서 이벤트 핸들러를 동작시키려면, addEventListener에 세번째 프로퍼티에 true 또는 { capture:true }를 전달하면 됩니다. 이벤트 위임 이벤트를 부모에게 위임하..

HTTP (HyperText Transfer Protocol) http는 application layer에서 클라이언트와 서버의 통신을 관장하는 통신 규약입니다. 초기에는 연구소에서 논문 결과를 주고 받기 위해 만들어졌지만, 계속해서 발전했고 world wide web의 통신 표준이 되었습니다. 먼저 간단하게 HTTP 역사에 대해 알아볼까요? HTTP1.x 1991년 물리학 연구소에서 만들어졌습니다. 과학자들은 각자의 연구 결과를 담은 논문을 인터넷으로 주고받고 싶었습니다. 논문 안에는 글자뿐만 아니라 참고 그림도 있었겠죠? 이때 '팀버렌즈 리'라는 사람이 HTTP 프로토콜을 설계하고 개발했습니다. 이렇게 HTTP는 최초의 웹 서버 웹 클라이언트의 통신을 주도하게 됩니다. 현재까지도 인터넷 통신 표준 프..

var, const, var의 중복 선언 허용 여부 var: 동일한 스코프 내에서 여러 번 선언. 중복 선언이 허용되므로, 실수로 변수를 재선언하는 경우가 발생할 수 있다. 요즘은 거의 사용하지 않는다. let: 동일한 스코프 내에서 중복 선언이 불가능하다. 이미 선언된 변수명을 다시 선언하려고 하면 에러가 발생한다. 한번 할당한 값을 변경할 수 있다. const: let과 마찬가지로 동일한 스코프 내에서 중복 선언이 불가능하다. 또한 선언과 동시에 초기화해야 하며, 한 번 할당된 값은 변경할 수 없다. 스코프 var: 함수 스코프(function scope)를 가진다. 즉, var로 선언된 변수는 선언된 함수 내에서만 유효하며, 함수 외부에서는 접근할 수 없다. let과 const: 블록 스코프(blo..