web/Frontend11 [React] NextJS 에 GA 추가하기 Google Analytics 를 추가하기 위해 NextJS에서 간단하게 작업을 하였다. 일단 추가한 파일 구조는 이렇다src/├── components/│ └── analytics/│ └── page-view-tracker.tsx ← GA 스크립트├── app/│ └── layout.tsx ← 여기에 PageViewTracker 추가됨├── lib/│ └── analytics.ts ← 추적 함수들└── types/ └── analytics.ts ← 이벤트 파라미터 타입 정의 PageViewTracker- 모든 페이지 변경을 자동으로 감지 - GA에 페이지 뷰 이벤트 자동 전송 - 사용자가 페이지를 이동할 때마다 자동 추적 layout.tsx 에 아래와같이 추가해준다... 2025. 7. 23. [React] NextJS 로 프로젝트 생성하기(1) 회사에서 프로토 타입으로 어드민 페이지를 생성해야 할 일이 생겨 해보는겸~ 정리도 같이 한다! 1. 일단 npx로 nextJS 프로젝트를 세팅하자npx create-next-app@latest {프로젝트명} --typescript 2. 옵션들을 설정해주자 Would you like to use ESLint? … Yes ESLint 사용 여부이다. ESLint는 Lint 도구인데 코딩컨벤션을 설정하고 이에 어긋나게 코딩을 하면 피드백을 해준다. 나도 모르게 안티패턴으로 작성하는 상황을 피하고자 ESLint를 사용하는 옵션을 선택했다. 시도 때도 없이 빨간 밑줄이 나타나는 것이 싫다면 No를 선택해도 상관없다. Would you like to use Tailwind CSS? … Yes Tailwind C.. 2025. 6. 4. [React] VS Code를 사용하여 세팅하기 원래 나는 jsp... jquery 시절 자바스크립트로 프론트엔드(?) 개발을 했었다... (아주 구석기시대ㅋㅋ)그러다 Frontent Framework가 급부상 하면서 예전 프로젝트에서 Vue를 한번 찍먹(?)으로 맛보게 되었고,지금 회사에선 React로 개발해보고자 하는 니즈가 있어 정리해본다. 2개 차이가 궁금하다면 아래글 참조https://ssmyefrin.tistory.com/96 React VS Vue요즘(?)에도 인지 모르겠지만 프론트엔드 개발의 양대 산맥 React 와 Vue!!! 일단 나는 Vue만 써본사람으로써 React는 어떨때 써야 더 매력적인지 알아보다 정리하게 된다. Vue와 React의 가장 큰 차이는ssmyefrin.tistory.com ✔ 우선작업NodeJS 설치가 필수.. 2025. 4. 23. React VS Vue 뭘 써야 할까 요즘(?)에도 인지 모르겠지만 프론트엔드 개발의 양대 산맥 React 와 Vue!!! 일단 나는 Vue만 써본사람으로써 React는 어떨때 써야 더 매력적인지 알아보다 정리하게 된다. Vue와 React의 가장 큰 차이는 Vue는 "프레임워크",React는 "라이브러리" 라는 점이다. 그말은 즉슨, 리액트는 자유도가 높고 뷰는 기능이 정해져있어 따라야 한다는 의미다. React는 자바스크립트 문법을 쓰고 싶은대로 사용이 가능하지만 Vue는 제공해주는 문법에 한해서만 구현이 가능하다. 둘 다 컴포넌트 기반의 아키텍처이며 빠르고 가볍다. ⚛️ Vue (프레임워크)"여기서부터 여기까지 이렇게 짜세요~" 하고 틀이 다 정해져 있음템플릿 문법 (HTML에 가깝게), 디자이너 출신도 배우기 쉬움양방향 바인딩 (v.. 2025. 4. 23. 이전 1 2 3 다음