기업협업 프로젝트 회고하기

LSA·2022년 6월 12일

팀프로젝트

3차 팀 프로젝트

목록 보기

3/3

기업협업 프로젝트인 플리지 웹사이트 제작 프로젝트 회고록입니다.
하지만 1~3주차까지 간단하게 회고를 진행하여, 바로 프로젝트를 소개하는 게 낫겠습니다.

어떤 프로젝트?

플리지는 출차요청 앱 서비스입니다.
플리지의 회원이 NFC 스티커를 차에 붙여두면, 나중에 다른 사람이 스티커에 태그를 하여 해당 차주에게 바로 메세지를 보낼 수 있도록 되어 있습니다.

저희가 작업한 부분은 플리지 서비스를 소개할 수 있는 홈페이지 화면 구현입니다.
기획 및 디자인은 플리지 측에서 제공해주셨으며, 저희 팀은 화면 구현과 함께 백단 api를 연결하는 작업을 진행했습니다.

작업 코드는 회사의 보안 규정상 공개가 불가능합니다.

작업 목록

메인 페이지
플리지 이용방법
홍보 페이지
이벤트 페이지
로그인
회원가입
아이디/비밀번호 찾기
채팅 페이지(UI만)
NFC 태그 후 메세지를 보내는 페이지
마이페이지
전 페이지 반응형 제작

기술 스택 및 라이브러리

next.js

typescript

react query

recoil

styled-jsx

jest

작업 기간 및 인원

프론트엔드 2인, 약 4주 간(19일) 진행

담당 파트

제가 담당한 부분은 아래와 같습니다.

이벤트 페이지

채팅 페이지

마이페이지

기타 UI 컴포넌트

1. 이벤트 페이지

이벤트 아이템을 누르면, 해당 이벤트 페이지로 바로 갈 수 있는 컴포넌트를 만들었습니다.
이벤트의 내용과 상세페이지 디자인은 아직 미기획 상태라 임시 형태로 컴포넌트 내에 정보들을 기입하도록 제작되었습니다.
반응형은 간단히 900px을 분기점으로 하여 제작되었습니다.

2. 채팅 페이지

채팅 리스트와 채팅 룸이 있는 페이지입니다.
안읽은 메시지만 보기 와 같은 체크박스는 공통 UI 컴포넌트로 제작하여, 타 페이지에서도 사용할 수 있게 만들었습니다.
채팅 리스트의 최근 메시지는 2줄이 넘어가면 자동으로 ellipsis로 말줄임 처리가 됩니다.

채팅 룸의 입력창에는, 초반에는 react-quill 텍스트 에디터 툴을 사용하여 글자수가 1000자를 넘어가면 전송 버튼 이 비활성화되는 기능을 추가하였습니다.

그러나 배포 테스트 시 react quill이 react와 npm 충돌 오류가 생겨, 어쩔 수 없이 react-quill을 뺄 수밖에 없었습니다..

채팅방을 나가려면, 상단의 dot 버튼을 눌러 채팅방 나가기 를 클릭해 나가는 방식입니다.

채팅페이지의 반응형은 이렇게 되어 있어요!

채팅 리스트에서 바로 나가기 버튼을 누를 수 있도록 되어있습니다.
웹앱이 아닌 웹에서 사용되므로, 채팅방에는 굳이 나가기 버튼이 필요하지 않을 것 같다고 판단했습니다.(뒤로가기 버튼이 있으니까요)

채팅방의 경우에는 톡플러스 api를 이용해야 했습니다.
그러나 톡플러스 api는 순수 자바스크립트/jquery 문법으로 데모 페이지가 만들어져 있어, spa 라이브러리에 적용하는 방법은 스스로 깨우쳐야 했습니다.
이 때문에 회원정보를 메인 홈페이지와 연동하고 실시간 채팅 기능을 연결하는 부분이 생각보다 많이 지연되어 결국 채팅 기능은 연결하지 못했습니다....

제일 많이 공들인 페이지인데 api 연결이 어려워 완성하지 못했다는게 가장 슬픈 부분이네요.
아마 시간이 충분했다면 실시간 통신까지 할 수 있지 않았을까?하는 생각도 듭니다.

3. 마이 페이지

로그인한 뒤, 회원정보 페이지로 이동할 수 있는 화면입니다.

실제 라우팅 주소는 /myprofile 이지만 유저에게 보이는 주소는 /user/info/me 로 나오게 변경하였습니다.
만약 다른 유저가 상대방의 정보를 열람할 상황일 경우에도, 해당 페이지 주소가/myprofile 이라면 어색하니까요.

마이 페이지에서는 로그인된 회원 정보를 읽어와 아이디, 휴대폰번호, 차량번호, 프로필 이미지 주소 등을 읽어와 값을 부여합니다.
이 화면에서는 보안상 회사 내의 api를 연결할 수 없어 임시의 목업 데이터로 대체된 이미지만 기능 자체는 테스트를 완료했습니다.
저쪽의 등록/변경 버튼을 누르면..

input 창과 함께 데이터를 입력하여 DB와 연동되어 수정이 가능합니다.
수정과 변경완료를 동시에 처리할 수 있는 UI를 실제로 작업해보니 생각보다 간단한 알고리즘이어서, 완성 후의 보람이 더 크게 느껴졌습니다.

반응형에서는 이런 화면입니다.

프로필 이미지 변경 기능도 구현하고 싶었지만 시간이 부족하여 하지 못한 게 아쉽네요.

4. 기타 UI 컴포넌트

체크박스나 플로팅 버튼처럼 공통적인 컴포넌트를 제작했습니다.
화면에서는 간단하게 보이는 부분이지만, 팀원이 손쉽게 사용할 수 있도록 별도의 템플릿을 짜는 작업이었습니다.

공통적인 컴포넌트들은 /components 폴더 산하에서 관리되었습니다. 그리고 이 경로에는

이런 식으로 특정 페이지에서만 쓰이는 컴포넌트, 혹은 전역적으로 사용되는 컴포넌트 등등이 따로 구별되어 있어요.

한가지 예시로 checkbox 컴포넌트를 보여드리자면,

 <CheckBox
          title="안읽은 메시지만 보기"
          required={false}
          name="msgFilter"
          check={checked}
          setCheck={setChecked}
/>

5개의 파라미터 값을 채워주어 자동으로 제가 커스터마이징한 체크박스가 형성됩니다.
프론트엔드분들에게는 일상적인 작업일테지만 저는 이렇게 props 등을 사용하여 컴포넌트를 정리하는 작업들이 너무 좋더라고요. 이게 react의 매력이기도 하고요.

프로젝트에서 얻은 것들

이번 프로젝트는 팀원이 단 둘뿐이라서 팀워크를 맞추는 데는 큰 불편이 없었습니다.
(오히려 소규모 팀은 협업 속도가 더 빠른 느낌이 드네요)

다만 이번 프로젝트는 처음으로 저희가 사용하지 않았던 것들을 많이 시도했기에 가장 도전적인 프로젝트이기도 합니다.

프로젝트 관리법

저희는 4주동안 단기간에 프로젝트를 진행해야 했기에, 이후에 들어올 작업자분에 대한 고려를 해야 했습니다. 때문에 프로젝트 파일의 정리와 문서화가 중요했어요.
실제 실무에서는 어떨지 모르겠지만 저희는 최대한 팀 프로젝트에서의 경험을 살려 문서화 작업을 진행했습니다.

파일 구조 설명
필수 파일의 작성법과 컨벤션 정리
페이지 URL 설명
컴포넌트 및 함수 가이드

에러 기록하기

이건 다른 팀을 보고 배운 점인데, 작은 오류라도 지나치지 않고 오류 기록을 하려 했습니다.
사실상 오류를 통해 배우는 점이 더 많으니까요. 물론 같은 오류를 반복하지 않도록 시간 절약하는 목적이 더 큽니다.

next.js의 사용

CSR(~~기업의 사회적 책임~~ 클라이언트 사이드 렌더링) 사용에 익숙해져 있던 저에게 SSR (서버사이드 렌더링) 방식의 프레임워크는 신선한 충격이었습니다.
처음 브라우저에 띄워지는 것을 보며 "기존 react랑 비슷하지 않나?" 라고 생각했지만 작업을 반복하면서 SSR이 더 빠르다는 것을 체감하게 되었어요.
무엇보다 라우팅 관리를 따로 하지 않아도 된다는 게 너무너무 편했습니다!
파일이나 컴포넌트를 import 시킬 때에도 상대경로가 아닌 절대경로로 처리할 수 있다는 점이 좋았고요.
그래서 가능하다면, next.js를 더 공부하여 써보고싶네요.

typescript의 사용

next.js만 사용했다면 아마 저의 작업량은 더 늘어났을 겁니다.
기존 자유분방한 명령을 수행했던 javascript와 달리 typescript는 데이터들의 유형을 정해주어야 하는 것이 상당히 귀찮았습니다. 하지만 프로그래밍 시스템 상 더욱 안정적인 언어를 사용해야 하는 것이 옳죠.
그런데 오히려 next.js를 타입스크립트로 작성하려니 생각지도 못한 곳에서 타입을 정해주어야 해서 이 부분이 어려웠던 것 같아요. 레퍼런스 찾는 것조차 어려워서, 팀원과 함께 고민하고 공부했던 시간이 많았습니다.
이 프로젝트에서 사용했던 것은 새발의 피라는 생각이 들어요. 역시나 계속 사용해서 익혀보는 수밖에 없겠습니다.

채팅 구현에 대한 고민

기능 자체는 완성하지 못했지만, 채팅 통신이 어떻게 이루어지는지/채팅창에서의 예외 처리가 어떻게 이루어지는지 등에 대한 알고리즘을 배웠습니다. 이 부분은 팀원분이 채팅기능 제작 경험이 있어서 손쉽게 조언을 받았어요.
또한 채팅창을 사용하기 위해 텍스트 에디터가 필요하다는 것도 처음 알아 직접 에디터 툴을 설치하고, 커스텀했던 경험을 하게 되어 좋았습니다.

아쉬웠던 점들

물론 기업협업 프로젝트를 진행하면서 좋은 것만 얻어갈 순 없습니다.
초기 게획과 달리 제가 구현하지 못한 기능들이 남았다는 게 가장 아쉽고,
오류 기록을 충분히 기록하지 못한 것,
외부 솔루션 api 연결에 많은 시간을 쓴 것,
자의는 아니지만 프로젝트 발표 시 회사 사정 상 api 연결이 불가능해져 기능 테스트를 보여주지 못한 점입니다.

결론

무엇보다 실무 백엔드 개발자, 디자이너와 협업하여 운영자 시점으로 주도적인 프론트엔드 작업을 진행했다는 경험이 가장 인상깊은 점이었습니다.
확실히 클론 사이트 때와는 못했던 부수적인 운영 관련 고민들을 하며 팀원과 토론을 했던 시간이 있어 발전할 수 있었습니다.
역시 최고의 레벨업은 실무를 통해 이어지는 법이네요!

LSA

진짜 간단하게 작성한 TIL 블로그

이전 포스트