Today Hailie Learned

이번 포스팅은 프론트단에서 구글 소셜로그인으로 토큰까지 발급받을 수 있는 방법에 대해 정리한 글입니다. 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에는..

프로젝트를 진행하면서 굳이 전역으로 관리하지 않아도 되는 상태를 전역으로 관리하고 있음을 깨닫고 전역 상태와 지역 상태를 공부하던 중 정리하는 글입니다. 전역으로 상태를 관리하기 위한 대표적인 툴로 Redux, Redux toolkit이 있습니다. 저는 이번 프로젝트에서 Zustand라는 툴로 상태를 전역으로 관리했습니다. 제가 사용한 Zustand에 대해서 간단하게 소개하자면, Redux, Redux toolkit, context API 등과 비교하면 사용하기 정말 쉽고, Provider로 감싸주지 않아도 되서 불필요한 렌더링을 줄일 수 있다는 장점이 있습니다. Zustand 사용법에 대해서는 다른 포스팅에 정리하겠습니다. 💡전역 상태란? 문서의 어떤 곳에서도 접근할 수 있는 영역을 말합니다. 따라서 ..

✔️ 에러 코드 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에서 인증을 받은 후 이 경로로 리디렉션된다. 이 경로는 뒤에 액세스..

pre-project를 하면서 서버에서 데이터를 받아올 때마다 axios로 받아왔다. 이번 main-project를 시작하면서 멘토님을 새로 만났는데 axios를 instance로 쓰는 방법을 공부해보라고 숙제를 내주셨다. axios를 instance로 쓰면 좋은 점이 구성 기본값 설정을 쉽게 해준다는 장점이 있다. 그리고 instance가 interceptor 처리를 하도록 설정할 수 있다는 장점이 있다. 우선 여기서는 구성 기본값 설정을 쉽게 해주는 코드를 살펴보자! 1. axios를 instance로 안쓰는 방법 import {useEffect, useState} from 'react'; import axios from "axios"; export default function App() => { ..

어느날 나의 github 잔디를 확인하는데 잔디가 텅텅 비어있는 것을 확인했다. 초반은 그렇다고 쳐도 8~9월은 프로젝트 때문에 매일매일 push를 했던 상황인지라 정말 내 눈을 믿을 수 없었다... 그 프로젝트 레파지토리가 private으로 설정되어 있어서 그런건가? 하고 다른 분들의 깃헙에 갔는데 다른 분들은 private repository에 commit 했다는 기록이 뜨고 잔디도 다 심어져 있었다. 그런데 나는 왜..? (해당 repository는 삭제 되지 않았다!) 그래서 알아보니 github 에서 간단하게 설정하면 된다! contribution settings에서 private contributions를 클릭하면 비공개 레파지토리에 커밋한 기록도 다른 사람들에게 다 보이게 된다. 참고로 그 ..

git repository를 만들다가 공부한 내용을 정리합니다. github 레파지토리를 새로 팠다면? 1. 로컬 환경에서 github에서 만들어둔 repository 이름과 동일한 폴더를 만든다. (mkdir ~) 2. 그 안에서 만들 파일을 생성한다. ( CRA ) 3. 제일 상위 폴더에서 git init을 하고 push를 한다. echo "# -" >> README.md git init git add README.md git commit -m "first commit" git branch -M main git remote add origin git@github.com:~~~/___.git git push -u origin main 내가 만들 레파지토리 파일에는 git init을 해서 .git을 만들..

axios는 response.data로 받고, fetch는 response.json()으로 받는다! axios useEffect(() => { axios .get("http://localhost:3001/user") .then((response) => response.data) .then((item) => setUserData(item)); }, []); fetch useEffect(() => { fetch(`http://localhost:3001/user/`) .then((response) => response.json()) .then((item) => setUserData(item)); }, []); 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

리액트에서는 태그 대신 Link를 사용해야한다. 이유는 태그의 href로 이동하면 상태값을 잃고 속도도 저하된다고 한다. 리액트의 상태 유지와 속도의 효율성을 위해 새로운 페이지를 불러오는 대신 업데이트하는 방식으로 구현해야 한다. 핵심 태그의 href는 페이지를 이동시킬 때 페이지를 새로 불러오게 된다. 그래서 상태 값이 유지되지 못하고 속도도 저하된다. Link 컴포넌트는 브라우저의 주소만 바꾸고 페이지를 새로 불러오지 않는다. 사용 예시 import { Link } from "react-router-dom"; ... log out 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

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