KBW's cosmos

GA를 붙이는 여러 라이브러리들이 있다. 하지만 유럽권에서 개인정보를 활용한 마케팅에 규제를 가하고 있는 이유로 구글 새로운 방식의 마케팅 지원을 할 수 있게 변화를 주고 있다. 이런 변화에 대응할 수 있도록 라이브러리 없이 Vercel에서 제공하는 가이드 라인에 따라 조금은 투박하게 직접 붙여보기로 했다. _app.js 파일에 GA 측정 ID 추가 보통 태그나 태그 안에 들어갈 내용을 커스텀하기 위해 _document.js 파일을 이용한다. 하지만 아래 예제에 따르면 Next 11 버전에서 추가된 next/script를 이용해 _app.js에서 구현하기를 권고하고 있다. GitHub - vercel/next.js: The React Framework The React Framework. Contribu..

Create NextApp with Typescript npx create-next-app@latest --ts # or yarn create next-app --typescript 프로젝트가 만들어지고 폴더가 생기면 해당 프로젝트 폴더로 이동 Install TailwindCSS npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p Configure template paths /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ]..

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React 🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub. github.com Zustand의 Persist라는 middleware를 사용하면 localStorage와 연동하여 자동으로 전역 상태 관리 내용을 localStorage에 저장시키고 관리할 수 있다. (위 링크 참고) localStorage는 브라우저를 닫아도 그대로 남아있기에 창을 닫아도 상태 값이 남아있어야 하는 경우 유용하게 사용할 수 있다. 필..

npx eslint --init 터미널을 키고 위 명령어를 입력하여 .eslintrc.js 파일 만들기 위와 같이 질문에 체크하면 된다. 중간에 Which style guide do you want to follow?에는 에어비엔비 스타일로 해도되고 취향것 하면 된다. 그럼 추가로 dependencies가 필요하다고 하는데 설치하면된다. 필자는 npm으로 설치했다. .eslintrc.js module.exports = { env: { browser: true, es2021: true }, extends: [ 'plugin:react/recommended', 'standard' ], parser: '@typescript-eslint/parser', parserOptions: { ecmaFeatures: {..