[새싹X코딩온] 풀스택 2차 프로젝트 회고록

지난 3주간 새싹에서의 두번째 프로젝트가 진행됐다

1차 프로젝트에서 아쉬웠던 부분을 최대한 채우기 위해 노력했지만 역시 아쉬움은 항상 남는 것 같다

프로젝트를 되돌아보고 되새기며 글을 작성해 보겠다.

---

 

이번에 만들게 된 중고장터 Beat Bay 메인

프로젝트명 : BEAT BAY

기획 의도 : 기존의 M사이트의 불편한 점을 개선해 보기로 만든 음악인들의 중고거래와 재능을 거래하는 웹 어플리케이션

기간 : 23.10.23 ~ 23.11.10

팀 구성 : 백엔드 2 / 프론트 3

Github

• Back End : https://github.com/sesac-ydp5-2nd-C/2nd-project-beatbay-back

GitHub - sesac-ydp5-2nd-C/2nd-project-beatbay-back: sesac 영등포 5기 2차 프로젝트 Back-end Repo

• Front End : https://github.com/sesac-ydp5-2nd-C/2nd-project-beatbay-front

GitHub - sesac-ydp5-2nd-C/2nd-project-beatbay-front: sesac 영등포 5기 2차 프로젝트 Front-end Repo

---

시작

1차 때도 어떨결에 맡게 됐는데 이번 2차에서도 조장을 맡게됐다.

조장으로서의 활약은 크게 없었지만 .. 나름 선방했다고 생각함

 

이번 프로젝트에서는 지난 1차와는 다르게 위의 깃 주소를 올린 것과 같이 클라이언트와 서버를 따로 나눠 개발을 진행하게됐다

2차 프로젝트 폴더 구조

낯선 개발 환경이었지만 현업에서도 이런식으로 개발한다고 하여 미리 이런 경험을 할 수 있어서 좋았다

백, 프론트 코드 겹칠 일 없이 개발만 하면 돼서 편했음.

 

사실 새싹에 처음 들어올 때 리액트가 어떤 것인지 궁금했고 프론트엔드 역량을 키워보고 싶었는데 

교육을 들으면서 프론트 개발보다 백앤드 개발이 나랑 맞다고 생각해서 프론트를 빠르게 손절했다.. 하나만이라도 잘하자.

 

아무튼 이번에도 백엔드 개발을 하게됐고

로그인/회원가입, 카카오 로그인, 마이 페이지, 채팅, 웹 배포, DB 관리를 맡아서 개발하게 됐다.

개발환경

• 개발도구 : Visual Studio Code
• 버전 관리 도구: Git
• 커뮤니케이션 도구: Notion, Figma, Slack
• DB 관리 도구: DBeaver
• Git 호스팅 : Github

사용기술

• 언어 : javascript
• Front : React, Sass, CSS, HTML5, AOS
• Back : Node.js, Express, Sqeulize, Socket.IO
• 배포 : AWS
• DB : mysql

화면 설계도

피그마를 처음 봐서 뭔가 했는데 그냥 화면 디자인을 해주는 플랫폼이었고 신기했음

이번에 프론트에 디자인을 하시는분이 계셔서 굉장히 퀄리티 있는 작품이 탄생하게 됐다.

1차 때는 이런 화면 설계없이 그때그때 프론트분과 상의해서 필요한 API를 만들어 줬었는데,

미리 설계도를 보고 API를 만들 수 있어서 편했다

---

개발

ERD

ERD 에 특이점이 있는데 used_ability 와 used_product 는 컬럼 내용이 같다

이는 채팅방 테이블을 보면 product_id, ability_id 가 있는 것을 볼 수 있다.

 

두개의 컬럼은 null을 허용하고 클라이언트에서 요청한 타입이 'product' 면 produc_id로 'ability'면 ability_id 로 생성되게 만들기위해

정규화가아닌 반정규화로 테이블을 구성하게 됐다. 채팅 관련 내용은 밑에서 다루도록 하겠다.

---

로그인 / 회원가입

로그인 / 회원가입 화면

로그인은 일반회원 로그인과, 카카오 로그인으로 개발했고

회원가입에선 SMTP를 이용한 이메일 인증을 도입했다. 번호인증을 하려고 했으나 과금..이 있어서 ㅎㅎ 

 

UserController.js / 이메일, 비밀번호 유효성 검사 코드

회원가입에선 1차적으로 이메일, 비밀번호 유효성검사를 진행한다 프론트에서도 하지만 2차로 백에서도 진행한다

정규식으로 패턴이 맞지 않으면 아래 이미지와 같은 결과가 나옴

유효성 검사 결과

이메일 인증

UserController.js / 이메일 인증 로직                                                               utils/emailUtil.js / 이메일 인증 구현 부

nodemailer를 사용했고, 인증 구현부는 모듈화해서 코드를 간소화 했고, .env 를 이용해서 정보유출에 대비했다.

인증번호도 Math.random() 함수가 아니라 crypto.randomInt()로 암호화 하였다

이메일 인증 시현

회원가입에 성공하면 로그인창에 값을 바로 넣어줘서 로그인 할 수 있게 만들어주셨다 b

로그인 후 세션에 저장되는 유저 정보

로그인에 성공하면 세션ID와 로그인된 유저정보로 이용해서 유저 관리를 할 수 있게 구현했다.

로그아웃

로그아웃은 세션 삭제 후 홈으로 redirect 하게된다.

---

카카오 로그인

카카오 developers

카카오에 앱 등록을 하고 App 키를 받아 서버에서 처리를 했다

카카오 로그인 과정

요약하자면 클라이언트 에서 로그인 요청 > 카카오 인가 코드 발급 > Redirect URI로 인증코드 전달 > 토큰 생성 > 로그인 순이다

OAuth 2.0 을 정확히 이해하고 구현한게 아니라 좀 더 공부가 필요한 부분이다 ..

 

토큰 까지 받아서 로그인에 성공하면 아이디가 있는지 확인하고

기존에 일치하는 이메일 아이디가 있다면 회원정보 업데이트를 진행한다

아이디가 없으면 카카오에 있는 정보로 회원가입을 진행하고 세션에 담아서 메인 화면으로 보내는 로직을 만들었다.

로그인에 성공하면 정보가 세션에 잘 담겨들어온다 

---

채팅

Socket을 안배우고 프로젝트에 들어가서 처음 개발 시작할 때 엄청 헤맸다.

프로젝트 발표날 새벽에 완성된 채팅.. 제일 중요한 기능이어서 무조껀 만들어내야 했다.

https://www.notion.so/sage-h/Chat-Flow-dc797b5a356749dbb294fa0fd84c17c0

Chat Flow

Socket.IO를 이용했고 프론트 분께서 채팅 플로우를 짜주셔서
해당하는 이벤트가 발생했을때 서버에서 클라이언트로 넘겨줄 값을 만들어 주신대로 로직을 만들었는데 만들어 놓고도 이게 맞나 싶다

채팅방 로직

• 채팅방은 각 ID가 primary key로 존재한다
• product_id와 ability_id 로 게시물을 구분하고 게시물 정보를 가져온다
• user_id_1 ( 판매자 ), user_id_2 ( 구매자 ) 로 구분한다
• 채팅 메시지는 ID 값이 자동으로 증가하고 chat_room_id 로 채팅방을 구분하여 select 내림차순으로 메세지를 채팅방에 가져온다
• 채팅 메세지에는 수,발신자가 아닌 발신자만 들어가고 보낸 시간이 들어간다

이 과정에서 DB에 접근하는게 많은데(코드량..) 원래 이렇게 하는게 맞는지 .. 잘 모르겠다

다른분들이 만든걸 보면 엄청 간단했던거 같은데 ..

이번에 만든 채팅방은 이런느낌이다

 

프로젝트에서 채팅방에 입장하는 방법은 2가지다 ( 마이페이지 > 채팅, 게시물 > 채팅 )

 

Socket.IO 이벤트

코드가 너무 길어서 코드를 보고싶다면 깃허브를 참고..

마이페이지 > 채팅 ( 'newUser' )

• 로그인한 유저가 참여중인 채팅방을 모두 불러온다

게시물 > 채팅 ( 'join' )

• 로그인한 유저가 참여중인 채팅방을 불러온다.
  게시물을 올린 판매자에게 메세지를 전달하는 화면을 보여준다.
  해당 게시물 정보를 채팅방에 보여준다.
  메세지를 전송하면 join 이벤트가 발생한다. 

( 'enter' )

• 채팅방 목록에서 채팅방을 클릭하면 해당 채팅방의 내용들을 불러온다

( 'snedMessage' )

• 메세지를 전송하면 채팅메세지 테이블에 메세지가 Insert 된다

( 'disconnect' )

• 소켓이벤트 종료

채팅 기능

---

마치며

이번에도 어떻게든 마무리 지어버린 프로젝트

프론트님들의 하드캐리로 대상도 받고 구현하고자 했던 기능도 다 만들었지만 만족이 안된다 

제대로 알고 만들어낸게 아니라 "일단 돌아가면 돼" 여서 그런건지..

선행학습 없이 프로젝트에 적용하려다보니 버그도 되게 많고

배포를 한 후에도 버그가 엄청 터져서 부랴부랴 고치느라 애를 많이 먹었는데

회고록을 작성하면서 기능 테스트하는데도 버그가 계속 나온다 ㅋㅋ 

이게 과연 성장하고 있는걸까란 의심이 자꾸 생긴다 3차 프로젝트전에 취직을 할 수 있을까 ..