Today Hailie Learned

✔️ 에러 코드 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..

✔️ 에러 코드 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 😃 잘못된 개념 전달이 있다면 댓글..

레파지토리 생성 후 클론 받아온다. (현재 브랜치는 main 밖에 없음) git checkout -b dev // dev라는 브랜치 만들기 git add. git push origin dev // dev에 현재 상태 푸쉬함 (여기서 commit 안한 이유가 그냥 브랜치만 생성하려고) 이 후에 코드를 수정하거나 추가한다. 레파지토리 setting에 들어가서 Branches에서 디폴트 브랜치를 dev로 바꿔주면 더 안전하게 푸쉬 가능! git add . git status // 코드 수정하거나 추가한 내용이 나온다. git commit -m "feat: html 추가" git push origin dev // dev 브랜치에 푸쉬함 git checkout -b min // min라는 브랜치 만들기 git a..

✔️ 에러 코드 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..