Slow-postbox
2주동안 진행해온 프로젝트가 마무리가 되었다.
코드를 작성하기에 앞서 프로젝트를 시작하기 전 구성해야 할 기본적인 기획을 하게 되었는데
Flow-Chart/API설정/와이어프레임&목업/데이터베이스 스키마/테스크카드 등 생각보다 많은것을 정말 세세하게 정리했어야 했고, 그 과정이 잘 이루어져야 후에 코드를 작성 할 때 도움이 정말 많이 된다는걸 느끼면서 기획의 중요성에 대해 다시 깨닫게 되었다.
좋은 팀원들을 만나게 되어 감사한 마음으로 프로젝트를 잘 마무리 할 수 있었고
프로젝트를 진행하면서 느낀점과 배운점 그리고 개선할 점을 기록해놓고 다음 파이널프로젝트에 같은 실수를 하지 않으려고 한다.
SR(Software Requirement)이란 해당 프로젝트에서의 요구되는 것들이 무엇인지를 구체화 및 문서화하는 것
서비스 소개
느린우체통은 우편을 작성하면 일년 뒤에 실제 우편이 도착하여 과거의 나는 어떤 생각을 했는지, 어떤 기분이었는지, 어떤 상황이었는지 알 수 있게 해주는 우편서비스이다.
기존에 여행지에서 볼 수 있던 느린우체통을 오프라인이 아닌 온라인에서도 경험할 수 있도록 해보자 라고 시작하게 되었다.
메일을 작성 한 뒤 원하는 날짜를 고르고 발송하면,
메일이 언제 도착하는지 알 수 있는 알림메일과
편지 열람이 가능해지면 확인할 수 있다는 알림메일이 발송 되는
느린우체통을 모티브로 만들어진 예약메일발송 기능이 있는 서비스이다.
Keep Problem Try
Keep (유지할 항목)
- 팀원들과 매일 진행되는 회의 / 데일리 회의록작성
- 회의시에 진행하는 코드리뷰와 PR 차례대로 하기
💯 하루씩 번갈아가며 merge를 진행하게되어 어떤방식으로 진행되는지 알기 좋았다 - 데브로그작성과 블로깅
🔜 파이널프로젝트는 보다 세세하게 기록을 남기고싶다
Problem & Try
(1) commit/push/pr을 자주하지 않았다
- ❌ 맡은파트의 기능들이 겹치는 부분이 많아 기능별로 PR하지 않고 한번에 PR을 했다
늦은 PR때문에 데일리로 merge된 최신파일을 pull 해올수가 없어서 코드가 합쳐졌을 때 내 로컬에서 작동하던 것과 다르게 에러가 발생하여 수정하는데 시간이 많이 소요되었었다 - 🔜 작은기능이라도 마무리되면 팀원들과 꼬이지 않도록 수시로 PR하여서 수정을 최소한으로 하도록 노력할 것이다
(2) 기능구현시 로직을 먼저 생각하지 않고 기능별로 코드를 작성하였다
- ❌ 기능구현을 시작할 때 전체적인 로직을 생각하지 않고 한개씩 개발하였다.
- 🔜 다음부터는 각 페이지의 기능별로 어느페이지에 영향을 끼치는지와 겹치는부분들을 어떻게 함수를 줄지 정리한다음에 코드를 작성해야겠다
(3) 시간분배를 잘 하지 못했다
- ❌ 팀원들과 계획을 짜면서 TaskCard를 작성했을 시에 기능을 세세하게 짜지 않아 계획한 일정에 맞추지 못하였고 시간이 계속 오버되어서 늦은 새벽시간까지 코드를 작성하게되었다.
- 🔜 무리하지 않으면서 계획을 짜지 않고, TaskCard 작성할 때 기능을 조금 더 세세하게 작성하여 시간분배를 잘 해서 건강관리도 하고 계획한 일정에 차지가 없도록 해야겠다.
Position
2주 프로젝트를 진행하면서 팀원 모두 프론트와 백엔드를 경험하고자
기능별로 파트를 나누어 Full Stack 포지션으로 진행하게 되었다.
맡은파트는 받은편지함과 보낸편지함 및 메일 View 페이지의 기능구현을 맡았다.
- 기능
홈페이지에 접속하여 받은편지함을 확인하면 리스트에 있는 메일을 열람할 수 있다.
도착예정메일이나 받은편지함에 확인하지 않은 메일이 있을 시 편지함 위에 알림 Toggle이 표시된다.
메일 내용을 전체적으로 확인할 수 있으며,
열람 후에는 받은편지함 리스트에 읽음으로 표시가 되며, 수신자가 메일을 확인 하였는지 발신자도 확인이 가능하다.
열람이 가능한 편지는 삭제가 가능하다.
수신자가 메일을 삭제해도 발신자에게는 삭제된지 확인 할 수 없다.
구현 시 어려웠던 점
처음 페이지 구현시 유저가 로그인을 하면서 받아온 데이터가 Reducer에 담겨
useSelector로 값을 받아오게되면서 새로고침을 하면 유저데이터가 전달되기 전에 편지함 랜더링이 되어 빈페이지화면이 출력되었다.
리듀서가아닌 async/await 으로 유저데이터를 먼저 받아온 뒤
페이지를 랜더링하도록 하여 새로고침 시 빈화면이 뜨는 문제를 해결하였다.const getReceivedData = async () => { await setIsLoading(true) const authCheck = await axios.get( `${process.env.REACT_APP_SERVER_API}/user/auth`, { withCredentials: true, } ) await axios.get(`${process.env.REACT_APP_SERVER_API}/mail/receive`, { params: { email: authCheck.data.data.email, page } }) .then((res) => { setData(res.data.data); setCount(res.data.count) }) await setIsLoading(false) }
테크스택
이번 프로젝트를 진행하면서 사용하게 된 테크스택이다.
Nodemailer & nodeschedule
매일 같은 시간에 알림 메일을 보내기 위해 사용하였고, pm2로 프로세스를 관리하여 서버가 실행되는 동안 매일 0시 0분에 db에서 오늘 날짜로 예약된 메일 데이터를 가져와 수신자 이메일로 알림메일을 전송한다.
ckeditor
메일작성 페이지에서 텍스트 작성, 로컬 이미지 첨부 기능을 구현하기 위해 CKEditor5를 사용하였다.
CKeditor는 필요에 따라 다양한 버전을 선택할 수 있어 느린 우체통에서는 Heading 및 글자 크기 수정, 리스트, 들여쓰기, 인용, 테이블 태그, 링크 삽입 등의 기능이 구현된 ClassicEditor를 사용했다.
S3 & cloudFornt & ELB & Route53 & CM
- S3
AWS의 S3는 쿠키를 처리하지 않기때문에 CloudFront를 연결하여 클라이언트가 쿠키를 담을 수 있도록 설정해주어야 했다.
S3만을 이용한 웹 호스팅은 엔드포인트에 HTTPS를 적용할 수가 없다.
- cloudFornt
클라우드프론트를 이용하여 S3버킷의 엔드포인트를 지정해주어서 쿠키를 담을 수 있게 해주었고 ACM인증서를 이용하여 https를 설정을 해주었다.
- Route53
Route53이란 AWS에서 제공하는 DNS 서비스이다.
이번프로젝트를 진행하면서 Route53에서 도메인을 구매하였고 NS(네임서버)는 자동으로 등록된다 - CM
도메인이 있어야지만 연결할 수 있는 certificate Manger (홈페이지에 인증서를 발급해줌)
https 사용을 위해 CM에서 인증서를 발급받아서 클라우드 프론트한테 전달해주었다
마치며,
데브로그를 프로젝트 중간과정부터 모든 팀원분들이 작성하게 되었다.
기록을 남겨서 내가 당일에 무엇을 했는지 정리할 수 있어서 좋았고
다음 파이널 프로젝트는 좀더 상세하게 기록을 남기고싶다.
어드밴스드로 두었던 미디어쿼리는 시간이 부족하여 초반만 작업하고 마무리가 되었다.
4주 프로젝트의 어드밴스드 목표도 미디어쿼리 구현이며,
4주 프로젝트가 끝난다면 팀원들과 발견한 버그를 수정하면서 도전을 해보고싶다.
생각했던 것보다 훨씬 힘들었고 마음대로 되지않는 부분에서는 낙담도 많이 하였다.
우울해지기도 하였지만 팀원들의 응원덕분에 힘들어도 이겨내면서 끝까지 열심히 할 수 있었던 것 같다.
다음프로젝트는 이번 프로젝트의 경험을 바탕으로 더 성장해서 잘 해내고 싶다.
