프로젝트 개요

간단한 소개

Ed Sheeran 한국팬들을 위한 팬페이지

프로젝트 목적

평소 좋아하던 뮤지션인 Ed Sheeran의 한국팬 페이지가 없다는 것에서 시작되었다. BTS, IU 등 유명 가수들은 다 팬페이지가 있는데, Ed Sheeran은 official site나 그의 소셜미디어를 제외하면 따로 만들어진 팬들을 위한 공간이 없었다.

그의 노래를 사랑하는 팬들끼리 소통하며, 취향을 공유하는 기능을 담은 애플리케이션을 제작하고 싶었다.

기능

• oAuth를 이용한 로그인, 회원가입
• 무한스크롤을 이용하여 pinterest 같은 느낌으로 ed sheeran 사진 보여주기
• 실시간 인기노래 투표 기능
• 그날의 랜덤송 추천 ➡️ 음악 재생

프로젝트 기간

2023.08.07.~ 2023.09.07. (기획~배포, 30일)

기술 스택

프로그래밍 언어

Typescript

• interface와 type을 정의하고 이를 컴포넌트에 적용하여, 입력 받을 타입을 강제할 수 있다.
• 불가능한 타입을 입력할 경우, 컴파일 단계에서 에러를 내어주므로 실제 실행 전에 에러를 잡아내, 생산성을 극대화 할 수 있다.

라이브러리

React

• 리액트는 타입스크립트와 호환성도 좋고,

• 내가 만들려는 웹사이트는 유저와의 상호작용이 상당수 있는 동적인 페이지들이다. 만일 순수 바닐라 자바스크립트만 사용할 경우, 유저 인터렉션이 있을때마다 렌더 트리 재생성, 요소의 스타일 계산, 레이아웃 구성, 페인팅을 다시 처음부터 하는 비효율성을 낳게 된다.

• 리액트 라이브러리의 목적 자체가 DOM 관리와 상태 변화 관리를 최소화하고, 개발자가 기능개발, 사용자 인터페이스 보다 집중할 수 있도록 도와주는 것이니만큼 순수JS가 아닌 React를 사용하려고 한다.

상태관리

redux/toolkit

context API를 제외하고 지금까지 사용해본 상태관리툴은 redux, redux/toolkit밖에 없는데, 이번 프로젝트의 목적은 시간내 프로젝트를 잘 완성하는 게 목적이라 새롭게 학습하지는 않기로 했다.(context API vs Redux 비교하며 공부했던 글)

스타일

emotion

• css-in-js 형식이라 라이브러리를 위해 엄청난 학습량이 필요하지 않다.
  (최근까지 팀플때문에 사용한 tailwind를 사용할까 잠시 고민했지만 그 엄청난 인라인 지옥을 맛본 경험을 떠올리며 마음을 접었다...)
• styled-components보다 번들 사이즈가 근소하게 작고 가볍다.
• SSR에서 별도의 설정 없이 동작이 된다!(styled-components는 ServerStyleSheet을 작성해줘야 한다)

material UI

• 리액트와 호환성이 높고, 이전 팀플 때 사용해본 결과 퀄리티도 매우 좋았다.
• 모바일도 지원하기 때문에 추후에 반응형도 제작할 걸 고려해 MUI를 선택했다.

리액트 훅 폼

보통 회원가입 form을 하나 만들 때는 유저로부터 이름, 이메일 주소, 비밀번호, 에러 메시지의 상태 값과 해당 상태들의 정합성을 판단하는 함수, 상태 값을 실시간으로 변경해줄 handler, 회원가입 요청 시 필요한 submit 함수 등등이 필요하게 된다. state를 생성해서 입력받는 방법도 있겠지만, 그만큼 state를 여러 개 만들어야 하는 번거로움이 있기에, react-hook-form 라이브러리를 사용해 이를 개선하려고 한다.

패키지 매니저

yarn

yarn과 npm은 속도 측면에서 이제 거의 차이가 없다고 하지만, npm은 패키지에 포함된 다른 패키지 코드를 자동으로 실행한다는 특징이 있다. 이로 인해 보안 시스템에 여러 가지 취약성이 발생하며 나중에 심각한 문제가 발생할 수 있다. 반면에 yarn은 yarn.lock 또는 package.json 파일에 있는 파일만을 설치한다!

아키텍쳐