전진하는 개발러

'뭐 이런 걸 다 적냐?'는 의문이 들 정도로 하찮고 엉뚱한 실수일지라도 일단 적고, 혹시 있을지도 모르는 저 같은 사람 한 명에게도 도움이 되기를 바라며 적는 글입니다. 문제상황 tailwind가 설치되지 않은 상태에서 공식문서에 적힌 아래 스텝대로 다 따라했는데도, tailwind 적용이 안 돼서 당황스러웠다. 왜 안 되지? 1. package.json의 Dependencies에 tailwindcss가 적힌 것도 확인했고, 2. tailwind.config.js에 내 프로젝트 구조의 경로대로 Content에 입력된 것도 확인했다. 3. css에 아래 문구가 적힌 것도 확인했다, 비교해보자! 이에 처음에 Nextjs를 설치할 당시에 tailwind를 함께 설치한 경우와 비교해서 어떤 코드가 적혀있지 않..

API key를 사용하다보면, API를 활용하기 위해 fetch를 요청하면 그 결과값으로 Request URL을 받아오는데, 이 request URL 에 우리가 사용한 api KEY가 전부 드러나 있는 경우가 있다. 이게 왜 문제가 되냐면,❓ api key가 공개되어있을 때, 해당 Key를 통해 접근하지 말아야하는 정보에 누구나 쉽게 접근하여 정보 유출 등의 문제가 일어날 수 있기 때문이다. 이러한 문제를 방지하기 위해 nextJS에서는 Rewrites() 라는 훅을 이용하여 api key를 url에 드러나지 않도록 만들기도 한다! 🍎Rewrites() 브라우저 주소창에 어떠한 segment를 입력하면, 내가 설정한 다른 주소로 라우팅되도록 만들 수 있음 이러한 라우팅 변경 과정은 서버에서 발생하기 떄문..

NextJS 공식문서에 따르면, NextJs는 랜더링 시 static generation과 server-side rendering이 두 가지 특성을 선택해서, 부분적으로 쓸 수 있다고 나온다. 이 개념이 뭔지 간단하게 알아보자. 🍎server-side rendering ▶️이름으로 뜻 유추하기 - server(서버)-side(측면의) rendering(렌더링) ⇒ 서버에서 동적으로 페이지를 랜더링하는 것. ✅동적으로 생성한다는 건, 클라이언트 요청 시마다 완전한 html 전체를 새로 Rendering 된다는 것. ✅장점 : 동적인 Rendering을 통해 사용자에게 최신 데이터,동적인데이터를 바로바로 제공해줄 수 있다! ⏸️단점 : client side rendering보다 평균적으로 ui페이지 랜더링 ..