나만보는개발공부블로그

Tailwind css 채택 이유? 이전에는 styled-components 를 사용하여서 프론트엔드 스타일링을 처리했는데 이번 nextjs doc를 살펴보면서 css-in-js에서는 server component에 지원되지 않는다고 하여서 nextjs에서 뭔가 밀어주고 있는듯하고 자체적인 config도 지원해주는 tailwind css를 새로운 사이드 프로젝트에 채택하기로 하였다. redit에서도 tailwind css를 사용해서 빠른 스타일링 개발을 할 수 있다고 개발자들이 이야기 하고 있다. https://www.reddit.com/r/nextjs/comments/14qhjmq/next_css_module_vs_tailwind/ From the nextjs community on Reddit Exp..

create-next-app Nextjs를 구성할 때 앱을 구성하기 위한 기초 설정들(eslint, alias, tailswind css, typescript)를 편하게 설정해서 nextjs 앱을 만들어주는 CLI라고 할 수 있다. npx create-next-app@latest or yarn create next-app 대화형 설치 방식 위의 명령어를 실행하게 되면 아래와 같이 여러 기초 설정들을 설정할지에 대한 정보들을 알려준다. 그래서 더 간편하게 앱을 구성할 수 있다고 할 수 있다. What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Woul..

내가 만든 사이트의 사용자들이 겪는 불편함 및 사이트 성능 이슈들을 확인하고 싶은데 여러가지 방법을 찾아봤다. 첫번째로는 Nextjs performance 관련 공식 document에는 reportWebVitals 의 함수가 존재한다. 이 함수에서 metric 데이터들을 받아올 수 있는데 이 값을 통해서 통계를 만들어 낼 수 있다. export function reportWebVitals(metric) { console.log(metric) } 내가 생각한 간단한 방법은 Google Analytics를 통해서 데이터를 전송해주는 방법이였는데 이 방법으로 진행할 경우 event 타입으로 받아오는 value들을 GA 통계화면에서 한번에 보기 힘들어서 어려움을 겪었다. GA 태그로 전송하는 방법은 다음 코드와..