바닐라 타입스크립트를 사용하여 객체 지향 상태기반 컴포넌트를 사용해 리액트 동작원리 이해하기

프로젝트를 통해 얻고자 하는 것 : 바닐라 타입스크립트로 상태기반 컴포넌트를 구현해 보면서 this 바인딩을 통한 state처리와 Flux 패턴과 Observer패턴을 이용한 전역 상태관리(Redux), 컴포넌트 내 상태관리 및 컴포넌트 생명주기를 좀더 깊게 이해하고자 합니다.

👨 실행 방법

• client :

0. $cd client
1. $yarn add
2. $yarn build 번들링 후
3. $yarn dev 로 실행

• server :

0. $cd server
1. $npm install
2. $yarn start:server 로 실행

🌃 이미지

UI 이름	GIF 이미지
관심사 화면 UI
카테고리 별 데이터 받아오는 UI

✅ client/src 폴더 구조

폴더 구조	이미지
client/src

✅ 사용 기술, 체크 목록

• TypeScript을 사용했습니다.

• Mock API를 활용하여 카테고리별 컨텐츠를 보여줬습니다.

• 컨텐츠 데이터를 활용해 큰 컨텐츠 카드, 작은 컨텐츠 카드를 랜덤으로 보여줬습니다. (생각해보니 컨텐츠 길이 별로 나누는 것이 좋았을 것 같습니다.)
  title 길이별로 카드를 분류했습니다.

• 새로고침시 패턴을 유지하되 임의의 순서로 배치했습니다.

• 카테고리 별 탭 클릭 시, 탭이 이동하고 컨텐츠 리스트가 변경됩니다.

• 선택된 탭과 선택되지 않은 탭은 스타일 차이가 있습니다. (회색 / 검정)

• 각 컨텐츠 카드를 마우스로 클릭하면, 해당하는 상세 페이지로 이동합니다.

• 상세페이지는 새탭 열기로 구현하였습니다.

• 선택되지 않은 관심사 카드를 누르면 해당 관심사는 선택됩니다.

• 선택된 관심사 카드를 누르면 해당 관심사는 선택 해제됩니다.

• 선택된 관심사 카드와 선택되지 않은 관심사 카드는 스타일 차이가 있습니다.

회고

• 북마크 구현은 JSON server API 통해 DB에 저장, 호출하거나, JSON 데이터 중 인덱스로 사용할만한 항목을 이용해 구현할 수 있을 것이라고 생각합니다.
• webpack을 사용해 bundling 하기 위해 구글링을 통해 package.json, webpack.config.js 설정하는 것에 시간을 할애했지만 배울 수 있는 좋은 기회였습니다.
• 좋은 폴더 구조설계에 대해 생각하며 배우고, 익힌 좋은 시간이었습니다.