프론트엔드 네이티브 자료구조/알고리즘, 구름(Goorm) 코딩 테스트 & 서술형(Word) 작성 실습 랩
🔗 GitHub Topics:#frontend-architecture#frontend-interview#algorithms#javascript#vitest
본 레포지거리는 라이브러리에 의존하지 않고 순수 JavaScript/TypeScript/React 네이티브 기반으로 자료구조/알고리즘 구현 능력, 구름(Goorm) 코딩 테스트 입출력 파싱, 90분 서술형(Word) 모범 답안 작성 및 30분 기술 인터뷰 스피치 능력을 내재화하는 실무 스킬업 랩입니다.
| 구 분 | 기술 스택 / 도구 | 주요 용도 |
|---|---|---|
| Runtime & Test | TypeScript v5, Vitest, Node.js | 초고속 유닛 테스트 검증 및 타입 안전성 확보 |
| Goorm Environment | fs.readFileSync(0, 'utf-8'), readline |
구름 플랫폼 전용 표준 입출력 파서 템플릿 |
| Concepts | JS Engine, Event Loop, DOM API, Async/Promise | 프론트엔드 네이티브 핵심 개념 직접 구현 |
01-array/: 슬라이딩 윈도우, 투 포인터 배열 조작 문제.02-string/: 팰린드롬, 문자열 압축 및 파싱.03-hash/: Map/Set 기반 완주하지 못한 선수, Two Sum 패턴.04-sort/: Quick Sort, Merge Sort 및 커스텀 비교 함수.05-search/: 이진 탐색(Binary Search) 및 BFS/DFS 그리드 탐색.
debounce/throttle: 타이머 기반 호출 빈도 제어 함수 직접 구현.deepClone: Circular Reference(순환 참조) 대응 Map 기반 깊은 복사 함수.promiseAll/promiseSettled:Promise객체 동작 원리를 시뮬레이션하는 비동기 유틸.
01_input_parser.ts: 단일값, 1D 배열, 2D 그리드 표준 입출력 파서.02_sliding_window_goorm.ts: 연속 구간 최댓값 O(N) 탐색.03_hash_map_goorm.ts: 최다 빈도 단어 카운팅 & 사전순 정렬.04_bfs_dfs_goorm.ts: 2D 미로 최단거리 BFS 탐색.05_simulation_goorm.ts: Run-Length Encoding 문자열 압축.
- 📄
01-30min-interview-cheatsheet.md: 30분 기술 인터뷰 1분 자기소개 & STAR 아키텍처 스피치 가이드. - 📄
02-descriptive-essay-cheatsheet.md: 90분 시험 포함 서술형(Word) 작성 빈출 TOP 15 모범 답안집.
Q1. Debounce와 Throttle 유틸리티의 이벤트 제어 메커니즘과 적용 사례는?
분석: Debounce는 이벤트를 그룹화하여 연속된 호출이 끝난 후 일정 시간(
delay)이 지나야 마지막 1회만 실행합니다 (예: 검색창 Auto-complete). Throttle은 이벤트가 지속해서 발생해도 정해진 주기(limit)마다 최대 1회만 실행하도록 제어합니다 (예: 무한 스크롤 Scroll event).
Q2. `Promise.all`과 `Promise.allSettled` 비동기 파이프라인 수동 구현 시 고려사항은?
분석:
Promise.all은 하나라도 Reject되면 즉시reject()를 반환하는 Fail-Fast 방식이므로 결과 배열 카운터와 에러 캡처가 필수입니다. 반면Promise.allSettled는 모든 비동기가 성공/실패와 상관없이 완료될 때까지 기다려{ status: 'fulfilled' | 'rejected', value | reason }객체 배열을 집계합니다.
Q3. Deep Clone(깊은 복사) 수동 구현 시 `JSON.parse(JSON.stringify())`의 한계와 극복은?
분석:
JSON.stringify방식은Date객체가 문자열로 변경되고,RegExp,Map,Set,Function,undefined,Symbol이 유실되며, 객체 내에 자기 자신을 참조하는 순환 참조(Circular Reference)가 있으면TypeError로 튕깁니다. 따라서WeakMap으로 방문 기록을 추적하는 재귀 복사 함수를 구현해야 합니다.
# 1. 의존성 설치
npm install
# 2. 전체 알고리즘 & 구름 시뮬레이션 유닛 테스트 실행
npm test
# 3. 구름 코딩테스트 시뮬레이션만 실행
npx vitest src/08-goorm-simulation🎨 1. Frontend & Mobile Web Architecture (#frontend-architecture)
- b2b-mes-admin-lab: FSD Architecture, AG-Grid/Handsontable, MFE, BFF, State Studio
- frontend-performance-lab: Vite/Webpack, Canvas/SVG, RN WebView Bridge, PWA, App Store
- frontend-coding-interview-lab: FE 알고리즘 & 바닐라 JS/React 하드코딩
- frontend-security-lab: XSS/CSRF 방어, CSP, SameSite Cookie, CORS
⚡ 2. Fullstack & Backend Performance (#backend-performance)
- fullstack-reliability-lab: 멱등성, 낙관적 락, 지수 백오프 & 서킷 브레이커
- backend-performance-lab: FastAPI, Connection Pooling, Redis Cache, N+1 Query
🐳 3. Infrastructure & DevOps (#infra-devops)
- docker-infra-lab: Multi-stage Docker, Compose, Nginx Proxy, CI/CD
🧠 4. AI Engineering & Data Platform (#ai-data-platform)
- llm-rag-data-platform-lab: RAG, ChromaDB/FAISS Vector Store, AWS Bedrock
- ai-product-patterns-lab: SSE Streaming, AI Fallback Router, Rate Limiter
📱 5. Mobile Native Architecture (#mobile-native)
- android-architecture-lab: Clean Architecture, MVI, Compose, Coroutines/StateFlow