겨리의 개발일기

최근 개인 프로젝트에 구글 애널리틱스를 적용한 내용을 정리해보려고 한다. 😎 😎 구글 애널리틱스(google analytics) 구글 마켓팅 플랫폼 브랜드 내의 플랫폼으로 웹사이트 트래픽을 추적하고 보고하는 웹 애널리틱스 서비스 웹 애널리틱스(web analytics) 웹 사용률을 이용하고 최적화하기 위해 웹 데이터를 측정, 수집하고 분석하여 보고 하는 것 웹 트래픽을 측정하는 과정일뿐 아니라 비즈니스와 시장 연구의 도구로서 사용이 가능하다. 웹사이트 효율성을 측정하고 개선 할 수 있다. 나는 개인 프로젝트로 진행했던 나와 맞는 고양이 찾기(심리테스트) 사이트의 사용률을 측정해보고 싶어서 시도해보았다. 💫 프로젝트 바로가기 : https://find-my-cat.netlify.app/ ✔️ 참고 2023..

Programming/React 2024. 1. 17. 18:38

vite를 사용해서 React + TS 프로젝트 환경을 세팅하던 중 ESLint 오류가 발생했다. 🧨 에러 .eslintrc.cjs와 vite.config.ts 파일에서 ESLint 오류가 발생하고 있다. 😬😬 에러 내용 // eslintrc.cjs Parsing error: ESLint was configured to run on /.eslintrc.cjs using parserOptions.project: /tsconfig.json However, that TSConfig does not include this file. Either: - Change ESLint's list of included files to not include this file - Change that TSConfig to i..

Programming/기타 2024. 1. 12. 18:36

최근 react-hook-form과 MUI를 함께 사용했던 경험이 있었는데 이에 관한 내용을 정리해보려한다. 왜 raect-hook-form을 사용할까? 🤔 리액트를 사용해서 폼을 다룰 땐 유효성 검사를 위해 제어 컴포넌트를 사용하는 경우가 많다. 즉, 사용자가 입력하는 값들을 모두 state로 관리하고 업데이트 한다. 하지만 이와 관련하여 몇 가지 문제점이 있다! 제어 컴포넌트를 사용할 때 문제점 1. 렌더링 이슈 react에서 컴포넌트 리렌더링이 발생하는 조건 중 하나는 state의 값이 변했을 때이다. 모든 값이 state로 연결 되어 있기 때문에 하나의 값이 변하더라도 많은 리렌더링이 발생하게 된다. 2. 코드의 가독성 리액트에서는 제어 컴포넌트로 폼을 다루게 된다. 이를 위해 각 요소마다 sta..

Programming/React 2023. 12. 14. 17:30

며칠 전 개인 프로젝트 배포를 위해 Netlify를 사용했는데 이와 관련된 내용을 정리해보고자 한다! ✔ Netlify 선택 이유 내가 진행한 프로젝트는 정적인 웹 사이트이기 때문에 Netlify를 사용하여 배포를 하는 게 적당하다고 판단했다. ✔ 시작하기 로그인 후 Sites 쪽을 보면 이런 화면이 보일 것이다. ✅ 여기서 Import an existing project를 클릭 ✅ Github에 올린 프로젝트를 배포할 것이니 Deploy with Github 클릭 ✅ 프로젝트 목록 중 배포할 프로젝트를 클릭한다. ✅ 빌드 관련 세팅하기 그럼 설정 페이지가 나오는데 여기서는 빌드를 위한 기본적인 설정을 해주면된다. 1) Branch to deploy 배포할 브랜치를 선택할 수 있다. 2) Build co..

Programming/기타 2023. 10. 10. 00:59

👾 문제 개인 프로젝트 개발 중 콘솔창에 에러가 찍히는 걸 발견했다. Warning: Each child in a list should have a unique"key"prop 라는 에러 ! 오잉 난 key에 값을 지정해줬는데..?!?! 🤔🤔🤔 뭘까 하고 찾아보니 금방 원인을 찾을 수 있었다. 일단 코드를 보자! 코드를 보면 map 함수 바로 아래에 Fragment( ) 로 묶어줬는데 이 부분에 key를 지정해주지 않아서 에러가 발생한 거였다! 어찌보면 당연한 것...상단에 Fragment로 묶어줬으니 그 부분이 반복적으로 생길 거니까 key 지정은 그 부분에 해줬어야함 😵‍💫 🧐 참고 ✅ key에 index를 지정해주는 건 웬만하면 지양하는 것이 좋다. ✅ 리액트 공식문서에서도 유니크한 값을 지정하는 ..

Programming/React 2023. 8. 30. 00:59

React와 TypeScript 기반의 프로젝트에 Tailwind CSS 를 설치하는 과정에서 에러를 발견했다. 나중에 비슷한 일이 생기면 참고하기위해 기록해둔다. 일단 Tailwind CSS 설치하는 방법부터 시작! Tailwind CSS 설치하기 ✅ 터미널을 열어 설치 명령어를 입력해준다. npm install -D tailwindcss ✅ 설치가 완료되면 init 명령어를 입력한다. → tailwind.config.js 파일을 생성하기 위함 npx tailwindcss init tailwind.config.js 파일이 생겨서 확인해보니... 에러가 났다! 'module' is not defined' 검색을 해보니 ESlint 설정시 env 쪽에 node를 설정해주지 않아서 나타나는 현상이라고 한다...

Programming/기타 2023. 7. 14. 15:43

유투브 소플님의 강의를 보고 미니블로그 만들기를 진행한 내용을 정리해봤다. 구현할 기능 ✅ 글 목록 보기 ✅ 글 보기 ✅ 댓글 보기 ✅ 글 작성하기(일단 화면만 개발) ✅ 댓글 작성하기(일단 화면만 개발) 프로젝트 생성하기 ✅ npx create-react-app 명령어 사용 패키지 설치하기 ✅ react-router-dom v6와 styled-components v5를 사용할 예정 npm install --save react-router-dom styled-components --save : 지금 설치하는 패키지들을 package.json파일이 관리하는 의존성 목록에 저장하겠다는 의미이다. 설치 후 package.json 확인 설치가 완료되면 package.json의 dependencies 쪽에서 확인..

Programming/React 2023. 6. 5. 16:48

기존 React + JavaScript 를 사용하여 개발하던 프로젝트를 TypeScript로 변경하는 과정에서 에러가 발생했다. .js 파일을 .tsx 파일로 변경하고 타입을 잡아줬는데도 에러가 잡히지 않았다. 에러 사진 에러 내용 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. 대강 'React'는 UMD 전역을 뜻하지만 현재 파일은 모듈이니 가져오기를 추가하는 것이 낫다 라는 뜻이다. 해결 방법 🔨 첫 번째 방법 가장 간단한 해결 방법은 각 파일에 React를 import 하는 코드를 추가해주는 것! import React from 'react' 하지만 이 방법은 각 파..

Programming/TypeScript 2023. 5. 26. 15:29