개발 노트

하이드레이션이란 서버에서 HTML을 먼저 보내줘 사용자가 화면을 빠르게 볼 수 있게 한 다음, 클라이언트에서 해당 HTML에 JavaScript코드를 결합하여 상호작용이 가능한 동적인 웹페이지로 만드는 과정입니다.하이드레이션의 주요 역할 및 필요성Next.js는 기본적으로 SSR이나 SSG 방식으로 HTML을 미리 생성하여 클라이언트에 전달할 수 있습니다.HTML을 미리 생성과 하이드레이션의 이점초기 로딩 속도 향상 및 SEO 최적화: 서버에서 완성된 HTML을 받기 때문에 사용자는 빈 화면이 아닌 내용이 채워진 페이지를 빠르게 볼 수 있으며, 검색 엔진 최적화에도 유리합니다.React 기능 활성화: 서버에서 내려준 HTML은 단순히 구조만 있는 정적인 상태입니다. 하이드레이션 과정을 통해 클라이언트의 ..

사전 렌더링사전 렌더링이란 Next.js가 클라이언트 측에서 JavaScript를 사용하여 페이지를 렌더링하는 대신, 서버에서 미리 HTML 파일을 생성하는 기능입니다. 이를 통해 사용자에게 더 빠른 로딩 속도와 검색 엔진 최적화 기능을 제공할 수 있습니다.정적 생성(SSG)정적 생성은 빌드 시점에 HTML 파일을 미리 생성하는 방식입니다. 한 번 빌드된 HTML 파일은 CDN에 배포되어 캐싱되며, 모든 요청에 대해 동일한 페이지를 제공합니다.특징속도가 빠름검색 엔진 최적화에 효과적데이터가 자주 변하지 않는 페이지에 적합(ex: 블로그 게시물, 제품 랜딩 등)서버 사이드 렌더링(SSR)서버 사이드 렌더링은 사용자가 페이지를 요청할 때마다 서버에서 HTML 파일을 동적으로 생성하는 방식입니다. 페이지에 따..

TypeType은 변수 타입 정의에 별칭을 부여하는 것을 의미합니다. type Color = number | string;let favoriteColor: Color = "Red";Object나 Function도 정의하고 재사용할 수 있습니다.type People = { name: string;};const people: People = { name: "KIM"};type OnError = (id: number, error: string) => boolean;function downloadFile(id: number, onError: OnError) { ...}Type은 변수 타입에 별칭을 부여하고 재사용하는 기능만 제공합니다. 그리고 JavaScript로 변환할 때 어떠한 추가코드도 생성하지 않습..

publicpublic에 저장된 파일들은 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적됩니다. 즉 접속하는 유저가 원한다면 접근할 수 있습니다. 예를 들어, 브라우저에서 localhost:1234/game-logo.png에 접속하면 해당 이미지를 볼 수가 있습니다.assets파일들이 공개되지 않기 때문에 localhost:1234/src/assets/game-logo.png에 접속할 수 없습니다.결론logo, og-img, favicon같이 빌드 프로세스에 의해 처리되지 않는 이미지는 public에 컴포넌트 내에서 사용되는 이미지는 assets에서 사용하면 좋습니다.참고 페이지https://velog.io/@sooxpak/React-public-vs-assetshttps://yescold.tisto..

React 렌더링React 공식 문서를 확인해보면 트리거 단계에서는 두 가지 이유로 렌더를 발생시킵니다.처음 컴포넌트를 렌더해야할 때컴포넌트 또는 부모 컴포넌트의 상태가 업데이트 될 때(리렌더링)컴포넌트 리렌더링 트리거 조건state가 업데이트 된 경우부모 컴포넌트가 리렌더링 된 경우context가 업데이트된 경우참조: https://blog.teamelysium.kr/react-rerendering-optimization#85d7fe53c34946599068bace7ccedbc3React 리렌더링 최적화합성(Composition)을 사용하여 리렌더링 방지상태를 자식 컴포넌트로 내리기이 패턴은 무거운 컴포넌트가 상태를 관리하고 있고, 해당 상태가 렌더 트리의 작은 일부 영역에서만 사용되는 경우에만 유용합..

React HookReact Hook은 리액트 클래스형 컴포넌트에서 이용하던 코드를 함수형 컴포넌트에서 사용할 수 있게 만들어준 라이브러리입니다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능합니다.React Hook의 장점코드 간결성함수형 컴포넌트와 Hook을 사용하면 클래스 컴포넌트보다 코드가 더 간결해집니다. 따라서 코드를 이해하고 유지 보수하기가 더 쉬워집니다.재사용성Custom Hook을 만들어 여러 컴포넌트에서 재사용할 수 있습니다. 이로 인해 코드의 중복을 줄이고 논리를 쉽게 공유할 수 있습니다.컴포넌트 분리Hook을 이용하면 상태 관련 로직을 컴포넌트에서 분리하여 더욱 독립적인 함수로 만들 수 있습니다. 이로 인해 컴포넌트를 더욱 재사용 가능하고 테스트하기 쉬..

ViteVite는 빠르고 간결한 웹 프로젝트를 위해 탄생한 빌드 도구 입니다.ESMESM은 모듈화 문법인 import, export를 별도의 도구없이 브라우저 자체에서 소화해 낼 수 있는 모듈 방식을 의미합니다. 기존의 브라우저에서는 import와 export를 해석할 수 있는 능력이 없었지만, 이제는 script 태그에 아래와 같이 type="module" 속성을 추가하면 정상 동작하는 것을 볼 수 있습니다.// app.jsimport { sum } from './math.js';console.log(sum(10, 20));Vite 특징EsbuildGo로 작성된 Esbuild는 Webpack과 같은 기존 번들러 대비 10-100배 빠른 속도를 제공합니다.Native ESM기존 webpack과 같은 모듈..

Node.js란 Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 즉, Node.js를 토앻 다양한 자바스크립트 애플리케이션을 실행할 수 있으며 서버를 실행하는데 주로 사용됩니다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도 소프트웨어 없이 동작하는 것이 가능하며, 이를 통한 웹서버의 동작에 있어 더 많은 통제에서 벗어나 여러 가지 기능을 가능하게 합니다. 이벤트 기반 Non Blocking I/O 모델 Node.js는 이벤트 기반 Non Blocking I/O 모델을 구현하고 있습니다. 여기서 이벤트 기반이란 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식을 의미합니다. 즉, 이벤트 기반 시스템에서는 특정 이벤..

Next Js란 Next Js는 React를 기반으로하는 프레임워크입니다. Next Js는 React가 SEO를 위해 SSR을 가능하게 해줍니다. SEO란 Search Engine Optimization의 약자로 검색 엔진들이 서버에 등록된 웹사이트를 하나씩 돌아다니면서 웹사이트의 HTML 문서를 분석해주는 것입니다. SSR이란 서버사이드 렌더링를 의미하는데 서버로부터 완전하게 만들어진 html 파일을 받아와 페이지 전체를 렌더링하는 방식입니다. Next JS의 SSR 단계 SSR을 기반으로 서버에 사전 저장된 Render Tree의 HTML을 로드 사전 렌더링 이후에는 CSR 사용 페이지가 그려진 이후에 페이지 내부에서 동적인 데이터를 패치하는 과정은 CSR 방식을 따름 만약 페이지가 로드될 때 데이터..

async async 키워드는 function 앞에 위치합니다. function 앞에 async를 붙이면 해당 함수는 항상 Promise를 반환합니다. Promise가 아닌 값을 반환하더라도 이행 상태의 Promise로 값을 감싸 이행된 Promise가 반환되도록 합니다. 아래의 예시로 테스트해보면 f()와 t() 모두 같은 결과를 보여줍니다. async function f() { return 1; } f().then(alert); async function t() { return Promise.resolve(1); } t().then(alert); await awiat은 async 함수 안에서만 동작합니다. JavaScript는 await 키워드를 만나면 Promise가 처리될 때까지 기다립니다. 결과..