Dev log
1
오늘 이미지 업로드 부분을 찾아봤다. next.js 에서 이미지 업로드를 하려고 할 때 next.js 뿐 아니라 React에서도 multer를 많이 사용하는것을 찾다보니 알 수 있었다. multer를 조금 더 찾아보았는데 생각보다 이해되는 자료를 찾기가 어려웠다. 중간에 처음은 이해가 되다가도 중간에 난이도가 갑자기 이해하기 어렵게 올라가거나 처음부터 이해가 되지 않는 자료들이 많았다. 이미지 업로드 부분만 보고 구현에 집중하려고 찾아봤지만 생각보다 아직은 필요한 부분만을 딱 발췌해서 공부하는 것이 어려웠다. 기본지식이 어느정도 있어야 그것도 가능해보였다. 오늘은 그렇게 찾아보다가 많은 시간을 보냈다. 점점 시간을 알차게 보내야 한다는 강박 때문에 시간이 갈수록 눈에 들어오지 않기도했다. 무언가 일을 해냈다고 보여줘야 한다고 생각하는 부담감이 큰 모양이다. 내일은 multer 공식문서를 찾아보고 사용법이나 기본을 보고서 다시 봐야겠다.
2
게임이 끝나고 점수를 업로드 하는 부분을 구현하고자 했다. 게임은 js 파일에 canvas로 작동하고 있고 그 js 파일을 로드해서 canvas로 게임을 진행한다. 그렇다보니 react, next.js의 영역과 분리되어 작업이 이뤄졌다. 분리되지 않으면 더 좋겠지만 그게 더 이상적일 수 있지만 처음의 생각은 js 파일만으로도 구현이 되게 만들고 싶었고 그렇다보니 그 게임을 올려 놓을 수 있는 페이지만 react로 next.js로 만들고 싶었다. 그렇다보니 되도록이면 js 파일 내에서 해결하고 싶었지만 그게 쉽지 않았고 애매하게 걸쳐져 있는 상황이 되기도 했다. js 안에서의 입력이 next.js의 페이지와 상호작용이 되게 하는게 쉽지 않았다. canvas의 입력이 js 파일의 함수 안에서 벌어지기 때문에 next.js 페이지로 전달하는것이 쉽지 않았다. axios로 점수를 받아오는 것부터 방법을 찾아야 했다. 우선 정해진 점수를 보내주는 것을 생각하여 결과 페이지가 나왔을 때 요청을 보내려고 생각했다. 그런데 css로 display none을 block으로 보이게 했을 때 요청을 보내는 것을 어떤 방법으로 해야 좋을지 생각나지 않았다. useEffect로 게임 페이지를 새로 열때 보낼까 했지만 그것도 다른 메뉴를 눌러서 이동한다면 요청이 보내지지 않기 때문에 결과 페이지가 떳을 때 보내야 했다. 그 트리거를 어디서 해야할지 아직 생각나지 않았다. 시도는 해봤지만 아직 유효한 방법은 없었다.
3
mypage에 유저의 입력으로 소개를 서버에 업로드 하고 갱신되어 보여지는 부분을 구현했다. 소개를 서버에 보내는 순서가 useEffect로 페이지가 처음 랜더링 될 때 로그인된 해당 유저의 정보를 서버에 요청을 하고 그 요청된 유저정보를 페이지에 선언되어 있는 useState의 userInfo에 setState를 한다. 그 userInfo를 랜더링 하게 되고 소개를 누르면 입력하는 input 엘리먼트가 활성화되고 입력을 다 하면 서버에 입력한 값을 요청보내게 된다.
여기서 두가지 방법을 생각할 수 있었다.
첫번째는 받아온 유저의 정보에 있는 소개를 바로 랜더링 되는 문구에 넣는 것이다. 그렇게 되면 받아오는 정보를 바로 보여주기 때문에 구현이 더 손쉬운 장점이 있었는데 이렇게 구현을 하게 되니 입력한 직후에 다시 유저정보를 받아올때 까지의 짧은 시간에 이전 문구가 다시 보였다가 바뀌는 현상이 보이게 되었다. 정말 짧은 시간이긴 했지만 유저경험상 좋아보이지 않았다. 이부분을 해결하고 싶어서 두번째 방법을 생각했다.
두번째는 받아온 유저의 정보에서 소개만을 따로 state로 두고 그 state를 랜더링하는 방법이다. 이 방법은 조금 생각하기가 어려웠다. 이유는 useEffect로 userInfo를 setState를 했기 때문에 같은 useEffect에서는 소개 상태를 변화하는 것이 반영되지 않았다. 방법을 모르는 것일 수 있지만 state가 바로 적용되지 않았다. 그래서 useEffect를 하나더 만들고 userInfo가 변화하는 의존성 배열을 두고 소개 state를 갱신하게 구현했더니 state 자체를 변화하고 보여주기 때문에 이전 문구가 보이는 현상이 없어졌다.
여러 시도를 하다가 userInfo를 갱신하는 첫번째 useEffect에 userInfo를 의존성 배열에 넣어두니 무한으로 요청이 되는 것을 보았다. 생각하면 당연한 결과였다. set으로 계속 변화를 주면 랜더링을 하게 될테니 계속 랜더링이 반복되는 것이다.
이 구현도 시간이 오래 걸리긴 했지만 생각한대로 구현이 되어 기분이 좋았다.
