Today Hailie Learned

이번 포스팅은 프론트단에서 카카오 소셜로그인으로 토큰까지 발급받을 수 있는 방법에 대해 정리한 글입니다. 개인적으로 구글 소셜 로그인보다 카카오 소셜 로그인이 조금더 수월하게 진행되었습니다. 1. 카카오 developers 페이지에서 api 등록하기 https://developers.kakao.com/docs/latest/ko/getting-started/app Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com api 등록하는 방법은 kakao developers 내의 설명과 다른 블로그에서 내용정리가 잘 되어 있어서 생략합니다. 설정해둔 리다이렉..

이번 포스팅은 프론트단에서 구글 소셜로그인으로 토큰까지 발급받을 수 있는 방법에 대해 정리한 글입니다. 1. 구글 API 등록하기 https://console.cloud.google.com/apis/dashboard Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 1-1. [사용자 인증 정보] 탭에서 승인된 자바스크립트 원본과 승인된 리디엑션 URI을 적습니다. (주의! 127.0.0.1 은 오류가 나므로 localhost로 적습니다. ) 1-2. [OAuth 동의 화면] 탭에서 게시 상태, 사용자 유형(외부), 테스트 사용자(테스트할 이메일) 적습니다. 구글 클라이언트 아이디는 secretData.js라는 파일에 따로 보관하여 github에는..

✔️ 에러 코드 1 400 오류 : invalid_request Permission denied to generate login hint for target domain. ✔️ 에러가 나온 이유 OAuth 클라이언트 ID를 만들면서 승인된 자바스크리트 원본 Url을 적는 곳에는 127.0.0.1을 쓰지 않는다는 것을 알게 되었고, 새로운 OAuth 클라이언트 ID를 만들었는데 기존 클라이언트 ID를 쓰고 있어서 위와 같은 에러가 나왔다. ✔️ 해결 방법 클라이언트 ID 맞는지 다시 확인하기 ✔️ 에러 코드 2 Error: redirect_uri_mismatch 에러발생 ✔️ 에러가 나온 이유 승인된 리디렉션 url은 사용자가 Google에서 인증을 받은 후 이 경로로 리디렉션된다. 이 경로는 뒤에 액세스..

✔️ 에러 코드 Input elements should have autocomplete attributes (suggested: "current-password") ✔️ 에러가 나온 이유 input type password의 경우에는 자동 완성 속성이 있어야한다! ✔️ 에러 해결 방법 autoComplete 속성을 추가해주었다. 여기서는 자동 완성 기능 off로 설정함. 👇에러코드 👇 👇에러 수정 코드 👇 참고) https://icecokel.tistory.com/13 쉽게 놓치고 지나갈 수 있는 실수 정리 : HTML (1) 안녕하세요. 저희 회사에서는 개발하면서 Warning과 Error관해 깐깐한 편인데요. 이전 회사와, 공부할 때는 원하는 기능만 되면, 개발이 완료되었다고 생각했었는데, Warn..

✔️ 에러 코드 Password field is not contained in a form ✔️ 에러가 나온 이유 password는 form에 감싸져 있지 않다고 오류가 떴다! ✔️ 에러 해결 방법 input 태그를 으로 묶어주었다. 👇에러코드 👇 👇에러 수정 코드 👇 참고) https://webfirewood.tistory.com/75 [DOM] Password field is not contained in a form 서비스 중인 웹에서 다음과 같은 경고 메세지가 나타나는 것을 발견했다. password 타입의 input 태그가 form 태그 안에 위치하지 않기 때문에 나타나는 경고다. 고치지 않아도 별로 문제는 없지만 일 webfirewood.tistory.com 😃 잘못된 개념 전달이 있다면 댓글..

✔️ 에러 코드 Uncaught TypeError: data.map is not a function ✔️ 에러가 나온 이유 이 오류의 원인은 다양한데, 이번에는 운좋게 구글링을 통해서 바로 해결할 수 있었다. 이번에는 이런 식으로 array인지 확인해서 이게 true 이면 map을 사용하는 식으로 했다. {Array.isArray(data) ? data.map((item) ⇒ … 👇에러코드 👇 import { useEffect, useState } from "react"; import styled from "styled-components"; const Section = styled.div` border: 1px solid black; margin: 5px; padding: 5px; display: fl..

✔️ 에러 코드 Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead. 해석해보기~~ 아직 마운트되지 않은 구성 요소에서 React 상태 업데이트를 수행할 수 없습니다. 이는 비동기식으로 나중에 호출이 구성 요소를 업데이트하려고 시도하는 렌더링 함수에 부작용이 있음을 나타냅니다. 대신 이 작업을 useEffect로 이동합니다. ✔️ ..

✔️ 에러 코드 Objects are not valid as a React child (found: object with keys {id, city, doing, photo}). If you meant to render a collection of children, use an array instead. ✔️ 에러가 나온 이유 map을 쓰지 않고 바로 나 태그로 감싸서 리턴했더니 이런 오류가 나왔다. 😅 👇에러코드 👇 import { useState } from "react"; import styled from "styled-components"; const Section = styled.div` border: 1px solid black; margin: 5px; padding: 5px; display:..

토이 프로젝트를 만들면서 로컬스토리지 기능을 만들고 싶어졌다. 그래서 구글링, 유튜브, 도서를 통해서 이것저것 시도 해보다가 도서관에서 '스무디 한 잔 마시며 끝내는 리액트 + TDD'을 빌렸다. 왜냐면 여기에 로컬 스토리지 기능에 관한 부분이 있기 때문에!! 책에 나온 예제 코드는 아래와 같다. const addToDo = (toDo: string) : void => { if(toDo){ const newList = [...toDoList, toDo]; localStorage.setItem('ToDoList', JSON.stringify(newList)); setToDoList(newList); } } const deleteToDo = (index:number) : void => { let list =..

오류 메세지 Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. options.allowedHosts[0] should be a non-empty string. 문제 발생 환경 도서관에서 토이프로젝트 만든 것을 좀 보완하고자 npm run dev로 클라이언트와 서버를 켰는데 위와 같은 메세지가 뜨면서 앱이 작동되지 않았다. (정확히는 클라이언트 화면이 뜨지 않았다.) 그리고 위에서는 서버가 3003 포트에서 실행중이라고 떠있지만, 실제로 가보니까 "CANNOT GET" 오류가 떠있었다... 원래는 후딱 켜서 해보려고 했는데 시간을 엄청 잡아먹었다가 조..