네이버의 언론사 별 기사 제공 테이블을 클론한 프로젝트입니다.
- 일정 시간마다 변경되는 2개의 뉴스 타이틀 요약본을 볼 수 있습니다.
- 뉴스를 제공하는 언론사의 목록을 볼 수 있습니다.
- 언론사 별 제공되는 기사를 볼 수 있습니다.
JaydenLee1116 - 뉴스 스탠드로 이동하여 clone 합니다.
# 깃 클론
git clone https://github.com/JaydenLee1116/fe-news.git
# 폴더 이동
cd fe-news# 패키지 설치
npm install
# 서버 실행
npm run serve
# 어플리케이션 실행
npm run watch🔑 참고: 서버 데이터의 경우 환경 변수가 필요하여 로컬에서 실행 시, 데이터는 보이지 않습니다.
📦
├─ .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 하위 컴포넌트들은 구조 목록에서 생략하였습니다.
| 목적 | 이름 | 버전 |
|---|---|---|
| 언어 | 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 |
작은 view(component)를 나누고 최소한의 view에 대해 feature를 작성했습니다.
컴포넌트 별로 다양한 아키텍처 패턴을 적용해서 서비스를 완성할 수 없을까? 라는 생각에서 시작했습니다.
- MVC 아키택처 패턴: Model과 View의 역할은 각각 상태관리와 화면관리로 명확히 하되, Controller는 Component라고 명명하고 model과 view를 통한 다양한 조작을 수행합니다.
- Observer 디자인 패턴: 위의 MVC로 구현된 컴포넌트에서 model과 view를 통해 상태를 조작할 수 있도록 구현하였습니다.
- Flux 아키택처 패턴: Observer 디자인 패턴에서 한 단계 더 나아가서 dispatch와 reducer, action을 통해 state를 처리할 예정입니다.
🔑 참고: Observer 디자인 패턴은
src/types/abstracts.ts에 추상형태로 구현되어있으며, 기존에 몇몇 컴포넌트에 적용했다가 하나의 아키텍처로 통일하기 위해 현재는 MVC 형태로만 컴포넌트가 구현되어있습니다.
프론트엔드 개발자로서 간단한 서버를 구현할 줄 알아야 한다고 생각했습니다. 데이터를 크롤링하고 mongodb에 저장하여 express로 간단한 GET 요청을 처리하는 서버를 구현했습니다.
-
아키텍처에 대한 고민을 너무 많이 해서, 주어진 기간 내에 구현을 끝내지 못한 점이 아쉽습니다. 하지만 이런 과정을 통해 현재의 UI 라이브러리(혹은 프레임워크)가 왜 이런 형태로 자리잡았는지 이해할 수 있었습니다.
-
간단한 mock 데이터를 크롤링하여 정적인 데이터만 제공하게 되는 부분이 아쉽습니다. 실제 서비스로는 제공하기 위한 프로젝트는 아니었지만, 네이버에서 제공되는 api를 좀더 찾아보고 실시간으로 제공되는 데이터를 반영했으면 좋았을 것 같습니다.
-
MVC 패턴을 적용하여 컴포넌트를 구현하면서, 컴포넌트의 역할을 명확히 할 수 있었습니다. 또한, 컴포넌트를 작은 단위로 나누어서 구현하면서, 컴포넌트의 재사용성을 높일 수 있었습니다.
-
MVC 패턴을 공부하고 적용하면서
왜 현대의 프론트엔드에서는 MVC 패턴이 사용되지 않는지에 대한 궁금증을 해소할 수 있었습니다. 또한, MVC 패턴을 적용하면서왜 현대의 프론트엔드에서는 Flux 패턴이 사용되는지에 대한 궁금증을 가질 수 있었습니다. -
타입스크립트에 대한 이해도를 높일 수 있었습니다. 처음엔 코드 작성에 더 신경써야할 요소가 생긴 느낌이었지만, 타입스크립트를 통한 코드 작성은 코드의 가독성을 높이고, 코드의 안정성을 높이는데 큰 도움이 되었습니다.(특히 타입 추론 기능이 개발자 경험을 높여준다고 생각합니다.)
-
아주 작지만 유틸함수에 대한 테스트를 작성하면서, 테스트에 대한 필요성을 느낄 수 있었습니다. 테스트 코드를 통해 코드에 대한 확신을 높일 수 있다면 더 효율적인 개발이 가능할 것이라는 생각이 들었습니다.
- MVC 패턴보단 옵저버 및 Flux 패턴을 적용하여 현대 UI 라이브러리에 가까운 아키텍처를 구현할 수 있도록 개선하려 합니다.
| Profile | Contact |
|---|---|
 |
이메일: [email protected] 이력서: Jayden's Resume 블로그: Jayden {do: smite} |