---
# System prepended metadata

title: Untitled

---

## [J08] w8 피어세션 
안녕하세요. 

### 구성원

| J158   | J081   | J213  | J194   | J143   | J218   | J170   | J080 |
| :------: | :------: | :------: | :------: | :------: | :------: | :------: | :------: |
| <img src="https://github.com/Alencion.png" width="80"> | <img src="https://github.com/yeon52.png" width="80">|<img src="https://github.com/beomseok37.png" width="80"> | <img src="https://github.com/minjaec023.png" width="80">|<img src="https://github.com/sumin123456.png" width="80"> | <img src="https://github.com/isanghaessi.png" width="80"> |<img src="https://github.com/iHoHyeon.png" width="80"> | <img src="https://github.com/taehong0-0.png" width="80"> | 
| 이정준 | 박가연 | 한범석 | 조민재 | 이수민 | 홍승용 | 이호현 | 민태홍 |

### 토의 혹은 질문거리

1. requestAnimationFrame 사용 하신 부분 이야기 해볼까요? 
    - requestAnimationFrame이 리턴값이 고유한 값이다. cancelAnimationFrame 함수를 쓰면 해당 animationFrame 동작을 멈출 수 있다.

2. 캐릭터 움직임을 어떤 식으로 구현하였는지 공유해보고 싶어요! 
    - 방향키를 누를 경우 해당 방향을 키로 가지고 있는 map 자료구조의 value값을 true로 설정해 주어 해당 방향으로 다음 frame에 움직일 수 있도록 해주었습니다. 지속적으로 누르고 있을 경우 누르고 있는 frame수를 계산해 다른 이미지를 보여줄 수 있도록 해주어 걷는 모습을 애니메이션으로 보여줄 수 있도록 하였습니다.
    - 방향키가 눌릴때마다 32pixel씩 이동하도록 하고자 했고 각 유저마다 cycleIndex 값을 통해서 각 프레임마다 2pixel씩 더 움직이는 것처럼 보이도록 했습니다. 총 32pixel을 움직였을때는 유저 위치값을 업데이트 해주는 식으로 했습니다.
    - 중복 이동을 막기위해서 KeyUp 함수로 dx, dy의 값을 0으로 바꾸어 이동하지 안도록 했습니다.
    - 캐릭터 위치를 중앙으로 고정된 크기 만큼의 맵을 계속 그려주게 함으로써 캐릭터가 이동해도 맵의 중아에 위치하도록 하였습니다.

3. 로그인 유지 어떻게 하셨나요?
    - 쿠키를 이용했고 페이지 라우팅을 할때 유저가 없다면 signup페이지로 이동시켰고 있다면 메인페이지로 이동하도록 했기에 메인페이지에 도달했다면 유저가 있다는 것을 보장합니다.
    - useRef안에서 즉시실행 함수로 사용했다.
    - 서버에 배포했더니 쿠키가 새로 생성된다는 이슈가 있었는데 확실한 이유와 해결방법은 모르겠네요.

4. 컴포넌트 마운트 전에 해야 할 일을 어떻게 하셨는지 궁금해요
    - useState의 초기값을 이용하면 마운트전에 실행할 수 있다.👍
    - fetch보다 아래쪽의 useEffect가 동작하다 보니 문제가 되니까. 매번 값이 있는지 체킹 해주어야 했다. 로딩 페이지를 보여서 해결하자.

5. nginx를 어떤 식으로 활용하셨는지 궁금합니다 👍(정준님 설명)👍
    - 리버스 프록시로 사용했다. nginx 80 -> api server 8000으로 연결해서 했다.
    - nginx(프론트 서버 겸 프록시, cookie 설정? sameSite?) - api server(다른 인스턴스)

6. 리뷰 받은 것 공유 해주실 수 있나요?
    - 공유 완료!

7. 전역 스테이트 어떻게 관리하셨나요?
    - ContextAPI로 전역 부분으로 했다.
    - 스테이트가 분기해서 가서 필요한 부분이 있다면 사용했다.

8. oauth callback에서 client로 리디렉션 방법
    - callback을 클라이언트로 보내서 Loading 페이지를 보여주고 -> code 값을 서버로 보내서 처리를 하자! 

### 잡담
이제 스프린트 끝났다는 느낌에 아무것도 하기 싫네요 하하하하하하하하하하하
ㄴ 인정입니다...
-> 바로실행으로 옮길까요 
    ㄴ ㅋㅋㅋㅋ 
    

    
    
    
