로그인 요청을 서버로 보내고 나서, 성공할 경우 user 정보를 관리하는 zustand store에 정보를 업데이트하기위해 zustand의 훅을 사용했다. 그런데 ESLint에서 아래와같은 오류가 떴다! ESLint: React Hook "useUserStore" is called in function "onSuccess" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".(react-hooks/ rules-of-hooks) 리액..
문제입력에따라 tailwind 스타일을 적용하기위해 요소의 className을 추가하거나 제거해야하는 상황이 있었는데 class를 조작한다고하니 이전에 바닐라JS로 했던 방법이 떠올라 classList.add, classList.remove등을 사용했다. 그러나 계속 add가 존재하지 않는다거나하는 오류발생했다.. 찾아보니 리액트에선 DOM 요소에 직접적으로 접근하는 것을 권장하지 않는다고 한다!! 사용자 입력에따라 렌더링할 내용, 조건 등을 state로 관리하듯이 JSX 문법을 활용해 조건에 해당하면 currentStep 클래스를 포함시키고 그렇지 않은 경우 포함시키지 않는 방식으로 변경해야한다!!! 기존 방법const handleStepSelection = (e, element) => { pr..
마커 표시한 개import { useEffect } from "react";const { kakao } = window;const App = () => { useEffect(() => { const container = document.getElementById("map"); const options = { center: new kakao.maps.LatLng(33.450701, 126.570667), level: 3, }; const map = new kakao.maps.Map(container, options); const markerPosition = new kakao.maps.LatLng(33.450701, 126.570667); const ma..
초기 설정1. 카카오 개발자사이트에 접속해 개발자 등록 및 앱 생성2. 앱 설정 - 플랫폼 - Web 플랫폼 등록으로 사이트 도메인 등록 (지도API를 사용할 도메인이 어디인지 등록! http://localhost:3000/ 으로 등록함3. 앱 설정 - 앱 키 - JavaScript 키 복사하여 .evn.local에 저장 -> 변수명 VITE_KAKAO_MAP_API_KEY (VITE_로 시작하면 상관없음!) 간단 테스트 - 지도 띄우기 (API 연결 확인)// index.htmlimport { useEffect } from "react";const { kakao } = window;const App = () => { useEffect(() => { const container = documen..