Giters

JaydenLee1116 / fe-news

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

πŸ”¨ ν”„λ‘œμ νŠΈ μ†Œκ°œ

λ„€μ΄λ²„μ˜ 언둠사 별 기사 제곡 ν…Œμ΄λΈ”μ„ ν΄λ‘ ν•œ ν”„λ‘œμ νŠΈμž…λ‹ˆλ‹€.

πŸ”¨ ν”„λ‘œμ νŠΈ 배포 ν˜Ήμ€ 데λͺ¨

newsstand-demo

πŸ”¨ ν”„λ‘œμ νŠΈ μ£Όμš” κΈ°λŠ₯

  • 일정 μ‹œκ°„λ§ˆλ‹€ λ³€κ²½λ˜λŠ” 2개의 λ‰΄μŠ€ 타이틀 μš”μ•½λ³Έμ„ λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.
  • λ‰΄μŠ€λ₯Ό μ œκ³΅ν•˜λŠ” μ–Έλ‘ μ‚¬μ˜ λͺ©λ‘μ„ λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.
  • 언둠사 별 μ œκ³΅λ˜λŠ” 기사λ₯Ό λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

πŸ”¨ ν”„λ‘œμ νŠΈ 둜컬 μ‹€ν–‰ 방법

1. Git clone 및 폴더 이동

JaydenLee1116 - λ‰΄μŠ€ μŠ€νƒ λ“œλ‘œ μ΄λ™ν•˜μ—¬ clone ν•©λ‹ˆλ‹€.

# κΉƒ 클둠
git clone https://github.com/JaydenLee1116/fe-news.git

# 폴더 이동
cd fe-news

2. νŒ¨ν‚€μ§€ μ„€μΉ˜ 및 μ‹€ν–‰

# νŒ¨ν‚€μ§€ μ„€μΉ˜
npm install

# μ„œλ²„ μ‹€ν–‰
npm run serve

# μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ μ‹€ν–‰
npm run watch

πŸ”‘ μ°Έκ³ : μ„œλ²„ λ°μ΄ν„°μ˜ 경우 ν™˜κ²½ λ³€μˆ˜κ°€ ν•„μš”ν•˜μ—¬ λ‘œμ»¬μ—μ„œ μ‹€ν–‰ μ‹œ, λ°μ΄ν„°λŠ” 보이지 μ•ŠμŠ΅λ‹ˆλ‹€.

πŸ”¨ ν”„λ‘œμ νŠΈ ꡬ쑰 및 기술 μŠ€νƒ

1. ν”„λ‘œμ νŠΈ ꡬ쑰

πŸ“¦
β”œβ”€ .eslintrc
β”œβ”€ .gitignore
β”œβ”€ .prettierrc
β”œβ”€ babel.config.js
β”œβ”€ jest.config.ts
β”œβ”€ package-lock.json
β”œβ”€ package.json
β”œβ”€ postcss.config.js
β”œβ”€ public
β”‚  β”œβ”€ images
β”‚  β””─ index.html
β”œβ”€ readme.md
β”œβ”€ server
β”‚  β”œβ”€ data
β”‚  β”‚  β”œβ”€ articleData.js
β”‚  β”‚  β””─ issueData.js
β”‚  β””─ server.ts
β”œβ”€ src
β”‚  β”œβ”€ components
β”‚  β”‚  β”œβ”€ app.ts
β”‚  β”‚  β”œβ”€ footer
β”‚  β”‚  β”‚  β”œβ”€ FooterComponent.ts
β”‚  β”‚  β”‚  β”œβ”€ FooterModel.ts
β”‚  β”‚  β”‚  β””─ FooterView.ts
β”‚  β”‚  β”œβ”€ header
β”‚  β”‚  β”‚  β”œβ”€ HeaderComponent.ts
β”‚  β”‚  β”‚  β”œβ”€ HeaderModel.ts
β”‚  β”‚  β”‚  β””─ HeaderView.ts
β”‚  β”‚  β””─ main
β”‚  β”‚     β”œβ”€ MainComponent.ts
β”‚  β”‚     β”œβ”€ MainModel.ts
β”‚  β”‚     β””─ MainView.ts
β”‚  β”œβ”€ constants
β”‚  β”‚  β””─ constants.ts
β”‚  β”œβ”€ index.ts
β”‚  β”œβ”€ styles
β”‚  β”‚  β””─ global.css
β”‚  β”œβ”€ types
β”‚  β”‚  β”œβ”€ abstracts.ts
β”‚  β”‚  β”œβ”€ interfaces.ts
β”‚  β”‚  β””─ types.ts
β”‚  β””─ utils
β”‚     β”œβ”€ customFetch.ts
β”‚     β”œβ”€ date.ts
β”‚     β”œβ”€ dom.ts
β”‚     β””─ pickRandomData.ts
β”œβ”€ tailwind.config.js
β”œβ”€ tests
β”‚  β””─ utils
β”‚     β”œβ”€ customFetch.test.ts
β”‚     β”œβ”€ date.test.ts
β”‚     β””─ dom.test.ts
└─ tsconfig.json

Β©generated by Project Tree Generator

πŸ”‘ μ°Έκ³ : main ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈλ“€μ€ ꡬ쑰 λͺ©λ‘μ—μ„œ μƒλž΅ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

2. μ£Όμš” 기술 μŠ€νƒ

λͺ©μ  이름 버전
μ–Έμ–΄ TypeScript ^5.0.3
ν…ŒμŠ€νŠΈ jest ^29.5.0
μŠ€νƒ€μΌ tailwindcss ^3.3.1
μ„œλ²„ express ^4.18.2
λ°μ΄ν„°λ² μ΄μŠ€ mongodb ^5.1.0
μ„€μ • eslint ^8.35.0
μ„€μ • prettier ^2.8.7

πŸ”¨ ν”„λ‘œμ νŠΈ νŠΉμ΄μ‚¬ν•­

1. 섀계

feature-list

μž‘μ€ view(component)λ₯Ό λ‚˜λˆ„κ³  μ΅œμ†Œν•œμ˜ view에 λŒ€ν•΄ featureλ₯Ό μž‘μ„±ν–ˆμŠ΅λ‹ˆλ‹€.

2. κ΅¬ν˜„ μ˜λ„

μ»΄ν¬λ„ŒνŠΈ λ³„λ‘œ λ‹€μ–‘ν•œ μ•„ν‚€ν…μ²˜ νŒ¨ν„΄μ„ μ μš©ν•΄μ„œ μ„œλΉ„μŠ€λ₯Ό μ™„μ„±ν•  수 μ—†μ„κΉŒ? λΌλŠ” μƒκ°μ—μ„œ μ‹œμž‘ν–ˆμŠ΅λ‹ˆλ‹€.

  • MVC μ•„ν‚€νƒμ²˜ νŒ¨ν„΄: Modelκ³Ό View의 역할은 각각 μƒνƒœκ΄€λ¦¬μ™€ ν™”λ©΄κ΄€λ¦¬λ‘œ λͺ…ν™•νžˆ ν•˜λ˜, ControllerλŠ” Component라고 λͺ…λͺ…ν•˜κ³  modelκ³Ό viewλ₯Ό ν†΅ν•œ λ‹€μ–‘ν•œ μ‘°μž‘μ„ μˆ˜ν–‰ν•©λ‹ˆλ‹€.
  • Observer λ””μžμΈ νŒ¨ν„΄: μœ„μ˜ MVC둜 κ΅¬ν˜„λœ μ»΄ν¬λ„ŒνŠΈμ—μ„œ modelκ³Ό viewλ₯Ό 톡해 μƒνƒœλ₯Ό μ‘°μž‘ν•  수 μžˆλ„λ‘ κ΅¬ν˜„ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
  • Flux μ•„ν‚€νƒμ²˜ νŒ¨ν„΄: Observer λ””μžμΈ νŒ¨ν„΄μ—μ„œ ν•œ 단계 더 λ‚˜μ•„κ°€μ„œ dispatch와 reducer, action을 톡해 stateλ₯Ό μ²˜λ¦¬ν•  μ˜ˆμ •μž…λ‹ˆλ‹€.

πŸ”‘ μ°Έκ³ : Observer λ””μžμΈ νŒ¨ν„΄μ€ src/types/abstracts.ts에 μΆ”μƒν˜•νƒœλ‘œ κ΅¬ν˜„λ˜μ–΄μžˆμœΌλ©°, 기쑴에 λͺ‡λͺ‡ μ»΄ν¬λ„ŒνŠΈμ— μ μš©ν–ˆλ‹€κ°€ ν•˜λ‚˜μ˜ μ•„ν‚€ν…μ²˜λ‘œ ν†΅μΌν•˜κΈ° μœ„ν•΄ ν˜„μž¬λŠ” MVC ν˜•νƒœλ‘œλ§Œ μ»΄ν¬λ„ŒνŠΈκ°€ κ΅¬ν˜„λ˜μ–΄μžˆμŠ΅λ‹ˆλ‹€.

3. μ„œλ²„

ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžλ‘œμ„œ κ°„λ‹¨ν•œ μ„œλ²„λ₯Ό κ΅¬ν˜„ν•  쀄 μ•Œμ•„μ•Ό ν•œλ‹€κ³  μƒκ°ν–ˆμŠ΅λ‹ˆλ‹€. 데이터λ₯Ό ν¬λ‘€λ§ν•˜κ³  mongodb에 μ €μž₯ν•˜μ—¬ express둜 κ°„λ‹¨ν•œ GET μš”μ²­μ„ μ²˜λ¦¬ν•˜λŠ” μ„œλ²„λ₯Ό κ΅¬ν˜„ν–ˆμŠ΅λ‹ˆλ‹€.

πŸ”¨ ν”„λ‘œμ νŠΈ 회고

1. μ•„μ‰¬μš΄ 점

  1. μ•„ν‚€ν…μ²˜μ— λŒ€ν•œ 고민을 λ„ˆλ¬΄ 많이 ν•΄μ„œ, 주어진 κΈ°κ°„ 내에 κ΅¬ν˜„μ„ 끝내지 λͺ»ν•œ 점이 μ•„μ‰½μŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ 이런 과정을 톡해 ν˜„μž¬μ˜ UI 라이브러리(ν˜Ήμ€ ν”„λ ˆμž„μ›Œν¬)κ°€ μ™œ 이런 ν˜•νƒœλ‘œ μžλ¦¬μž‘μ•˜λŠ”μ§€ 이해할 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

  2. κ°„λ‹¨ν•œ mock 데이터λ₯Ό ν¬λ‘€λ§ν•˜μ—¬ 정적인 λ°μ΄ν„°λ§Œ μ œκ³΅ν•˜κ²Œ λ˜λŠ” 뢀뢄이 μ•„μ‰½μŠ΅λ‹ˆλ‹€. μ‹€μ œ μ„œλΉ„μŠ€λ‘œλŠ” μ œκ³΅ν•˜κΈ° μœ„ν•œ ν”„λ‘œμ νŠΈλŠ” μ•„λ‹ˆμ—ˆμ§€λ§Œ, λ„€μ΄λ²„μ—μ„œ μ œκ³΅λ˜λŠ” apiλ₯Ό 쒀더 찾아보고 μ‹€μ‹œκ°„μœΌλ‘œ μ œκ³΅λ˜λŠ” 데이터λ₯Ό λ°˜μ˜ν–ˆμœΌλ©΄ μ’‹μ•˜μ„ 것 κ°™μŠ΅λ‹ˆλ‹€.

2. μ’‹μ•˜λ˜ 점

  1. MVC νŒ¨ν„΄μ„ μ μš©ν•˜μ—¬ μ»΄ν¬λ„ŒνŠΈλ₯Ό κ΅¬ν˜„ν•˜λ©΄μ„œ, μ»΄ν¬λ„ŒνŠΈμ˜ 역할을 λͺ…ν™•νžˆ ν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. λ˜ν•œ, μ»΄ν¬λ„ŒνŠΈλ₯Ό μž‘μ€ λ‹¨μœ„λ‘œ λ‚˜λˆ„μ–΄μ„œ κ΅¬ν˜„ν•˜λ©΄μ„œ, μ»΄ν¬λ„ŒνŠΈμ˜ μž¬μ‚¬μš©μ„±μ„ 높일 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

  2. MVC νŒ¨ν„΄μ„ κ³΅λΆ€ν•˜κ³  μ μš©ν•˜λ©΄μ„œ μ™œ ν˜„λŒ€μ˜ ν”„λ‘ νŠΈμ—”λ“œμ—μ„œλŠ” MVC νŒ¨ν„΄μ΄ μ‚¬μš©λ˜μ§€ μ•ŠλŠ”μ§€μ— λŒ€ν•œ κΆκΈˆμ¦μ„ ν•΄μ†Œν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. λ˜ν•œ, MVC νŒ¨ν„΄μ„ μ μš©ν•˜λ©΄μ„œ μ™œ ν˜„λŒ€μ˜ ν”„λ‘ νŠΈμ—”λ“œμ—μ„œλŠ” Flux νŒ¨ν„΄μ΄ μ‚¬μš©λ˜λŠ”μ§€μ— λŒ€ν•œ κΆκΈˆμ¦μ„ κ°€μ§ˆ 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

  3. νƒ€μž…μŠ€ν¬λ¦½νŠΈμ— λŒ€ν•œ 이해도λ₯Ό 높일 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. μ²˜μŒμ—” μ½”λ“œ μž‘μ„±μ— 더 신경써야할 μš”μ†Œκ°€ 생긴 λŠλ‚Œμ΄μ—ˆμ§€λ§Œ, νƒ€μž…μŠ€ν¬λ¦½νŠΈλ₯Ό ν†΅ν•œ μ½”λ“œ μž‘μ„±μ€ μ½”λ“œμ˜ 가독성을 높이고, μ½”λ“œμ˜ μ•ˆμ •μ„±μ„ λ†’μ΄λŠ”λ° 큰 도움이 λ˜μ—ˆμŠ΅λ‹ˆλ‹€.(특히 νƒ€μž… μΆ”λ‘  κΈ°λŠ₯이 개발자 κ²½ν—˜μ„ λ†’μ—¬μ€€λ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€.)

  4. μ•„μ£Ό μž‘μ§€λ§Œ μœ ν‹Έν•¨μˆ˜μ— λŒ€ν•œ ν…ŒμŠ€νŠΈλ₯Ό μž‘μ„±ν•˜λ©΄μ„œ, ν…ŒμŠ€νŠΈμ— λŒ€ν•œ ν•„μš”μ„±μ„ λŠλ‚„ 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό 톡해 μ½”λ“œμ— λŒ€ν•œ 확신을 높일 수 μžˆλ‹€λ©΄ 더 효율적인 개발이 κ°€λŠ₯ν•  κ²ƒμ΄λΌλŠ” 생각이 λ“€μ—ˆμŠ΅λ‹ˆλ‹€.

3. κ°œμ„ ν•  점

  • MVC νŒ¨ν„΄λ³΄λ‹¨ μ˜΅μ €λ²„ 및 Flux νŒ¨ν„΄μ„ μ μš©ν•˜μ—¬ ν˜„λŒ€ UI λΌμ΄λΈŒλŸ¬λ¦¬μ— κ°€κΉŒμš΄ μ•„ν‚€ν…μ²˜λ₯Ό κ΅¬ν˜„ν•  수 μžˆλ„λ‘ κ°œμ„ ν•˜λ € ν•©λ‹ˆλ‹€.

πŸ”¨ λ§Œλ“ μ΄

Profile Contact
이메일: vv55adss@gmail.com
이λ ₯μ„œ: Jayden's Resume
λΈ”λ‘œκ·Έ: Jayden {do: smite}

About

Languages

Language:JavaScript 81.4%Language:TypeScript 18.4%Language:HTML 0.1%Language:CSS 0.0%