리액트15 [재활용 프로젝트][리액트] 카카오 api 분류별 마커 표시 컴포넌트화 목차 저번 맵 불러오는 것에 이어서 마커들을 버튼을 누를때 마다 종류별로 보이게끔 해보았다.그 과정에서 리액트로 컴포넌트화하고 리팩토링한 것을 정리해 보려고 한다.타입을 지정해주는 과정에서 많은 것을 배운 것 같다. 완성 모습완성되어 버튼을 누를때 마다 바뀌는 모습이다.. data.ts 마커들을 종류별로 저장하기 위해 만든 파일이다.import { Position, MarkerProps } from './Marker';// 인터페이스를 임포트 받아 상속을 통해 확장한 모습이다.export interface DataMarkerProps extends MarkerProps { name: string;}// 이름, 위치, origin을 속성으로 가진다.const markers: DataMarkerProps[.. 2024. 4. 3. [재활용 프로젝트][리액트] 카카오 api Typescript 맵 구현 목차 카카오 api를 통해 리액트로 맵을 구현해 보았다. usegeolocation을 이용해 내 위치를 띄우는 코드 import useGeolocation from 'utils/useGeolocation'; import { Map, MapMarker } from 'react-kakao-maps-sdk'; const { kakao } = window; export default function KaKaoMap() { const location = useGeolocation(); //불러온 내 위치 return ( ); } useGeolocation 페이지 import { useState, useEffect } from 'react'; interface locationType { loaded: boolean.. 2024. 4. 1. [프로젝트] 유튜브 클론 프로젝트 목차 리액트를 공부하면서 리액트 공식문서로만 공부해서는 절대 안되겠다는 것을 직감했고 css에 대해 설렁 설렁 넘어간 것 같아 유튜브 클론 코딩을 진행해 보았다. 코드 구현 방향 css방식: Styled-component typescipt도 겸사겸사 공부하고자 tsx로 만들어 주었다. 다음은 css 배운점들이다.. z-index const Styledfunc = styled.div` z-index: 2; width: 358px; height: 34px; border-radius: 10px; position: relative; display: flex; text-align: center; top: 195px; left: 50%; background-color: #ffffff; border: 1px soli.. 2024. 3. 21. 이전 1 2 3 4 다음 728x90
