현재 위치가 곧바로 return 되지 않는 문제 ❓상황 navigator.geolocation API 를 react의 hook인 usePosition()으로 만들고 나서, return 값 저장시 undefined로 발생 🔎 원인 파악 API 호출 시 API 호출 값을 받기 전까지, 실행되지 않게 설정하지 않아서 발생한 문제(비동기 설정 X) 또한, gelocation 메소드는 return 반환이 없다는 것. ✨ 해결 방법 1. 함수에 new Promise 를 정의하여, 반환되는 값 나오게 만들기 function get() { return new Promise((resolve, reject) => navigator.geolocation.getCurrentPosition( (position) => resol..

error Command failed with exit code 1. (https://ntl.fyi/exit-code-1) ❓상황 netlify를 이용하여 미세먼지 프로젝트 배포시 발생한 오류 🔎 원인 파악 개발작업시 warning이 발생하는 경우도 있는데, 개발할때는 이걸로 인해 문제가 생기지는 않는다. netlity 에서 배포할때 자체적으로 test를 진행한다. test 진행시, warning을 error로 진단하여 오류가 발생한다. 따라서, netlify에다가 warning은 error가 아니라고 알려줘야한다. ✨ 해결 방법 build command # yarn CI= '' yarn build

Access to fetch at ''url" from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. ❓상황 fetch를 이용하여 한국환경공단_에어코리아_대기오염정보 API 호출시 발생한 오류 🔎 원인 파악 외부 API 접근시, 브라우저가 클라이언트의 Origin값과 외부 API 서버의 Ac..

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'signin2') ❓상황 구글 로그인 API 기능구현시 구글 플랫폼 라이브러리의 프로퍼티(signin2)를 불러올 수 없다고 발생하는 오류 🔎 원인 파악 구글 플랫폼 라이브러리를 async(DOM 렌더링 전 스크립트 실행) 속성을 부여해서 발생하는 문제 ✨ 해결 방법 async 제거

리액트로 구글 아이디로 로그인 구현하기 ❓상황 회원가입 대신, SNS 로그인 기능 구현해보고 싶어서 진행했다. 📖 SNS 로그인 구현 더보기 구글 로그인을 적용하는 방법 1. 새 프로젝트 생성 2. 사용자 인증 정보 생성 3. 구글 플랫폼 라이브러리 가져오기 4. 구글 클라이언트 초기화하기 5. 구글 로그인 버튼 추가 6. 사용자 프로필 정보 가져오기 7. 로그아웃 Google Cloud Platform Setting 홈페이지 접속 새 프로젝트 생성 사용자 인증 정보 생성 사용자 인증 정보 사용자 정보에 접근할 수 있도록 사용자에게 동의를 구하도록 한다. OAuth 동의 화면 구성하기 OAuth 클라이언트 ID로 들어가면, 제품이름을 설정해야한다고한다. 동의 화면 구성을 클릭해서 설정하자 구글 계정을 가..