Study Blog

공부한 내용을 깔끔하게 정리하는 공간입니다.

총 20개의 글

학습 경로

어디서부터 읽을지 고민된다면, 경로를 따라 순서대로 읽어보세요.

개발환경 세팅

6개의 글

터미널부터 Node.js, 패키지 매니저까지 개발 시작에 필요한 기초

1쉘(Shell)이란? ~/.zshrc 설정 파일 이해하기 2Git 필수 명령어 모음 3git clone과 CI(지속적 통합) 이해하기

JavaScript 핵심 개념

2개의 글

클로저, 유틸함수 등 JS 핵심 개념 학습

1JavaScript 클로저(Closure) 완벽 이해 2유틸함수(Utility Function)란

TypeScript 학습

2개의 글

타입 시스템, 제네릭, 설정 파일까지 TypeScript 단계별 학습

1TypeScript 제네릭(Generics) 이해하기 2tsconfig.json이란? Next.js가 자동 생성하는 파일들

React & Next.js

4개의 글

Hooks, Props부터 Next.js 라우팅까지 프론트엔드 프레임워크 학습

1Atomic Design이란? 컴포넌트를 크기별로 나누는 설계 패턴 2React Hooks 핵심 정리 3interface와 props, 그리고 prop drilling

Node.js & 패키지 관리

4개의 글

Node.js 설치, nvm, 패키지 매니저, workspace 활용

1Node.js 설치와 nvm으로 버전 관리하기 2.nvmrc란? Node.js 버전 고정하기 3패키지 매니저 npm, yarn, pnpm 완벽 정리

Next.js 시작하기

1개의 글

Next.js 설치와 파일 기반 라우팅 학습

1Next.js 설치 순서와 파일 기반 라우팅

Atomic Design이란? 컴포넌트를 크기별로 나누는 설계 패턴

Atomic Design 패턴의 5단계 구조와 왜 쓰는지, 실제 프로젝트에 적용한 폴더 구조를 정리합니다.

React2026-04-01

interface와 props, 그리고 prop drilling

TypeScript의 interface로 props 명세를 작성하는 법, 컴포넌트가 props를 받는 구조, prop drilling 문제와 Zustand 해결책을 정리합니다.

React2026-04-01

Storybook이란? 컴포넌트를 독립적으로 확인하는 도구

Storybook의 역할과 Atomic Design과의 궁합, 언제 도입하면 좋은지 정리합니다.

블로그 가이드2026-03-31

블로그에 이미지 추가하는 방법

마크다운에서 이미지를 삽입하는 방법을 정리합니다.

JavaScript2026-03-28

JavaScript 클로저(Closure) 완벽 이해

클로저의 개념, 동작 원리, 실용적인 활용 패턴까지 정리합니다.

React2026-03-25

React Hooks 핵심 정리

useState, useEffect, useCallback 등 자주 쓰는 React Hooks를 예제와 함께 정리합니다.

Next.js2026-03-23

Next.js 설치 순서와 파일 기반 라우팅

Next.js 설치 방법, 파일 기반 라우팅 개념, app 폴더 구조 생성까지의 과정을 정리합니다.

Node.js2026-03-23

.nvmrc란? Node.js 버전 고정하기

프로젝트에서 사용할 Node.js 버전을 .nvmrc 파일로 명시하고 적용하는 방법을 정리합니다.

TypeScript2026-03-23

tsconfig.json이란? Next.js가 자동 생성하는 파일들

TypeScript 설정 파일 tsconfig.json의 역할과 Next.js 개발 서버 실행 시 생성되는 파일들을 정리합니다.

DevOps2026-03-21

git clone과 CI(지속적 통합) 이해하기

git clone의 개념, CI가 필요한 이유, CI 서버에서 npm ci를 쓰는 이유를 정리합니다.

Node.js2026-03-21

Node.js 설치와 nvm으로 버전 관리하기

Node.js의 개념, 설치 방법, 그리고 실무에서 nvm을 사용하는 이유를 정리합니다.

Node.js2026-03-21

npm workspace로 모노레포 구성하기

npm workspace의 개념, 설정 방법, 그리고 Node.js 설치와 프로젝트 생성의 차이를 정리합니다.

DevOps2026-03-21

쉘(Shell)이란? ~/.zshrc 설정 파일 이해하기

쉘의 개념, ~/.zshrc 설정 파일의 역할, 환경변수 등록과 source 명령어를 정리합니다.

DevOps2026-03-20

Git 필수 명령어 모음

실무에서 자주 사용하는 Git 명령어를 상황별로 정리합니다.

DevOps2026-03-20

Monorepo란 무엇인가

Monorepo의 개념, Polyrepo에서 넘어온 이유, 장단점, 그리고 도구 설정이 복잡해지는 이유를 정리합니다.

Node.js2026-03-20

패키지 매니저 npm, yarn, pnpm 완벽 정리

npm, yarn, pnpm의 차이점과 package.json, 유령 의존성 등 패키지 매니저의 핵심 개념을 정리합니다.

DevOps2026-03-20

Turborepo 등장 배경과 turbo.json 완벽 정리

Monorepo의 CI 속도, 설정 복잡함, 빌드 순서, 캐시 공유 문제를 Turborepo가 어떻게 해결하는지 정리합니다.

JavaScript2026-03-20

유틸함수(Utility Function)란

여러 곳에서 반복적으로 쓰이는 범용 도우미 함수인 유틸함수의 개념과 활용법을 정리합니다.

DevOps2026-03-20

빌드(Build)란 무엇인가

개발자가 짠 코드를 브라우저가 실행할 수 있는 형태로 변환하는 빌드 과정을 정리합니다.

TypeScript2026-03-15

TypeScript 제네릭(Generics) 이해하기

타입 안정성과 재사용성을 동시에 잡는 제네릭의 핵심 개념을 정리합니다.

Study Blog

학습 경로

개발환경 세팅

JavaScript 핵심 개념

TypeScript 학습

React & Next.js

Node.js & 패키지 관리

Next.js 시작하기

최신 글

Atomic Design이란? 컴포넌트를 크기별로 나누는 설계 패턴

interface와 props, 그리고 prop drilling

Storybook이란? 컴포넌트를 독립적으로 확인하는 도구

블로그에 이미지 추가하는 방법

JavaScript 클로저(Closure) 완벽 이해

React Hooks 핵심 정리

Next.js 설치 순서와 파일 기반 라우팅

.nvmrc란? Node.js 버전 고정하기

tsconfig.json이란? Next.js가 자동 생성하는 파일들

git clone과 CI(지속적 통합) 이해하기

Node.js 설치와 nvm으로 버전 관리하기

npm workspace로 모노레포 구성하기

쉘(Shell)이란? ~/.zshrc 설정 파일 이해하기

Git 필수 명령어 모음

Monorepo란 무엇인가

패키지 매니저 npm, yarn, pnpm 완벽 정리

Turborepo 등장 배경과 turbo.json 완벽 정리

유틸함수(Utility Function)란

빌드(Build)란 무엇인가

TypeScript 제네릭(Generics) 이해하기