전체 글44 [Next.js] Rendering Component level Client & Server RenderingReact 18 버전 이전까지는 React를 사용하여 애플리케이션을 렌더링하는 방법이 전적으로 클라이언트에 있었다. Next.js는 이에 대해 HTML을 서버에서 미리 생성하고 클라이언트에서 hydration 할 수 있도록 전송하여 애플리케이션을 page 단위로 서버에서 prerender하는 방법을 제공하였다. 하지만, HTML은 가볍게 왔지만 초기 HTML을 동작가능한 형태로 만들기 위해 JS로 hydration 해야하기 때문에 전체 JS 번들도 함께 보내야했다.hydration서버에서 전달된 정적인 HTML을 브라우저에서 동적으로 작동하는 앱으로 바꾸는 과정 🌟 React 18 이후 + Next.js 13 이후 부터는 컴포넌.. 2025. 7. 9. [Next.js] 기능과 사용 이유 Next.js란?React는 라이브러리인 반면, Next.js는 React를 이용해서 웹 애플리케이션을 만들기 위한 프레임워크이다.라이브러리와 프레임워크의 차이는 애플리케이션의 흐름을 누가 쥐고 있느냐의 차이다. 라이브러리는 개발자가 주도하여 필요할 때 호출해서 쓰는 반면, 프레임워크는 그 스스로 제어 흐름의 주도성을 갖는다. *프레임워크 사용하는 장점구조와 흐름을 강제해서 일관성을 유지할 수 있다.프레임워크는 "폴더 구조", "코딩 방식", "흐름"을 어느 정도 표준화시킨다. 이에 따라 프로젝트 구조를 빠르게 이해할 수 있고, 일관되게 코드를 작성할 수 있다.복잡한 기능들을 처리해준다.라우팅, 빌드 최적화, 서버 통신 등 필수 요소를 미리 내장해서, 개발자가 비즈니스 로직에만 집중할 수 있도록 한다.성.. 2025. 7. 9. [JS] 클로저 closure 클로저는 함수를 일급 객체로 취급하는, javascript를 포함한 프로그래밍 언어에서 사용되는 중요한 특성이다.MDN에서 정의하는 클로저의 개념은 다음과 같다."클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다." 이 문장을 풀어서 알아보자. 🔎 렉시컬 스코프javascript 엔진은 함수가 어디서 호출했는지가 아닌, 함수를 어디에 정의했는지에 따라 상의 스코프를 결정한다.이를 렉시컬 스코프(=정적 스코프)라고 한다. 함수의 상위 스코프는 함수를 정의한 위치에 의해 정적으로 결정되고, 변하지 않는다. 예를 들어 다음의 코드를 보면const x = 1;function outerFunc() { const x = 10; function innerFunc() { console... 2025. 7. 9. [React] 디자인 패턴2 커스텀 훅 패턴 (Custom Hook Pattern)커스텀 훅 패턴 (Custom Hook Pattern) 이란?재사용 가능한 로직을 하나의 함수로 캡슐화하는 방법기존의 React Hooks (ex. useState, useEffect …)를 사용하여 상태 관리나 사이드 이펙트 처리를 컴포넌트 내에서 수행할 수 있지만, 이를 이용하여 여러 컴포넌트에서 비슷한 로직이 반복되면 코드의 중복이 발생할 수 있다. 이러한 문제를 해결하기 위해 커스텀 훅을 사용하여 공통 로직을 분리하고 재사용할 수 있다. 커스텀 훅은 상태 관리 및 사이드 이펙트를 다루는 로직을 분리하여 재사용하는 패턴을 말한다.- 상태 : 컴포넌트가 기억해야할 값 ⇒ 주로 useState로 관리ex) 카운터 숫자, 사용자 입력 텍스트, 모달 열.. 2025. 7. 9. 이전 1 2 3 4 ··· 11 다음
