[그룹 스터디 프로젝트] 네 번째 미팅 - 구현 In Progress! (0411)

회의록

Weekly Meeting - 210411


[진행사항 공유]
백엔드
* Swagger로 API 주소 및 데이터 정리
* 깃헙에서 Clone해서 서버 돌리면 접근 가능
* 고양이 CRUD 구현AWS 셋업 (백엔드 서버용)
* Windows 사용 시 PuTTY 필요
* IAM 계정 팔 것
* Jenkins라는 CI(Continuous Integration) 툴 사용할 지 추후 결정

프론트엔드
* 메인화면 (로그인 / 회원가입) 구현
* 소셜 로그인 - 네이버, 카카오톡
    > 카카오 - 로그인 성공시 액세스 토큰 반환
    > 네이버 - URL로 정보를 반환. location 사용해 후처리
* 유저 메인화면 (고양이 정보) 구현
* 고양이 추가화면 구현
* 게시판 구현 진행중

[의논 사항]

1. 로그인 관련
프론트엔드
* 로그인 type은 카카오 / 네이버 / 일반으로 나눌 것.
* 소셜 로그인
    > 소셜 로그인 통해 받아올 정보는 이메일로 충분.
    > 첫 번째 시도 시 (소셜 회원가입의 경우), 새로운 추가회원정보 입력 창으로 이동하여 닉네임 등 설정
    > 첫 번째 시도 시, 동의창은 자동으로 뜨게 되어 있음
* 닉네임은 중복 체크 기능 필요

백엔드
* 유저 table에서, 닉네임 필수로 설정

2. 데이터 불러오기
* 고양이 정보
    > 한 번에 다 불러올 것 (로그인 후 해당 유저에 대해)
* 체중 기록
    > 나눠서 불러올 것 (주/월별?)
* 포스트
    > 나눠서 불러올 것 (최근 10개?)

3. 이미지 관리
* 고양이 추가 / 게시판에서 사진 추가시: 어떤 형식으로 백엔드에 보내야될 지 조사 (FileReader 타입)
* 이미지는 백엔드 서버에 직접 저장.
* 프론트엔드에서 이미지 업로드 개수 제한 필요
* 사진 업로드 시, 프론트에서 사진 가공 (crop)된 형태로 보내주면, 백엔드에서 용량 줄여서 저장하는 것 처리 가능
* 모바일에서 사진 업로드 시 문제 있나 확인

4. 로그인 후 유저 정보 유지
* JWT token이용한 방식 사용
* session/cookie 방식은 백엔드와 통신이 너무 자주 발생해야하고, 모바일에서  자동 로그인 유지가 어려운 관계로

5. 추가할 페이지
* 사용자 설정: 닉네임 변경, 로그아웃, 야간모드, 개발팀 Contact, 회원탈퇴(?!)
* 고양이 설정: 이름, 생년월일, 이름, 목표체중, 성별, 사진 변경 / 고양이 등록 취소 기능

6. 게시판
* 당근마켓 게시판 UI 비슷하게
* 포스트는 제목 (글자수 제한), 사진, 내용으로 구성
* 자유게시판 하나의 카테고리로 시작

7. 앱 방향성
* 고양이 대상으로 설정추후에 고양이 관련 정보 (ex. 예방접종, 사료 등) 추가할 목적

[할 일]

프론트엔드
* 목요일까지 Swagger참조, 목업 완료
* immer (불변성), proptypes (개발 안정성) 추가 고려
* Netlify에 임시 deploy
* JWT 조사, 어떻게 정보 유지하며 다른 페이지 이동할 지 연구
* 보안 (ex. XSS 방지) 강화

백엔드
* 유저, 게시판 CRUD 추가
* JWT 및 소셜 로그인 관련 기능 추가
* AWS에 백엔드 서버 deploy

 

 

회의 추가 설명

1. 로그인 관련

   * 로그인 부분은 HS님이 넘 잘 구현해주셨다!

   * 로그인 타입은 일반 (웹 앱에서 직접 이메일 + 비밀번호 입력), 카카오, 네이버로 나뉜다.

   * 소셜 로그인은

      > 카카오 - 로그인 성공시 액세스 토큰 반환

      > 네이버 - URL로 정보를 반환. location 사용해 후처리

      로 구현된다.

   * 소셜 로그인(회원가입)에서 받아올 정보를 선택할 수 있는데, 우리 앱에서는 닉네임을 어차피 다시 설정해줄 것이기 때문에, 이메일만 받아와 서버에 저장하기로 한다.

 

2. 이미지 업로드 관련

   * 참고할 코드 (제로초님의 Nodebird 강의)를 보니,

     > 이미지는 e.target.file로 파일 객체 자체를 백엔드에 보내고,

     > 백엔드에서 multipart/form-data를 처리할 수 있는 미들웨어를 통해 저장 후 이를 참조할 수 있는 URL을 보내

     > 프론트엔드에서는 이 URL을 사용한다.

 

     > 즉 이미지 업로드와 나머지 데이터 업로드를 따로 따로 맡아준다.

 

     > 이전에 내가 만들었던 프로젝트 (Bootstrap + Node.js)에서도 

     > file 자체를 백엔드로 보내주고

     > 백엔드에서 multipart/form-data를 처리할 수 있는 multer 모듈을 사용

     > cloudinary라는 클라우딩시스템에 업로드 후

     > 거기에 올려진 이미질 참조하는 URL을 서버에 저장 + 프론트엔드에 돌려줬다.

 

   * multipart/form-data 형식으로 file 객체 자체를 넘겨줘 백엔드에서 처리하는 방향으로 갈 듯하다.

   * 이미지는 백엔드 서버에 직접 저장.

     > 게시판 기능 추가에 따라 이미지 갯수가 많아질 것 같은데, 서버에 과부하가 오진 않을 지 확인

   * 프론트에서 사진 갯수 제한 설정 필요

     > 너무 많은 사진을 업로드 하지 않도록 설정 필요

 

    * 사진 업로드 시, 프론트에서 사진 가공 (crop)된 형태로 보내줌

     > 이 부분이 두통을 줬는데, 역시나 능력자분들이 만들어놓으신 라이브러리가 있었다!

     > www.npmjs.com/package/react-easy-crop

react-easy-crop

     > 여기에 올라와 있는 샘플 코드를 바탕으로 수정하여 구현하였다.

     > 다만 react-easy-crop을 통해 변환한 이미지는 다시 File로 변환해야 하는데

stackoverflow.com/questions/58698458/how-to-get-cropped-image-after-crop-as-a-form-data-in-react

How to get cropped image after crop as a form data in react

 

      > 요 쓰레드가 도움이 될 것으로 보인다.

 

   * 모바일에서 사진 업로드 시 문제 있나 확인

      > 이미지 input에서 accept="image/*"를 해주면 문제 없음!

3. 로그인 후 유저 정보 유지
   * JWT token이용한 방식 사용
   * session/cookie 방식은 백엔드와 통신이 너무 자주 발생해야하고, 모바일에서  자동 로그인 유지가 어려운 관계로

 

     > JWT를 백엔드에서 설정하여 

     > 처음 로그인 했을 때 (POST /api/login) 토큰을 받아오고

     > 해당 토큰을 Header에 저장하여 API Request마다 토큰을 전송한다.

     > 토큰을 바탕으로 백엔드에서는 유저가 누구인 지 확인할 수 있도록 구성

        (토큰의 유효기간이 지나지 않는 이상 로그인 유지)

     > 유저가 로그아웃하면 헤더에서 토큰 정보를 지워주면 될 것이다

 

piaflu.tistory.com/107

[JWT] 클라이언트 쪽에서 JWT 사용 - React / Redux

 

6. 게시판

   * 당근마켓 게시판 UI 비슷하게

     > 게시판 UI를 인스타 처럼 사진 위주로 가냐, 당근마켓 처럼 사진 + 내용 위주로 가냐를 논의

     > 고양이에 관련된 모든 대화가 이뤄질 곳이므로 (EX. 내 고양이 이쁜 것 좀 보세요!!!) (EX. 좋은 사료 추천 부탁드려요) 사진 + 내용 위주로 가기로 했다!

7. 앱 방향성
   * 고양이 대상으로 설정추후에 고양이 관련 정보 (ex. 예방접종, 사료 등) 추가할 목적

     > 모든 반려동물로 앱 대상을 확장할 것인가 논의했는데, 고양이에 충실하기로 결정했다. (집사님은 고양이를 위해 존재합니다)

[할 일]

 

1. immer 라이브러리 적용

   * 리액트는 변화를 감지해 그 부분만 리렌더링 해줌으로써 효율적이다.

   * 변화를 감지하기 위해서는 원래 값과, 변화 후 바뀐 값을 비교하는 과정이 필요하다.

   * 이렇기 때문에 변화를 줄 때, 원래 값 자체를 바꿔버리면 비교가 불가능 할 것이다.

   * 원래 값을 그대로 두고, 이를 복사하여 변화를 줘야 맞는 workflow.

   * 원래 값의 '불변성'을 지켜주는 것이 중요한 것이다.

 

   * 이를 위해선 전개 연산자 (...) 등을 사용해야 되는데, 객체의 깊이가 깊어지면 코드도 복잡해지고 길어진다는 단점이 있다.

   * 이 때 불변성을 지켜주면서 상태 변화를 해줄 때 유용한 것이 immer라는 라이브러리.

   * 원리는 원래 값의 복사본 "draft"를 만들어주고, 이에 변화를 줬을 때, 원래 값과 draft의 차이점을 확인하면서 "next state"를 만들어 줌.

 

   * 우리 플젝에도 immer를 적용해줬다!

immerjs.github.io/immer/

Introduction to Immer | Immer

 

2. Netlify에 임시 deploy

- 로컬에서 돌릴 필요 없이, 깃 레포에 연동해 URL로 그 때 그 때 프론트 화면을 볼 수 있도록 Netlify에 deploy하였다 (HS님 감사!!)

 

3. XSS 방지 강화

   * React는 기본적으로 JSX 문법에서 HTML Escaping을 시켜줘서 XSS의 위험을 줄인다.

   * 추가로 확인해야할 점이 있는 지 다음의 좋은 글을 바탕으로 구현이 완료될 즈음 살펴봐야겠다.

velog.io/@badbeoti/10%EA%B0%80%EC%A7%80-%EC%98%88%EC%A0%9C%EB%A1%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EB%8A%94-react-%EB%B3%B4%EC%95%88

10가지 예제로 알아보는 react 보안