본문 바로가기
반응형

전체 글166

[NextJs] Chapter 2: 핵심 개념 (1) - 페이지와 라우팅 Chapter 2: 핵심 개념 (1) - 페이지와 라우팅Next.js의 가장 큰 특징 중 하나는 파일 시스템 기반 라우팅입니다. Spring에서 @Controller와 @GetMapping 어노테이션으로 URL을 매핑하던 방식과는 완전히 다른, 직관적인 접근법을 배웁니다.1. 파일 시스템 기반 라우팅: Controller가 사라졌다!src/pages 폴더 안에 파일을 만들면 그 파일의 경로가 그대로 URL 주소가 됩니다.src/pages/index.js → /src/pages/about.js → /aboutsrc/pages/posts/first-post.js → /posts/first-postSpring에서 URL 매핑을 위해 컨트롤러 클래스와 메소드를 만들던 과정이, Next.js에서는 파일을 생성하는.. 2025. 9. 17.
[NextJs] Chapter 1: 개발 환경 설정 및 첫 프로젝트 Chapter 1: 개발 환경 설정 및 첫 프로젝트Spring 개발자가 Next.js의 세계로 첫발을 내딛는 단계입니다. Java의 JDK를 설치하듯 Node.js를 설정하고, 첫 프로젝트를 생성하며 구조를 살펴보겠습니다.1. 필수 도구 설치Node.js: JavaScript 런타임입니다. Java의 JDK와 같습니다. nodejs.org에서 LTS 버전을 설치하세요. 설치 후 터미널(cmd 또는 PowerShell)에서 node -v 와 npm -v 명령어로 설치를 확인합니다.VS Code: 추천하는 코드 에디터입니다. code.visualstudio.com에서 다운로드할 수 있습니다.2. create-next-app으로 프로젝트 시작하기터미널을 열고 원하는 경로로 이동한 뒤, 다음 명령어를 실행하세요.. 2025. 9. 16.
[React] 12장: 최종 프로젝트 - 미니 블로그 만들기 12장: 최종 프로젝트 - 미니 블로그 만들기지금까지 배운 모든 기술(컴포넌트, Props, State, React Router, Zustand)을 총동원하여 간단한 CRUD(Create, Read, Update, Delete) 기능이 있는 블로그 애플리케이션을 만듭니다.1. 프로젝트 개요만들 기능글 목록 보기 (Read): 모든 게시글의 제목을 리스트 형태로 보여줍니다.글 상세 보기 (Read): 특정 게시글의 제목과 내용을 상세하게 보여줍니다.새 글 작성 (Create): 제목과 내용을 입력하여 새로운 글을 추가합니다.글 수정 (Update): 기존 글의 제목과 내용을 수정합니다.글 삭제 (Delete): 특정 글을 삭제합니다.사용할 기술 스택UI: React라우팅: React Router (reac.. 2025. 9. 16.
[React] 11장: 전역 상태 관리 (Zustand) - 컴포넌트의 벽 허물기 11장: 전역 상태 관리 (Zustand) - 컴포넌트의 벽 허물기애플리케이션의 규모가 커지면, 여러 컴포넌트가 공유해야 하는 상태(예: 사용자 정보, 테마, 장바구니 등)가 생깁니다. Props drilling 없이 이러한 전역 상태를 효율적으로 관리하는 방법을 배웁니다. 여기서는 간단하고 강력한 라이브러리인 Zustand를 사용합니다.1. 핵심 개념전역 상태(Global State): 여러 컴포넌트가 공통으로 접근하고 수정해야 하는 상태.상태 관리 라이브러리: 전역 상태를 컴포넌트 트리 바깥의 한 곳(스토어)에서 관리하고, 어떤 컴포넌트에서든 쉽게 접근할 수 있도록 도와주는 도구. (예: Redux, Recoil, Zustand 등)Zustand:간단함: 몇 줄의 코드로 스토어를 만들고 바로 사용할 .. 2025. 9. 16.
[React] 10장: React Router - 페이지 이동과 목차 만들기 10장: React Router - 페이지 이동과 목차 만들기React는 기본적으로 단일 페이지 애플리케이션(SPA)이므로, 여러 페이지를 가진 것처럼 보이게 하려면 "라우팅" 라이브러리가 필요합니다. 가장 널리 사용되는 react-router-dom을 사용하여 페이지 간 이동을 구현하는 방법을 배웁니다.1. 핵심 개념SPA (Single Page Application): 최초에 하나의 HTML 페이지만 불러오고, 이후에는 서버와 데이터를 교환하며 동적으로 페이지 내용을 갱신하는 방식의 웹 애플리케이션입니다. 페이지를 이동할 때 전체 페이지를 새로고침하지 않아 사용자 경험이 부드럽습니다.react-router-dom: React 기반 SPA를 위한 클라이언트 사이드 라우팅 라이브러리입니다. (npm in.. 2025. 9. 16.
[React] 9장: 스타일링 - 컴포넌트에 옷 입히기 9장: 스타일링 - 컴포넌트에 옷 입히기React 컴포넌트의 스타일을 꾸미는 다양한 방법을 배웁니다. 일반 CSS 파일부터, 컴포넌트 스코프를 지원하는 CSS Modules, 그리고 JavaScript 내에서 스타일을 정의하는 CSS-in-JS까지 알아봅니다.1. 핵심 개념일반 CSS 파일 임포트:import './App.css'; 와 같이 CSS 파일을 JavaScript 파일에서 직접 임포트하여 사용합니다.가장 간단한 방법이지만, 클래스 이름이 전역(global)으로 적용되기 때문에 다른 컴포넌트의 스타일과 충돌할 위험이 있습니다. (예: A 컴포넌트의 .title 스타일이 B 컴포넌트의 .title에 영향을 줌)인라인 스타일(Inline Styles):JSX 엘리먼트의 style 속성에 JavaSc.. 2025. 9. 16.
[React] 8장: Hooks 심화 - React 능력 끌어올리기 8장: Hooks 심화 - React 능력 끌어올리기useState와 useEffect 외에, React는 더 다양하고 강력한 Hook들을 제공합니다. 복잡한 상태 로직을 관리하거나, 불필요한 렌더링을 방지하여 성능을 최적화하는 등 고급 기능을 다루는 Hook들을 배웁니다.1. 핵심 개념useContext: "Props drilling" 문제를 해결하기 위한 Hook입니다. Props drilling이란, 여러 단계의 중첩된 컴포넌트를 거쳐 데이터를 전달하는 것을 말합니다. useContext를 사용하면, 상위 컴포넌트에서 제공한 데이터를 트리 깊숙한 곳의 하위 컴포넌트에서 props 없이 직접 가져다 쓸 수 있습니다. (예: 테마, 언어 설정, 사용자 인증 정보 등 전역적인 데이터)useReducer:.. 2025. 9. 16.
[React] 7장: 폼 다루기 - 사용자의 입력 받기 7장: 폼 다루기 - 사용자의 입력 받기사용자로부터 텍스트, 선택, 파일 등 다양한 입력을 받기 위한 폼(Form)을 다루는 방법을 배웁니다. React에서는 폼 엘리먼트의 값을 컴포넌트의 state로 관리하는 제어 컴포넌트(Controlled Component) 방식을 권장합니다.1. 핵심 개념제어 컴포넌트(Controlled Component):폼 데이터(예: 의 값)를 React 컴포넌트의 state를 통해 관리하는 방식입니다.사용자가 입력할 때마다 state가 업데이트되고, 이 state 값이 다시 폼 엘리먼트의 value로 전달됩니다.데이터의 흐름이 단방향(state -> UI, UI event -> state update)으로 명확해져서, 입력 값에 대한 검증, 조작, 다른 UI 요소와의 연동.. 2025. 9. 16.
반응형

티스토리툴바