프로젝트25 [일렉트론][리액트] 프로젝트 구축하기 목차 일렉트론의 정의일렉트론은 javascript만으로도 여러 플랫폼에서 동작할 수 있는 데스크톱 어플리케이션을 만들 수 있게 해 주는프레임워크이다. 핵심은 기존에 react로 개발하던 소스 코드를 그대로 사용해도, 일렉트론으로 빌드하여 데스크톱 앱으로 만들어낼 수 있다는 의미이다. 그대로 따라하면 오류가 안날 것이다..ㅠㅠㅠㅠㅠ CRA로 초기 프로젝트 세팅$ npx create-react-app electron-app --template typescript electron 설치yarn add electron-is-devyarn add electron electron-builder concurrently cross-env wait-on --dev Node.js 기반 메인 프로세스 파일(사실 main... 2024. 5. 2. [프로젝트][리액트] 사이드 바 구현하기 목차 사이드 바를 만든 것을 정리하고자 한다.완성된 초기 모습 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. 이전 1 2 3 4 5 6 7 다음 728x90
