실전 React 프로젝트 내돈내여 | 10주차 TIL : 웹어플리케이션 내돈내여 중간 발표 전 정리

주요기능

진짜 여행 후기를 공유하는 것이 주 기능.

1. 소셜 로그인/회원가입 ⭕
2. 여행 취향 분류 - 여행지 추천 (혼자여행, 친구, 가족, 연인, 여행 예산 별 추천) ...ing
3. 내 여행일정 관리 / 관심 게시물 관리 / 내 작성 게시물 / 프로필 설정 ⭕
4. 게시글 검색 기능 ⭕
5. 스토리 기능 (동영상 공유)  ...ing
6. 신고 기능 ⭕
7. 게시글 기능 (사진, 텍스트,  총 지출 금액 등 올리기) 수정, 삭제 ⭕
8. 게시글 추천수, 좋아요, 최신 순 정렬, 태그 별 정렬  ...ing
9. 댓글 기능 ⭕

 

서비스 아키텍쳐

Github-flow 전략

master: 실제 배포가 될 브랜치

semi: 각 멤버의 branch들을 merge한 배포 전 테스트용 브랜치

FE member branches(eunji, hyelim, dada): 각자 기능 개발하는 브랜치

사용전략

1. 각 멤버의 기능 개발 branch에는 기능이 추가 될 때 마다 리뷰와 사인이 끝난 후 수시로 push 한다.
2. 기능 구현이 완료 되면 semi로 pull request 하여 merge.
3. semi에서 기능 개발 branch들을 병합한 후 오류 수정 및 검토 ⇒ master 브랜치에 pull request 하여 merge.

 

프로젝트에서 사용하는 기술 스택/라이브러리

• Front-end
  • JavaScript
  • React
  • HTML
  • SCSS : CSS는 규모가 커질수록 코드가 복잡해지고, 유지보수가 불편해 지는 단점을 보완하기 위해 선택했습니다.  
                Reference) https://icecokel.tistory.com/20
  • React-router-dom : 리액트에서 페이지 이동을 위해 선택했습니다.
                Reference) https://velog.io/@kcj_dev96/react-router
  • Redux-toolkit : 예측 가능한 데이터 플로우를 그릴 수 있다는 장점이 있고( 큰 차이점은 Action Value와 Action Creator를 이제 직접 생성해주지 않고, Action Value, Action Creator, Reducer가 하나로 합쳐졌다는 점 ) 전역으로 상태관리를 할 수 있는 라이브러리로 리덕스보다 코드량을 줄일 수 있고 사용이 편리한 리덕스 툴킷을 선택했습니다.
  • Axios : 비동기로 HTTP통신을 하기 위해 브라우저 호환성이 높은 AXIOS를 사용했습니다. (json메소드로 res를 변환해주어야하고 에러발생시 catch()로 에러 찾기 용이.  fetch의 단점을 보완하여 사용이 편리함)
  • Sweetalert2 : 더 나은 UI/UX 디자인을 위하여 기본 알럿 창을 커스텀해 사용하기 위해 선택했습니다.
  • ReactKakaoMapSDK : 카카오맵을 이미 만들어진 컴포넌트를 이용해서 좀 더 간편하게 기능 구현을 할 수 있어서 이 라이브러리를 선택했습니다.
  • react-insta-stories : 짧은 동영상을 업로드 하기 위해 선택한 라이브러리입니다.
  • Toast-ui-Editor : 여행 후기 공유 플랫폼 특성상 여러장의 사진 업로드, 일정 공유 등 자유로운 형태의 게시글이 가능한 서비스를 위해 선택했습니다.
  • react-aws-s3 : 이미지를 서버에 전송하기 클라이언트단에서 s3에 전송해서 url화 하기위해 선택한 라이브러리입니다. 이 작업으로 백엔드 서버의 부담을 줄일 수 있습니다.

 

SCSS 사용하는 이유, SCSS 장점과 실 사용 예제

 

Trouble Shooting

1. 환경변수 설정→ 소셜 로그인시 관리자 에러

.env파일 최상위 폴더로 옮겨줌, react app restart 해 줘야 저장된 정보 반영됨

 

2. 클라이언트에서 S3로 이미지 업로드해서 URL받아오기

Toast UI Editor를 사용해서 게시판을 만들때 이미지를 그냥 첨부하면 base64로 인코딩이 되어 삽입 → DB에 문제를 초래시키므로 클라이언트단에서 AWS S3에 이미지를 보내서 URL을 반환 받는 방식을 이용하기로 함.

 

1. localhost:3000 blocked by CORS policy ⇒ ACL활성화
2. 403 forbidden error : ACL(액세스 제어 목록) 모든사람(퍼블릭엑세스)      객체: 나열 ,  버킷 & ACL: 읽기 권한 부여하기
3. 404 “NoSuchKey” 오류 : console.log로 들어오는 이미지 주소에는 특수문자인 +, : 가 포함되어있었는데 서버에 저장된 이미지 주소는 특수문자 +,:가 %로 변환되어있어서 이미지 이름의 특수문자를 제거하는 정규표현식으로 제거하는 코드 사용.

3. token이 특정 action에서 날아가는 문제

1. local storage에 저장해 둔 토큰이 /post로  로그인 할 때 local storage에서 setItem을 하는 방식 바꿔줌.
2. 게시물 내용 작성 후 submit 버튼을 누르면 undefined로 바뀜 → api.js에서 token들을 localStorage에서 setItem 이 아니라 getItem으로 써 주었어야 했기때문에 게시글 submit버튼을 누르면 undefined로 바뀌는 것이었음. 코드 수정 후 해결 됨.

문제의 code
   ... 로그인 axios call 이후

   const ACCESS_TOKEN = data.headers.authorization;
   const REFRESH_TOKEN = data.headers.refreshtoken;
   const NICKNAME = data.data.data;
   localStorage.setItem("token", ACCESS_TOKEN); //로컬스토리지에 토큰저장
   localStorage.setItem("refresh", REFRESH_TOKEN); //로컬스토리지에 토큰저장
   localStorage.setItem("nickname", NICKNAME); //로컬스토리지에 닉넴 저장

   ...

해결 후 code
   ... 로그인 axios call 이후

   localStorage.setItem("ACCESS_TOKEN", data.headers.authorization);
   localStorage.setItem("REFRESH_TOKEN", data.headers.refreshtoken);
   localStorage.setItem("nickname", data.data.data); //로컬스토리지에 닉넴 저장
   localStorage.setItem("isLogin", data.headers.authorization);

   ...

문제의 code

//api.js
 
...

instance.interceptors.request.use((config) => {
  const ACCESS_TOKEN = config.headers.authorization;
  const REFRESH_TOKEN = config.headers.refreshtoken;
  localStorage.setItem("token", ACCESS_TOKEN); //로컬스토리지에 토큰저장
  localStorage.setItem("refresh", REFRESH_TOKEN); //로컬스토리지에 토큰저장
  return config;
});

해결 후 code

//api.js

...

instance.interceptors.request.use((config) => {
  const token = localStorage.getItem("ACCESS_TOKEN"); //로컬스토리지에 토큰저장
  const refreshtoken = localStorage.getItem("REFRESH_TOKEN"); //로컬스토리지에 토큰저장
  config.headers.authorization = token;
  config.headers.refreshtoken = refreshtoken;
  return config;
});

 

멘토님의 트러블슈팅 답변: localStorage setItem 의 경우 해결 전 - 해결 후의 코드가 사실 같습니다. 전체적인 코드를 보아야 정확한 답변이 가능하겠지만, 해결 후 코드의 문제가 server response의 headers안에 올바른 정보가 없다면 바로 undefined 나와서 오류를 찾기 힘듭니다. ⇒ 추후 데이터를 검증하는 코드를 삽입해보면 좋을 것 같습니다.

 

4. 카카오 맵 불러오기  ⇒  센터 좌표 고정 문제

게시글 상세 조회를 할 때 카카오맵의 센터 좌표가 찍혀있어 어디에서 맵 데이터를 저장해도 해당 좌표로 바 로 보여지지 않음 ⇒ 상세 게시글에서 나오는 데이터에 찍힌 배열의 0번째 x,y값을 위도, 경도에 넣어줌 ⇒ 맵을 저장하지 않은 유저 혹은 마커 저장하지 않고 폴리라인만 사용한 유저 ⇒ 맵데이터의 마커의 0번째를 읽 을 수 없어 오류가남 ⇒ 3항 연산자 이용해 undefined일때, 빈 배열일때인 경우에는 카카오 맵에서 지정한 고정 좌표로 이동하게 함. 

 

빌드 & 배포 테스트 후 발견한 문제점들

1. 제목, 내용, 태그 선택 필수로 지정하기

2. 리스트에서 포스트카드안 스크린사이즈가 줄어들면 제목 ...처리하기 & 좋아요 아이콘 특정 위치에 고정시키기

3. 휴대폰으로 게시물 업로드시 자판 올라가면서 에디터 부분 가려짐. 글 작성 거의 불가능

4. 게시물 작성시 에디터에 있는 placeholder에 작성tip 화면 사이즈 작아지면 글씨 밀려남.

5. 댓글, 게시물에 수정된 닉네임 & 사진 반영 안됨

6. 랜덤으로 닉네임 & 사진 변경 안되는 오류

7. 나의 관심 게시글 사진 눌림 & 게시글이랑 디자인 통일

8. 나의 일정 등록하기 사진 눌림

9. alert창 버튼 색상

10. 제목과 작성자 구분이 잘 안됨. ex) '개망나니 이다현' , '에버랜드빌런 이다현'

서비스 개선 뱡향

0. 진짜 여행 후기를 공유하는데 그것을 인증하는 방법은 뭘까?

1. 사용자 로그인 30분 뒤 토큰 날아감 -> 사용자에게 로그아웃 전 로그인 유지 알림 보내고 refresh토큰으로 토큰 재발급? or 이용시간 늘리기?

2. 게시글 작성 tip 튜토리얼 만들고 싶음. 어디에 어떻게 적용할지?

3. 태그의 카테고리화 : 사용자가 이용하기에 카테고리화 하는게 사용자 측면에서 원하는 정보를 얻기에 훨씬 더 좋을 것 같다고 생각함. 

4. 지도 마커에 장소명 표기하기. 폴리라인 없애기?

5. 데이터 로딩될때 스피너 보이게 하기

 

 

변명을 하자면

 

1. 여행 취향 선택페이지 / 태그 부분 기능 진행이 더딘 이유:

 

기획 과정에서 카테고리로 갈지, 태그로 갈지에 대한 논의가 길어져서 일단 기능 구현 우선순위에서 밀려나서 기능 구현 10월 2일 부터 시작 됨. 한 번도 해보지 않은 기능이라서 시행 착오를 겪음. 게시글 작성시 태그 추가 되는 부분은 기능 연결이 되었지만 로그인시 추천페이지에서 떠야하는 추천게시물들은 현재 여행 취향 선택 페이지가 기능 연결이 되지 않았기 때문에 현재 의미있는 게시물 추천이 이루어지지 않고있는 상태.

 

2.  S3 정적 웹 호스팅을 한 이유 :

 

정적 웹 호스팅은 저장된 정보만 보여주기 때문에 서비스가 한정적이고 유지보수가 힘든 단점이 있지만 진행중이었던 MVP 기능을 마무리하고 어플리케이션을 테스트 하는 것에 시간 할애를 더 오래 해서 빠르게 현재 셋팅이 되어있고 빠른 빌드와 배포가 가능한 AWS S3 정적 웹 호스팅을 이용했음. 실제 배포시 EC2로 할 것.