Home - f-lab-edu/toss-tech-router GitHub Wiki




ν† μŠ€ ν…Œν¬ λΌμš°ν„° (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 κ΅¬ν˜„

⚠️ **GitHub.com Fallback** ⚠️