오늘부터 시간날 때 삽질한 기록을 남기려고 한다.
오늘도 엄청난 삽질의 연속이였다. 요즈음 부산IT연합동아리 DND활동을 하고 있다. 이번주가 8주차라 거의 끝나는 시기이다. 그래서 빨리 개발을 끝내야하는데 여기저기서 막혔다.
1. styeld-components SSR 및 Google fonts 적용
Next.js에서 styled-components ssr 시켜 주지 않으면 처음에 css가 적용되지 않은 화면이 뜨고 잠시 후에 css가 적용된다. 이런 현상이 매우매우 불편했기 때문에 ssr하기 위해 찾아 봤고 /pages/_document.js를 만들어서 설정해주면 된다는 것을 알아냈다!! 설정을 해주니 css가 적용된 상태로 화면이 렌더링 되었다. 그리고 styled-components로 globalStyle을 주는 방법도 찾아내어 공통적으로 들어갈 css를 적용시켜주었다.
문제는 google-fonts였다. google-fonts는 계속 적용이 안 된 상태로 렌더링 됐다가 0.5~1초쯤 뒤에 적용되었다. 그래서 이것저것 찾아보고 해보고 난리였다. 로도 해보고 @import 로도 해보고 막 별의 별것을 해도 잘 안 되었다.. 그래서 멘토님한테도 물어보고 Webfontloader도 해보려고 하고 난리였는데 잘 안 되더라... 2시간은 해본 것 같다. 그러다가 css불러오는 것을 다른 것들 불러오는거보다 위에 둬라~ 그래야 우선 순위가 높아진다 ~ link가 @import 보다 더 빠르다 등등의 글들을 보고 _document.js의 맨위에 뒀는데 갑자기 되는 것??? 뭔가 너무 쉬웠던 것 같기도 한데 삽질해서 너무 아쉽고 시간 날린듯한 기분이였따...
(Next 부분에 자세히 쓸 예정이당 ㅎㅎㅎ)
2. spring boot와 next, react 프로젝트 연동
우리 팀은 프론트 팀과 백엔드 팀이 나뉘어져있는데 아직제대로 연동해보지 않아서 오늘 해보려고 했다. 그래서 처음에는 우리 모두의 로컬에 spring boot도 돌아가게 만들어서 각자 테스트하면서 해보려고 했는데 프론트팀도 모두 관련 extension들을 다운 받고 각자 mysql 설정하고 그러는게 너무 비효율적이라는 것을 깨달았다. 너무 늦게 깨달은 것... 그래서 extension 깔다가 다 지우고 Hello20Thon 상 받은걸로 구름IDE 프리미엄 써서 해보려고 쿠폰을 사용했다. 그런데 백엔드 팀 한명이 aws로 배포하면 되지 않느냐 배포 다해놧는데 그냥 그걸로 하자 해서 어..? 그래 하고 내 구름IDE 프리미엄은 4월 20일까지 방치되게 될거 같다.. 괜히 사용했다 ㅠㅠ
그래서 AWS로 배포 된 백엔드 서버에 rest api 통신을 하기로 하엿다.
Postman 사용하여 이렇게 저렇게 보냈는데 예전에 혼자 express 보내던 방식이랑 다르게 설정을 해놔서... 헷갈려서 고생 좀 했다. express로 api서버를 열었을 땐 그냥 x-www-form-urlencoded로 보내면 됐었는데 json 형식으로 받는다 해서 처음에 삽질 좀 하다가~ 형식도 내가 하던 방식이랑 달라서 고생했다.. ㅠ axios.post(url,data); 로 request를 보낼 때 기본이 body가 json으로 보내진다고 한다. 근데 예전에 postman으로 난 x-www-form-urlencoded로 보냈었는데? 알아서 잘 알아 먹는건가 신기했다.
그래도 오늘 회원가입까진 했다! 내일은 로그인이랑 포스트 정보 받아오는 것 등등등~~~ 더 많이 할 것
3. 프론트팀과 백엔드팀 변수명 불일치로 고민...
프론트팀은 camelCase로 거의 다 변수가 통일이 되어있다. React Component만 PascalCase로 되어있다.(css class는 -를 넣어서 하는게 맞을까...?) 백엔드 팀에서 주는 정보는 snake_case로 되어있었다. 그래서 request를 보내고 response를 받을 때 너무 불편했다. 그래서 우리가 변수명들을 좀 바꿀까 했는데 그러기엔 너무 규칙이 깨지는 것 같아서... 그냥 조금 불편하더라도 보낼 때 바꿔서 보내고 받을 때 바꿔서 받기로 결정했다..!
