반응형 NextJS14 사이드 프로젝트 도전기 (Day 7) - 배포 완료 🚀 사이드 프로젝트 도전기 (Day 7) - 배포 완료 🚀드디어 7일간의 여정을 마치고 배포까지 완료했습니다!오늘만 5시간을 배포 작업에 쏟아부었는데요, 쉽지 않았지만 그만큼 보람도 컸습니다.⚡ 첫 번째 난관: Next.js 빌드 실패처음엔 프론트엔드 빌드가 계속 실패했습니다.원인은 목업 데이터와 console.log 때문이었는데요, 에이전트(코파일럿)에게 맡겼지만 해결이 잘 안 되더군요.결국 직접 페이지 하나하나 열어 수작업으로 정리했습니다.작은 작업이었지만, 바이브코딩만 믿다 보면 오히려 불편할 수도 있겠다는 걸 느꼈습니다.🚀 두 번째 난관: Vercel 배포Vercel 배포 과정에서 수많은 에러가 터졌습니다.다행히 에이전트가 오류 로그를 빠르게 캐치하고 해결책을 제시해주었고,저는 그 과정을 지켜보며.. 2025. 9. 8. 40대가 되기 전에 시작한, 나만의 무기 만들기 30대 후반 개발자의 불안, 그리고 새로운 시작구글 제미나이와 상담하며 현실적인 고민에 대한 해답을 얻고 있습니다. 금요일에 방향을 잡았지만, 이것이 정말 옳은 길인지 계속 고민하는 것은 어쩌면 당연한 일입니다. 개발자 커뮤니티에서 저와 비슷한 고민을 하는 분들을 보며, 제가 겪는 불안이 직장인이라면 누구나 느끼는 평범한 고민임을 깨달았습니다. 저와 비슷한 시기에 신입이였던 사람들이 지금은 높은 곳에 올라가 있는 모습을 보며, 저는 그동안 회사에서 주는 월급에만 안주하며 살았던 건 아닌지 돌아보게 됩니다. 늘 마음속에 불안을 품고 있었고, 언젠가 이직할 수 있는 능력을 갖춰야 한다고 생각하고 공부해 왔지만, 막상 40에 가까운 나이에 가정을 꾸린 상황에서 이직은 두려운 도전이었습니다. 결국 이직을 성공하.. 2025. 8. 30. 한 입 크기로 잘라먹는 Next.js(v15) 강의 후기 Next.js 학습의 시작: 실제 데이터 연동의 즐거움Next.js 학습의 필요성을 느껴 고민하던 중 이 강의를 선택했습니다. 결론부터 말하자면, 정말 돈이 아깝지 않은 훌륭한 강의였어요. 약 15시간의 강의 분량이었는데, 몰입해서 듣다 보니 10일 만에 완강할 수 있었습니다.최신 버전으로 배우는 Next.js (v15)의 핵심제가 강의를 들었던 시점(2025년 8월)에 Next.js v15와 Node.js의 최신 버전을 사용했는데, 버전 충돌이나 에러 없이 모든 기능이 완벽하게 동작했습니다. 강의에서 제공하는 모든 실습 코드가 최신 환경에 맞춰져 있어서 불필요한 오류 해결에 시간을 낭비하지 않고 오롯이 학습에 집중할 수 있었어요.이론을 넘어선 실질적인 경험: 백엔드와 API 통신이 강의의 가장 큰 장점.. 2025. 8. 28. 11차 강의 노트 (이미지 최적화, 배포) 이미지 최적화개념Next.js는 자체적으로 이미지 최적화 기능을 제공하며, 컴포넌트를 통해 자동으로 최적화를 처리합니다.기본 사용법import Image from 'next/image'외부 이미지 사용 설정외부 도메인의 이미지를 사용할 때는 next.config.js에서 허용 도메인을 설정해야 합니다:import type { NextConfig } from "next";const nextConfig: NextConfig = { logging: { fetches: { fullUrl: true, } }, images: { domains: [ 'shopping-phinf.pstatic.net', 'example.com' // 추가 도메인 ] }};ex.. 2025. 8. 28. 10차 강의 노트(고급 라우팅 패턴) Next.js 패럴렐 라우트 & 인터셉팅 라우트패럴렐 라우트 (Parallel Routes)개념여러 페이지나 컴포넌트를 하나의 화면에서 동시에 렌더링하는 기능입니다. 사이드바와 메인 콘텐츠를 함께 보여주는 것처럼 프레임워크와 유사한 역할을 합니다.주요 특징슬롯 시스템: @sidebar, @feed 같은 형태로 슬롯을 정의자동 Props 전달: 각 슬롯의 page 컴포넌트가 부모 레이아웃에 자동으로 props로 전달됨병렬 렌더링: 부모 레이아웃에서 여러 슬롯을 동시에 렌더링 가능URL 독립성: 슬롯(@~~)은 URL 경로에 영향을 주지 않음무제한 슬롯: 필요한 만큼 슬롯 생성 가능중첩 구조: 슬롯 하위에 추가 폴더 구조 생성 가능사용 예시app/├── layout.tsx // 부모 레이아웃.. 2025. 8. 28. 9차 강의 노트 (서버 액션) 서버 액션(Server Actions)이란?브라우저(클라이언트)에서 호출할 수 있는 서버에서 실행되는 비동기 함수별도 API 라우트 생성 없이 서버 측 로직을 직접 처리'use server' 지시어로 서버 전용 함수임을 명시핵심 특징'use server' 지시어 사용함수나 파일 상단에 선언하여 서버에서만 실행되도록 지정별도 API 라우트 불필요기존: 컴포넌트 → API 라우트 → 서버 로직서버 액션: 컴포넌트 → 서버 액션 (직접 호출)서버 전용 작업 가능데이터베이스 접근, 파일 시스템 조작, 환경 변수 사용 등기본 사용법function ReviewEditor() { async function createReviewAction(formData) { // ✅ formData 매개변수 추가 'use .. 2025. 8. 28. 이전 1 2 3 다음 반응형