REACT / NEXT.js
1.React.js 소개 및 Vite를 이용한 초기 설정 가이드
React.js가 만들어진 이유와 장점, Vite를 이용하여 설치하고 초기 설정하는 방법을 알아보자
2.React App 실행하고 구동 원리 살펴보기
React App 실행하고 구동 원리 살펴보기
3.React 컴포넌트에 관하여
리액트는 컴포넌트 기반의 UI 라이브러리 (Component-Based UI Library) 입니다. 페이지의 모든 요소를 컴포넌트 단위로 쪼개어 개발하고, 완성된 컴포넌트를 절히 조합해서 페이지를 구성합니다.
4.React에서 사용하는 JSX 문법에 대해 알아보자
리액트에서 컴포넌트는 자바스크립트 함수로 만드는데, 특이하게도 이 함수는 HTML 값을 반환합니다. 이렇듯 자바스크립트와 HTML 태그를 섞어 사용하는 문법을 JSX(자바스크립트 XML)라고 합니다.
5.[React] 컴포넌트에 값 전달하기
리액트에서는 부모가 자식 컴포넌트에 단일 객체 형태로 값을 전달할 수 있습니다. 이 객체를 리액트에서는 Props(Properties)라고 합니다.
6.React의 이벤트 핸들러 특징과, 이벤트 처리하는 법 알아보기
Event Handling: 이벤트가 발생했을 때 그것을 처리하는 것
7.React의 핵심 개념: State 파해치기!
`State`란 현재 가지고 있는 형태나 모양을 정의하는 값이면서, 변화할 수 있는 동적인 값을 뜻합니다.
8.React의 핵심 개념: Ref 파해치기!
리액트의 Ref를 이용하면 돔(DOM) 요소들을 직접 조작할 수 있습니다.
9.React Hook에 대해 알아보자
❓ React Hook 이란? 클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 도와주는 메서드입니다.
10.[React] 컴포넌트의 라이프 사이클, 그리고 useEffect
컴포넌트의 라이프 사이클, 그리고 useEffect로 라이프 사이클을 제어하기
11.React의 핵심 훅: useReducer 파해치기!
컴포넌트 내부에 새로운 State를 생성하는 React Hook 입니다. 모든 `useState`는 `useReducer`로 대체 가능합니다. `useReducer`는 해당 기능에 더불어 **상태 관리 코드를 컴포넌트 외부로 분리**할 수 있습니다.
12.React 성능 최적화 (Optimization)
React.memo, useMemo, useCallback까지 리액트의 다양한 최적화 방법
13.[Next.js] Server Component & Client Component
Next.js의 App Router에서는 컴포넌트가 서버 컴포넌트(Server Component, RSC) 또는 클라이언트 컴포넌트(Client Component)로 나뉜다.
14.[Next.js] CSR, SSR, SSG, ISR, On-demand-ISR 총정리하기
Next.js에서는 프로젝트 특성에 따라 CSR, SSR, SSG, ISR을 적절히 조합해서 사용하는 것이 중요하다!
15.[Next.js] `searchParams`가 동기 → 비동기로 변경된 이유 & 효과
📣 Next.js 15 업데이트 내용 Next.js 15부터 searchParams가 Promise 형태로 변경됨. 즉, 기존에는 단순한 객체였던 searchParams가 비동기(Promise)로 제공되도록 업데이트됨.
16.[Next.js] `error.tsx`를 활용한 오류 처리 및 복구 방법
Next.js에서는 특정 페이지에서 오류가 발생했을 때 이를 감지하고 에러 페이지를 제공할 수 있도록 error.tsx 파일을 지원한다.
17.[Next.js] POST 이후 자동으로 화면에 데이터 반영하기
Next.js의 revalidateTag 또는 revalidatePath를 사용하면 자동으로 변경된 데이터를 화면에 렌더링할 수 있습니다.
18.[Next.js] modal 만들기, 인스타그램처럼 modal 띄우기
Next.js의 Intercepting Routes와 Parallel Routes를 활용하여, 인스타그램처럼 게시글을 클릭하면 모달이 열리고, 새로고침하면 해당 게시글 페이지로 이동하는 기능을 구현합니다.
19.[Next.js] 상품 리스트에 쿼리 검색과 필터 시스템 동시 적용하기
Next.js 앱에서 검색어(query string)와 여러 필터(filter)를 동시에 처리하여 목록을 필터링하고, 이를 화면에 출력하는 방법을 소개합니다. 전체 코드는 github에서 열람 가능합니다.
20.React Hover UI 제대로 구현하기 – 공백 이탈 문제와 모바일 터치 대응
웹 상단 네비게이션의 "Cart" 텍스트에 마우스를 올렸을 때, Popover UI 컴포넌트가 자연스럽게 열리고, 모바일에서도 터치로 동작하며, Popover UI 내부로 마우스가 이동했을 때도 닫히지 않도록 구현합니다.
21.Next.js + ESLint Flat Config / Prettier / Stylistic / biome 기본 세팅 방법 (TypeScript, Prettier, Import Alias, Type Checking)
Next.js + ESLint Flat Config / Prettier / Stylistic / biome 기본 세팅 방법
22.리액트에서 함수형 프로그래밍을 지향하는 이유
함수형 프로그래밍과 객체 지향 프로그래밍의 장단점, 리액트에서 함수형을 선택한 이유에 대한 탐구에 대한 기록