미니프로젝트 진행

🧾 기획 : 내가 그린 그림을 문제로 내어 다른 사용자들이 맞추는 미니 캐쥬얼 게임

🎞️ 배포링크 : https://youtu.be/FEHbzJljdP0

⏱️ 개발 기간 : 23년 1월 13일 ~ 1월 20일 (8일)

🛠️ 개발 스텍 : Node Js

📦 패키지 (pakeage.json)

	- aws-sdk : 아마존 AWS 인증 보안 관련
	- bcrypt : 비밀번호 암호화
	- cookie-parser : 쿠키 파싱 
	- cors : 프론트와 통신중 cors 문제 해결
	- dotenv : 민감정보에 대한 환경변수 설정
	- express : node express
	- express-rate-limit : 비정상적인 요청 방지 (악의적 공격)
	- express-sanitizer : XXS 위험 (오랫동안 업데이트 되지 않아 다른 방법 찾아야 함)
	- http2-express-bridge : node js에서 http2 패키지를 실행 시키기 위한 추가 패키
	- joi : 문자열 예외처리를 위한 검증 패키지
	- jsonwebtoken : JWT 토큰 인증 방식 사용 패키지
	- mkcert : SSL 인증서 발급을 위한 패키지
	- moment : 날짜 출력 방식 보조 패키지
	- multer : 이미지 처리 후 서버 전송을 위한 패키지
	- multer-s3 : multer 패키지 중 AWS S3 서버에 이미지 업로드를 위한 패키지
	- mysql2 : mySQL을 이용하기 위한 패키지
	- s3 : S3 서버사용을 위한 패키지
	- sequelize : node Js에서 ORM을 사용하기 위한 시퀄라이즈 패키지 
	- sequelize-cli : 시퀄라이즈 명령어를 통해 데이터 작업을 위한 패키지
	- swagger-autogen : swagger 패키지
	- swagger-ui-express : swagger ui 제작을 위한 패키지 ### 📑 백엔드 프로젝트 구조 ![400](https://i.imgur.com/xQ1FlCg.png)

📑ERD 구성

🧾API 구성

https://docs.google.com/spreadsheets/d/1rrE9-8QeEqpbF8Klk7khSkzH3wmxrcfa2K53AArKNnU/edit#gid=0
⚙️ 프로젝트 백엔드 주요 기능
1. 기본적 CRUD API 기능
2. jwt 인증 및 사용자를 특정한 권한 관리
3. 이미지 데이터 S3 업로드 처리
4. SSL 보안 기능
5. HTTP2 통신 적용

기능 및 트러블

CRUD 기능구현
- 프로젝트 시작 전 API명세서 작성으로 전달 데이터 양식 및 타입에 대한 사전 작업으로 인해 데이터 양식으로 인한 트러블은 크게 발생하지 않음
- 사용자 정보 및 인증 / 게시글의 작성 조회 2가지 파트로 나누어 작업
- 스코프가 크지 않아 서버 구동까지 1일 소요
인증 및 인가

🚒 트러블 최초 jwt 토큰을 Cookie로 사용하려하였으나 서버에서 정상적으로 쿠키가 보내져 클라이언트 네트워크에서 확인이 가능했으나 쿠키가 다시 서버쪽으로 돌아오지 못하는 현상 발생

🚑 해결 보안 통신(https) 환경에서만 쿠키에 대한 req, res가 가능하다는것을 알고, 헤더로 보내기로 결 이유 : 쿠키로 계속 보내려면 프론트엔드에서 SSL 인증을 설정해야하는데 local 환경에서 작업하면서 시간적으로 보안인증까지 거친 후 상호 https 통신으로 테스트할 수 있는 시간이 현저히 부족하여 헤더로 보내는 방법으로 테스트 및 서비스 구현

🚒 트러블 로컬 환경에터 코드 작성 후 백엔드 서버 배포 후 프론트에서 데이터를 받아 처리하는 과정 중 유명한 CORS 에러 발생

🚑 해결 이미 CORS에 대한 대략적인 상황 및 대처에 대해 공부하여, cors 모듈을 설치하여, origin을 프론트엔드 서버로 설정, 토큰에 대한 키값 및 데이터 처리 실행 다만 글로만 보다가 실제로 적용하려하니 익숙하지 않은 코드작성에 이런저런 옵션들을 써보고 지우기를 반복함, 프로젝트가 끝나고 나서 보면 정말 간단하지만 놓치기쉬운 작업임

🚒 트러블 상세조회 페이지 req,res 과정에서 프론트에서 현재 사용자를 특정할 수 있는 토큰을 디코드할 수 없는 이유 발생 ( 프론트에서는 익숙하지 않은 작업으로 인해 이해 및 작업시간 부족 )

🚑해결 정답자가 정답을 입력한 postId를 프론트에서 보내고 백에서는 요청과 함께 들어온 token을 디코드하여 사용자 특정 후 DB에서 현재 사용자가 정답을 그 전에 맞추었는지 또는 정답을 맞추지 못하였는지 includes로 확인하여 true / false data를 프론트에 보내주기로 함

🚓 코드 트러블 정답자가 데이터에 없거나 한번도 정답자가 입력되지 않은 값에서 error 발생하여 서버에러가 발생 입력값을 확인하니 null 타입으로 if문을 사용하여 분기처리할고 해도 바로 not defined error가 발생하여 로직이 중단 됨,

🚐 코드 해결 정답자가 없는 상황을 throw new Error로 보내고 catch에서 에러 데이터를 사용자 false로 선언하고 프론트에 전달하여 해결 급하게 처리하여 hard coding 하였는데 추후에 코드 정리

🚒 트러블 req 요청시 프론트에서 동기처리가 되지 않아 전 사용자의 정보가 남아 현재 사용자의 토큰이 하나씩 밀려 작성자와 작성자의 정보가 일치하지 않아 표기시 하나씩 정보가 밀리는 현상 발생

🚑 해결 최초 access Token의 만료시간을 10분에서 10초로 짧게 만들어 강제적으로 access를 재발급하게 만들어 동기처리 처럼 작동하도록 구현 다만 해당방법은 자주 데이터의 처리를 발생시키며, 근본적인 해결책은 되지 못함 프로젝트 완성 단계에서 해당부분은 프론트에서 동기처리하여, 다시 원상복구 함

✈️ passport 패키지를 이용한 social login 기능을 구현하지 못해 공부하여 클론코딩에서 사용 예정

S3 / Multer 패키지 🚒 트러블 AWS S3 인증에 대한 환경변수를 읽지 못하여 접속이 제한되는 문제 발생

🚑 해결 1. 환경변수를 밖으로 꺼내어 모듈안에서 사용시 정상적으로 작동 되는 것을 확인 2. 다시 환경변수 안에 넣어 export 해보았으나 불가능 3. Google링 하면서 확인하여도 코드상에는 문제가 없다고 판단 4. AWS3 액세스 부분의 설정을 변경하면 가능하다는것을 보고 설정하였으나 실패 5. multer 공식문서 확인해보고 , AWS S3 공식문서들을 확인해본 결과 환경변수 명은 꼭 정해진 이름으로 써야한다고 함… 정해진 규칙에 따라 접속 시도하니 정삭적으로 접속됨을 확인…

🚒 트러블 S3 업로드시 사용자의 닉네임을 파일명에 포함시키려고 하였으나, 사용자의 이름을 넣을 수 있는 Request 가 없어 헤더에서 사용자의 이름을 가지고 올 수 없는 상황 발생

🚑 해결

미들웨어 밖 스코프에 헤더를 가지고 올 수 있는 함수 코드 작성하였으나, 멀터 내부 스코프에 들어 가지 않는 문제 발생
또 다시 수만은 삽질 끝에 팀원과 같이 방법을 찾다 멀터 내부 함수 중 ‘key’에 해당하는 부분에서 req가 있는 것을 보고 여기서 왠지 헤더를 가지고 올 수 있다고 생각하고 코드작성하여 성공

✈️ 밖에서도 해당 데이터를 가지고 올 수 있는 로직을 코딩 할 수 있도록 실력을 늘릴 필요성 느낌

🚒 트러블 마지막 날 발생한 문제로 1안에서 이미지를 업로드 후 객체를 foam-data를 받아 업로드를 해왔는데 프론트 팀원이 2안인 그림판을 구현하는데 성공하였으나 파일이 아닌 base64 형태의 데이터를 객체로 디코드 할 수 있는 방법을 적용하지 못해고 마감시간은 다가오기 시작함

🚑 해결 프론트 코드에 전부 달라 붙어 코드를 해석하다 시간이 부족할 것 같고 기능은 포기하기 싫어서 백엔드에서 base64로 받게 되면 해당 데이터를 이미지 파일로 디코드하여 S3 서버에 업로드 하자는 계획을 세움 멀터 모듈안에서 바디에서 받은 base64 데이터를 디코드하는 코드 작성중 프론트에서 성공하여 코드작성 중단하고 정상적으로 파일 업로드 성공

✈️ 다시 기회가 된다면 디코드 인코드할 수 있는 코드를 구현해보는 것도 좋을 것 같음

🚒 트러블 S3가 유료 서비스이며, 실제 사이트를 배포하였을때 비정상적인 데이터 업로드를 막을 수 있는 방법이 없었음

🚑 해결 express-rate-limit 패키지를 사용하여 단위 시간안에 요청을 보낼 수 있는 횟수에 대한 제한사항을 설정하여, 비 정상적 업로드나 과도한 트레픽이 발생할 수 있는 상황을 지금 수주에서 방어할 수 있는 최소한의 방지를 해둠

추가 기능 업데이트

🚒 트러블 실제 서비스라고 가정 하였을 때, 이미지 사이즈가 커지거나, 영상을 업로드 하고 사용자가 많아지게 된다면 분명히 데이터 전송간 속도에 대한 문제가 발생할 것 같은 예상이 듬

🚑 해결 개선방안에 대해 알아보던 중 HTTP2 통신에 대해 알게 되어 실제로 적용시켜봄

HTTP2 는 보안통신 (HTTPS) 환경이 기본으로 SSL 적용이 우선
도메인 등록하여 배포환경 구성
CERTBOT SSL 인증서를 받아 https 환경 구성

http2 패키지 설치하여 Security 환경 구성 🚓 트러블 프론트엔드에서 http2 환경구성이 되지 안아서 http1.1 통신만 가능한 상황에 error 발생

🚐 해결 SSL 옵션중 allowHTTP1 : true 로 http1.1 통신이 가능하도록 설정 실제 HTTP2 작동여부 확인

✈️ 생각보다 보안 / 개선 솔루션의 적용은 재미있다.

일주일간 짧지만 실제 협업을 경험해보고 프로젝트를 기획하고 완성하면서 재미있는 시간이었고, git flow나 프로젝트를 지냉하면서 분명 아쉬운 점들도 있어 프로젝트를 정리하면서 체크리스트를 팀원들과 같이 만들어 보았다.

개발 컨벤션

.env 환경변수 내 민감정보는 어떻게 공유할 것 인가.?
prettier, Eslint 컨벤션은 미리 약속하였는가?
git commit 메세지 작성 규칙은 어떻게할 것인가?
branch 작성 전략은 어떻게할 것인가?

프로젝트 1. 프로젝트 Scope 난이도는 단계별로 설정하였는가?

문서 1. 와이어 프레임작성 2. 요구사항 리스트화 3. API 명세서 기획 및 구성 작성 4. 디렉토리구조 설계 5. ERD 작성

내가 그린 기린 그림 트러블슈팅

프로젝트 트러블 리포트