Programming/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, .. 더보기 [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)} >.. 더보기 [React] map 함수안에 array 배열 뿌리기 Item.map((list) => ( {list.name} ) - 위와같은 map안에다 Array 배열을 추가로 뿌리고 싶어졌습니다... Item.map((list) => ( {list.name} {Array.from(Array(list.bodys), x => )} ) - map 으로 뿌려지는 배열 안에 BsStarFill 이란 객체를 뿌리는데 개당 객체를 list.body 의 갯수만큼 뿌려준다!!! 더보기 [React] React Project에서 간단한 탭 메뉴 만들기 import { useState } from "react"; const TabMenu = () => { const [menuNum, setMenuNum] = useState(1); const tabMenuToggle = (e) => { setMenuNum(e); } return( tabMenuToggle(1)}>Menu_1 tabMenuToggle(2)}>Menu_2 tabMenuToggle(3)}>Menu_3 tabMenuToggle(4)}>Menu_4 {menuNum === 1 ? Menu Contents1 : (menuNum === 2 ? Menu Contents2 : (menuNum === 3 ? Menu Contents3 : Menu Contents4) ) } ) } export default .. 더보기 [React]React 기초 - inline style 작성하기 React에 인라인 스타일링하기_1 첫번째 방법으로 객체형태로 스타일을 작성합니다. 단 주의할 점은 스타일 작성 중 - 이 들어가는 css style 의 경우 카멜 표기법을 활용하여 작성해야 합니다. import React from 'react'; const Test = () => { const name = '리액트'; const style = { width: 100, // px이나 rem 같이 단위를 붙여주지 않으면 자동으로 px로 인식된다. height: 5 + 'rem', // px 이외의 다른 단위를 사용하는 방식 color: 'red', // 일반적인 color 이름을 지정하는 방식 backgroundColor: '#efefef', // HEX 코드로 작성하는 방식 border: 10, // b.. 더보기 이전 1 2 다음
