React와 Next.js를 중심으로 웹 서비스를 개발하며 필요한 프론트엔드, CS, 백엔드 기초, 클라우드와 데이터 흐름 관련 학습 내용을 주제별로 정리한 아카이브입니다.
프론트엔드 경험을 기반으로 웹 서비스 전반의 구조를 이해하기 위해 학습한 내용을 모아 두는 것이 목적입니다. 매일 작성한 TIL 목록을 보여주기보다, 포트폴리오와 이력서에서 학습 범위와 방향성을 빠르게 확인할 수 있도록 핵심 개념과 실습 기록을 정리합니다.
React, Next.js, TypeScript 기반의 프론트엔드 학습과 실습이 가장 중심이 되는 영역입니다.
| Topic | Status | Notes |
|---|---|---|
| JavaScript | Study Notes | 데이터 타입, 함수, 클래스, 스코프, 클로저, 런타임 구조, 이벤트 루프, AbortController, Ky HTTP Client |
| TypeScript | Study Notes | 기본 타입, 제네릭, React를 위한 타입스크립트, TypeScript 7.0 |
| React | Study Notes | 생태계, JSX, Virtual DOM, Fiber, 렌더링, 메모이제이션, useEffect와 Effect 생명주기, React 19 use API, Atomic Design, Headless UI, Radix와 shadcn/ui |
| Next.js / SSR | Practice | CSR, SSR, SSG, Hydration, Server Component와 SSR, 'use client', Streaming 정리, 14.2 이후 주요 변경사항, Async Request APIs, Server Actions, App Router, Parallel Routes, Intercepting Routes, Dashboard App 실습 기록, SSR Practice |
| Testing | Learning | Cypress 설치, 테스트 구조, 커맨드, Assertion, intercept |
| State Management | Practice | Client와 Server State, Zustand, TanStack Query, Redux, RTK, Next.js에서 TanStack Query Hydration |
| Monorepo | Practice | Monorepo 구조, Workspace, Turborepo |
| HTML / Web | Study Notes | HTML 시맨틱 태그, 브라우저 렌더링 과정, 오디오 재생과 일시정지, File System Access API, SEO |
웹 프론트엔드와 서비스 구조를 이해하는 데 필요한 브라우저, 네트워크, 보안, 아키텍처 기초를 정리합니다.
| Topic | Status | Notes |
|---|---|---|
| Browser / Runtime | Study Notes | JavaScript 런타임 구조, 브라우저 렌더링 과정, 오디오 재생과 일시정지, 이벤트 루프 |
| Network | Study Notes | 라우터, DNS, 네트워크 기초, Gateway, Cache-Control, Keep-Alive |
| Security | Study Notes | 웹 보안과 암호화 기본 개념, CSRF, Software Supply Chain Attack |
| Architecture | Learning | DDD, EDA, RPC, gRPC, MSA, Monolith and Modular Monolith |
| Storage | Study Notes | SSD 스케줄링과 내부 동작, Fenwick Tree |
| AI & Tool Use | Study Notes | AX and AI Integration, Function Calling, Hermes Agent, LLM Guardrails, Loop Engineering, MCP Transport, Ontology, OpenCode, Prompt Injection, Sovereign AI, uvx |
| Information Processing | Study Notes | 정보처리기사 이론, 프로그래밍 |
더 자세한 목차는 CS 정리에서 관리합니다.
백엔드 영역은 “백엔드 개발 가능”을 내세우기보다, 프론트엔드와 연결되는 API 구조, 인증, 데이터 저장, 서버 흐름을 이해하기 위한 기초 학습으로 정리합니다.
| Topic | Status | Notes |
|---|---|---|
| Supabase | Basic Study | Firebase와 Supabase 비교, Database/Auth/Storage/Realtime 개요 |
| API Design | Study Notes | Idempotency |
| Data Store | Study Notes | Redis |
| WebSocket / Chat | Practice | react_chat_app |
| Java | Learning | 기초 문법, 객체지향, 컬렉션 개념 |
| Spring | Learning | Spring Boot, MVC/JSP, Validation 학습 정리 |
| Database / MyBatis | Learning | DB 기본 구조, 관계 설계, SQL, JDBC, MyBatis 학습 정리, DB Sequence, UUID / GUID |
클라우드와 데이터 분석 도구는 실무 역량으로 내세우기보다, 서비스 구조와 데이터 흐름을 이해하기 위한 기초 학습으로 정리합니다.
| Topic | Status | Notes |
|---|---|---|
| AWS | Basic Study | Serverless, VPC, EC2, Data Lake, Security Hub 개요 |
| Google Cloud | Basic Study | Cloud Computing, BigQuery, Looker, 데이터 분석 입문 |
| Certificate | Status | Notes |
|---|---|---|
| SQLD | Acquired | SQL과 데이터 모델링 기본 역량 |
| 정보처리기사 | Acquired | CS 이론, 프로그래밍 정리 |
| 리눅스마스터 2급 | Acquired | 리눅스 마스터 2급 정리 |
학습한 개념을 코드로 실험하거나 과제 형태로 구현한 저장소입니다. 실무 성과로 과장하기보다, 개념을 적용해 본 연습 기록으로 정리합니다.
| Project | Focus | Link |
|---|---|---|
| Wanted Pre-onboarding FE Challenge | 인증, Todo CRUD, API 연동 과제 | Repository |
| SimpleXClone | Next.js, React Query 기반 SNS 클론 실습 | Repository |
| React Chat App | WebSocket 기반 채팅 실습 | Repository |
| React SSR Practice | Next.js 없이 SSR 흐름 이해 | Repository |
| Next.js Dashboard Practice | App Router 기반 dashboard와 full-stack 흐름 실습 | Repository |
| Next WebView Practice | Next.js 기반 WebView 실험 | Repository |
| Monorepo Practice | Turborepo 구조와 패키지 분리 실습 | Repository |
원본 저장소는 그대로 두고, 이 저장소에서는 필요한 학습 내용을 주제별로 병합해서 관리합니다.
- study-CS - CS 학습 원본
- study-java - Java 기초 학습 원본
- learn-react - React 학습 원본
- learn-typescript - TypeScript 학습 원본
- TIL - 과거 학습 기록 원본
이 저장소는 학습 범위와 방향성을 보여주기 위한 아카이브입니다. 임시 메모나 출처별 복사본은 줄이고, 웹 서비스 개발에 필요한 개념을 주제 중심 문서로 계속 정리합니다.