팀 프로젝트 : Finble 개발 회고

2/10 CEOS 16기 데모데이를 마지막으로 팀 프로젝트가 끝이 났다!!!🥳🥳🥳

이번에는 Finble 프론트 개발에서 내가 경험하고 배웠던 것을 위주로 다뤄보겠다.

 

기술 스택✨

React

이제까지 프론트 스터디를 리액트로 진행하기도 했고, 디자인팀이 설계해준 디자인시스템을 제대로 활용할 수 있는 방안을 생각했을 때, 컴포넌트화를 효율적으로 할 수 있는 React로 개발을 진행하는게 맞다고 생각했다. 원래는 Next.js를 쓸까도 고민했으나, 내가 이번 CEOS 활동을 통해 리액트 지식에 대한 깊이가 깊어진만큼, 이를 적용한 프로젝트를 해보고 싶어 React를 선정하게 되었다. 다음 프로젝트를 할 기회가 생긴다면 그 때는 Next.js를 도전해보고 싶다.

TypeScript

누군가가 자바스크립트를 쓸지, 타입스크립트를 쓸지 고민한다면 난 당연히 타입스크립트를 써야지! 라고 할 것이다. 자바스크립트는 모든 변수를 const로 선언해버리니 그 변수가 number인지 string인지 알 길이 없다. 심지어 구조체도 죄다 const로 선언해버린다. 그럼으로써 예상치 못한 런타임 에러가 일어날 수 있는데, 이 런타임 에러는 잡는 것이 매우 귀찮다... 하지만 타입스크립트를 이용해서 사전에 타입을 정의해주면 컴파일 단계에서 에러가 발생하고, 어디서 에러가 발생했는지 바로 알 수 있다. 안 쓸 이유가??? 이건 무조건 타입스크립트를 써야겠다고 생각했다.

Redux + Redux Toolkit

이전 프로젝트에서는 모두 recoil을 써왔고, 항상 redux 사용을 도전해왔으나 악명 높은 redux의... 장벽에 막혀 번번히 실패했었다. ( store, action, reducer, dispatch... ) 그래서 이번 프로젝트에서는 무조건 redux 사용을 성공하리라 하는 다짐이 있었다. 그렇게 redux를 알아보던 중... Redux Toolkit이라는 도구를 프론트메이드 채연이가 알려줬다. Redux Toolkit 공식문서 에 따르면 복잡하고 어려운 redux 코드 구조를 개선하기 위해 redux 팀이 개발한 도구라고 한다. Redux Toolkit을 사용하면 redux를 더 효율적으로 사용할 수 있다고!! 안 쓸 이유가 없어서 사용해보니, 역시나 너무 편했다. 앞으로 다른 프로젝트에서 차용할 예정!!

 

배운 것들✨

1.  디자인 시스템에 따른 공통 컴포넌트 제작

정말 이렇게 디테일한 디자인 시스템을 가지고 개발을 한 것은 처음이었다. 

이 디자인 시스템에 따라 Typography, 공통 컴포넌트들을 미리 공통화를 해놓고 개발을 시작했는데,

덕분에 새로운 페이지를 만듦에 있어서 굉장히 수월했다.

한번 저 디자인시스템이 갈아엎어졌을 때 상당한 스트레스가 있었던 기억이 있지만...

능력자 디자인팀과 함께해서 정말 많이 배웠던 것 같다.

2. AccessToken, refreshToken을 이용한 보안 처리

우리 팀은 구글 소셜 로그인을 사용해 사용자의 고유 accessToken, refreshToken을 발급해 권한 관리를 하는데,

이 때 accessToken의 유효기간이 30분이므로, setTimeout을 이용하여 29분 마다 refreshToken을 이용해 새로운 accessToken을 받아와줬다. 이 일련의 과정에서 사용자의 권한 처리를 어떻게 하는지 알게 되었고 JWT 인증 방식에 대해 공부하게 되었다.

3. Redux Toolkit을 이용한 전역상태 관리

드디어 redux로 전역상태관리를 하는데에 성공했다는 데에 의의가 있다. 이제까지는 적용중에 항상 포기했었는데,

이번엔 Redux Toolkit의 도움으로 redux 사용에 성공했다. 또한 우리는 Redux Toolkit을 전역상태관리에만 사용했는데, Redux Toolkit은 createAsyncThunk라는 비동기처리 또한 제공한다고 한다. 다음에는 이 기능을 사용해보고 싶다.

4. Amazon S3를 이용한 배포

이전까지는 vercel을 이용해 배포를 진행했었는데, 이번에는 amazon S3를 이용하여 배포에 성공했다.

그것도 커스텀 도메인을 적용해서!!!! amazon Amplify를 이용하니 CI/CD도 제공해줘서 Finble-fe의 main 브랜치에 푸쉬만 하면 자동 빌드/배포가 진행되어 상당히 편한 배포 시스템을 구축했다는 것에 의의가 있다.

 

Finble Github✨

https://github.com/finble-dev

Finble✨

Finble-FE✨

https://github.com/JeeeunOh/Finble-FE

GitHub - JeeeunOh/Finble-FE: 주린이를 위한 주식 포트폴리오 관리 서비스✨

 

위는 Finble 공식 깃허브와, 보안 상 env 파일만 빼고 따로 생성해둔 Finble-FE 깃허브이다!

프론트가 어떻게 PR과 커밋을 진행했는지 그 로그를 보여줄 수 없어 아쉽지만,

이런식으로 commit, PR을 통해 개발을 진행해나갔다.

적어도 기능 단위로는 PR을 하려고 했다.

 

이렇게 약 6주간의 개발이 끝이 났다. 너무 고생했던 핀브리들에게 박수를👏🏻👏🏻👏🏻👏🏻👏🏻