본문 바로가기

TIL/2022 TIL86

[항해99 55일차] 2022.04.30 TIL (지도 모듈 파일) 오늘은 실시간으로 좌표가 변경될 때마다 axios요청으로 서버쪽에 현재 좌표를 보내주고, 좌표를 통해서 받은 데이터들을 지도에 마커로 뿌려주는 것을 해보았다. 할 게 산더미지만,, 그래도 감이 조금씩 와서 다행이다. 초반엔 ㅠㅠ지도 api쓰기 싫었는데..ㅜㅜ 그냥 순응하고 닥코하는 중이다.... 얻을 수 있는 게 있겠지.. 메인지도 불러오는 부분 import React, { useEffect, useState } from "react"; import styled from "styled-components"; import { useDispatch , useSelector } from "react-redux"; import { actionCreators as mapActions } from "../../re.. 2022. 4. 30.
[항해99 54일차] 2022.04.29 TIL (Debounce 와 Throttle) 📔 오늘 할 일 📔 1 debounce, throttle를 .. 사용해서 지도 api에 적용해보기 2. 메인뷰 와이어프레임대로 그리기! 📖 오늘 배운 개념 📖 debounce란? 👉 이벤트가 일어나면, 일정 시간을 기다렸다가 이벤트를 수행한다. 일정 시간 내에 같은 이벤트가 또 들어오면 이전 요청은 취소한다. throttle이란? 👉 일정 시간 동안 일어난 이벤트를 모아서 주기적으로 1번씩 실행해준다. 😊 주절주저리 😊 우리는 리랜더링을 미친듯이 많이 하는 것을 막아줄 필요가 있다. => 웹의 성능을 저하시킴 무의미한 요청을 막을 수 있는 방법 => 디바운스, 쓰로틀 ✅ 내일 할 일 ✅ 1. 지도 공부!! 2022. 4. 30.
[항해99 53일차] 2022.04.28 TIL (리액트 스와이프 기능) 📔 오늘 할 일 📔 1. 와이어프레임 보고 뷰 그리기 2. 지도.. 현재 위치 가지고 오는 거 공부하기 📖 오늘 배운 개념 📖 오늘은 저 끌어서 넘기는 것을 해보았다.. 코드는 공부가 필요하지만,,,어찌저찌 성공했다.ㅋㅋㅋㅋㅋ 이렇게 드레그 함수컴포넌트를 만들어줬다. import React from "react"; import styled from "styled-components"; const XScrollDrag = ({ children, ...props }) => { const [isDrag, setIsDrag] = React.useState(false); const [startX, setStartX] = React.useState(); const scrollRef = React.useRef(nul.. 2022. 4. 29.
[항해99 52일차] 2022.04.27 TIL (와이어 프레임 작성, 카카오 지도 ) 📔 오늘 할 일 📔 1. 와이어프레임 작성 2. 카카오 지도 api 내 위치 마커로 나타내기 📖 오늘 배운 📖 오늘은 +버튼 클릭하면 지도 확대되고 ,, 현재 내 위치에 마커를 표시해주는 걸 연습해봤다. ㅎㅎㅎㅎㅎ 혼자할때에는 막막했는데 ㅎㅎㅌㅅ님과 함께 하니까 재미있고, 금방 해결했다 !!! 사이트 우선 해당 라이브러리 설치 !! yarn add react-kakao-maps-sdk 메인 지도가 있는 js코드 import React, { useEffect, useState } from 'react' import styled from "styled-components" import { Map, MapMarker,ZoomControl,MapTypeControl } from "react-kakao-maps-.. 2022. 4. 28.
[항해99 51일차] 2022.04.26 TIL (기획은 너무 어려워 ) 📔 오늘 할 일 📔 1. 알고리즘 문제풀기 2. 와이어프레임 다시 짜기 📖 오늘 배운 개념 📖 //1. 하나의 값을 입력받을 때 const input=require('fs').readFileSync('/dev/stdin').toString().trim(); //2. 공백으로 구분된 한 줄의 값들을 입력받을 때 const input=require('fs').readFileSync('/dev/stdin').toString().trim().split(' '); //3. 여러 줄의 값들을 입력받을 때 const input=require('fs').readFileSync('/dev/stdin').toString().trim().split('\n'); //4. 첫 번째 줄에 자연수 n을 입력받고, 그 다음줄에 공백.. 2022. 4. 27.
[항해99 50일차] 2022.04.25 TIL (리액트로 카카오 지도 가져오기, 환경변수 설정) 📔 오늘 할 일 📔 1. 카카오 지도 API 사용법 알기 2. 소셜 로그인 하는 법 공부하기 📖 오늘 배운 것 📖 리액트로 카카오 API 가져와서 화면에 지도 띄우기 !!!! 사이트 👉 APP KEY 발급을 클릭 애플리케이션 추가하기 클릭 앱이름, 사업자명 입력 후 저장하기 클릭 자바스크립트 키 메모장에 복사해두기 !! 아래에 있는 플랫폼 중에서 Web플랫폼 추가해두기 도메인은 http://localhost:3000으로 입력 이제 여기에서 해야될 설정은 끝 !!! 사이트👉 가이드 클릭 리액트 index.js 에 아래 코드 복사 붙여넣기 발급받은 APP KEY는 위에서 메모장에 복사해둔 자바스크립트 키다. src에 Location.js 컴포넌트 생성 후 아래 코드 복사 붙여 넣기 // MapContaine.. 2022. 4. 25.

티스토리툴바