Next.js + styled component + Kakao 지도 api = 공부가 더 필요하다

 

결론: 처음부터 다시하자, 저 조합이 아닌 다른 조합으로

 

개요

제주도 여행을 계획하고 있다

 

단, 정해진 시간에 많은 걸 하고싶으니까 최대한 효율적으로, 시간을 알뜰살뜰 써야한다

 

그래서 생각해낸 토이프로젝트, 제주도 여행 계획짜기 웹이다

 

 

발단

일석이조, 누이좋고 매부좋고,  제주도 계획도 짜고 프레임워크도 미리 적응할겸

 

next.js + styled component 조합으로 제주도 여행을 짜고자 했다

 

 

전개

참고로 말하자면, 난 MBTI의 'P', 게으르진 않지만 많은 것들을 직관에 맞기는 편이다

 

왜냐, 큰 것들은 어찌어찌 계획짜고 실행하긴 하지만

 

작은 것들은 계획한답시고 미뤄지는 경우가 많기 때문이다

 

제주도 여행 웹도 그저 Next.js, styled component 사용해야하지라고만 생각했지, 그 이상을 생각하지 않았다

 

위기

오마이갓, next.js와 styled component를 함께 쓰는 데에는 문제가 있었다

 

next.js에서 styled component를 사용하게 되면 CSS가 적용되지 않고 먼저 렌더링되는 현상이 발생하였다

 

그래서 바벨을 사용하여야 SSR시에 styled가 헤더에 주입된다.

 

추가해주지 않으면 CSS가 적용되지 않고 먼저 렌더링되는 현상이 발생한다.

 

절정

나와 같은 고민을 한 사람들이 많았나보다

 

인터넷에 조금만 검색해보아도 관련 글이 많이 나온다

 

하지만 이게 웬걸 지도가 안나온다

 

저 네모가 지도의 테두리를 뜻하는데, 축척만 표시되고 아무것도 되지 않는다

 

그래서 배경을 지워보니...

 

마크만 나온다

 

결말

next.js를 쓰지 않던, styled component를 쓰지 않던, next.js를 공부해서 둘다 쓰던 뭐라도 해야 쓰겠다