API4 NodeJs params 와 query 개념 및 api간단하게 구현 해보기 목차 get을 이용한 params 방식const express = require("express");const app = express();const cors = require("cors");app.use(cors());const port = 3000;app.get("/user/:id", (req, res) =>{ const q = req.params; console.log(q.id);})app.listen(port, ()=>{ console.log(`listening port${port}`)}); //로컬 호스트 3000번을 듣고 있다 get을 이용한 query 방식 const express = require("express");const app = express();const cor.. 2024. 5. 6. [재활용 프로젝트][리액트] 카카오맵 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 분류별 마커 표시 컴포넌트화 목차 저번 맵 불러오는 것에 이어서 마커들을 버튼을 누를때 마다 종류별로 보이게끔 해보았다.그 과정에서 리액트로 컴포넌트화하고 리팩토링한 것을 정리해 보려고 한다.타입을 지정해주는 과정에서 많은 것을 배운 것 같다. 완성 모습완성되어 버튼을 누를때 마다 바뀌는 모습이다.. data.ts 마커들을 종류별로 저장하기 위해 만든 파일이다.import { Position, MarkerProps } from './Marker';// 인터페이스를 임포트 받아 상속을 통해 확장한 모습이다.export interface DataMarkerProps extends MarkerProps { name: string;}// 이름, 위치, origin을 속성으로 가진다.const markers: DataMarkerProps[.. 2024. 4. 3. 이전 1 다음 728x90
