Log 8/20

개발(공부) 자국·2021년 8월 20일
0

Dev log

1

오늘은 게임이 종료된 후에 Stage Clear 페이지를 만들었다. 모달 형태로 전체를 해당 페이지로 덮는 작업을 했다.

#result_container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: none;
}

주요한 점은 이렇게였다. 우선 보이지 않게 display를 none으로 해두고 뷰포트의 크기만큼 전체를 덮게 만들었다. css를 조작하면 쉽게 될 것 같지만 지금 next.js를 사용하고 scss를 사용하고 있고 여기에 canvas안의 javascript 코드에서 마지막 입력을 완료했을때 나타나기 때문에 DOM을 조작해야했다. classList를 추가해서 하고 싶었지만 scss에서는 styles를 붙여서 고유의 class를 자동 생성해주기 때문에 classList를 add 하는 방법은 할 수 없었고 style로 display block을 주는 방법을 선택했다. block까지는 구현되어서 게임 완료가 보이는데 다시 play again을 버튼을 누르면 다시 페이지가 사라져야 하는데 페이지가 사라지지 않았다.
이 문제가 오래걸리는 문제가 되었는데 canvas 태그 안에서 js 코드를 작성하는데 setInterval로 10ms 마다 반복해서 부르고 있었기 때문에 여기서 설정한 속성은 setInterval이 멈추기 전에는 계속 display: block 상태를 유지하게 되었다. 그래서 setInterval을 멈추는 방법을 사용하니 바로 display: none이 바뀌지 않아서 제대로 작동하는 모습을 볼 수 있었다.

2

next.js에서 api의 구조를 다시 한번 보게 되었다. next.js는 라우팅이 편한 구조로 되어 있다. page 폴더 안에 js 파일의 이름이 page route가 되고 page 폴더 안의 api 폴더 안에는 파일 이름이 api의 endpoint가 되는 구조로 되어 있었다. 이전에 작업했던 EC2 서버의 api 문서를 다시 next.js 형태로 api 문서를 전환하는 작업을 했다. 정말 특이했던 점은 클라이언트와 서버가 같은 프로젝트 안의 다른 폴더에 있는 구조다보니 api 요청을 보낼 때 url을 /api/user 과 같은 형태로 요청할 수 있었다. api 폴더 안에 있는 형태라서 저렇게만 적어도 인식하게 된다. 신기했다. url도 파일의 위치를 나타내는 것이라 /로 구분하게 되는데 마치 리눅스의 폴더구조를 보는 것 처럼 /api/user가 직관적으로 이해하기가 편했다. 그리고 만났던 error가

1

GET http://localhost:3000/_next/webpack-hmr?page=/ net::ERR_CONNECTION_REFUSED

이 error은 연결이 끊어져있는데 계속 요청을 시도하면서 연결이 되지않는 상황이다.

2

code: 'ER_BAD_FIELD_ERROR',
    errno: 1054,
    sqlState: '42S22',
    sqlMessage: "Unknown column 'item' in 'field list'",

이 error은 데이터베이스에 없는 field를 포함해서 query 요청하고 있는 상황에서 발생했다. 요청을 보내는 요청메세지에도 수정해야 하지만 model의 database 형태도 수정해야 제대로 요청이 잘 보내진다.

느낀점

정말 개발은 어려운 것 같다. 개인이 아닌 팀으로 작업할 일이 많을 텐데 내 실력이 떨어지는 위치에 있을 때 어떤 방법으로 극복해야할지 참 어려운 것 같다. 공부를 계속 하면서 한다고 해도 당장 내 실력이 이 프로젝트를 하면서는 바로 올라가지 않을 텐데 참 그 위치에서도 자신을 잘 지켜가면서 공부하고 성장한다는 것이 쉽지 않은 일이라는 것을 요즘 많이 느낀다. 집중이 잘 안되는 날이 많아지는 것 같다. 그래도 계속 붙들다 보면 그래도 작은 것 하나라도 할 수 있게 되는 그 순간에는 정말 기분이 좋다. 실력이 부족해서 팀원들에게 미안하지만 그래도 할수 있는 일을 해야 도움도 되고 성장도 할 수 있다. 마음은 어렵지만 그래도 잘 해봐야겠다.

다른 코드들도 구조를 잘 봐야겠다. next.js _app.js index.js 차이
gsap도 알아보고 싶다.

profile
기록을 중요하게 생각하는 사람입니다. 학습한 내용을 정리한 것이라 잘못된 정보가 있을 수 있습니다. 잘못된 정보는 언제든 말씀해 주시기 바랍니다.

0개의 댓글