미리보기

프로젝트 개요

네이버 뉴스스탠드 클론코딩 프로젝트입니다. 2023.4.3~2023.4.21까지 3주간 진행되었습니다. React 등의 프레임워크 없이 TypeScript 만을 사용해 작성되었습니다.

기획서

기획서 바로보기

프로젝트 기능

• 전체 언론사 보기
• 내가 구독한 언론사 보기
• 그리드 뷰, 리스트 뷰로 보기 모드 전환
• 구독 및 해지하기
• 리스트 뷰에서 프로그래스 바 구현, 프로그래스 바가 채워지면 다음 페이지로 자동 이동 그외 상세한 내용은 링크 참고

기술 스택

언어: TypeScript 번들러: Vite

설치 및 실행 방법

pnpm i, pnpm run dev를 통해 로컬 서버를 실행해보실 수 있습니다.

개인적인 경험 및 느낀점

상태 관리의 중요성을 체감

이 프로젝트에서는 두가지 상태가 핵심적으로 존재했는데, 하나는 [전체 언론사/구독한 언론사], 다른 하나는 [그리드 뷰/리스트 뷰] 였습니다. 이 두가지 핵심 상태에 따라 그에 맞는 뷰들을 노출시켜야 했습니다. 복잡한 상태들을 제대로 관리해보는 것이 이 프로젝트가 처음이었기에, 이전까지는 상태라는 개념에 대해 제대로 이해하지 못하고 개발을 해왔다는 것을 알게 되었습니다.

Flux, Observer 패턴에 대한 이해

기존에는 왜 쓰는지 이해하지 못하고 무작정 사용했던 Redux를 별도의 라이브러리 없이 직접 구현해볼 수 있어서 한차례 더 성장할 수 있었던 기회였습니다. Redux는 Flux 패턴을 대표하는 라이브러리로, Redux를 비슷하게나마 직접 구현 해보면서 Flux 패턴에 대한 이해를 심도있게 할 수 있었습니다. 또한, Redux 내부적으로 Observer 패턴 또한 사용되고 있다는 것도 확인할 수 있었습니다.

React의 렌더링 방식 이해

Observer 패턴으로 상태가 변경이 되면 재렌더링을 시키는 방식으로 전반적인 로직을 설계했습니다. 이렇게 직접 로직을 작성해보니, React.js에서 상태 변경으로 인한 재렌더링이 될 때 어떤 방식으로 재렌더링이 되는지 이해할 수 있었습니다. 또한, 친구들과의 스터디로 React.js 내부에는 가상 돔과 diff 로직이 있어, 가상 돔을 기준으로 변경된 element들만 갈아끼우는 효율적인 렌더링 방식을 통해 성능 최적화가 이루어지고 있다는 사실도 이해할 수 있게 되었습니다.

데이터 구조 설계의 중요성을 경험

이 프로젝트는 특히 직접 API를 작성해보고, DB의 데이터 구조 설계를 제대로 경험해본 뜻 깊은 프로젝트였습니다. 서로 연관이 있는 여러 테이블을 설계하여 하나의 GET API 를 호출할 때 여러 테이블에서 데이터들을 가져오는 경험을 해보았습니다. 아쉽지만 이번에 제가 만들었던 API는 굉장히 느렸는데, 이는 NOSQL에서 여러 테이블을 연결하여 호출하면 성능이 안좋아지기 떄문이었습니다. 하지만 이를 통해 SQL과 NOSQL의 장단점을 이해할 수 있었습니다. 특히 직접 데이터 구조를 설계해본 경험이 생겼기에 이 후 백엔드와 협업을 할 때 겪었던 경험을 바탕으로 커뮤니케이션을 능동적으로 해나갈 수 있을 것이란 자신감이 붙었습니다.