React 썸네일형 리스트형 [React] 카카오맵 API 커스텀 해보기-2 1편 글은 여기로!https://kkt102.tistory.com/119 [React] 카카오맵 API 커스텀 해보기-1따로 사이드 프로젝트와 회사 프로젝트를 진행하다보니 생각보다 카카오맵을 많이 사용하게되서 혹시라도 저와 비슷한 고민을 하는분들이 있지 않을까 싶어 작성하게 됬습니다. 절대로 100% 정kkt102.tistory.com 저번 1편에 지도출력, 현재위치 랜더링, 마커, 마커변경에서 이어지는 글 입니다.1. 마커는 표시됬고 현재위치 마커에서 특정 반경을 표시해주고싶은데...?이번에는 마커 중심으로 도형을 그려보겠습니다!저는 해당 기능을 마커 중심에서 특정 반경을 표시할 때 사용해봤습니다. 사실 얼마나 정확한지는 모르겠지만...가장 기본적인 원형을 띄우는 코드입니다.const KakaoMap.. 더보기 [React] 카카오맵 API 커스텀 해보기-1 따로 사이드 프로젝트와 회사 프로젝트를 진행하다보니 생각보다 카카오맵을 많이 사용하게되서혹시라도 저와 비슷한 고민을 하는분들이 있지 않을까 싶어 작성하게 됬습니다. 절대로 100% 정확한 답이 아니지만 그래도 도움이 되면 좋겠네요. 1. 그래서 카카오맵 API 를 React에서 어떻게 사용한다고??!! (또다시 반복!)https://kkt102.tistory.com/69네... 일단 JavaScript Key도 발급 받아야하고 사용 할 URL도 등록해주고... 기본 작업은 동일합니다.근데 카카오맵 API 가이드에는 스와이프처럼 다른 프레임워크 기준으로 가이드가 없다보니 저는 처음에 삽질아닌 삽질을 많이 했었습니다.나중에 와서 능력자 한분이 카카오맵 API를 React Module로 배포한 적이 있는 걸 .. 더보기 [React] TypeScript에서 Swiper 사용하기 // Import Swiper React components import { Swiper, SwiperSlide } from 'swiper/react'; // Import Swiper styles import 'swiper/css'; export default () => { return ( console.log('slide change')} onSwiper={(swiper) => console.log(swiper)} > Slide 1 Slide 2 Slide 3 Slide 4 ... ); }; Swiper에서 가장 기본적으로 사용되는 코드샘플이다. 다만 타입스크립트에선 해당 코드를 그대로 사용하면 ERROR in src/components/HashTag/HashTag.tsx:14:18 TS7006: Pa.. 더보기 [React] axios POST API 이미지와 함께 보내기 - Components const handleArticlePost = async () => { // input을 통해 이미지 등록하기 const productImages = document.querySelector('#image_file'); // 이미지가 여러개일 경우 for (let i = 0; i < productImages.files.length; i++) { formData.append('productImages', productImages.files[i]); } // 이미지파일이 아닌 일반 string 파일 추가하기 const json = JSON.stringify({ productName: title, placeName: coord.place_name, latitude: coord.lat, .. 더보기 [Next.js] Next.js 13에서 pages 디렉터리 사용 시 url 값 변경해주기 {/* url에 query값만 숨겨주기 */} 링크 next/link 의 기능 중 하나닌 as 를 사용하면 사용자에게 url을 보여주는 곳 에서 state 값을 숨긴 채 노출시켜줍니다. {/* 잘못된 경우 */} 링크 하지만 위의 방법처럼 사용하면 요청하는 경로가 href의 pathname을 보는 게 아닌 as 의 경로를 바라보게 됩니다. 왜 그런건지... 아직도 공부가 부족하네요... {/* next.config.js */} /** @type {import('next').NextConfig} */ const nextConfig = { async rewrites() { return [ { source: '/:path*', destination: '/pages/:path*', }, ]; }, }; modu.. 더보기 [Next.js] Next 프로젝트 시놀로지에 배포한 척 하기 -리액트 배포는 쉬웠는데... 일단 리액트 프로젝트를 공부한답시고 시놀로지에 배포를 해본 적은 있었기 때문에 비교적 어렵지 않았습니다. React 프로젝트를 시놀로지에 배포하는 방법은 먼저 React 프로젝트를 build 하여 말아주고 시놀로지의 Docker 를 사용하여 컨테이너를 하나 만들어줍니다. 도커 생성 시 마운트 경로를 위의 사진과 같이 /home/node/app 으로 설정해 줍니다. 이 때 port 번호는 사용 할 포트번호를 입력해주고 그리고 해당 디렉토리에 위와같이 node_modules을 설정해주고 index.js 파일을 설정해주고... 같은 위치에 React build 디렉토리를 넣어준 후 Docker를 실행하면 프로젝트 배포가 됩니다. 도커를 사용하니 따로 ssh를 사용하여 nohup을.. 더보기 [Next.js] error, 404 페이지 만들기 - 컴포넌트 파일의 위치 src └ pages 404.jsx _error.jsx - 각 컴포넌트들의 위치는 위와같이 src 아래 pages 위치에 만들어준다. - Next.js 에서 Error 페이지 만들기 // _error.jsx const Error = () => { return( 에러페이지 접속 시 메시지 입력 ) } export default Error; - 위와같이 _error.jsx 컴포넌트를 만들어 준 후 코드를 작성해주면 Error 시 자동으로 Error페이지로 이동된다. - Next.js 에서 404 페이지 만들기 // 404.jsx const NotFound = () => { return( NotFound 페이지 접속 시 보여질 메시지 입력 ) } export default NotFou.. 더보기 [React]map 함수로 만든 메뉴에 개별 이벤트 걸기 - map으로 메뉴를 만들고 개별로 아코디언 메뉴 만들때 이벤트 걸어주기 import { useState } from "react"; const MenuArray = [ { title:"메뉴1" }, { title:"메뉴2" }, { title:"메뉴3" }, { title:"메뉴4" }, ]; const Test = () => { const [activeIndex, setActiveIndex] = useState(-1); const handleToggleMenu = (index) => { setActiveIndex(index === activeIndex ? -1 : index); }; return( {MenuArray.map((item, index) => handleToggleMenu(index)} >.. 더보기 이전 1 2 3 다음
