본문 바로가기

TIL89

[항해99 60일차] 2022.05.04 TIL (리액트 카카오 소셜 로그인) 오늘은 리액트로 카카오 로그인 기능을 구현해봤당 !! 카카오데브사이트로 이동한다. 애플리케이션 추가하기 클릭 이 REST API 가 중요하다. 저거를 메모장에 붙여놓는다 ! 내 애플리케이션>앱 설정>플랫폼 에 접속한다. 사이트 도메인은 http://localhost:3000로 등록해주고, Redirect URI를 등록하러 가기를 클릭한다. 이렇게 URI를 적어주고, 코드로 돌아온당. 나는 깃헙에 개인키를 넣고싶지 않아서 환경변수로 빼줬당. .env REACT_APP_KAKAO_ID=아까 메모장에 복사한 키를 붙여넣습니다. SocialOAuth.js // kakao Login const CLIENT_ID = process.env.REACT_APP_KAKAO_ID; const REDIRECT_URI = "h.. 2022. 5. 5.
[항해99 59일차] 2022.05.03 TIL (지도 줌 인 줌 아웃 할때 이벤트 발생 시키기, 커스텀 오버레이 생성) 오늘은 .. 기획 멘토링 받고 기획적인 부분 회의를 하고 , 오후 늦게 작업을 했다..ㅠㅠ 기획부분은 너무너무 어려운 것 같다. 그리고 우리조의 핵심 기능은 지도로 오피스 매물 검색하고, 지도 이동 할때마다 해당 좌표 사이에 있는 매물들을 지도에 마커로 띄워주는 것..ㅠㅠ 이것 밖에 없어서 핵심 기능 구현을 먼저 해보고, 안되면 ..다른걸로 틀라고 해주셔서 오늘 지도 부분을 엄청 열심히 ..고민했던 것 같다. 우선 오늘 내가 한 것은 별거 없지만... 마커부분을 커스텀 오버레이로 바꾼 것이다 !! 회의하느라 코딩할 시간이 너무 적었다.ㅠㅠ 짜잔..이렇게 무료한 마커를 디자이너분들이 디자인 해주신 대로 커스텀 했다 !!! 지도부분 코드 import React, { useEffect, useState } f.. 2022. 5. 4.
[항해99 58일차] 2022.05.02 TIL (모달창 띄우기) 흐ㄱ...소스 코드를 뒤지고, 구글에 검색하며 리액트로 모달창을 구현해보았다 !!!!!!!! 이미지 수정 버튼 있는 JS import React,{useState} from 'react'; import {Button,Grid,Image,Text} from '../../elements/index'; import {ProfileModal} from './index'; import styled from 'styled-components'; const MyProfile = () => { const [isOpen,setIsOpen] =useState(false); const openModalHandler=()=>{ setIsOpen(!isOpen); }; return ( 오싹이님 alskldskf123@naver.. 2022. 5. 3.
[항해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.

티스토리툴바