Intro

코드스테이츠에서 퍼스트 프로젝트를 마치고 파이널 프로젝트를 진행하게 되었다

퍼스트 프로젝트에서는 코스를 진행하면서 한번도 마주치지 않았던 팀원들과 만나 진행을 하게 되었고

그 과정에서 소통이 얼마나 중요한지 배울 수 있었다

파이널에서는 코스를 진행하면서 평소 자주 의견을 나누고 같이 공부도 하던 동기들과

진행하게 되었다 2주 프로젝트 보다는 확실히 더 잘 만들어야 한다는 부담이 어느정도 있었고

어떤 주제를 통해 프로젝트를 진행해야 하는지 팀원들과 의견을 깊게 나눴고 여러가지 의견이 나왔다

많은 의견 이 오가던 중 우리는 현재 취업을 준비하고 있다는 상황에 집중을 했고

우리 같은 취준생을 위해 회사에서 나를 어필할 수 있는 이력서 폼을 지원해주는 서비스를 만들기로 했다

나 같은 경우는 프론트엔드 개발자를 희망하고 있었고 나를 포함 1명이 프론트엔드

또 나머지 두명은 백엔드를 희망하고 있었기에 포지션에는 큰 무리없이 프로젝트를 시작할 수 있었다

Moi

모두의 이력서(Moi) 프로젝트는 취업을 희망하는 모든 이들이 이력서를 간단하고, 빠르게

작성할 수 있는 이력서 폼 제공 플랫폼이다 비회원도 이력서를 작성해볼 수 있고

자신의 사진 및 가지고 있는 기술 혹은 경력, 자격증, 수상 이력등 을 작성할 수 있다

작성된 이력서는 미리보기 기능을 지원하고 작성된 이력서를 인쇄 또는 PDF로 다운받을 수 있다

사실 개발자들만 사용할 수 있는 이력서 서비스를 만들까도 고민했었는데

그렇게되면 사용하는 유저가 한정적일 것 같아 모두가 사용가능한 이력서 플랫폼을 만들기로 했다

그 결과 모두의 이력서라는 이름을 사용할 수 있었고

모두의 이력서를 줄인 '모이'라는 단어로 새가 행운을 물어다준다는 스토리텔링도 할 수 있었다

SR

프로젝트 설계에는 5일 정도를 쏟은 것 같다

그 전 프로젝트의 경험으로 SR단계에서 제데로 설계하지 않으면 나중에 굉장히

힘들어진다는것을 느꼈고 시간이 걸리더라도 설계에 집중해야 한다고 생각했다

이 부분은 파이널의 팀원들도 모두가 공감하고 있었다

기획 단계에서 notion, miro를 통해 플로우 차트를 짜고 API문서는 gitbook을 활용했다

화면 설계는 Figma를 통해 작성했다

Stack

우리는 프로젝트에 앞서 어떤 기술 스택을 사용할 것인지에 회의를 진행했다

개인적으로 나는 2주 프로젝트에서 리덕스를 활용하고 싶었는데

팀원이 짧은 시간과 기술 스택에 대한 부담을 크게 느껴 React Hook 으로 상태를 관리했었다

프로젝트를 진행하면서 구조가 깊어질수록 상태 관리에 대한 어려움이 느껴졌었고

다음 프로젝트에서는 꼭 Redux 사용해야겠다고 생각했었다

파이널에서 나와 같이 프론트를 맡은 준형님도 같은 의견이였고 TypeScript 또한 사용해보기로 했다

그렇게 회의를 통해 프론트에서는

React, Redux, Redux-saga, TypeScript, Custom Hook 기술 스택을 사용하기로 했고

결론적으로 View는 Typescript를 적용한 React로 구현하고, 상태 관리는 Redux

비동기와 관련한 사이드 이펙트는 Redux-saga를 통해 처리하기로 하였다

디자인 패턴은 Presentational & Container 컴포넌트 방식을 사용했다

Presentational 컴포넌트: 리덕스와 연동되어있지 않고 온전히 뷰만 담당하는 컴포넌트
Container 컴포넌트: 리덕스와 연동이 된 컴포넌트

여기에 추가로 Custom Hook을 만들어서 사용하기로 했다

각 역할로서 폴더를 구분하다 보니 CSS 작성 방식 또한 정해야 했다

우리는 View를 담당하는 Presentational Component의 CSS를 작성할 때 클래스 네임의 중복을 걱정하였고

그 걱정을 없애줄 수 있는 Module CSS 방식을 선정해서 CSS를 작성하였다

Module CSS를 통해 클래스 네임의 중복을 허용할 수 있었고 각 컴포넌트 마다 중복된

클래스네임을 사용할 수 있었다

백엔드는 Node Js, Express, JWT, MongoDB, Mongoose를 사용하기로 했다

프로젝트를 마치고 나서 알게 된 정보 :

프리젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것을 더 이상 권장하지 않는다고 합니다
이 방식이 유용하다고 느꼈던 이유는 상태 관련 로직을 컴포넌트에서 분리 시킬수 있기 때문이였는데
Hook을 통해서 동일한 작업을 할 수 있기 때문에 더 이상 컴포넌트의 구분이 불필요하다고 합니다.
출처: Redux 어떻게 써야 잘 썼다고 소문이 날까?(Velopert)

Directory

대표적인 폴더 구성을 크게 나눠보자면 액션이 실행되었을때 서버에 요청을 하는 API

EX)

View만을 담당하는 components

EX)

기술적인 로직을 작성해서 View단에 넘겨주는 containers

EX)

Custom hook을 모아둔 hooks

EX)

Redux / Redux-saga 로직을 작성하는 modules

EX)

CSS를 담당하는 Styles 총 5개의 카테고리로 구성했다

EX)

Project: 랜딩 페이지

랜딩 페이지는 사용자가 접속했을때 무엇을 하는 서비스인지 확실히 알 수 있는게

좋을 것 같다는 의견이 있었고, 실제 그런 피드백도 받았었기에

우리의 서비스를 각인시킬 수 있게 만들어야겠다고 생각했다

전체적인 디자인은 팀원 모두와 상의했고 메인페이지를 좀 더 인터랙티브하게 만들고 싶었지만

시간 관계상 만족스러운 디자인을 만들지는 못했다 우리 서비스의 특징을 보여주고,

또한 이력서를 어떻게 작성하면 좋은지에 대한 TIP을 정보를 모아 작성해두었다

헤더의 Overview에 소개, 후기, 가이드 모달을 만들어 클릭했을때 스크롤이 이동할 수 있도록 했고

스크롤 이벤트는 준형님이 React-scroll을 이용해 구현해주셨고

페이지 가장 아래로 내려갔을때 위로 가는 화살표 아이콘을 클릭해서 가장 위로 올라갈 수 있게 구현했다

Project: 템플릿 페이지

우선 우리는 비회원도 서비스를 체험할수 있도록 고려했기 때문에

시작하기 버튼을 눌렀을때 로그인이 되어있지 않다면 이력서는 저장되지 않는다는

모달창을 띄워주고 로그인을 할지, 비회원으로 체험해볼지를 정할 수 있도록 했다

비회원으로 계속을 클릭했을시에는 템플릿을 선택하는 페이지로 이동하게 되고,

원하는 템플릿을 선택하면 그 양식에 맞는 이력서 작성 폼으로 이동하게 된다

시간이 너무 부족해서 템플릿을 한가지밖에 만들지 못했는데 아쉬운 부분이다

이 부분은 리팩토링을 통해서 추가할 예정이다

Project: 이력서 작성 페이지

우리 서비스에서 가장 핵심이라고 할 수 있는 이력서 작성 페이지다

가장 많은 시간을 쏟기도 했고 이력서 작성 UI/UX 에 많은 고민을 했다

개인정보와, 자기소개 자신이 가진 기술, 경력, 자격증, 학력, 등을

입력할 수 있고 사진도 업데이트가 되는데 사진은 원하는 사이즈로 자를 수 있다

사진 크롭은 react-image-crop 을 사용해 구현했다

미리보기 및 PDF 다운로드

미리보기를 지원하고 작성한 이력서를 PDF로 다운로드 또는 인쇄를 할 수 있다

Project: 마이 페이지

이력서 작성 페이지에서 저장하기를 누르면 마이페이지로 이동하게 되고,

내가 작성한 이력서 목록이 보이게 된다

이 기능은 Redux-saga를 통한 비동기 요청을 통해 해당 유저가 작성한 글 목록을

가져와서 렌더링 시키는 방식으로 작업했다

Redux-saga와 Custom hook을 이용해 작업했는데 힘들지만 즐거운 작업이였다

아래 사진은 해당 로직을 구현하면서 작성한 Custom Hook이다

또한 내가 작성한 이력서를 삭제할 수 있는데 작성되어있는 이력서 카드 하단의

아이콘을 클릭하면 모달창이 나오게 되고, 삭제를 누르면 이력서가 삭제된다

그리고 새 이력서 작성하기 카드를 누르면 템플릿 선택 페이지로 이동하게 만들었다

Project: 문의하기

문의하기 페이지는 최대한 심플하게 만들었다 문의 내용을 작성하고

문의하기 버튼을 클릭하면 Redux-saga를 통해 post요청을 보내고

백엔드쪽에서는 nodemailer 를 사용해서

우리 공통 이메일로 사용자가 작성한 문의가 Email로 오도록 구현했다

문의하기 로직을 구현하면서 작성한 AskAPI

아래는 Saga 로직이다

Deploy

나는 프론트 배포를 맡았다

AWS S3와 HTTPS 배포를 위한 CloudFront, Route53을 이용해 배포를 진행했다

많은 개발자분들이 좋은 자료를 많이 공유해두었어서 쉽게 진행할 수 있었다

감사합니다:)

Review

파이널 프로젝트를 진행하며 정말 재밌기도 했고 많이 힘들기도 했었다

좋은 팀원들과 작업을 하게되서 정말 큰 행운이였다고 생각하고 있고

하나의 웹어플리케이션을 내가 구현해봤다는게 너무 너무 뿌듯했다

시간이 조금만 더 주어졌다면 더 완성도 높은 프로젝트를 구현할 수 있었을거라는 아쉬움도 많이 컸다

또한 소통이 개발자에게 있어서 정말 정말 중요한 부분이라고 느낌과 동시에

팀원과의 소통이 프로젝트가 올바른 길로 가기위해서 필수적인 요소라고 생각했다

개발을 시작하면서 잊을 수 없는 좋은 기억으로 남을 것 같고 기술적으로도 많이 발전한 것 같다

Redux와 Redux-saga Typescript를 사용하면서 어려웠지만 조금은 익숙해질 수 있었고

아직 갈길이 멀지만 이번 프로젝트에서 얻은 경험을 통해 앞으로 조금 더 나은 로직을 짤 수 있지 않을까 생각해본다

리팩토링을 진행 할 예정입니다
모두의이력서 를 사용해보시고 피드백을 남겨주시면 감사하겠습니다:)