크래프톤 정글 week13, day100 - 게시판 프로젝트 마무리

발표날이 하루 앞당겨져 수요일 오전 10시에 발표를 해야 하기 때문에 오늘 급하게 못했던 부분을 마무리했다.

threeJS를 사용한 페이지의 오류가 심심찮게 발생하여 이쪽에 시간을 너무 많이 쏟은 것 같아 좀 아쉽긴 했다. 결국 이것도 하긴 해야 하는데..

이전까지 백엔드와 연동되었던 부분이 로그인, 회원가입밖에 없었고 게시판도 연동이 안되서 에러나고 있던 상황이라 프론트 백 둘 다 개빡세게 시작했다.

 

작업하면서 생긴 이슈 중 하나는 로그인할 때 세션에 담긴 데이터가 안보이는 것이였는데, 본인은 프론트 쪽에서 jwt 토큰을 생성하거나 세션에 담는 줄 알았는데 백엔드 쪽에서 세션 처리를 한다고 해서 너무 신기했다. 근데 세션으로 잘 저장하는 것 같은데 담긴 흔적이 안보여서 그냥 JWT로 변경했는데, JWT에서도 문제가 발생하여 원인을 못찾았다.

그러나 나중에 원인을 찾았는데, 원인은 그냥 미들웨어 코드에 문제가 있어서 안되었었다. 이 부분을 수정하니 바로 토큰도 담아지고 아마 세션으로도 잘 됐을 것 같다.

로그인에 이어 게시판도 데이터를 잘 받고 상세 게시글 페이지에서도 데이터를 받는데 성공했다. 그런데 데이터베이스의 이슈인지 댓글 기능에서 에러가 발생해 발이 묶여있었고, 새벽까지 하다가 댓글 로드가 안되서 결국 발표까진 작성을 완료하지 못했다.

 

백엔드가 댓글에 묶여있는 동안 본인은 로고 클릭 시 이동되는 링크 수정, 댓글 UI 작성, 상세 게시글에 닉네임과 날짜가 없는 부분 수정 등 짜잘한 부분을 메꿨고 threejs로 만들어본 큐브 도형을 이용해 구체로 변경하고 광원이나 크기 등 몇몇 코드를 수정해 구체를 만들었다.

이 구체를 메인페이지에 만들면서 이전에 해결했던 threejs의 원인을 찾아냈는데, 도형을 만들기 위해선 도형의 발판이 되는 캔버스를 생성해줘야 한다. 캔버스가 있어야 그 위에 도형을 생성하고 카메라를 이용해 보이는 위치를 설정하는 것인데 이 캔버스 크기가 화면의 전체, 혹은 도형보다 크게 되어있었기 때문에 캔버스가 기존의 화면을 가려 안보였던 것이다.

다른 페이지는 캔버스때문에 안 보인건 아니지만 캔버스 설정을 위해 높이를 100vh로 설정해버린 탓에 다른 페이지가 화면 밖으로 넘어가지면서 생긴 문제였다.

이 문제의 해결은 캔버스의 크기를 도형의 크기에 딱 맞춰서 도형 외의 화면은 가리지 않게 해놨다.

항상 문제 자체는 어렵지 않았지만 원인을 몰라서 오래걸리는게 좀 착잡했다.

캔버스 이슈가 해결이 되고 구체에 이미지 텍스쳐를 입혀서 지구를 만들어봤다.

구글링해보니까 각 행성의 텍스쳐가 있어서 긁어왔다. 그런데 처음엔 그냥 지구모양의 원형 이미지를 가져와서 입혔는데, 구체에 원형을 입힐려고 해서 그런지 텍스쳐 길이가 부족해 30%가 이미지로 안덮이고 구멍나있더라 그래서 지도 모양의 텍스쳐 이미지를 가져와 입혔더니 위의 움짤처럼 제대로 적용됐다.

그리고 하나의 텍스쳐로는 질감이나 외형이 애매했기 때문에 다른 텍스쳐를 하나 더 가져와 겹쳐서 적용시켰다.

만들어보니까 재밌어서 태양, 목성 등을 더 만들고 있었는데 세진이한테 일하라고 혼났다 ㅎㅎ

메인페이지

움짤이라 잘 안보이지만 지구 옆의 달도 조금씩 돌고있다. 전부 같은 컴포넌트인데 여기서도 변경할 인자만 상위컴포넌트에서 넣으려 했다가 이미지가 너무 많아서 그냥 하나씩 만들어서 적용시켰다. 수금지화목토천해명 다 만들고 싶었는데 시간도 없고 여기까지 만들었으니 이후에 더 추가할 수 있어서 만족했다.

 

학습 시간 : 10 ~ 27시