Deep Dive

Next.js는 Vercel이라는 미국 스타트업에서 만든 풀스택 웹 애플리케이션을 구축하기 위한 리액트 기반 프레임워크다. Next.js가 웹 프론트에서 대세가 되기에 앞서 페이스북 팀에서 SSR을 위해 진행한 react-page 프로젝트가 있었다. 해당 프로젝트는 페이지를 서버 또는 클라이언트에서 리액트를 쉽게 사용할 수 있는 것을 목표로 만들어졌다. 물론 해당 프로젝트는 개발 중단되었지만, 구현된 방향성에 Next.js가 영감을 받았다. 특히 Next.js의 페이지 구조가 이를 닮았다. 만약 이 글을 읽고 있고 리액트 기반의 프로젝트에서 SSR을 고려하고 있다면 현재로서는 Next.js을 선택하는 것이 가장 합리적인 선택일 수 있다. Next.js 시작하기Next.js는 CRA와 비슷한 creact-..

기본적으로 리액트는 브라우저 JS 환경에서 렌더링할 수 있는 방법을 제공하는 프론트엔드 라이브러리이다. 하지만 리액트 애플리케이션을 서버에서 렌더링할 수 있는 API 또한 제공하고 있다. 해당 API는 당연히 Node.js와 같은 서버 환경에서만 실행할 수 있다. 현재 리액트 18이 릴리스되며 react-dom/server에 renderTopipeableStream이 추가됐고, 나머지는 대부분 지원 중단되는 등 큰 변화가 있다. 이 내용은 추후에 다루기로 하고 기존의 함수들에 대해 알아보자. renderToStringrenderToString은 인수로 넘겨받은 리액트 컴포넌트를 렌더링해 HTML 문자열로 반환하는 함수이다.SSR을 구현하는 데 가장 기초적인 API이다.import React, { useE..

모듈의 일반적 의미모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말하며, 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 모듈은 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다. 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 하지만 애플리케이션과 완전히 분리된다면 모듈을 사용하는 의미가 없다. 따라서 모듈은 공개가 필요한 자산에 한하여 명시적으로 선택적 공개가 가능하다. 이것이 export라 한다. 또한 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있으며 이를 import라 한다. 코드의 단위를 명확히 분리하여 애플리케이션을 구..

지금부터 리액트 훅에 대해 알아보자.Hook은 클래스 컴포넌트에서만 가능했던 state, ref 등 리액트의 핵심 기능을 함수에서도 가능하게 만들어 준 것이다. 리액트로 웹 서비스르를 만드는 개발자라면 훅이 어떻게 동작하는지 이해할 필요가 있다. useStateuseState는 함수 컴폰너트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅이다.import {useState} from 'react'const [state,setState] = useState(initialState) useState의 인수로는 사용할 state의 초깃값을 넘겨주면 된다. 만약 useState를 사용하지 않는다면 어떻게 될까?import React from 'react'const Component = () =>..

JS는 비동기 처리를 위해 콜백 함수를 사용했지만, 콜백 지옥 현상으로 인해 가독성이 떨어지고 에러 처리가 어렵다는 문제가 있었다. ES6에서는 Promise를 도입해 콜백 함수를 통한 비동기 방식의 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있게 되었다. 비동기 처리를 위한 콜백 패턴의 단점콜백 헬비동기 함수 내부의 비동기 동작은 호출된 비동기 함수의 동작이 종료된 다음 완료된다. 이로 인해 비동기 함수 내부의 비동기 동작의 결과를 외부로 반환하거나 상위 스코프의 변수에 할당할 수 없다. let todos;// GET 요청을 위한 비동기 함수const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr...

REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이다. 그리고 REST API는 REST를 기반으로 서비스를 구현한 것을 의미한다.이러한 REST의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful"이라고 한다. REST API의 구성REST API는 자원, 행위, 표현의 3가지 요소로 구성된다. REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있다.구성 요소내용표현 방법자원자원URI (엔드포인트)행위자원에 대한 행위HTTP 요청 메서드표현행위의 구체적 내용페이로드  REST API 설계 원칙REST에서 가장 중요한 기본 원칙은 두 가지가 있다.URI는 리소스를 표현하는데 집중해야하며 행위에 대한 표현이 들어가면..