게으른개발너D

좋은 프롬프트의 3가지 조건1. 명확성모호한 표현을 피하고 원하는 결과를 구체적으로 전달ex) 멋진 홈페이지 만들어줘. (x)시계와 날씨가 포함된 todo 리스트 홈페이지 만들어줘.(o) 2. 구체성필요한 기능이나 조건을 세부적으로 지시ex) 상단에 시계와 검색창, 서울 날씨, IT 기술 뉴스 3. 맥락 제공왜 필요한지, 어떤 상황에서 활용되는 지 설명ex) 취업용 포트폴리오, 취업 담당자가 볼 예정 프롬프트는 5W1H라는 프레임워크로 만들면 더욱 명확해진다Why 왜 만드는가?Who 누가를 위한 것인가?What 무엇을 만들 것인가?When 언제 사용되는가?Where 어디서 사용되는가? (사용 환경과 플랫폼)How 어떻게 만들 것인가? (구현 방식과 기술) 이렇게 5W1H 프레임워크에 맞추면 그게 PR..

Step8. 브라우저 동작 확인 지금까지 만든 전체 플로우를 실제로 검증할 것이다.코드가 빌드되는 것과 실제로 동작하는 건 다르기 때문! npm run dev 서버 정상 기동되면 http://localhost:3000 을 브라우저에서 열어서 아래 순서로 테스트해준다. 페이지 진입시 /login 페이지로 진입한다. 테스트 시나리오 시나리오 1 — Protected Route 차단 확인http://localhost:3000/home 직접 접근예상: 스피너가 잠깐 보이다가 /login으로 리다이렉트 시나리오 2 — 로그인 유효성 검사 확인http://localhost:3000/login 접근빈 폼으로 Submit예상: "이메일을 입력해주세요.", "비밀번호를 입력해주세요." 인라인 에러 표시이메일에 a..

Step7. Protected Route + useAuthMe 이 단계가 인증 아키텍처에서 가장 복잡한 부분이다. 두 가지 문제를 동시에 해결해야 한다. 문제 1: 새로고침하면 access token(메모리)이 날아간다. 로그인 상태인데 로그인 페이지로 튕기면 UX가 망가진다.문제 2: 비인증 사용자가 /home에 직접 접근하면 막아야 한다. 해결 전략(dashboard)/layout.tsx └── 마운트 시 GET /auth/me 호출 ├── 성공 → access token 복구 + 사용자 정보 Zustand에 저장 → 페이지 렌더 ├── 401 → refresh token으로 재발급 시도 (axios interceptor가 자동 처리) │ ├── 재발급..

Auth Project - Step0. 폴더 구조 설계이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으며 공부 또한 안했음..나중엔lazyhysong.tistory.com Auth Project - Step1. 프로젝트 초기 세팅Auth Project 1 - 폴더 구조 설계이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으lazyhysong.tistory.com Auth Project - Step2. Axios 인스턴스 + Interceptor 설계Auth Pro..

Auth Project - Step0. 폴더 구조 설계이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으며 공부 또한 안했음..나중엔lazyhysong.tistory.com Auth Project - Step1. 프로젝트 초기 세팅Auth Project 1 - 폴더 구조 설계이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으lazyhysong.tistory.com Auth Project - Step2. Axios 인스턴스 + Interceptor 설계Auth Pro..

Auth Project - Step0. 폴더 구조 설계이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으며 공부 또한 안했음..나중엔lazyhysong.tistory.com Auth Project - Step1. 프로젝트 초기 세팅Auth Project 1 - 폴더 구조 설계이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으lazyhysong.tistory.com Auth Project - Step2. Axios 인스턴스 + Interceptor 설계Auth Pro..

Auth Project - Step0. 폴더 구조 설계이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으며 공부 또한 안했음..나중엔lazyhysong.tistory.com Auth Project - Step1. 프로젝트 초기 세팅Auth Project 1 - 폴더 구조 설계이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으lazyhysong.tistory.com Auth Project - Step2. Axios 인스턴스 + Interceptor 설계Auth Pro..

Auth Project - Step0. 폴더 구조 설계이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으며 공부 또한 안했음..나중엔lazyhysong.tistory.com Auth Project - Step1. 프로젝트 초기 세팅Auth Project 1 - 폴더 구조 설계이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으lazyhysong.tistory.com Step2. Axios 인스턴스 + Interceptor 설계 이 단계가 전체 인증 아키텍처의 핵심이다..

Auth Project - Step0. 폴더 구조 설계이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으며 공부 또한 안했음..나중엔lazyhysong.tistory.com Step1. 프로젝트 초기 세팅 next.js 앱 생성왜 create-next-app을 쓰는가?! 직접 세팅 vs CNA(create-next-app)직접 세팅하면 webpack, babel/swc, tsconfig, eslint 설정을 전부 손으로 잡아야 한다.CNA는 Next.js 팀이 관리하는 검증된 기본값을 그대로 줘서 초기 세팅에 시간 낭비할 필요 없다.나중에 필요한 것만 오버라이드하면 된다. npx c..

이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으며 공부 또한 안했음..나중엔 AI로 대체될 운명이지만 지금은 AI한테 일을 시키더라도 뭐가 뭔지는 알아야될 것 같다는 생각이 들었음기업에서 사용하는 라이브러리, 기술 등을 총 집합해서 아주 빠르게 단기간에 기술을 익힐 수 있도록 코스를 짰고 차근차근 기록해 나갈 예정이다. api는 mock 데이터로 구성할 예정이다.api를 사용하면서 대부분의 프로젝트에 들어가는 기능은 로그인이라고 생각해서 Auth를 다루는 작은 프로젝트를 만들 예정 요구환경Node.js v24.15.0 (v18 이상) 기술 스택Next.js / TypeScrip..