리액트 썸네일형 리스트형 [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 프로젝트 시놀로지에 배포한 척 하기 -리액트 배포는 쉬웠는데... 일단 리액트 프로젝트를 공부한답시고 시놀로지에 배포를 해본 적은 있었기 때문에 비교적 어렵지 않았습니다. 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)} >.. 더보기 [Error] Line 1:50: Delete `␍` prettier/prettier 에러 프로젝트를 진행하던 중 기존에는 일반적인 React를 사용하고 JavaScript로 만들던 중 추후 관리와 네이티브를 사용하기 위해 다른팀원분의 도움으로 TypeScript로 바뀌게 되었다. 팀원분이 TS로 변경한 후 push를 하신걸 확인한 후 pull을 받고 yarn install 을 실행하자마자 아름다운 에러로그다 떨어진다... 문제의 해결 방법은 구글링을 통 해 알 수 있었다. 먼저 프로젝트 내에 .esLint 파일을 열어서 아래와 같이 설정을 추가해준다. "error", { "endOfLine": "auto" } 해당 설정값을 추가해준 후 프로젝트를 재실행하면 오류가 해결된다. https://velog.io/@realsong/VS-Delete-prettierprettier-%ED%95%B4%EA.. 더보기 이전 1 2 3 다음
