케이스
앱을 만들며 해결한 문제와 새로 배운 내용을 정리합니다.기술의 동작 원리와 적용 방법, 그 방식을 선택한 이유를 함께 살펴봅니다.
- 2026-09인증
액세스 토큰과 리프레시 토큰은 어떻게 이어지나짧은 토큰과 긴 토큰을 나누는 이유, 만료된 토큰이 되살아나지 않는다는 것, 그리고 리프레시 토큰을 프론트엔드가 아예 만지지 못하게 두는 구성을 정리했다.jwtauthenticationtoken - 2026-09백엔드
게시판 API 서버를 아홉 단계로 만들면서 정한 것들도메인 정의부터 배포까지 순서대로 밟으면서 스택을 하나씩 들였다. 각 도구가 어느 문제를 맡았는지, 그 선택이 무엇을 포기한 것인지 정리했다.expresspostgresqlprisma - 2026-09아키텍처
FSD의 API 코드를 DDD 계층으로 나눈 이유API 호출 코드를 entities와 features 중 어디에 둘지 의견이 갈렸다. FSD의 UI 구조를 유지하면서 API 호출과 데이터 변환을 역할별로 분리했다.architecturefsdddd - 2026-09디자인 시스템
Aster 랜딩 리뉴얼의 스타일 분석과 UI 구현브라우저에서 참고 사이트의 색상과 글꼴 값을 읽어 적용했다. 브랜드 색상 대비를 조정하고 스크롤에 반응하는 헤더와 제목 바를 구현했다.design-tokenscsstailwind - 2026-09자동화
워드프레스 로컬 설치를 스크립트로 자동화하기반복하던 설치와 초기 설정을 Claude Code와 함께 스크립트로 옮겼다. 비밀번호 인증, 압축 해제, 404 오류를 해결한 과정도 기록했다.wordpressautomationscaffolding - 2026-08자동화
한국어 블로그의 줄바꿈과 글꼴 간격 조정하기참고 사이트 네 곳의 값을 확인해 본문 폭과 행간, 자간을 정했다. 워드프레스 자식 테마에 적용한 과정과 남은 확인 사항을 기록했다.wordpresscsstypography - 2026-07프론트엔드
자바스크립트 번들을 청크로 나누는 이유빌드 도구가 코드를 나누는 기준과 지연 로딩의 효과를 정리했다. 청크 크기와 요청 수의 관계, 배포 후 로딩 오류도 다룬다.frontendnext-jscode-splitting - 2026-07전송·캐시
CDN 캐시 때문에 이전 이미지가 보이는 이유CDN이 파일을 저장하고 응답하는 과정을 살펴본다. 캐시 유효 기간과 URL 변경, 응답 헤더로 갱신 상태를 확인하는 방법을 정리했다.cdncachingperformance - 2026-07디자인 시스템
디자인 토큰으로 화면의 색상 값을 일관되게 관리하기원시 토큰과 시맨틱 토큰을 구분하고 디자인 값을 코드에 반영하는 흐름을 정리했다. 다크 모드 적용과 문서·코드의 불일치도 다룬다.design-tokensdesign-systemcss - 2026-07디버깅
Network 탭으로 로그인 요청 오류 확인하기요청 목록과 상태 코드를 확인한 뒤 Headers와 Payload를 읽는다. 로그인 요청을 예로 들어 인증 정보와 전송 데이터를 찾는 순서를 설명한다.devtoolshttpfrontend - 2026-07도구
ESLint로 계층 간 import 규칙 검사하기문서에만 있던 의존성 규칙을 ESLint 설정으로 옮겼다. Flat Config에서 폴더별 규칙을 적용하고 에디터와 CI에서 위반을 확인한다.eslintprettierlint - 2026-07인증
JWT의 구조와 서명 검증 원리Header·Payload·Signature의 역할을 구분한다. 내용이 공개돼도 변조를 확인할 수 있는 이유와 토큰에 담지 말아야 할 정보를 정리했다.jwtauthenticationtoken - 2026-07인증
카카오 로그인으로 이해하는 OAuth 인증 흐름로그인 버튼을 누른 뒤 인가 코드와 토큰을 받기까지의 과정을 따라간다. 인증과 인가의 차이, state와 PKCE의 역할도 살펴본다.oauth2authenticationpkce - 2026-07아키텍처
미들웨어와 프록시의 역할과 차이요청을 처리하는 미들웨어와 다른 서버로 전달하는 프록시를 구분한다. 로그인 확인, redirect·rewrite, API 요청을 예로 들어 설명한다.middlewareproxynext-js - 2026-07모노레포
Turborepo와 Changesets로 빌드·릴리스 자동화하기모노레포의 빌드 캐시를 설정하고 패키지 버전을 관리한다. Changesets 파일부터 릴리스 PR, 앱과 패키지 배포까지 연결했다.monorepoturborepochangesets - 2026-07모노레포
모노레포에서 pnpm과 Turborepo가 맡는 역할패키지 연결과 태스크 실행을 구분해 각 도구의 역할을 설명한다. 여러 저장소를 합칠 때의 이점과 관리 비용도 비교한다.monorepoturborepobuild-cache - 2026-07모노레포
pnpm workspaces로 모노레포 시작하기빈 폴더에서 워크스페이스를 설정하고 앱과 공용 패키지를 연결한다. 의존성 설치, 심볼릭 링크, 패키지별 명령 실행을 순서대로 살펴본다.monorepoturborepochangesets - 2026-07스토리지
Presigned URL로 비공개 파일 업로드·다운로드하기서버가 서명한 URL로 스토리지에 직접 접근하는 원리를 설명한다. 허용할 동작과 만료 시간, 업로드 조건을 정할 때의 주의점도 다룬다.presigned-urlstoragesecurity - 2026-07자동화
컴포넌트 파일 생성을 스캐폴딩으로 자동화하기반복해서 복사하던 컴포넌트·테스트·내보내기 파일을 템플릿으로 만든다. 생성 도구의 역할과 자동화가 유용한 범위를 정리했다.scaffoldingcode-generationautomation - 2026-07인증
쿠키와 세션으로 로그인 상태를 유지하는 원리로그인부터 로그아웃까지 브라우저와 서버가 주고받는 값을 살펴본다. 세션 저장소의 역할과 쿠키 보안 속성도 정리했다.authenticationsessioncookie - 2026-07모노레포
Turborepo 원격 캐시를 로컬과 CI에서 공유하기로컬 빌드 결과를 원격 캐시에 저장해 CI에서도 재사용한다. 서버 연결, 접근 권한, 환경 차이로 캐시가 빗나가는 경우를 다룬다.turborepobuild-cachemonorepo - 2026-04인증
쿠키 인증에 CSRF 토큰이 필요한 이유브라우저의 쿠키 자동 첨부가 CSRF 공격에 이용되는 과정을 설명한다. 토큰을 전달하는 방법과 SameSite 설정을 함께 살펴본다.csrfauthenticationsecurity