리액트15 [프로젝트][리액트] 사이드 바 구현하기 목차 사이드 바를 만든 것을 정리하고자 한다.완성된 초기 모습 KaKaoMapOpenSide.tsximport React, { useState, useRef, useCallback } from 'react';import styles from './KaKaoMapOpenSide.module.scss';function KaKaoMapOpenSide() { const [isOpen, setMenu] = useState(false); // 메뉴의 초기값을 false로 설정 const toggleMenu = useCallback(() => { //토글 버튼 함수 setMenu(!isOpen); // on,off 개념 boolean }, [isOpen]); return ( .. 2024. 5. 2. [재활용 프로젝트][리액트] 카카오맵 api 내 위치 기능 구현 목차 내 위치로 가는 버튼 컴포넌트 Myposition.tsx import { Map, MapMarker, useMap } from 'react-kakao-maps-sdk'; import { useMemo, useState } from 'react'; import { Position } from './Marker'; import styles from './Mypostion.module.scss'; // 내 위치로 가는 함수 function Myposition({ lat, lng }: Position) { const map = useMap(); const bounds = useMemo(() => { const newBounds = new kakao.maps.LatLngBounds(); newBounds.e.. 2024. 4. 11. [재활용 프로젝트][리액트] 카카오 api 맵 코드 리뷰하면서 배운 점 정리 목차 내가 코드 리뷰를 받고 수정하면서 배운 점을 적어 보고자 한다. 프로젝트를 하면서 많은 것을 배우는 것 같다.. 받은 요청 수정사항 수정 사항 만들기 전에는 브랜치를 새로 파자 git branch fix-version git add . git commit -m "수정사항 완성 버전" 수정 사항 브랜치를 안만들고 수정했다가 실행이 잘 안되서 애를 먹었다.. 아래 있는 깃 명령어로 되돌렸다 ㅠㅠ git restore . //커밋 전으로 모든 파일을 되돌림 .env.local .env.local -> git에 올리게 되면 api키, 비밀번호 등 개발을 하면서 보이면 안될 것들을 숨겨줌 쓰는 방법 //.env.local 파일 REACT_APP_KAKAO_MAP_KEY = afdfaewfaffaef1123 .. 2024. 4. 5. [재활용 프로젝트][리액트] 카카오 api map scss모듈 적용 목차 이번 프로젝트를 하면서 scss를 처음 써보게 되어서 scss로 map을 구성한 것을 정리해 보려고 한다. 완성된 모습 KaKaoMap.module.scss .category { display: flex; flex-direction: row; position: absolute; top: 10px; left: 10px; z-index: 1; } .mapWrap { position: relative; overflow: hidden; width: 100vw; height: 100vh; } html, body { width: 100vw; height: 100vh; margin: 0; padding: 0; } .category_button { // border-radius: 10px; width: 100px.. 2024. 4. 4. 이전 1 2 3 4 다음 728x90
