Frontend Wiki

🧭 Frontend Team Wiki

이 문서는 프론트엔드 팀의 기술, 규칙, 결정사항, 운영 방식을 기록하고 공유하기 위한 위키입니다.
모든 변경 사항은 문서화 및 날짜 기록을 원칙으로 합니다.

📌 1. 프로젝트 개요

🎯 1-1 목적

• 데일리 CS 퀴즈 및 가상 면접 서비스 제공
• 개발자 면접 준비의 효율성과 지속성을 높이는 학습 환경 제공
• 사용자가 스스로 성장 경로를 추적 및 피드백 받을 수 있도록 지원

👥 1-2 대상 사용자

• 주요 사용자
  개발자 취업 준비생, CS 개념 복습을 원하는 개발자
• 보조 사용자
  멘토, 코딩 부트캠프 강사, 교육 기관 관계자

⚙️ 1-3 주요 기능

• 데일리 CS 퀴즈 자동 업데이트
• 사용자 맞춤 가상 면접 세션 제공
• 학습 통계 및 성과 시각화

🧑‍💻 2. 기술 스택

🧩 2-1 기본 스택

구분	기술
Framework	SolidStart
Language	TypeScript
Styling	Tailwind CSS, ShadcnUI, HeadlessUI
State	Solid Store / Context
Build	Vite

🧩 2-2 스택 선정 이유

• SolidStart
  
• Next.js의 Server/Client 컴포넌트 이원화와 use client 전파 구조는 컴포넌트 설계를 도메인 책임이 아니라 실행 환경 제약에 종속시키는 문제가 있었다.
• 이로 인해 비즈니스 로직과 UI 로직의 자연스러운 분리가 어렵고, 환경 혼동으로 인한 런타임 에러와 불필요한 구조 분리가 잦았다.
• SolidStart는 컴포넌트를 환경 중립적인 UI 함수로 취급하고, 실행 위치(SSR/CSR/SSG)는 라우트 및 렌더링 전략이 결정한다.
• 서버 로직은 서버 경계(loader, server function 등)로 명확히 분리되고, 컴포넌트는 순수하게 표현 계층 역할만 담당한다.
• 이 구조 덕분에 책임 중심 설계가 가능해지고, 환경 제약이 아닌 도메인 기준으로 코드를 구성할 수 있어 SolidStart를 선택했다.

🗂️ 3. 참고 자료

공식 문서

• React Docs
• SolidJS Docs
• SolidStart Docs

✨ 사용 팁 및 규칙

모든 "규칙"과 "결정"은 반드시 문서화합니다. 변경 시 날짜 + 이유를 기록하세요. 주요 변경은 브랜치/PR 단위로 관리하며 리뷰 후 병합합니다. 문서 업데이트는 README.md 또는 /wiki 폴더 내에서 버전 관리합니다.