ASAP Crew
프론트엔드 기술과 면접 준비를 같이 하는 스터디입니다.
공부한 내용을 흘려보내지 않고, 가능한 만큼 기록합니다.
핵심 방향
우리는 매주 하나의 주제를 잡고 아래 흐름으로 진행합니다.
핵심 개념 이해
→ 내부 작동 원리 확인
→ 코드로 재현하거나 실험
→ 헷갈리는 지점과 반례 토론
→ 실무 문제나 기능 설계로 연결
→ 정리할 수 있는 내용은 PR로 남기기
팀 정보
| 항목 | 내용 |
|---|---|
| 진행 방식 | 온라인/게더타운 |
| 정기 모임 | 매주 일요일 20:00 |
| 진행 시간 | 90분 |
| 기간 | 최소 4개월 |
| Repository | asapcrew/asap-note |
| 기록 방식 | GitHub |
초기 로드맵
아래는 확정안이 아니라 초기 예시입니다.
진행하다가 부족한 부분이 있으면 JS, React, Next.js 비중은 언제든 조정합니다.
| 주차 | 주제 | 내용 |
|---|---|---|
| 1주차 | JavaScript Core | Execution Context, Scope, Closure, Event Loop, Promise, Async/Await |
| 2주차 | TypeScript | 우아한 타입스크립트 Ch.1~2 |
| 3주차 | TypeScript | 우아한 타입스크립트 Ch.3~4 |
| 4주차 | TypeScript | 우아한 타입스크립트 Ch.5~6 |
| 5주차 | TypeScript | 우아한 타입스크립트 Ch.7~8 |
| 6주차 | TypeScript | 우아한 타입스크립트 Ch.9~10 |
| 7주차 | TypeScript | 우아한 타입스크립트 Ch.11~12 |
| 8주차 | React | component, props, state |
| 9주차 | React | rendering, key, reconciliation |
| 10주차 | React | useEffect, cleanup, stale closure |
| 11주차 | React | custom hook, useReducer, Context |
| 12주차 | React | performance, testing, accessibility |
| 13주차 | Next.js | App Router, routing, layout |
| 14주차 | Next.js | Server/Client Component, data fetching |
| 15주차 | Next.js | caching, SSR, SSG, ISR |
| 16주차 | 정리 | 모의 면접, 설계 질문, 문서 정리 |
| 이후 | 필요한 사이클 반복 |
매주 진행 방식
| 시간 | 내용 |
|---|---|
| 00~05분 | 오늘 주제 확인 |
| 05~65분 | 메인 주제 공부 |
| 65~80분 | 일반 면접 질문 2개 |
| 80~88분 | 프론트엔드 설계 질문 1개 |
| 88~90분 | 다음 주 준비물 정리 |
메인 주제 진행 방식
주제에 따라 아래 방식 중 하나로 진행합니다.
| 상황 | 방식 |
|---|---|
| JS 빠른 정리 | 짧은 발표 + 토론 |
| TypeScript 책 진행 | 2챕터 압축 진행 |
| React / Next.js | 같은 범위 공부 후 관점 나누기 |
| 실무 문제가 중요한 주차 | 문제 해결형 |
TypeScript 주차
각자 책 2챕터를 읽고 아래만 준비합니다.
- 중요하다고 본 개념 1개
- 이해가 애매한 부분 1개
- 코드나 예시로 확인하고 싶은 부분 1개
세션에서는 책 전체를 요약하기보다, 이번 주에 가져갈 핵심 2~3개만 고릅니다.
면접 질문
매주 면접 질문 최소 2개이상 다룹니다.
예시:
- TypeScript를 사용하는 이유는 무엇인가요?
- any와 unknown은 어떤 차이가 있나요?
- React에서 리렌더링은 언제 발생하나요?
- useEffect dependency array는 왜 필요한가요?
면접 답변 원문이나 개인 피드백은 공개 문서에 올리지 않습니다.
설계 질문
매주 기능 단위 설계 질문 1개를 다룹니다.
예시:
- 검색 자동완성 기능을 어떻게 만들 건가요?
- 무한 스크롤 피드를 어떻게 구현할 건가요?
- 예약 폼에서 중복 제출을 어떻게 막을 건가요?
- 게시글 상세 페이지 캐싱을 어떻게 설계할 건가요?
볼 기준:
- 요구사항
- 컴포넌트 구조
- 상태 관리
- API 요청 방식
- 예외 상황
- 성능 고려
- trade-off
매주 남길 것
매주 각자 최소 1개 정도를 목표로 합니다.
작은 PR도 괜찮습니다.
- 개념 문서 일부 작성
- 코드 예제 추가
- 문제 상황 정리
- 설계형 문제 일부 정리
- 기존 문서 보완
- 오타 수정
문서 템플릿
# 주제명
## 왜 중요한가
이 개념이 프론트엔드 개발에서 왜 필요한지 정리합니다.
## 핵심 개념
핵심 개념을 간단히 정리합니다.
## 코드 예제
간단한 예제 코드나 문제를 재현할 수 있는 코드를 작성합니다.
## 더 생각해볼 점
- 문제 상황
- 해결 방법
- 자주 하는 실수
- trade-off
- 참고 자료
- 관련 질문
필수는 아래 3개입니다.
- 왜 중요한가
- 핵심 개념
- 코드 예제
나머지는 필요할 때만 씁니다.
이번 주 할 일
첫 주는 JavaScript Core를 빠르게 정리합니다.
각자 아래 주제 중 하나를 골라 준비합니다.
- Execution Context / Scope
- Closure
- this
- Prototype
- Event Loop
- Promise / Async-Await
준비할 것:
- 담당 개념 설명
- 코드 예제
- 헷갈리는 질문
첫 주는 완성도보다 시작이 목적입니다. 짧게라도 올리고, 리뷰하면서 다듬습니다.
나중 로드맵 후보
진행하다가 필요하면 추가로 볼 주제들입니다.
| 영역 | 후보 |
|---|---|
| Web Platform | semantic HTML, form, DOM event, browser rendering, HTTP, CORS, cache |
| CSS / UI | flex, grid, position, z-index, responsive layout |
| 접근성 | keyboard navigation, focus 관리, aria, form error |
| 성능 | Lighthouse, Core Web Vitals, image optimization, virtualization |
| 테스트 | unit test, component test, mocking, loading/error state |
| 구조 설계 | folder structure, state placement, API layer, design system |
| AI와 프론트엔드 | AI 리뷰 보조, 문서 초안, AI chat UI, streaming response, API key 보안 |
원칙
- 로드맵은 초기 예시입니다.
- 부족한 부분이 있으면 조정합니다.
- 기간은 최소 4개월로 봅니다.
- 매주 메인 주제는 하나만 잡습니다.
- PR은 부담 없이 올립니다.
- 많이 하는 것보다 남는 것을 우선합니다.