프로젝트/재활용프로젝트8 [재활용 프로젝트][리액트] 카카오 api 카테고리 마커 세부화 목차 저번 카테고리별 마커에 적절한 이미지를 넣고 더 컴포넌트를 세부화 시켜 작성해 보았다. 완성 모습 컴포넌트의 세분화아래 코드를 보면 크게 컴포넌트를 카테고리, 사이드바, 프로필, 메뉴 4개로 만들었다.import { ReactElement } from 'react';import styles from './KakaoHeader.module.scss';import SideBar from '../sidebar/SideBar';import HeaderCategory from './HeaderCategory';import HeaderProfileMenu from './HeaderProfileMenu';// 카테고리 헤더function KakaoHeader(): ReactElement { // console.. 2024. 5. 13. [재활용프로젝트][리액트] main화면 구성하기 목차 초기 구상의 모습 참고https://kimjy97.github.io/Portfolio/ JongYeon's PORTFOLIO안녕하세요. 프론트엔드 개발자 김종연의 포트폴리오 사이트입니다. 찾아주셔서 감사합니다.kimjy97.github.io 대충 구성한 초안 모습 사용한 라이브러리(framer motion)https://www.framer.com/motion/ Documentation | Framer for DevelopersAn open source, production-ready motion library for React on the web.www.framer.com 애니메이션 느낌의 css로 만들 수 있는 쉽고 간편한 라이브러리이다. 구성 방향정말 간단하다 직관적으로 보이는 것들을 컴포넌트화.. 2024. 5. 8. [프로젝트][리액트] 사이드 바 구현하기 목차 사이드 바를 만든 것을 정리하고자 한다.완성된 초기 모습 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 분류별 마커 표시 컴포넌트화 목차 저번 맵 불러오는 것에 이어서 마커들을 버튼을 누를때 마다 종류별로 보이게끔 해보았다.그 과정에서 리액트로 컴포넌트화하고 리팩토링한 것을 정리해 보려고 한다.타입을 지정해주는 과정에서 많은 것을 배운 것 같다. 완성 모습완성되어 버튼을 누를때 마다 바뀌는 모습이다.. data.ts 마커들을 종류별로 저장하기 위해 만든 파일이다.import { Position, MarkerProps } from './Marker';// 인터페이스를 임포트 받아 상속을 통해 확장한 모습이다.export interface DataMarkerProps extends MarkerProps { name: string;}// 이름, 위치, origin을 속성으로 가진다.const markers: DataMarkerProps[.. 2024. 4. 3. 이전 1 2 다음 728x90
