꿀벌의 일지

안녕하세요! Next.js 15를 활용한 풀스택 개발 시리즈의 두 번째 시간입니다. 이번 시간에는 Next.js의 강력한 렌더링 기능과 함께 실제 서비스에서 필수적인 기능들을 구현하며 나만의 쇼핑 애플리케이션을 만들어보는 여정을 시작합니다.우리는 단순히 화면을 만드는 것을 넘어, Next.js의 SSG(Static Site Generation) 와 ISR(Incremental Static Regeneration) 을 활용하여 성능을 최적화하고, 백엔드와의 연동을 통해 상품 등록, 조회, 검색, 페이징, 상품 수정 및 삭제 등과 같은 핵심 기능을 구현할 것입니다.이번 포스팅을 통해 Next.js가 제공하는 뛰어난 개발 경험과 사용자 경험 최적화 방법을 깊이 있게 이해하고, 실제 상업 서비스에 적용 가능한 ..

안녕하세요! Next.js의 App Router를 활용하여 TODO 애플리케이션의 CRUD(Create, Read, Update, Delete) 기능을 구현하고 프로젝트를 마무리했습니다. 이 글에서는 완성된 프로젝트의 구조와 각 기능 구현에 사용된 핵심 기술들을 정리해 보려고 합니다.1. 프로젝트 구조 한눈에 보기이번 프로젝트는 Next.js의 공식 권장 방식인 App Router를 따라, 기능별로 깔끔하게 모듈화했습니다.app├── todo // 투두 기능과 관련된 모든 라우트│ ├── list // 투두 목록 페이지│ │ └── page.tsx│ ├── new // 새 투두 추가 페이지│ │ └── page.ts..

1. SPA(Single Page Application)와 로딩 전략1.1 SPA란 무엇인가?SPA(Single Page Application)는 이름 그대로 하나의 페이지에서 모든 화면을 처리하는 웹 애플리케이션입니다.대표적인 예로 React, Vue, Angular 등이 있습니다.SPA의 동작 방식은 다음과 같습니다.최초 접속 시 HTML, CSS, JavaScript 등 애플리케이션에 필요한 모든 리소스를 한 번에 로드이후에는 페이지 이동 시 서버로부터 전체 HTML을 다시 요청하지 않고, 필요한 데이터만 비동기로 받아와 화면을 업데이트장점부드럽고 빠른 화면 전환사용자 경험(UX) 향상모바일 앱과 유사한 동작단점초기 로딩 속도가 느림 (모든 리소스를 한 번에 받기 때문)SEO 최적화 어려움 (초기에..

1. src 디렉터리의 main 디렉터리 Tree 구조.├── java│ └── org│ └── zerock│ └── apiserver│ ├── ApiserverApplication.java│ ├── config│ │ └── CustomServletConfig.java│ └── todo│ ├── controller│ │ ├── TodoAPIAdvice.java│ │ └── TodoAPIController.java│ ├── dto│ ..

1. URL 설계URLdescriptionServer/Client파라미터 / 쿼리 스트링/todo/listTodo 목록 처리Server?page=1/todo/read/1111번 Todo 조회Server?page=1/todo/new신규 Todo 등록Client /todo/edit/1313번 수정/삭제Client?page=1 2. Page Component and fetch( )Page 컴포넌트에서 fetch( )를 이용해서 비동기 처리 구현이 경우 page는 async / await 를 활용 가능fetch( )가 적용되면 동적으로 처리되는 경로가 됨 3. page컴포넌트와 params/searchParamspage컴포넌트에 전달되는 특별한 propsparams: 동적 경로 처리시 변수 처리searchPa..

이번 포스팅에는 백엔드 서버를 구축하고 실행해보는 시간을 가질 것이다. Spring Boot는 Spring Framework를 기반으로 한 애플리케이션 개발을 쉽게 만들어주는 프레임워크입니다.설정과 배포 과정을 단순화하여 빠르게 독립 실행 가능한 Spring 애플리케이션을 만들 수 있게 해줍니다. 🚀1. Spring Boot란?Spring Boot = Spring Framework + 자동 설정 + 내장 서버(일반적으로 Tomcat) + 편리한 배포기존 Spring 개발의 복잡한 설정(XML, 여러 설정 파일 등)을 최소화하고,"관례보다 설정보다 우선(Convention over Configuration)" 원칙을 적용하여개발자가 비즈니스 로직에만 집중할 수 있도록 도와줍니다.2. 주요 특징특징설명자..

Next.js + Spring Boot 풀스택 토이 프로젝트“인프런의 Next.js 15: Full-Stack Development 강의를 토대로 작성 및 프로젝트 진행하였습니다.”프로젝트 개요이번 토이 프로젝트는 Next.js + Spring Boot를 활용한 간단한 풀스택 앱을 만드는 것을 목표로 합니다.주요 목표는 다음과 같습니다.프론트엔드: Next.js + TypeScript백엔드: Spring Boot REST API프론트 ↔ 백엔드 통신 연습Todo 게시판, 쇼핑몰, 인증, 장바구니, 페이징 등 기능 구현기타 재미있는 기능 구현 및 디자인 다듬기프로젝트 진행 순서✅ 프로젝트 세팅✅ Todo 게시판 만들기✅ 쇼핑몰 상품 기능 만들기✅ NextAuth 인증✅ 상태관리로 장바구니 기능 구현✅ 추가..