# 👏 [J6] 8주차 피어세션

## 😀 참여자

|[J130 유정한(J02B)](https://github.com/youjeonghan)|[J039 김영진(J02B)](https://github.com/jin-Pro)|[J138 이광민(J01B)](https://github.com/LeeKwang-min)|[J102 설민욱(J11A)](https://github.com/blogSoul)|[J049 김일혁(J11A)](https://github.com/illlama)|[J187 정요한(J01B)](https://github.com/ingyeoking13)|[J042 김용진(J16A)](http://github.com/Yongjin9660)
|---|---|---|---|---|---|---|
|<img src="https://github.com/youjeonghan.png" width="80"> |<img src="https://github.com/jin-Pro.png" width="80">|<img src="https://github.com/LeeKwang-min.png" width="80">|<img src="https://github.com/blogSoul.png" width="80">|<img src="https://github.com/illlama.png" width="80">|<img src="https://github.com/ingyeoking13.png" width="80">|<img src="https://github.com/Yongjin9660.png" width="80">

## 👨‍👧‍👦 계획

2:30~2:40 자기소개
2:40~4:00 자유질문 + 리뷰 내용 공유
4:00~ 자유토론

## 📜 키워드

- Canvas
- React 비동기 처리 (axios, fetch)
- socket.io
- pm2
- 인스턴스 분리
- 애니메이션 구현 방식
- nginx

## 🧐 자유질문

---

- 저는 캐릭터,맵,오브젝트 하나당 canvas로 그려주었고, 매번 리렌더링될때마다 image를 새로 생성해주었는데 잘못된 방법인 것을 알게되었는데요, 혹시 canvas하나에 캐릭터, 맵, 오브젝트를 그려주신분들 코드를 너무 깊지않게 스-윽 보고싶습니다!

- 캐릭터가 5개면 canvas도 5개를 사용하여 구현을 하였는데, 이렇게 될 경우 canvas를 너무 많이 써서 차라리 canvas를 하나만 쓰는게 더 나을 수 있다고 합니다. canvas를 하나만 사용하여 좌표값으로 이미지를 그려주는 방식의 구현을 하신분이 있다면 코드를 보고싶습니다.
- 이미지 태그를 넣는 방식이 2가지가 있다. 이미지 객체를 새로 생성하여 추가하는 방식, 이미지 태그를 직접 불러오는 방식이 있다. 이 중에서 이미지 태그를 미리 만들어 두고 이를 불러와서 사용하는 방식을 사용하게 되었다. CSS 특성을 사용하여 처리하였다.
- 이미지 태그를 관리한 방식은 canvas 태그 하위에 이미지 태그를 넣어두고 className, id를 사용하여 관리하였다.
- 이미지 객체를 사용하는 경우 유저의 위치에 대한 정보를 setInterval을 클라이언트에서 서버로, 서버에서 클라이언트로 보내주어 계속해서 다시 그려주는 방식을 사용했다.

---

- 컴포넌트 안에서 비동기 데이터를 어떤 방식으로 받아와서 처리했나요?
비동기 처리 라이브러리 등을 이용한 분이 있을까요??
- fetch를 사용하는데 문제가 조금 있어서 axios를 사용하였다.

- nginx를 이번에 처음 이용했는데 get 이외의 post, put 요청에서 에러가 나타나던데 다른분들은 get 이외의 http method에서 어떻게 처리하셨나요?
- 어떤 에러가 나셨나요?
- > get 이외의 요청에서 405 에러코드를 반환하는 에러였습니다! (nginx 405 Not Allowed 라고 검색하면 많이 나오더라구요)
- > header에서 credential : true 추가하셨나요? 아뇨...
- > 헤더 설정 문제일 수도 있겠다는 생각이 듭니다!
- > 아니면 " nginx에서는 .html 파일에 대한 post 요청을 지원하지 않는다. " 라고 하다고 하네요.
- 로그인을 하는 과정에서 생기는 문제들이 몇가지 있다.
- 위에서 서술한 것과 같이 header 문제일 수도 있다. header에서 credential을 추가하지 않으면 `CORS` 문제가 나타날 수 있다.
- 405 에러가 나면 이를 확인하여 200번대 상태로 넘겨주는 방식이 있다. [확인](https://stackoverflow.com/questions/24415376/post-request-not-allowed-405-not-allowed-nginx-even-with-headers-included)
- axios에서 데이터를 받을 때 `data`로 감싸지기 때문에 `data.data`로 받지않아서 그런것일 수 있다.

- jwt를 사용해서 로그인을 구현한 분이 있으면 토큰 만료시 리프레시 토큰을 이용해서 갱신을 어떻게 시키는지 플로우를 좀 보거나 알고 싶습니다.
- 아무도 사용을 안하신거 같습니다.

---

- 저희 팀은 캔버스 그릴 때, setInterval을 사용했습니다. 다른 draw 방식을 채택하신 팀들이 있을까요? 사용 의견 궁금합니다! 우선 setInterval은 우려 외로 잘 되었어요 :)
- Canvas를 그릴 때 requestAnimationFrame과 setInterval, OffscreenCanvas 등이 있는데 그 중에서 setInterval을 사용하였다. 다른 방식을 사용하신분들이 있다면 구현할 때 어떠셨는지 의견이 궁금합니다.
- requestAnimationFrame을 사용하는 경우 Canvas를 그리고 나서 재귀적으로 받아오도록 처리한다.
- 다른 유저들의 데이터들을 서버가 아닌 클라이언트에서 관리하도록 처리하였다. socket통신을 통해 클라이언트에서 넘겨준 데이터를 서버를 통해 연결된 다른 유저들에게 넘겨주는 방식을 사용
- OffscreenCanvas의 경우 바뀌지 않는 맵과 같은 데이터들을 이 방식을 사용하게되면 훨씬 부하가 줄어드는 경험을 한 적이 있다.

- 전체적인 구현 프로세스에서 고민 많이 했던 point 있을까요? 저는 충돌 처리를 서버에서 할지 클라이언트에서 할지 고민 했었어요.
- 이번 미션을 구현함에 있어 어떤 부분에서 가장 많은 자원을 사용하셨는지
- 전 setInterval로 구현하였는데, 너무 많은 요청이 오는 것이 우려가 되서 어떤 방법을 이용하면 적당한 요청 횟수를 보낼 수 있는지 고민했었습니다.
- lodash의 debounce 메소드
- Dead Reckoning 데드 레커닝
- TypeScript : 실무에서 왜 쓰는지 알게 된 것 같다. 이번 기회에 제대로 학습해본 것 같다.
- recoil : redux 보다 boilerplate 가 적다. 상태를 전역적으로 관리하여 편하다.

---

- 이번 미션과 같이 특정 리소스를 사용하여 구현하는 경우 이미지 리소스를 서버에 저장해 두고 클라이언트에서 서버로 요청을 하여 받아오는 방식과 클라이언트단에 두고 사용하는 방식에 대한 의견이 나뉘었습니다. 다른 분들의 의견이 궁금합니다.

- 움직임마다 서버에 요청을 하는것은 문제가 생길 수 있고, 서버를 사용한다면 시작할 때 서버로부터 리소스들을 모두 받아와서 저장해두고 사용하도록한다.
- 어느 한쪽의 부하를 줄이면 다른 한쪽의 부하가 늘어날 수 밖에 없기 때문에 정답은 없다. 특정 상황에 있어서만 사용하는 경우라면 서버에서 제공하는 방식을, 계속해서 사용해야하는 경우라면 클라이언트에서 사용하는 방식을 사용한다.

---

- db 서버를 분리하신 분이 계신지 궁금합니다. 분리하셨다면, 어떤 식으로 db에 접근하셨는지 궁금합니다.
- 서버와 db 인스턴스를 분리하여 사용하게 되었고, ssh 터널링을 사용하게 되었다. 하지만, 동일한 코드로 원활한 통신이 어려웠다. 다른 방식이 있는지 궁금하다.
- mongodb서버를 따로 서버로 배포하여 진행했습니다. mongoose 라이브러리를 통해 DB 서버와 연동 후 사용했습니다! (ssh 접속과 비슷합니다)

---

- 자동 배포 구현하신 분 계신가요? 있다면 쉡 스크립트 어떻게 짜셨는지 궁금합니다.
- github action을 사용하여 구현 : ssh-action을 사용하였다.

- 다들 실시간으로 canvas에 그려야 하는 오브젝트에 대한 데이터를 관리하셨을텐데, 어떤 방식으로 관리를 하셨는지 궁금합니다.
- `로그인 -> 캐릭터 선택 정보, 캐릭터 위치 정보 저장 -> 해당 정보가 저장된 리스트를 뿌려서 처리`하고자 하였는데, 다른 분들의 구현 흐름에 대해 알고싶습니다.
- 재접속시에 이 전의 위치를 DB에 저장하고 불러오는 방식 (온라인/오프라인 정보를 위해서 사용하고자 하였다)
- 재접속시에 default값의 위치에 생성하는 방식
- 서버와 클라이언트에서 주기적으로 접속중인 유저 정보를 보내는 방식을 사용
- 소켓에서 브라우저를 끄는것을 확인할 수 있다. (disconnecting 이벤트 사용)
- 소켓 통신은 가벼운 느낌이 들어서 다양한 방식을 사용할 수 있다.
- disconnecting : 소켓 통신이 끊기기 전에 발생하는 이벤트 (사용자가 나가기 전에 이벤트 처리 : 나가기 전에 데이터 저장)
- disconnect : 소켓 통신이 끊기고 발생하는 이벤트 (사용자가 나가고 나서 발생하는 이벤트 : 나간 유저에 대한 알림)