Blog | projectmiluju

$ grep -r " " blog/

# category:

# series:

# tags:

🌐 매일메일 프론트엔드 8 posts

▶ 매일메일 프론트엔드/ 2025-04-15

자바스크립트 배열

category : [CS Notes]

매일메일CS

#JavaScript#Frontend

▶ 매일메일 프론트엔드/ 2025-04-14

자바스크립트 호이스팅

category : [CS Notes]

매일메일CS

#JavaScript#Frontend

▶ 매일메일 프론트엔드/ 2025-04-03

React의 props와 state는 무엇일까?

category : [CS Notes]

매일메일CS

#React#Frontend

▶ 매일메일 프론트엔드/ 2025-04-02

이벤트 루프란?

category : [CS Notes]

매일메일CS

#JavaScript#Frontend

▶ 매일메일 프론트엔드/ 2025-04-01

tanstack-query에서 stale time과 gc time의 차이점은?

category : [CS Notes]

매일메일CS

#React#Tanstack Query#Frontend

▶ 매일메일 프론트엔드/ 2025-03-31

실행 컨텍스트란?

category : [CS Notes]

매일메일CS

#JavaScript#Frontend

▶ 매일메일 프론트엔드/ 2025-03-28

reflow와 repaint의 차이점은?

category : [CS Notes]

매일메일CS

#Browser#Frontend#Performance

▶ 매일메일 프론트엔드/ 2025-03-27

클로저란?

category : [CS Notes]

매일메일CS

#JavaScript#Frontend

⚙️ 매일메일 백엔드 15 posts

▶ 매일메일 백엔드/ 2025-05-01

CORS란 무엇인가

category : [CS Notes]

매일메일CS

#Web#CORS#Backend

▶ 매일메일 백엔드/ 2025-04-29

데이터베이스 시스템에서 동시성을 제어하는 방법

category : [CS Notes]

매일메일CS

#Database#Concurrency#Backend

▶ 매일메일 백엔드/ 2025-04-18

동기와 비동기의 차이점은 무엇인가?

category : [CS Notes]

매일메일CS

#Backend#Concurrency

▶ 매일메일 백엔드/ 2025-04-15

@Component, @Controller, @Service, @Repository의 차이점

category : [CS Notes]

매일메일CS

#Spring#Backend

▶ 매일메일 백엔드/ 2025-04-14

동일성과 동등성

category : [CS Notes]

매일메일CS

▶ 매일메일 백엔드/ 2025-04-10

JPA ID 생성전략

category : [CS Notes]

매일메일CS

#Spring#JPA#Backend

▶ 매일메일 백엔드/ 2025-04-08

얕은 복사와 깊은 복사

category : [CS Notes]

매일메일CS

▶ 매일메일 백엔드/ 2025-04-07

트랜잭션 격리 수준

category : [CS Notes]

매일메일CS

#Database#Transaction#Backend

▶ 매일메일 백엔드/ 2025-04-04

데이터베이스 인덱스

category : [CS Notes]

매일메일CS

#Database#Index#MySQL

▶ 매일메일 백엔드/ 2025-04-03

일급 컬렉션이란?

category : [CS Notes]

매일메일CS

#Java#Design Pattern#Backend

▶ 매일메일 백엔드/ 2025-04-02

Java에서 Checked Exception과 Unchecked Exception이란?

category : [CS Notes]

매일메일CS

#Java#Exception#Backend

▶ 매일메일 백엔드/ 2025-04-01

JPA의 N + 1 문제는 무엇일까?

category : [CS Notes]

매일메일CS

#Spring#JPA#Backend

▶ 매일메일 백엔드/ 2025-03-31

엔티티 매니저란?

category : [CS Notes]

매일메일CS

#Spring#JPA#Backend

▶ 매일메일 백엔드/ 2025-03-28

JPA의 ddl-auto 옵션은 각각 어떤 동작을 하고 어떤 상황에서 사용해야 할까?

category : [CS Notes]

매일메일CS

#Spring#JPA#Backend

▶ 매일메일 백엔드/ 2025-03-27

Spring Data JPA에서 새로운 Entity인지 판단하는 방법은 무엇일까?

category : [CS Notes]

매일메일CS

#Spring#JPA#Backend

⚛️ React 1 posts

▶ React/ 2025-04-14

리액트 테스트 가이드라인

category : [CS Notes]

나만의 가이드라인

#React#Testing#Best Practices

📚 혼자 공부하는 컴퓨터 구조 + 운영체제 10 posts

▶ 혼자 공부하는 컴퓨터 구조 + 운영체제/ 2025-06-25

Chapter15 파일 시스템

category : [Book]

혼자 공부하는 컴퓨터 구조 + 운영체제

#Operating System#CS#File System

▶ 혼자 공부하는 컴퓨터 구조 + 운영체제/ 2025-06-23

Chapter14 가상 메모리

category : [Book]

혼자 공부하는 컴퓨터 구조 + 운영체제

#Operating System#CS#Virtual Memory

▶ 혼자 공부하는 컴퓨터 구조 + 운영체제/ 2025-06-16

Chapter12 프로세스 동기화

category : [Book]

혼자 공부하는 컴퓨터 구조 + 운영체제

#Operating System#CS#Process

▶ 혼자 공부하는 컴퓨터 구조 + 운영체제/ 2025-06-02

Chapter09 운영체제 시작하기

category : [Book]

혼자 공부하는 컴퓨터 구조 + 운영체제

#Operating System#CS#Kernel

▶ 혼자 공부하는 컴퓨터 구조 + 운영체제/ 2025-05-26

Chapter07 보조기억장치

category : [Book]

혼자 공부하는 컴퓨터 구조 + 운영체제

#Computer Architecture#CS#Storage

▶ 혼자 공부하는 컴퓨터 구조 + 운영체제/ 2025-05-17

Chapter06 메모리와 캐시 메모리

category : [Book]

혼자 공부하는 컴퓨터 구조 + 운영체제

#Computer Architecture#CS#Memory

▶ 혼자 공부하는 컴퓨터 구조 + 운영체제/ 2025-04-23

Chapter04 CPU의 작동 원리

category : [Book]

혼자 공부하는 컴퓨터 구조 + 운영체제

#Computer Architecture#CS#CPU

▶ 혼자 공부하는 컴퓨터 구조 + 운영체제/ 2025-04-07

Chapter02 데이터

category : [Book]

혼자 공부하는 컴퓨터 구조 + 운영체제

#Computer Architecture#CS#Data Encoding

▶ 혼자 공부하는 컴퓨터 구조 + 운영체제/ 2025-03-31

Chapter01 컴퓨터 구조 시작하기

category : [Book]

혼자 공부하는 컴퓨터 구조 + 운영체제

#Computer Architecture#CS

▶ 혼자 공부하는 컴퓨터 구조 + 운영체제/ 2025-03-31

혼자 공부하는 컴퓨터 구조 + 운영체제

category : [Book]

CS 스터디

#Computer Architecture#Operating System#CS

▲ Next.js 시작하기 18 posts

▶ Next.js Getting Started/ 2025-11-18

Next.js Route Handlers 정리

category : [CS Notes]

Next.js Docs – Getting Started: **Route Handlers** 페이지를 기반으로, App Router 환경에서의 Route Handler 개념과 사용 방법을 정리한 문서입니다.

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-17

Next.js Upgrading 정리

category : [CS Notes]

Next.js Docs – Getting Started: **Upgrading** 페이지를 기반으로, Next.js 애플리케이션을 최신 버전 또는 canary 버전으로 업그레이드하는 방법을 정리한 문서입니다.

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-16

Next.js Deploying 정리

category : [CS Notes]

Next.js Docs – Getting Started: **Deploying** 페이지를 기반으로, App Router 환경에서 Next.js 애플리케이션 배포 방법을 정리한 문서입니다. citeturn0search2

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-15

Next.js Proxy 정리

category : [CS Notes]

Next.js Docs – Getting Started: **Proxy** 페이지를 기반으로, App Router 환경에서의 Proxy(구 Middleware) 사용 방법을 정리한 문서입니다.

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-14

Next.js Metadata & OG Images 정리

category : [CS Notes]

Next.js Docs – Getting Started: **Metadata and OG images** 페이지를 기반으로, App Router 환경에서의 메타데이터 및 OG(Open Graph) 이미지 설정 방법을 정리한 문서입니다.

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-13

Next.js Font Optimization (Fonts) 정리

category : [CS Notes]

Next.js Docs – Getting Started: **Font Optimization (Fonts)** 페이지를 기반으로, App Router 환경에서의 폰트 사용 및 최적화 방식을 정리한 문서입니다.

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-12

Next.js Image Optimization (Images) 정리

category : [CS Notes]

Next.js Docs – Getting Started: **Images (Image Optimization)** 페이지를 기반으로, App Router 환경에서의 이미지 사용 및 최적화 방식을 정리한 문서입니다.

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-11

Next.js CSS 정리

category : [CS Notes]

Next.js Docs – Getting Started: **CSS** 페이지를 기반으로, App Router 환경에서 스타일을 적용하는 방법을 정리한 문서입니다.

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-10

Next.js Error Handling 정리

category : [CS Notes]

Next.js Docs – Getting Started: **Error Handling** 내용을 기반으로, App Router 환경에서의 에러 처리 방식을 정리한 문서입니다.

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-09

Next.js Caching and Revalidating 정리

category : [CS Notes]

Next.js Docs – Getting Started: **Caching and Revalidating** 내용을 기반으로, App Router 환경에서 캐싱과 재검증(revalidation) 개념 및 관련 API를 정리한 문서입니다.

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-08

Next.js Updating Data 정리

category : [CS Notes]

Next.js Docs – Getting Started: **Updating Data** 내용을 기반으로, App Router 환경에서 데이터를 **변경(mutate)** 하는 방법을 정리한 문서입니다. citeturn2view0

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-07

Next.js Fetching Data 정리

category : [CS Notes]

Next.js Docs – Getting Started: Fetching Data 내용을 기반으로, App Router 환경에서의 데이터 패칭 패턴을 정리한 문서입니다.

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-06

Next.js Cache Components 정리

category : [CS Notes]

Next.js Docs – Getting Started: Cache Components 내용을 바탕으로, App Router 기준의 Cache Components 개념을 정리한 자료입니다.

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-05

Next.js 서버 컴포넌트와 클라이언트 컴포넌트 (Server and Client Components)

category : [CS Notes]

Next.js 공식 문서 **Getting Started: Server and Client Components** 내용을 바탕으로, App Router 기준의 Server / Client Components 개념과 사용 패턴을 정리한 자료입니다.

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-04

Next.js 링크와 내비게이션 (Linking and Navigating)

category : [CS Notes]

Next.js 공식 문서 **Getting Started: Linking and Navigating** 내용을 바탕으로, App Router 기준의 **내비게이션 동작 원리와 튜닝 포인트**를 정리한 자료입니다. citeturn4view0

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-03

Next.js 레이아웃과 페이지 (Layouts and Pages)

category : [CS Notes]

Next.js 공식 문서 **Getting Started: Layouts and Pages** 내용을 바탕으로, App Router 기준의 레이아웃·페이지 개념을 정리한 자료입니다.

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-02

Next.js 프로젝트 구조 (Project Structure and Organization)

category : [CS Notes]

Next.js 공식 문서 **Project structure and organization** 페이지를 기반으로, 폴더·파일 컨벤션과 프로젝트 정리 방법을 요약한 자료입니다.

#Next.js#React#Frontend

▶ Next.js Getting Started/ 2025-11-01

Next.js 설치 (Installation)

category : [CS Notes]

Next.js 공식 문서의 **Installation** 페이지 내용을 번역·요약하여 마크다운 형식으로 정리한 자료입니다.

#Next.js#React#Frontend

📖 Next.js 가이드 43 posts

▶ Next.js Guides/ 2026-01-12

Next.js Vitest 가이드 정리

category : [CS Notes]

**Vitest**는 Next.js에서 빠른 실행 속도의 Unit 테스트 러너로, Vite 생태계를 기반으로 React Testing Library와 함께 효과적으로 사용할 수 있습니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2026-01-11

Next.js Playwright 가이드 정리

category : [CS Notes]

**Playwright**는 Next.js에서 E2E 테스트에 사용할 수 있는 강력한 테스트 프레임워크입니다. 단일 API로 Chromium, Firefox, WebKit을 자동화할 수 있습니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2026-01-09

Next.js Jest 가이드 정리

category : [CS Notes]

**Jest**는 Next.js에서 Unit 테스트와 Snapshot 테스트에 주로 사용되며, React Testing Library와 함께 컴포넌트를 효과적으로 테스트할 수 있습니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2026-01-08

Next.js Cypress 가이드 정리

category : [CS Notes]

**Cypress**는 Next.js에서 E2E 테스트와 Component Testing에 사용할 수 있는 테스트 러너입니다. 실제 브라우저에서 앱을 탐색하는 것처럼 테스트할 수 있습니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2026-01-07

Next.js Tailwind CSS v3 가이드 정리

category : [CS Notes]

**Tailwind CSS v3**는 Next.js(App Router) 프로젝트에 쉽게 통합할 수 있습니다. 유틸리티 클래스를 통해 빠르고 일관된 스타일링이 가능하며, Turbopack에서도 지원됩니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2026-01-06

Next.js Static Exports 가이드 정리

category : [CS Notes]

**Static Export**는 Next.js 앱을 빌드 시점에 HTML/CSS/JS 정적 자산으로 생성하여 정적 호스팅 환경에 배포할 수 있게 합니다. 각 라우트별 HTML 파일을 생성하여 초기 로딩 성능을 개선합니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2026-01-05

Next.js Single Page Applications 가이드 정리

category : [CS Notes]

**SPA(Single-Page Application)**는 Next.js로 완전히 지원됩니다. 프리페칭 기반 빠른 라우트 전환, 클라이언트 사이드 데이터 패칭, 브라우저 API 사용 등 SPA 경험을 유지하면서 서버 기능을 점진적으로 도입할 수 있습니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2026-01-04

Next.js Self-Hosting 가이드 정리

category : [CS Notes]

**Self-Hosting**은 Next.js를 Vercel이 아닌 자체 인프라에 배포하는 방법을 안내합니다. Reverse Proxy, Image Optimization, Environment Variables 등 기능별 고려사항을 다룹니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2026-01-03

Next.js Scripts 가이드 정리

category : [CS Notes]

**Scripts**는 서드파티 스크립트 로딩 전략을 최적화하여 성능을 향상시킬 수 있습니다. Next.js는 next/script 컴포넌트를 통해 로딩 우선순위와 시점을 제어합니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2026-01-02

Next.js Sass 가이드 정리

category : [CS Notes]

**Sass**는 CSS의 확장 문법으로, 변수, 중첩, 믹스인 등의 기능을 제공합니다. Next.js는 Sass를 기본 지원하므로 설치 후 바로 사용할 수 있습니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-23

Next.js Redirecting 가이드 정리

category : [CS Notes]

**Redirect**는 사용자를 다른 URL로 보내는 동작입니다. 대표적인 사용 사례는 다음과 같습니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-22

Next.js Progressive Web Apps(PWA) 가이드 정리

category : [CS Notes]

**PWA(Progressive Web Application)**는 웹의 배포 편의성과 네이티브 앱의 사용자 경험(설치, 푸시 등)을 결합한 형태입니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-21

Next.js Production Checklist 가이드 정리

category : [CS Notes]

Next.js 앱을 프로덕션에 올리기 전에는 **성능, UX, 보안, SEO, 타입 안정성**을 위한 점검이 필요합니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-20

Next.js Prefetching 가이드 정리

category : [CS Notes]

**Prefetching**은 사용자가 실제로 이동하기 전에 필요한 리소스를 미리 가져와서,

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-19

Next.js Package Bundling 가이드 정리

category : [CS Notes]

**Bundling**은 앱 코드와 의존성(패키지)을 묶어 **클라이언트/서버가 실행하기 좋은 형태의 산출물**로 만드는 과정입니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-18

Next.js OpenTelemetry 가이드 정리

category : [CS Notes]

**OpenTelemetry(OTel)**은 로그/메트릭/트레이스(분산 추적)를 위한 **벤더 중립(플랫폼 불문) 표준**입니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-17

Next.js Multi-zones 가이드 정리

category : [CS Notes]

**Multi-zones**는 하나의 도메인(`example.com`) 아래에서, 서로 다른 **여러 애플리케이션(Zone)** 이 각자 특정 경로를 담당하도록 분리하는 **마이크로 프론트엔드** 접근 방식입니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-16

Next.js Multi-tenant 가이드 정리

category : [CS Notes]

Next.js로 **멀티테넌트(Multi-tenant)** 앱을 만들 때, Next.js 공식 문서는 “추천 아키텍처 예제”를 안내합니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-15

Next.js로 마이그레이션: Vite 가이드 정리

category : [CS Notes]

이 문서는 기존 **Vite(React)** 프로젝트를 **Next.js(App Router)**로 옮기는 공식 절차를,

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-14

Next.js로 마이그레이션: Create React App(CRA) 가이드 정리

category : [CS Notes]

이 문서는 기존 **Create React App(CRA)** 프로젝트를 **Next.js(App Router)**로 옮길 때의 공식 절차를,

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-13

Next.js App Router Migration 가이드 정리

category : [CS Notes]

**App Router**는 Next.js의 최신 라우팅/렌더링 아키텍처입니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-12

Next.js Memory Usage 가이드 정리

category : [CS Notes]

Next.js 프로젝트는 **개발 서버(`next dev`)**와 **빌드(`next build`)** 과정에서 상황에 따라 메모리(특히 Node.js heap)를 많이 사용할 수 있습니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-11

Next.js App Router Guide: MDX (Markdown + JSX)

category : [CS Notes]

- Markdown: 텍스트를 쉽게 HTML로 구조화하는 경량 마크업

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-10

Next.js App Router Guide: MCP (Next.js MCP Server)

category : [CS Notes]

**Model Context Protocol (MCP)** 는 AI 에이전트/코딩 어시스턴트가 애플리케이션과 상호작용하기 위한 **표준 인터페이스(오픈 표준)** 입니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-09

Next.js App Router Guide: Local Development (Dev 환경 최적화)

category : [CS Notes]

- `next dev`: **필요한 라우트만** 열거나 이동할 때 컴파일 (빠른 시작 / 메모리 절약)

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-08

Next.js App Router Guide: Lazy Loading

category : [CS Notes]

Lazy loading은 **초기 로딩 성능**을 위해 특정 라우트에서 필요한 JavaScript 양을 줄이고, **Client Component / 라이브러리를 “필요할 때” 로드**하도록 돕습니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-07

Next.js App Router Guide: JSON-LD (Structured Data)

category : [CS Notes]

JSON-LD는 검색엔진(SEO)과 AI가 페이지의 “의미(구조화된 정보)”를 이해하도록 돕는 **구조화 데이터 포맷**입니다. 제품(Product), 사람(Person), 이벤트(Event) 등 다양한 엔티티를 설명할 수 있어요.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-06

Next.js Internationalization 가이드 정리 (App Router)

category : [CS Notes]

Next.js는 **여러 언어/지역(locale)** 을 지원하기 위해, 라우팅과 렌더링을 구성할 수 있게 해줍니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-05

Next.js Instrumentation 가이드 정리 (App Router)

category : [CS Notes]

**Instrumentation**은 애플리케이션에 **모니터링/로깅 도구를 심는(instrument)** 작업입니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-04

Next.js Incremental Static Regeneration (ISR) 가이드 정리 (App Router)

category : [CS Notes]

**Incremental Static Regeneration (ISR)** 은 “정적 페이지(SSG)의 장점”을 유지하면서,

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-03

Next.js Forms 가이드 정리 (App Router)

category : [CS Notes]

**Forms(폼)** 가이드는 Next.js(App Router)에서 **React Server Actions(= Server Functions)** 로 폼 제출을 처리하는 방법을 설명합니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-02

Next.js Environment Variables 가이드 정리

category : [CS Notes]

Next.js는 환경 변수(Environment Variables)를 기본적으로 지원합니다. 이를 통해 다음과 같은 작업을 할 수 있습니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-12-01

Next.js Draft Mode 가이드 정리

category : [CS Notes]

**Draft Mode**는 Headless CMS에서 아직 발행되지 않은 콘텐츠(초안)를 Next.js 애플리케이션에서 미리보기 할 수 있도록 도와주는 기능입니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-11-30

Next.js Debugging 가이드 정리

category : [CS Notes]

Next.js 디버깅 가이드는 다음 내용을 다룹니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-11-29

Next.js Data Security 가이드 정리

category : [CS Notes]

- React Server Components(RSC)는 성능과 데이터 패칭 구조를 단순화하지만, **데이터를 어디서/어떻게 접근하는지가 기존 프런트엔드 앱과 달라지기 때문에 보안 관점에서의 사고방식도 바뀌어야 한다.**

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-11-28

Next.js Custom Server 가이드 정리

category : [CS Notes]

- Next.js는 기본적으로 `next start` 명령을 사용하면 자체 내장 서버를 함께 실행한다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-11-26

Next.js App Router 가이드 정리: CSS-in-JS

category : [CS Notes]

- 이 문서는 **Next.js App Router(`app` 디렉터리)** 환경에서 **CSS-in-JS 라이브러리**를 사용하는 방법을 설명한다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-11-25

Next.js App Router 가이드 정리: Content Security Policy (CSP)

category : [CS Notes]

- **CSP(Content Security Policy)** 는 XSS, 클릭재킹(clickjacking), 기타 코드 인젝션 공격으로부터 애플리케이션을 보호하기 위한 보안 메커니즘이다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-11-24

Next.js 가이드 정리: CI Build Caching

category : [CS Notes]

Next.js는 빌드 속도를 향상하기 위해 `.next/cache` 디렉터리에 **빌드 캐시**를 저장합니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-11-23

Next.js 가이드 정리: Caching in Next.js

category : [CS Notes]

Next.js는 **렌더링 결과와 데이터 요청을 적극적으로 캐싱**하여 성능을 높이고 비용을 줄입니다. 이 문서는 Next.js의 캐싱 메커니즘과 관련 API, 그리고 서로가 어떻게 상호작용하는지를 설명합니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-11-22

Next.js 가이드 정리: Backend for Frontend (BFF)

category : [CS Notes]

Backend for Frontend(BFF) 패턴은 **프론트엔드 바로 뒤에 붙어 있는 얇은 백엔드 레이어**를 두어, 다음과 같은 역할을 수행하는 방식입니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-11-21

Next.js Analytics 정리

category : [CS Notes]

Next.js Docs – App Router Guides: **Analytics** 페이지를 기반으로, Next.js 애플리케이션에 성능 분석 및 웹 바이탈(Web Vitals) 분석을 추가하는 방법을 정리한 문서입니다.

#Next.js#React#Frontend

▶ Next.js Guides/ 2025-11-21

Next.js Authentication 가이드 정리 (App Router 기준)

category : [CS Notes]

> 원문: [How to implement authentication in Next.js](https://nextjs.org/docs/app/guides/authentication)

#Next.js#React#Frontend

📚 Today I Learned 3 posts

▶ Today I Learned/ 2026-03-20

Java 개발자를 위한 Kotlin 문법 퀵스타트

category : [TIL]

Spring Boot 개발을 빠르게 시작하려는 Java 개발자 기준으로 Kotlin의 변수, 함수, null 안전, 컬렉션, 코루틴, 그리고 Spring에서 자주 쓰는 패턴만 압축해서 정리했다.

#Kotlin#Java#Spring Boot

▶ Today I Learned/ 2026-01-25

AWS Lambda + EventBridge Scheduler로 Discord 회의 알리미 봇 만들기 (/meeting end 완성)

category : [TIL]

슬래시 명령어로 회의를 등록하면 즉시 공지와 30분 전 리마인더가 자동으로 나가는 Discord 회의 알리미를 AWS Lambda + EventBridge Scheduler로 구성했다.

#AWS#Lambda#EventBridge Scheduler

▶ Today I Learned/ 2025-12-27

더헤르츠 브랜드 사이트 프론트엔드 개발기: 원페이지 인터랙션과 사업 소개 구조를 함께 설계하기

category : [TIL]

Next.js App Router 기반 더헤르츠 브랜드 사이트 프론트엔드를 구현하며, 세로형 원페이지 랜딩, 사업별 소개 페이지, 스크롤 복원과 랜딩 제어 같은 UX 흐름을 어떻게 설계했는지 정리했다.

#Next.js#React#TypeScript

🛠️ Grovarc 개발기 6 posts

▶ Grovarc 개발기/ 2026-04-03

Grovarc 개발기 #5 — Phase 3 완료: 성장 코칭 Agent + Phase 4 Fine-tuning 데이터셋 준비

category : [TIL]

LangGraph 성장 코칭 Agent(DuckDuckGo 웹 검색 연동)로 Phase 3를 마무리하고, Fine-tuning용 학습 데이터 파이프라인(실제 DB 추출 + Claude Haiku 합성 생성)으로 Phase 4를 시작했다.

#Grovarc#LangGraph#DuckDuckGo

▶ Grovarc 개발기/ 2026-04-03

Grovarc 개발기 #06 — Next.js 16 업그레이드 + MCP 서버 구현

category : [TIL]

Next.js 14→16 마이그레이션 삽질기와 TypeScript MCP 서버로 AI CLI 4종 연동한 과정

#Next.js#MCP#TypeScript

▶ Grovarc 개발기/ 2026-03-25

Grovarc 개발기 #4 — Phase 2 백엔드 코어: Kotlin Spring Boot API 전체 구현

category : [TIL]

Gradle 세팅부터 JWT 인증, 작업 로그 CRUD, 태그, 회고, 대시보드(스트릭+Redis 캐싱)까지. Phase 2 백엔드 이슈 6개를 하루에 완료했다.

#Grovarc#Kotlin#SpringBoot

▶ Grovarc 개발기/ 2026-03-23

Grovarc 개발기 #3 — Phase 1 인프라 전체 세팅

category : [TIL]

Dockerfile, docker-compose, GitHub Actions, Terraform, k8s, Prometheus+Grafana까지. 코드가 한 줄도 없는 서비스의 인프라를 하루에 다 잡았다.

#Grovarc#인프라#Docker

▶ Grovarc 개발기/ 2026-03-20

Grovarc 개발기 #2 — 설계 산출물 완성 & GitHub 프로젝트 세팅

category : [TIL]

코드보다 설계가 먼저다. 유저 플로우, DB 스키마, API 명세를 작성하고, GitHub Projects로 에픽-태스크 계층 구조를 만들었다.

#Grovarc#설계#GitHub

▶ Grovarc 개발기/ 2026-03-14

Grovarc 개발기 #1 — Claude와 함께 PRD를 작성했다

category : [TIL]

코드 한 줄 없이 시작한 첫 날. Claude와 대화하며 PRD를 작성하고, 레포 구조를 세팅했다.

#Grovarc#PRD#기획

🎨 CastCanvas Lab 개발기 10 posts

▶ CastCanvas Lab 개발기/ 2026-03-28

CastCanvas Lab: 사이트 전면 리뉴얼 및 브랜드 디자인 시스템 통합

category : [TIL]

Google Stitch MCP를 활용한 사이트 전면 리뉴얼과 한/영 다국어 지원, 그리고 FE 앱의 브랜드 아이덴티티 정렬 및 모바일 UX 개선을 진행했다.

#Next.js#Stitch#i18n

▶ CastCanvas Lab 개발기/ 2026-03-25

CastCanvas Lab: Redis 기반 인증 보안 강화와 워크스페이스 CRUD 구현

category : [TIL]

리프레시 토큰의 Redis 저장소 도입으로 인증 보안을 강화하고, 워크스페이스 생성·수정·삭제 API 및 프론트엔드 라우트 가드를 구현하여 기초적인 사용자 서비스 환경을 구축했다.

#Redis#Spring Boot#JWT

▶ CastCanvas Lab 개발기/ 2026-03-17

CastCanvas Lab: GitHub Projects 로드맵과 이슈 계층 구조 정리

category : [TIL]

여러 레포에 흩어진 이슈를 하나의 GitHub Project로 모으고, 에픽-하위 이슈 구조와 상태값, 날짜 필드를 정리해 실제로 쓸 수 있는 로드맵 운영 구조를 만들었다.

#GitHub Projects#Roadmap#Issue Management

▶ CastCanvas Lab 개발기/ 2026-03-17

CastCanvas Lab: JWT 인증 기초와 캔버스 노트 UX 개선

category : [TIL]

Spring Security와 JWT를 연동한 회원가입·로그인 API를 구축하고, 캔버스 우클릭 메뉴를 통한 노트 생성과 IME 입력 등 전반적인 편집 UX를 개선했다.

#Spring Security#JWT#Auth

▶ CastCanvas Lab 개발기/ 2026-03-16

CastCanvas Lab: 전역 개발자 경험(DX) 향상 및 협업 인프라 구축

category : [TIL]

프로젝트 전반에 걸쳐 GitHub 템플릿, Husky 훅, ESLint/Prettier 표준을 도입하여 일관된 코드 품질과 협업 환경을 구축하고, FE의 Custom Edge 로직 및 BE의 로컬 인프라를 세팅했다.

#DX#CI/CD#ESLint

▶ CastCanvas Lab 개발기/ 2026-03-16

CastCanvas Lab: 백엔드 DDD 아키텍처 도입 및 프론트엔드 인스펙터 패널 구현

category : [TIL]

백엔드에 도메인 주도 설계(DDD)를 적용하여 유지보수성을 높이고, 프론트엔드에서는 노드의 세부 속성을 편집할 수 있는 인스펙터(Inspector) 패널과 CI 자동화를 구축했다.

#DDD#Spring Boot#React Flow

▶ CastCanvas Lab 개발기/ 2026-03-15

CastCanvas Lab: 전 모듈 아키텍처 정립 및 랜딩 사이트 SEO 최적화

category : [TIL]

BE, FE, Collab, Site로 구성된 4개 모듈의 역할을 명확히 정의하고, 랜딩 사이트의 Metadata API와 커스텀 OG 이미지를 통해 프로젝트의 외부 노출 기반을 다졌다.

#Architecture#Next.js#SEO

▶ CastCanvas Lab 개발기/ 2026-03-14

CastCanvas Lab: React Flow CustomEdge를 활용한 지능형 노드 연결 시스템 구현

category : [TIL]

노드 간의 관계를 시각적으로 표현하기 위해 디자인 토큰이 적용된 CustomEdge를 구현하고, Zustand 스토어를 통해 연결 상태를 동적으로 관리하는 시스템을 구축했다.

#React Flow#CustomEdge#Zustand

▶ CastCanvas Lab 개발기/ 2026-03-13

AWS S3 + CloudFront로 Next.js 정적 사이트 배포하고 GitHub Actions 자동화하기

category : [TIL]

CastCanvas Lab 공개 사이트를 S3, CloudFront, Route 53, ACM으로 배포하고 www 리다이렉트, Search Console, GitHub Actions 자동 배포까지 구성한 과정을 정리했다.

#AWS#S3#CloudFront

▶ CastCanvas Lab 개발기/ 2026-03-11

CastCanvas Lab: React Flow와 Zustand를 이용한 무한 캔버스 연구 공간 구축

category : [TIL]

Vite, React Flow, Zustand를 기반으로 문서와 이미지를 자유롭게 배치하고 연결할 수 있는 공간인 CastCanvas Lab의 기초 아키텍처와 핵심 기능을 구현했다.

#React Flow#Zustand#TypeScript

🧩 BoothLiner 개발기 1 posts

▶ BoothLiner 개발기/ 2026-03-15

BoothLiner 데모를 AWS Amplify로 옮기고, 정식 제품 배포 구조까지 미리 정리하기

category : [TIL]

Vite 기반 BoothLiner 데모를 Vercel에서 AWS Amplify로 옮긴 이유와 설정 포인트, 그리고 web/admin/mobile/backend 기준의 이후 AWS 배포 구조까지 한 번에 정리했다.

#AWS#Amplify#CloudFront

📖 BOOK_MAKER 개발기 4 posts

▶ BOOK_MAKER 개발기/ 2026-03-27

BOOK_MAKER 개발기 #4 — MVP 마무리 및 Phase 2 전환 로드맵 수립

category : [TIL]

MVP 개발 단계를 마무리하며 품질 검증을 위한 E2E 테스트를 강화하고, Phase 2로의 전환을 위한 로드맵을 정리했습니다.

#BOOK_MAKER#DevOps#Testing

▶ BOOK_MAKER 개발기/ 2026-03-26

BOOK_MAKER 개발기 #3 — 초안 내 기록 순서 변경 및 백엔드 연동 구현

category : [TIL]

초안(Draft) 내에 담긴 기록들의 순서를 자유롭게 변경할 수 있는 기능을 구현하고, 프론트엔드와 백엔드의 데이터 연동을 완료했습니다.

#BOOK_MAKER#Backend#Frontend

▶ BOOK_MAKER 개발기/ 2026-03-25

BOOK_MAKER 개발기 #2 — 아카이브 목록과 기록 상세 흐름 구현

category : [TIL]

작성한 기록을 확인하고 상세 내용을 조회할 수 있는 아카이브 페이지 및 관련 기능을 구현했습니다.

#BOOK_MAKER#Frontend#Nuxt

▶ BOOK_MAKER 개발기/ 2026-03-21

BOOK_MAKER 개발기 #1 — 코드보다 먼저 제품을 설계했다

category : [TIL]

구현에 들어가기 전에 PM, 디자이너, 풀스택 개발자의 관점으로 제품 정의, 기술 스택, 로드맵, 프로토타입까지 정리했다.

#BOOK_MAKER#PRD#기획

🎬 Miluju Studio 개발기 1 posts

▶ Miluju Studio 개발기/ 2026-03-27

miluju-studio 개발 전체 요약 — 스킬 설계부터 CLI 배포까지

category : [TIL]

1인 개발자를 위한 AI 에이전트 워크플로우 인프라 miluju-studio의 전체 개발 과정을 정리합니다. 스킬 7종 설계, 8개 에이전트 자동 변환 생성기, MCP 브라우저 검수 서버, LLM-as-a-judge 평가 시스템, CLI 유틸리티, 이슈 기반 워크플로우까지 — 무엇을 만들었고, 왜 그렇게 결정했으며, 앞으로 무엇을 만들 것인지를 기록합니다.

#miluju-studio#AI에이전트#MCP