Final Project 회고록

 

길고도 짧았던 4주 간의 대장정이 막을 내렸다.

파이널 프로젝트 28일이라는 시간이 정말 눈 깜빡한 사이에 지나갔고, 어느새 코드스테이츠 수료생이 되었다.

파이널 프로젝트를 해냈다는 것 뿐만 아니라, 5개월의 코드스테이츠 개발자 과정을 해냈다는 점을 내 스스로 칭찬해주고 싶다.

 

개인적으로 4주동안 많은 것들을 배운 것 같다. 비단, 그림판이나 소셜로그인 등의 새로운 기술 적용 뿐만 아니라

프로젝트의 기획, 역할 결정, 팀회의를 통한 프로젝트 진행 방향 결정 등을 경험하면서 팀플레이어로서의 적극적인 태도, 유연한 의사소통 방법, 효과적으로 의견을 피력하는 법 등을 배울 수 있었던 귀한 시간이었다. 또한 제한된 시간 안에 어떻게든 주어진 과제를 해결 해내고자 하는 책임감을 갖게 되었고, 문제 해결력도 키울 수 있었다.

 

아래의 회고록은 시간의 흐름대로 파이널 프로젝트를 진행하며 겪었던 매일을 객관적으로 돌아보기 위해 작성했다.

---

1일차 프로젝트 아이디어 공유

내가 제시한 아이디어

 

서비스명: HealthAllTogether(건강 관련 앱 / 웹)

목표: 더욱 건강한 나, 건강한 일상, 건강한 인생

취지: 한국엔 건강/식단/피트니스 관련 전문 매거진이 거의 없다. 있어도 사용하고 싶은 욕구가 생기지 않는다. 건강/운동/식단 의 종합적인 정보를 손쉽게 확인하고 참여할 수 있는 전문 사이트가 있으면 좋겠다.

기능:

1. 식단/레시피 추천:
2. 피트니스 운동법: 영상도 있으면 좋을 것.
3. 건강트래킹: 식사일기, 건강일기 쓰기, 매일 목표/습관(걷기, 물마시기 등)
4. 건강상식(매거진/뉴스기사): 식단/운동/동기부여/생활습관 관련 // 코로나 관련 상식 등.
5. 걷기 랭킹(모바일 앱일 경우)
6. 건강 상식 공유하기: 유저가 글을 쓸 수 있는 페이지. 댓글 가능.

요약

1. 건강상식 제공: 식단/운동/동기부여/생활습관 관련 // 코로나 관련 상식 등
2. 건강트래킹: 식사일기, 건강일기 쓰기, 매일 목표/습관(걷기, 물마시기 등)
3. 공유 건강관련 지식 공유, 같이 만나서 운동.

팀원 제시 아이디어

• 오답노트(웹/반응형): 오답노트 사진을 올리고 공유 및 저장이 가능한 웹 서비스
• 그림일기(웹/반응형): 그림과 함께 글을 올림. 일기 공개설정⇒ 모두가 볼수 있거나(교환일기 신청) 랜덤페어에게 공개. 캘린더로 본인 일기 확인가능(히스토리) => 최종 채택!
• ASMR(웹/반응형): 블랙 노이즈. 방해되는 잡음(기침소리, 비행기소리). 빈도 조절 가능. 디자인 및 애니메이션이 중요할 것 같음.

2일차 프론트엔드 담당 파트 결정

메인화면, 일기쓰기, 메뉴얼, 회원가입 페이지로 담당 파트가 정해졌다.

짧은 프로젝트 일정으로 인해 지도API 를 이용하여 일기의 배경이 되는 장소를 저장하는 기능을 구현하지 못해 아쉬웠다.

 

3, 4일차 개발 환경 세팅

• React + typescript + Redux
• ESLINT + Prettier
• Styled Components
• 필요한 모듈 설치

위 조합의 개발 환경 세팅을 했는데, 첫번째 프로젝트에서 사용하지 않은 Redux 를 추가했다.

하지만 세팅 후 팀회의를 통해, 우리가 구현하고자 하는 웹서비스의 경우 부모컴포넌트와 자식컴포넌트들 사이의 깊이가 깊지 않기 때문에 Redux를 사용하여 별도의 Store 를 둘 필요성이 크지 않다는 결론이 내려졌다. 해당 프로젝트에서는 React/Hooks 를 사용하여 상태관리를 하는것 만으로도 충분했다.

 

5, 6, 7, 8 일차 메인, 메뉴얼, 일기쓰기, 회원가입 페이지 개발(CSS 디자인)

• App.tsx Route 분기(페이지 기준)
• 모든 페이지들에 Typescript 적용
• signin page, components
• maual page
• diary page, components
• Main Nav component
• Application page, components

피그마를 이용하여 각 페이지들을 아래와 같이 컴포넌트 단위로 쪼개어 작업했다.

CSS 가 익숙하지 않아 적응하는데 시간이 걸렸지만, 초기에 피그마로 기획했던 디자인과 유사하게 아웃풋이 나와 다행이었다.

9일차 소셜 로그인 모달창 구현

리액트 모달 라이브러리를 사용하여 구현했다.

10, 11일차 반응형웹_미디어쿼리 적용

12일차 Sub Nav 바/React 에서 페이지 이동 구현

리액트엔 페이지 이동방법이 6가지 정도 있는데, 그 중에

history 에 push 메소드를 이용하여 페이지를 이동시키는 방법을 사용했다.

13,14,15일차 그림판 적용 및 PNG 저장 구현

여러 시도 끝에 PNG 파일 저장을 구현할 수 있었다. multer 를 통해 S3 버켓에 이미지를 업로드하고 url 을 리턴받는다.

자세한 사항은 nomadkim880901.tistory.com/484?category=980425 에서 확인이 가능하다.

 

16, 17일차 회원가입 로직 구현

처음엔 모달창을 이용하여 유효성 검사 메세지를 보여주었는데, 이 경우 완료 버튼을 눌러야만 잘못된 부분을 확인할 수 있기 때문에 사용자의 입장에서 매우 불편할 것으로 판단했다.

이를 개선하기 위해 잘못된 형식의 정보를 기입하거나 데이터베이스에 동일한 정보(이메일, 전화번호, 닉네임)가 존재할 경우, 글자를 입력할 때마다 해당 유효성 검사를 하고, 서버에 중복확인을 하여 교장선생님 이미지 밑에 메세지를 노출시켜 유저가 확인하기 용이하게 구현했다.

18일차 로그인/로그아웃 로직 구현

컴포넌트들로 구성된 페이지의 경우 Props 를 이용하여 로그인 상태 변경 메소드와 로그인 상태를 전달하는 방식으로 구현했다.

로그인 상태를 전달하고 그 props 를 자식 컴포넌트에서 사용해야 리렌더링이 된다는 것을 깨닫는데 오랜 시간이 걸렸다. (상태가 업데이트 되어야 실행이 된다.)

로그인 상태와 토큰을 session storage 에 저장하여 useEffect 함수 안에서 사용하기 때문에, 새로고침을 해도 화면 상태가 유지된다.

19, 20, 21일차 그림판/일기장 로직 구현 (작성, 저장, 수정)

그림판 컴포넌트에서 날씨 데이터, 이미지 url, 이미지 좌표 데이터를 diary 페이지에 전달하는데, 이는 모든 데이터가 제출되었을 때 diary 의 완료버튼이 작동할 수 있도록 하기 위해서이다. 즉, 이 데이터들을 상태끌어올리기 및 diary 에 전달하고,

diary 에서의 제목, 내용 작성, 기분 까지 선택되었을 때 완료버튼이 작동하여 서버에 API 를 통해 제출하게 된다.

 

22, 23일차 구글, 카카오 소셜 로그인 구현

카카오 소셜 로그인은 SDK 를 이용하여 구현했는데, 유저의 이메일 제공 여부가 선택사항이기 때문에 아래와 같은 경우의 수가 발생한다. Email 이 제공되지 않았을 경우엔 바로 추가정보 기입 모달로 보내고, Email 이 제공된 경우는,

 

소셜 로그인 모달에서 추가정보 기입 모달로 이동 시킬때 상태 끌어올리기를 사용했는데, 좀 헷갈렸다.

 

구글 소셜 로그인의 경우, 타입스크립트를 적용할 시 sdk 사용이 불가하여 구글 로그인 라이브러리를 사용하여 구현했다.

 

24, 25일차 제작자(만든이) 페이지 구현 및 배경이미지 선정

26일차 로딩 효과 구현

네비게이션 바를 통해 페이지 이동과 일기 작성 및 수정 시에 아래와 같이 로딩 이미지가 뜨도록 구현했다.

로딩 중에는 마우스 클릭이나 키보드 입력이 불가한데 이는 pointer-events: stroke; 를 이용했다. SVG 형식만 클릭이 가능.

해당 로딩 엘리먼트는 최상위 App 컴포넌트 에 위치시켰는데, useEffect 가 실행될때마다 세션스토리지에 loadingImg 키 값을 확인하고(페이지 이동 버튼을 클릭할 시점에 세션스토리지에 해당 키값을 저장해준다. )visible 일 경우에만 해당 엘리먼트를 찾아 CSS display 값을 flex 로 바꿔준다. 그리고 setTimeOut 을 이용하여 일정 시간이 지난 후 none 으로 바꾸어 주었다. 물론 세션스토리지에서 loadingImg 키값은 바로 삭제해준다.

 

페이지를 이동시킬때 페이지 이동과 새로고침을 한꺼번에 해야되기 때문에 아래와 같은 코드를 사용했다. 

window.location.href = "해당 endpoint"

window.location.href = "해당 endpoint"

27일차 배포후 에러 핸들링

• sub 네비게이션 이미지(책모양)와 paint page의 붓모양이 사라지는 현상
• 일기쓰기 완료 후 모달창 제거
• 구글, 카카오 OAuth API의 사이트 도메인 변경
• OAuth clientID 를 .env 에 저장하여 사용

28일차 서비스 팀발표 녹화 및 발표

 

Final Project Contact Points

배포 주소: royaldiary.ml/

깃헙 주소: github.com/codestates/RoyalDiary-client/wiki

발표 링크: bit.ly/3s0dbCQ