TIL/2022 TIL86 리액트에서 지도 @react-google-maps/api 라이브러리 사용하여 (TypeScript + Next 환경) 오랜만에 적어보는 TIL ...🧘🏻♀️ 구글 api key 설정하는 글들은 많으니 생략하겠습니다. 맨처음에는 리액트 환경에서 구글 map 자바스크립트 api 튜토리얼을 보고, 어떻게 해서든 구현하고 싶었다. 하지만, 내가 구현해야되는 기능은 n초마다 나의 위치 정보를 서버에 갱신해주고 내 주위 3km 반경에 있는 사람들의 좌표를 구글 맵에서 마커로 찍어주는 것이었다. 라이브러리를 깔지 않고 ,, 시도한 결과 n초마다 내 위치를 갱신할때마다 나의 위치를 찍어주는 마커가 계속 생성되는 것이었다..ㅠㅠ ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ일요일 하루종일 고민하며 코드를 써내려갔지만, ㅠㅠ 나의 위치 정보를 제대로 반영하면, 지도가 깜빡거리는 문제가 발생했다 ㅎ.. 결국 자바스크립트 튜토리얼로는 해결할 수 없겠다.. 2022. 12. 28. Svelte -라우터 설정하기 우선 스벨트 프로젝트를 생성했으면 라우터도 깔아줍니다.! 터미널에 아래의 명령어를 입력하여 깔기 !! npm install --save svelte-spa-router app.svelte에 routing임포트해주기!! 그리고 src에 routes라는 폴더를 생성합니다 ~! src > routes > Home.svelte 홈 src > routes > Write.svelte 글쓰기 src > routes > index.ts import Home from "./Home.svelte"; import Write from "./Write.svelte"; export default { "/": Home, "/write": Write, }; src > Header.svelte Home Write 스벨트로 라우터하기 .. 2022. 10. 10. Svelte - Typescript Setup (타입스크립트로 프로젝트 생성) npx degit sveltejs/template [프로젝트명] cd [프로젝트명] npm install 프젝에 타입스크립트 사용하기! node scripts/setupTypeScript.js npm install --dev @tsconfig/svelte npm run dev 로 프로젝트 시작 2022. 10. 10. datepicker style 커스텀 + 토요일 일요일 색 바꾸기 굉장히 못난이었던..데이트피커 달력을 커스텀하여 바꿔봤다.ㅠㅠ 정말 하루 종일... 검색하고 찾아본 결과 완성했다.. 비록 디자인과 약간 다르지만,,ㅠㅠ 똑같이 하고 싶었는데 라이브러리를 커스텀하기엔..쉽지 않았다.. import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; import DatePicker, { registerLocale } from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import ko from 'date-fns/locale/ko'; import getYear from 'date-fns/g.. 2022. 10. 8. [safari] NaN 에러 웹 , 크롬에서는 괜찮은데 ... 날짜가 나오지 않고 ...NaN이 나오는 에러를 보았다.. 맨처음엔 ㅋㅋㅋㅋㅋㅋ이유를 알지 못한채 ..뻘짓만 하다가..검색을 통해 알아냈다. new Date() 2022. 8. 27. Warning: Each child in a list should have a unique "key" prop 오랜만에 TIL작성이다 ㅠㅠ 그동안 ..나태했던 나 자신을 돌아보며 이제 다시 꾸준히 TIL쓰기다 !! 우선 map돌리면 key값을 넣어주는 건 알고있었는데.. key값을 넣었는데도 자꾸 저 에러가 떠서 ...스트레스 받던 찰나.. 꺄아아아악 CommentList에 key넣어줬자나 !!!!! 자세히..보아야 된다.. 문제의 코드 return ( {data?.length > 0 ? ( data?.map((v, idx) => { return ( {index ? ( ) : ( )} ); }) ) : ( )} ); 알고보니.. 이렇게 감싸준 빈태그에..key값을 넣어야되었던 것이었다.. 는 와 같다! 해결 코드 return ( {data?.length > 0 ? ( data?.map((v, idx) => { r.. 2022. 8. 22. 이전 1 2 3 4 ··· 15 다음
