[🌹 회고 ] 박소영

[soyoung931014]

이번 프로젝트에서는..

---

이번 프로젝트는 이전 프로젝트 Dajavas에서 구현이 미흡 했던 부분 보완, Typescript 사용 그리고 풀스택 포지션을 통한 개발 이해도 증진을 목적으로 기획했다. 주제는 첫 번째 프로젝트 ColorDiary의 주제에서 파생해 '사진과 그림으로 하루를 기억하는 웹 사이트'로 잡았다. 나는 이번 프로젝트에서 그 동안 도전 해보지 못한 소셜 로그인, 일반 로그인 파트에 주력했다.

목표

1. 카카오 소셜 로그인 구현 ✅
2. 반응형 CSS ✅
3. AWS S3 버킷을 이용한 이미지 관리 ✅
4. 새로 고침 시 로그인 풀리는 현상 ✅
5. AWS 자동화 배포 ✅

Works

 👊 Front-end

랜딩페이지 구현 및 반응형 CSS

일반 회원 가입 페이지 (중복 검사, 유효성 검사, 일발 회원 가입 및 반응형 CSS)

로그인 페이지 (카카오 로그인, 일반 로그인, 회원정보 Redux-persist저장, 유효성 검사 및 반응형 CSS)

회원 정보 페이지 (회원 정보 수정, 일반 회원 탈퇴 및 카카오 회원 탈퇴, AWS S3 버킷을 이용한 이미지 관리 및 반응형 CSS)

댓글 컴포넌트 (생성, 수정, 삭제, 조회)

에러 로딩 페이지 (애니메이션 및 반응형 CSS)

Navigation, Footer 구현 및 반응형 CSS

👊 Back-end

token (토큰 발급, 토큰 검증)

user (카카오 로그인, 중복검사, 일반 회원가입, 일반 로그인, Bcrypt을 이용한 암호화)

mypage (카카오 회원 탈퇴, 일반 회원 탈퇴, 회원 정보 수정)

comment (댓글 생성,조회,수정,삭제)

AWS 자동화 배포 (EC2, S3, RDS, Route53, CloudFront, ELB)

성취

---

🚀 카카오 소셜 로그인 구현

---

• 카카오에서 인가 코드를 발급 받으면 요청 받은 인가코드를 통해 카카오에게 토큰 발급을 요청할 수 있다. 토큰 발급 요청은 클라이언트, 서버 원하는 곳에서 요청이 가능한데 나의 경우 보안을 좀 더 강화하고 싶어 서버단에서 토큰 발급 요청을 한 후 발급받은 토큰을 클라이언트에 보내줬다. 여기서 한 가지 문제점이 발생했는데 카카오에서 발급받은 토큰은 프로젝트에서 발급한 토큰이 아니기 때문에 프로젝트 서버에서 허가가 안된다는 점이었다. 그래서 카카오 토큰을 발급 받은 후 정보로 sign해주어 프로젝트 토큰으로 재 생성 후 클라이언트에 보내줌으로 해결했다.
• Pickshare 카카오 로그인 로직
  

참고로 인가 코드는 로딩페이지에서 처리 했다.

🚀 반응형 CSS, 사이드바 구현

---

• 이전 프로젝트 때 사이드 바를 구현하는데 컴포넌트 개념으로 접근을 시도하다 실패했다. 구글링을 해보니 CSS(Media query)를 이용하면 반응형 웹을 만들기 쉽고 화면이 줄어듦에 따라 레이아웃의 위치를 변경하여 사이드 바처럼 보이게 구현할 수 있다는 사실을 깨달았다.
  [🚀 Dev Log] 박소영 / 2022-05-11 #51

🚀 TypeScript

---

• 자바스크립트에서 보장 받을 수 없었던 타입을 보장받음으로서 조금 더 안정적인 소프트웨어를 만들 수 있다는 이유로 프로젝트에 적용시켰다. 기본 타입들을 숙지한 후 프로젝트에 바로 적용시켰는데 처음에 무수한 타입 에러에 당황했다. 결국은 에러를 잠재우고자 any 타입을 많이 사용하게 되었고 '이럴거면 왜 사용했지?'라는 회의감이 들었다. 다시 공부해서 제대로 적용시켜야겠다는 생각이 들었다. 이번 프로젝트에서 가장 아쉬운 부분 중 하나다.

🚀 Nest.js

---

• 타입스크립트를 서버에서도 사용해주려면 Nest.js 프레임 워크를 사용해야만 한다는 팀원의 말에 Nest.js를 적용 시켰다.(나중에 공식 문서를 보고 알게 된 사실이지만 타입스크립트 express에서도 사용 가능 하다. 늘 제대로 알고 적용하자 😂) 비록 잘못 알고 사용했지만 Nest.js의 편리함은 정말 최고였다. 스키마 수정시 express는 sequelize를 다시 생성해 주어야하는 번거로움이 있지만 Nest.js는 entity에 추가하면 된다는 사실이 추후에 유지보수 측면에서 아주 큰 장점이라는 생각이 들었다 . (ColorDiary에서 스키마를 5번 이상 수정한 경험이 있기 때문에 더 큰 효과를 느낀것 같다.) 그리고 하나의 폴더에 module, controller, service가 기본적으로 구성되어있어 보기에도 활용하기에도 편리했다.

🚀 AWS S3 버킷을 이용한 이미지 관리

---

• 업로드한 이미지는 S3에서 관리시키고 서버에는 이름만 저장해서 파일 용량을 줄일 수 있었다. 이전 프로젝트에서도 S3를 이용해 이미지를 관리했었는데 내가 구현한것이 아니었어서 이번 기회에 꼭 해보고픈 부분이었다.

S3 파일 업로드 순서는 다음과 같다.

1. IAM에서 역할 설정하기
2. Cognito로 접근 권한 부여하기
3. S3 버킷 설정하기

https://recondite-detail-ab2.notion.site/AWS-S3-2727a29fe62d41aea7e242c01567ef41

🚀 새로 고침시 로그인 풀리는 현상

---

• Dajavas 프로젝트에서 새로고침시 로그인 풀림 현상이 일어났는데 이번에는 Redux-Persist 라이브러리를 통해 이 문제를 해결했다.
  [🚀 Dev Log] 박소영 / 2022-05-25 #81

🚀 Bcrypt

---

• Dajavas에서 유저의 비밀번호가 DB에 그대로 노출 되었는데 , 이번에는 보안 강화를 위해 Bcrypt를 이용해 직접적인 비밀번호가 아닌 암호화된 비밀번호를 DB에 저장되게 구현했다.

🚀 AWS 자동화 배포

---

• Dajavas 프로젝트때 배포를 성공 시켰지만 너무 힘들게 성공 시킨 나머지 배포에 대한 두려움이 남아 있었다. 그래서 다시 한 번 도전 했다.
  가장 자신 없던 부분은 클라이언트 빌드 시 memory leak 문제 부분이었다. 역시나 똑같은 문제를 겪게 되었고 빌드 실패율을 줄이기 위해 (따로 정리해 놔야겠다) 노력했고 추가로 물리 메모리가 부족할 경우 HDD의 일정 공간을 할당하여 RAM 처럼 사용하는 스왑이란걸 적용시켜봤더니 빌드 성공률이 이전보다 많이 높아졌다. (그리고는 바로 Dajavas도 스왑 적용시켰더니 성공률이 더 올랐다 😁 )

• 버전 문제:

• [🚀 Dev Log] 이름 / 2022-05-31 #100

• [🚀 Dev Log] 박소영 / 2022-06-02 #104

• Javacript Heap out of memory:
  -[🚀 Dev Log] 박소영 / 2022-06-01 #102

• The build failed because the process exited too early. This probably means the system ran out of memory or someone called kill -9 on the process:
  -[🚀 Dev Log] 박소영 / 2022-06-01 #102

🚀 Others...

---

• 인풋 태그(타입: file) 커스텀 하기: [🚀 Dev Log] 박소영 / 2022-05-19 #69
• JWT: [🚀 Dev Log] 박소영 / 2022-05-13 #54
• CSS: [🚀 Dev Log] 이름 / 2022-05-26 #82
• [🚀 Dev Log] 박소영 / 2022-05-10 #49 ( linear-gradient, display: flex 개념)
• github: [🚀 Dev Log] 박소영 / 2022-05-04 #18
• 유효성 검사: e.target.value를 잘 이용하자, DOM이용하자 [🚀 Dev Log] 박소영 / 2022-05-06 #21
• 로그인 오류: [🚀 Dev Log] 박소영 / 2022-05-14 #56
• 서버 부분 회원정보 수정: [🚀 Dev Log] 박소영 / 2022-05-16 #59
• Axios delete 요청시 body에 데이터 넣는 법:[🚀 Dev Log] 박소영 / 2022-05-17 #64
• env : [🚀 Dev Log] 박소영 / 2022-05-27 #92
• TypeOrm에서 delete와 remove 메소드의 차이: [🚀 Dev Log] 박소영 / 2022-05-29 #93
• Pending 에러 : [🚀 Dev Log] 박소영 / 2022-06-11 #112

아쉬운점 & 보완할 점

---

타입스크립트 활용 미흡

일단 가장 아쉬운 점은 타입스크립트를 제대로 활용하지 못한 부분이다. 자바스크립트는 동적인 언어고 타입스크립트는 정적인 언어라던데
사실 아직까지 타입스크립트를 이용할 때의 편의성을 제대로 느끼지 못한것 같다. 추후 학습이 필요하다.

Nest.js 미들웨어 적극 이용 못함

Nest.js에는 여러가지 미들웨어가 있다. 오류 처리를 담당하는 Filters, 요청 유효성 검사 및 페이로드 변환을 위한 Pipes, 인증 미들웨어 Guards, 응답 맵핑 및 캐시 관리와 함께 요청 로깅 Interceptors 가 있는데 이 중에서 내가 사용한 미들웨어는 인증 담당 Guards이다. 미처 사용하지 못한
미들웨어를 다음번에는 꼭 사용해봐야겠다.

OOP 공부 필요성

서버를 OOP로 구현했는데 코드를 자유자재로 활용하지 못한것 같아 부족함을 느꼈다. 이 부분도 추후 학습이 필요하다.

마무리

---

이번 프로젝트는 기획-프론트엔드-백엔드-배포까지 모든 과정에 참여할 수 있고 원하는 바를 모두 구현할 수 있어서 뿌듯했던 프로젝트이다. 비록 시간은 좀 걸리긴 했지만 프로젝트를 하지 않았더라면 모르고 지나쳤을 부분이 많이 있었을것이다. 앞으로 보완해야할 부분을 난침반 삼아 학습 계획을 세워야겠다.