next.js

추가하고자 하는 기능전환 추적 코드 삽입전환 추적 코드란? https://www.daangn.com/wv/faqs/10916 에러 상황웹 사이트에 전환 추적 코드의 웹 스크립트를 삽입하려 하니 다음과 같은 에러가 발생했다.  오류 원인Next.js에서는 최고의 퍼포먼스를 위해 태그 대신 next/head의 태그 사용하라고 한다.해당 태그는 1. 렌더링을 차단하는 리소스를 피하고2. 브라우저 기능을 활용하며3. 스크립트가 효율적으로 로드되도록 보장한다.이를 따르지 않으면 로딩 시강니 느려지고 프레임워크의 성능 이점이 사라질 수 있기 때문.그냥 를 사용하게 되면 소스를 로드하는 동안 HTML파싱이 중지되기 때문에 사용자 경험이 저하된다.  오류 해결 방법next/script의 태그를 사용했다.또한 js파일을..

회사에서 Next.js로 새 프로젝트를 진행하게 되었다.아토믹 디자인(Atomic Design)을 적용하여 개발하게 되었는데 그에 따른 컬러, 사이즈 등 원자 단위의 요소들을 설정해야 했다.  Next.js에서 제공하는 스타일링 방식을 하나씩 따져보고 프로젝트에 무엇이 더 적합한지 정하고자 한다.  Styling 방식들Next.js에서는 아래 4가지 방식의 스타일링 방식을 제공한다.  CSS Modules(feat. scss)CSS모듈은 말 그대로 CSS를 모듈화해서 관리하는 방식이다.정의한 CSS클래스마다 자동으로 고유한 class name을 생성해서 해당 class를 로컬 스코프로 제한함으로서 중복 naming 충돌을 방지해준다. 따라서 모듈 간에 동일한 class name으로 중복될 걱정이 없고, ..