본문 바로가기
반응형

프론트엔드46

[NextJs] Chapter 3: 핵심 개념 (2) - React 기초 다지기 Chapter 3: 핵심 개념 (2) - React 기초 다지기Next.js는 React라는 도서관 위에 지어진 집과 같습니다. 집의 구조를 이해하려면 먼저 도서관(React)의 핵심 개념을 알아야 합니다. 여기서는 Spring 개발자에게 생소할 수 있는 React의 기본 문법 4가지를 소개합니다.1. 컴포넌트(Component): UI를 조립하는 부품컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 부품입니다. JavaScript 함수 형태로 만들며, HTML처럼 보이는 JSX를 반환합니다. 잘게 쪼개진 여러 개의 컴포넌트를 조립하여 하나의 완전한 페이지를 만듭니다.2. JSX: JavaScript와 HTML의 만남JavaScript 파일 안에서 HTML과 유사한 문법을 사용할 수 있게 해주는 확장 .. 2025. 9. 17.
[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.
반응형

티스토리툴바