과제 제출마감 10분전

Geolocation API에서 현재 위치를 받아오는 getCurrentPosition을 사용할 때, 해당 줄이 비동기적으로 수행되는 문제가 있었다. 즉, getCurrentPosition으로 현재 위치를 가져온 것이 완료되기 전에 다음 줄을 수행해 버려서 문제가 되었다. 따라서 해당 글(React에서 카카오맵 API를 이용해 현재 위치 받아오는 기능 구현 오류 해결) 처럼, 로직을 바꿔 주어서 해결했었다. 이번에는 이 문제를 Promise와 await/async을 이용한 비동기->동기 처리를 통해 해결해 볼 것이다! 해결 방법 기존 코드 useEffect(() => { getMyGps(); }, []) useEffect(() => { if (userInputScreen === 1) { mapDrawer..

링크 복사 버튼 어떤 링크를 공유하고 싶을 때, 링크 텍스트를 클립보드로 복사하는 버튼을 자주 사용하곤 한다. 이를 React 웹페이지에서 구현하기 위해서는 어떻게 해야 할까? [방법 1] Document.exeCommand() 이용 _ deprecated 1. 먼저 useRef()를 이용해 복사 버튼의 reference를 가져온다. import React, { useRef } from "react"; const copyLinkRef = useRef(); useRef() import후 copyLinkRef에 useRef()변수 생성 2. 복사할 텍스트를 가진 input에 ref생성 ref = {copyLinkRef}로 연결해줌 3. 복사 버튼에 복사 기능을 수행하는 함수 연결 onClick을 이용해 클릭..

리액트에서 특정 DOM을 선택하려면? Vanilla JS로 개발할 때에는 document.getElementById("id-value")과 같이 id값이 id-value인 DOM을 선택할 수 있었다. 하지만 리액트에서는 위의 방법을 대체할 수 있는 방법이 존재한다. 그렇다면 리액트에서 특정 DOM을 선택하려면 어떻게 해야 할까? 바로 useRef()를 이용하면 된다! 현재 작성하고 있는 프로젝트에서 함수형 컴포넌트로 코드를 작성하고 있기 때문에 함수형 컴포넌트를 사용할 때 useRef()를 사용하는 방법에 대해 알아보려고 한다 (❁´◡`❁) useRef() import React, { useRef } from "react"; const textRef = useRef('mini'); 먼저 useRef를 i..

리액트로 만든 앱을 Github에 올리고 싶을 때, 간단하게 올리는 방법! 1. 리액트 앱과 올릴 레포지토리 준비 예시로 사용할 리액트 앱을 Github-portfolio에 만들어 둔 상태 그리고 해당 파일들을 올릴 레포지토리도 준비 완료! 2. 깃 원격 레포지토리 설정 깃 배시를 열어서 올리고자 하는 폴더에 들어온다. 여기서 다음 명령어를 입력해준다 git init git remote add origin REPOSITORY_URL (git을 활성화하고 원격 레포지토리와 해당 폴더를 연결시켜줌) REPOSITORY_URL은 여기서 찾을 수 있다. 해당 레포지토리를 origin으로 등록하고 master 브랜치에서 내용을 업로드 할 수 있게 되었다! 3. git push로 업로드 origin에 master ..

React로 웹 앱을 만들 때, 입력하지 않은 input이 있으면 알림을 띄우는 기능을 구현하려고 했다. 이 때 alert 대신 toast를 통해 알림을 띄우면 깔끔해 보일 것 같아 만들어보는 toast 알림창! ❕ Toast Notification 이런 알림이 toast알림이다. 안드로이드에서 자주 보이는 알림인데, 웹에서는 내장되어 있는 기본 기능이 아니기 때문에 직접 만들어야 한다. + react-toastify라는 오픈 소스 라이브러리를 이용하여 간단하고 쉽게 toast 알림 기능을 사용할 수 있게 코드를 제공하고 있었다. 하지만 나는 직접 만들어 보고 싶은 생각이 있어서(...!!) 이번만 만들어보고 다음부터는 저 오픈소스를 사용한 알림도 구현해보고 싶다. 💫 구현 과정 1. 기능 구상 위의 r..

💥 에러 발생 상황 모두모두 웹 페이지를 구현할 때, 자신의 출발 위치를 선택하기 위해 카카오맵 API를 사용해서 지도에 마커를 띄우는 기능이 있었다. 처음 위치는 카카오 본사로 되어 있었는데, 아무래도 사용자가 출발할 위치이기 때문에 현재 사용자의 위치를 초기 위치로 잡아주고 마커를 올리면 좋을 것 같다는 생각이 들었다. 그래서 gps를 사용하여 현재 위치를 읽어오는 기능을 구현했다. 문제는... 현재 위치를 가져오는 기능 자체는 문제가 없었는데 gps에서 현재 위치를 받아오는 것보다 Latitude와 Longtitude를 통해 맵을 구성하는 기능이 이 더 먼저 수행이 되어서 현재 위치가 아닌 기본값 위치로 맵에 마커가 생겼다. curLatitude와 curLongtitude에는 기본값으로 정해둔 위치..

💥 에러 발생 상황 모두모두 웹 앱을 react 환경에서 개발하면서, 카카오맵 API를 사용한 지도를 띄울 때 지도부분은 따로 HostMap.js라는 파일에 컴포넌트로 만들어둔 후 import해서 사용했음 그 후, 백엔드로 데이터를 보내기 위해 axios를 사용하는데 지도를 이용해서 구했던 위도/경도 정보를 받아와야 할 일이 생김. 그래서 따로 구분해놨던 지도 부분인 HostMap.js을 없애고, 이를 그대로 옮겨서 OpenMeetingPage.js에 합치려는 상황 그런데 지도를 만들 때 정상 작동했던 코드를 그대로 OpenMeetingPage.js에 넣었는데 다음과 같은 에러가 발생함 ❓ 에러가 발생한 이유 지도를 생성할 div가 위치한 곳은 state의 상태에 따라 사라졌다가 나타나는 부분이었음 그리..

React 환경에서 Kakao Map API를 사용하면서 api key를 관리하는 방법 1. dotenv 설치 yarn add dotenv // or npm install dotenv 2. index.html의 head부분에 스크립트 추가 3. 프로젝트의 최상단에 .env 파일 생성 src파일 내에 만들어야 했나 싶었는데 index.html에서도 써야하고 해서 그냥 최상단? 사진 위치에 해줬을 때 잘 동작했음 4. gitignore에 등록 우리의 소중한 api key는 노출되면 안되니까 5. env에 api key 작성 REACT_APP_KAKAOMAP_API_KEY=qwer1234 반드시 REACT_APP_으로 시작해야 한다 설정 끝!