프로그래머스 프론트엔드 데브코스 4기 9월 팀 프로젝트 회고

date

Oct 4, 2023

thumbnail

slug

devcourse-team-project-retrospect

author

status

Public

개요

타입스크립트, 리액트 등 프론트엔드 도구를 활용하여 SNS 서비스 만들기

리액트 혹은 Vue.js를 활용하여야 하고, 타입스크립트를 사용해야 함

백엔드 API는 프로그래머스 측 강사님이 제공, 디자인 및 아키텍처는 자유롭게

프론트엔드 교육생으로만 구성된 인원들로 팀을 구성

첫 팀 아이디어 회의를 거쳐서 TMI를 작성할 수 있는 SNS를 만들기로 결정했다. 기획과 의도가 분명했고, 필요한 기능과 불필요한 기능이 명확히 구분되었다. 기본 요구 사항을 모두 구현한다면 추가해야 할 기능은 많지 않았다. 마음 같아서는 이것 저것 만들어보고 싶었지만, 첫 협업 프로젝트이기도 하고 무엇보다 마감 기한이 그리 여유롭지 않았다.

결정 사항

앱처럼 보이는 웹을 만들자 → 직접 디자인을 하자

스토리북을 활용해서 공통 컴포넌트를 만들자

브랜치 전략을 활용하자

역할

디자이너가 됐다…

이건 나에게 큰 딜레마인데… 꼬맹이 시절에 웹 사이트를 만들어보고, 네이버 카페 대문이나 배너를 만들고, 홍보물을 만들고, 셔츠 로고 디자인을 해보고, 교내 교지 편집을 해봤던 자잘한 경험 덕에 자연스럽게 디자인 감각이 조금 생겼다. 어떤 프로젝트를 해도 ‘눈에 보여지는 것’을 맡으면 칭찬을 받았다. 어떤 부분이 구린지 직감이 오고, 생각하다 보면 왜 구린지 분석할 수 있는 능력이 있는 것 같다. 협업이 처음이다 보니 수동적으로 그나마 팀에 도움될 수 있는 역할을 맡아서 UI, 보여지는 모든 부분을 대부분 도맡아서 만들게 되었다.

처음 사용해 본 피그마(figma)

피그마(figma)를 처음 다루게 되었다. 대학생 시절 특강으로 Adobe XD를 한 번 배워본 적이 있었는데, 비슷한 느낌이어서 적응이 빨랐던 것 같다. 하지만 처음 사용하는 것이다 보니 결과적으로 화면을 만들어내는 것에 그쳤는데, 다음에 사용하게 된다면 조금 더 정확한 가이드를 제공해서 개발 과정에서 수정 혹은 질문이 많이 없도록 숙련도를 늘려보고 싶다.

이렇다 할 반응형 디자인을 기획하지 않아서 PC화면과 고정 화면 두 버전으로 만들었다…

디자이너와 개발자

디자인도 하고, 개발 협업을 하면서 왜 개발자와 디자이너 간에 의사소통을 중요시하는지 조금 알겠다. hover가 되었을 때, active 되었을 때 등등 가이드라인을 정말 세세하게 제공하지 않으면 개발자는 어떻게 화면을 완성할 지 알 수 없다. 예상치 못한 상황에 대한 디자인도 꼼꼼히 제공해야 하고, 디자이너 머리 속에 있는 직감을 확실한 결과물로 제공하고 개발자와 끊임없이 의사소통해야 원하는 결과물을 얻을 수 있다.

개발 분담

페이지 디자인이 모두 나왔다 보니 기획 단계에서 개발을 분담할 때 페이지를 기준으로 나누었는데, 이는 실수라고 생각한다. 아니 사실은 프로젝트를 기능 단위로 나누는 것이 모두들 익숙하지 않아 페이지 별로 나누었다고 말해야 하는 것이 더 정확하다. 개발 후반부에서는 기능 단위로 개발이 추가되었다. 내가 맡은 페이지는 로그인 페이지, 비밀번호 변경 페이지, 랜딩 및 404 페이지 등 간단한 페이지들을 맡았고 토스트 메시지 기능과 모달 기능을 맡아서 개발했다.

기술

멘토님이 항상 말씀해주셨던 것처럼, 기술을 단순히 사용하는 것에는 의미가 없다. 왜 해당 기술을 사용해야 했는지, 사용하기 전 어떤 문제가 있었는지, 문제를 어떻게 해결할 수 있었는지가 중요하다.

첫 스프린트에서 내가 열심히 디자인을 하고 있을 때 다른 팀원들이 개발 환경 세팅을 도맡아 해주었다. 다음에는 꼭 내가 해보고 싶다.

사용한 기술

React, Typescript

Tanstack-query, axios

vite

eslint, prettier, husky, lint-staged, commitlint, commitizen

storybook

tailwindcss, daisy ui

react-router, react-hook-form

notion, github, vercel, npm

리액트 쿼리

프로젝트가 리액트로 진행되었고, 앱에서 관리해야 할 전역 상태가 많지 않을 것이라 판단했기 때문에 따로 전역 상태 관리 라이브러리를 사용하지 않았다. 대신 토스트 메시지 상태, 색상 테마(라이트, 다크) 모드 상태, 사용자 인증 상태 관련하여 리액트 내장 라이브러리인 Context-API를 사용했다.

서버에서 받아오는 데이터를 처리하기 위해 리액트 쿼리를 사용했는데, 굉장히 많은 기능들이 있어 추가적인 학습이 필요하다고 느끼고 있다. 오래된 데이터를 업데이트하거나 업데이트를 용이하게 하기 위해 사용했다.

Daisy UI

초반에는 디자인에서 UI 요소들이 모두 나와 tailwind와 storybook을 활용하면서 하나 하나 구현했는데, 프로젝트 후반부에 필요한 컴포넌트를 하나 하나 구현하기 어려워서 daisy ui 라이브러리를 사용했다. 드롭다운 메뉴를 구현하는데 용이했다. 디자인과 CSS도 중요한 요소이지만, 다음 프로젝트에서는 UI 라이브러리를 활용하고 조금 더 기술적인 도전을 해보고 싶다.

문제

개발을 진행하면서 여러가지 문제가 발생했다. 간단히 요약해본다.

인증 토큰을 어디에 관리할 것인가?

모바일 앱 화면의 CSS 레이아웃을 어떻게 잡아야 하는가?

모달과 토스트 메시지의 상태를 어떻게 관리할 것인가?

Context API와 React Portal을 같이 사용할 때 렌더링 관점에서 어떤 일이 일어나는가?

에러 처리, 리액트 에러 바운더리와 Suspense 적용 → 에러 처리를 어떻게 해야할까?

코드 스플리팅에… 도전했는데 실패했다.

이미지 최적화 문제

문제에 봉착했을 때 어느 정도 공부를 하긴 했지만, 아직 확실히 정리하기 어려워 이 문제들에 대해 하나 하나 포스팅 할 예정이다.

다음 프로젝트에서는

디자인을 완전히 도맡지 말 것

기술적 도전을 할 것

프로젝트 세팅에 도전해볼 것