Home

토스 테크 라우터 (SPA)

Javascript로 toss.tech 사이트를 구현하고, 그 과정을 기록했습니다.

프로젝트 실행 방법 🧑🏻‍💻

CLI

git clone https://github.com/f-lab-edu/toss-tech-route
npm install
npm run start

# http://localhost:8080 에서 확인 가능합니다.

Script

npm run start: 프로젝트를 실행해요.  
npm run test: 테스트코드를 실행해요.  
npm run lint: eslint를 활용하여 코드컨벤션을 확인해요.  
npm run prettier:write: prettier를 활용하여 코드컨벤션에 맞게 코드를 수정해요.  
npm run prettier:check: prettier를 활용하여 코드컨벤션을 확인해요.  

프로젝트를 진행하며 고민한 부분이 있었나요? 🤔

프로젝트 컨벤션을 엄격하게 지키려 노력했습니다.

1. 일관된 코드 스타일을 유지하기 위해 eslint와 prettier를 설정했습니다.
2. 정해진 규칙의 commit 메세지를 작성하여 이력을 명확히 표현했습니다.
3. pre-commit 단계에서 코드 컨벤션 규칙을 검사하였습니다.
4. github action을 사용하여 CI를 구현했습니다.

구현 내용을 리뷰어에게 명확하게 전달하려고 고민했습니다.

1. 개발 순서를 세부적으로 계획하고, issues에 등록하여 진행했습니다.
2. PR 템플릿을 사용하여 리뷰어가 이해하기 쉽게 구현 내용을 전달했습니다.
3. 코드리뷰에 작성한 위키를 첨부하여, 구현 내용을 상세하게 전달했습니다.

코드의 모듈화와 일관성을 유지하기 위해 노력했습니다.

1. 프로젝트 구조를 lib와 ui로 나누어 폴더 구조를 명확하게 구조화 했습니다.
2. 하드코딩을 지양하고, 재사용 가능한 코드는 모듈화하여 관리했습니다.
3. 유틸 함수는 테스트 코드를 작성하여 개발했습니다.

개발 상세 내용 📖

01. 프로젝트 컨벤션
02. 개발환경 구성
03. 라우터 구현
04. 데이터 API 요청 처리
05. UI 구현