[항해99] 10주차 실전프로젝트(3) 회고

😎이번 주에 한일

• SSE를 통한 게임방 조회
• SockJS + Stomp를 이용한 채팅 기능
• 전역상태관리를 이용한 효율적인 모달 관리
• 디자이너님과 협업 + 스타일 작업
• ec2에 배포하기
• 이슈 정리 및 해결
• 중간 발표회

🙋‍♂️중간 발표회

게더에서 중간 발표회

• 한 조 당 주어진 발표시간은 5분입니다.
  • 1분 : MVP 시연
  • 1분 : 서비스 아키텍쳐 설명
  • 1분 30초 : 기술적 의사 결정
  • 1분 30초 : 추후 개발 및 기술적인 도전 계획

5분의 발표가 끝나면 25분(기술 면접 질문 & MVP 기능 피드백) 동안 멘토님들의 기술 면접과 피드백이 진행됩니다.

🤔멘토님 피드백

우리팀 피드백

 

1. API 호출에 있어서 공통된 에러 처리를 하지 않은 이유?

 

명세가 초기 단계에서는 불분명하고 수정이 많았기 때문에 공통 에러 처리를 하지 않았습니다. axios의 interceptors를 이용해서 각각의 에러 상황과 에러 코드에 대한 명세를 맞춰서 상황에 맞게 공통적으로 처리하려고 합니다.

 

2. withCredentials 는 왜 붙이는지에 대한 이해가 있다면 설명

 

withCredentials는 서로 다른 도메인(크로스 도메인)에 요청을 보낼 때 요청에 credential 정보를 담아서 보낼 지를 결정하는 항목입니다.

여기서, credential 정보가 포함되어 있는 요청은 아래 두 가지 경우를 의미합니다.

1. 쿠키를 첨부해서 보내는 요청
2. 헤더에 Authorization 항목이 있는 요청

따라서, 보내고자 하는 요청이 위 두 가지 항목 중 한 가지라도 포함하고 있다면 withCredentials 옵션을 true로 설정해야만 합니다.

https://junglast.com/blog/http-ajax-withcredential

 

⇒ frontend에서 credential 정보가 담겨있는 요청을 하기 때문에 WithCredentials를 명시해주었습니다.

 

 

3. Frontend에 CORS 헤더들을 세팅한 것이 보이는데 의도가 무엇인지?

 

const instance = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
});

 

요청할 때 헤더에 Origin이 함께 붙어가며 이것과 서버에서 보내주는 Access-Control-Allow-Origin이 동일하다면 CORS 이슈가 발생하지 않습니다.

항해의 협업 세션에서 사용했던 코드를 참고하여서 사용했던 코드입니다. 코드에 대한 이해도 없이 사용했기 때문에 발생했던 문제라고 생각합니다.

 

⇒ Access-Control-Allow-Origin헤더는 서버에서 보내주는 응답에 명시하는 부분이기 때문에 요청에서 필요 없는 부분인 request 헤더에 있던 Access-Control-Allow-Origin은 삭제하였습니다.

 

4. source map 숨기기

 

1) .env 파일에 명시하기.env 파일에 추가하면 빌드시 .map 파일을 생성하지 않음

GENERATE_SOURCEMAP=false

2) package.json의 build 명령어

(build ⇒ linux 환경에서의 빌드 명령어, winBuild ⇒ window 환경에서의 빌드 명령어)

"build": "GENERATE_SOURCEMAP=false react-scripts build", 
"winBuild": "set \\"GENERATE_SOURCEMAP=false\\" && react-scripts build",

1번의 해결법으로 빌드 파일에서 map 파일을 제거하였습니다.

제한된 시간에서 배포 과정에서 미처 신경쓰지 못한 부분입니다.

 

5. Client 와 Server 의 차이점? Git Repo를 보니 React 를 Client 라고 명명하여서 질문

 

React 자체가 Client라고 생각한 것이 아니고 서비스의 전체적인 관점에서 클라이언트에 대한 부분이라고 생각해서 그렇게 명명하였습니다.

 

6. 게스트 정보 처리 관련

 

🧑🏻: 게스트의 정보들을 삭제하는 것은 비즈니스적으로 좋지 않습니다. 데이터 하나하나가 마케팅적으로 활용될 수 있으며 데이터 하나하나가 중요한 스타트업의 입장에서는 게스트 정보까지 소중한 데이터입니다.

 

▶더 자세한 내용 보러가기

 

전체 팀 피드백

 

1. 기술을 선택한 이유가 있어야 하며, 기술에 대한 이해도와 깊이가 있어야한다.

⇒ 기술 선택의 이유가 타당해야함!! 특히나 취업을 위해서라면 기술로 설득을 할 수 있어야 함.

2. 많은 기능이 있는것도 좋지만 더 중요한 건 잘 작동하는 것

3. mvp 설정 시에는 레이어를 나눠서 작업하고 보이는 것은 후순위. 차라리 mvp는 기능하는 것만 위주로 개발해도 좋음

 

🔑이번주 키워드

SSE(Server Sent Event)
socket, SockJs, stompJs
efficient modal manage
https ssl
ec2 deploy

😤다음주의 할 일

• 각종 에러 처리
• SNS(naver, google) 로그인
• 코드 리펙토링
• 토스트 컴포넌트 제작
• UX 향상과 UI 작업
• 사운드 (효과음, 배경음)
• Google Analystics
• github actions CI/CD
• 렌더링 최적화

할 거 대박 많네...

👻코멘트

중간 발표전에 배포한다고 잠도 3-4시간 자면서 작업했다. 시간이 너무 없어서 공부한 레퍼런스만 정리해두고 TIL을 하나도 못썼다. 치명적인 에러도 많이 발생해서 에러 해결한다고 시간도 엄청나게 많이 사용했다. 개발하면서는 하나도 없던 이슈들이 배포하고 나니까 엄청나게 많이 생겼다. 그래도 새벽까지 하면서 배포하고 발표회에서 시연할 수 있어서 기분이 좋다.

 

세부적으로 신경쓰지 못한 부분과 전체적으로 비즈니스적인 관점까지 세세하게 알려주셔서 너무 좋은 시간이었다. 살짝 아쉬운 점은 마지막 차례의 팀이라서 멘토님이 피곤하셨는지 피드백이 꼼꼼하게 이뤄지지 못한 점이 아쉽다.

 

발표회를 쭉 지켜보면서 든 생각은 아무것도 모르던 병아리들이 승선하고 언제 이렇게 늠름해졌는지 10기 B반들 진짜 너무 대단하고 수고 많았다는 생각이 들었다. 모두 취업 잘했으면 좋겠다. (물론 나도..)

 

3주 남은 기간동안 잘 마무리하도록 해야겠다.