Today Hailie Learned

✔️ 에러 코드 'replaceAll' 속성이 'string' 형식에 없습니다. 대상 라이브러리를 변경해야 하는 경우 'lib' 컴파일러 옵션을 'es2021' 이상으로 변경해 보세요. ts(2550) ✔️ 에러가 나온 이유 map을 쓰지 않고 바로 나 태그로 감싸서 리턴했더니 이런 오류가 나왔다. 😅 👇에러코드 👇 const mainTitle = title.replaceAll('\\', '').split(':')[0] const subTitle = title.replaceAll('\\', '').split(':')[1] 👇에러 수정 코드 👇 첫번째 방법 tsconfig.json 파일에서 "es2021"로 수정하기 "lib": ["es2021", "dom"], 두번째 방법 const mainTitle =..

✔️ 에러 코드 Uncaught (in promise) DOMException: The element has no supported sources. ✔️ 에러가 나온 이유 오디오 파일이 로드 중 상태에서, 로드가 최적화되기 전 재생을 실행하는 것이 문제가 되는 것 같다. 😅 그래서 오디오 파일을 완전히 불러온 후 재생하도록 코드를 수정했다. 👇에러코드 👇 import React from "react"; const AudioPlayer = () => { let audio = new Audio("../../assets/audio/train_horn.mp3"); const start = () => { audio.play(); }; return ( start ); }; export default AudioPla..

✔️ 해결하고자 하는 것 상태관리 툴까지 쓸 depth는 아니지만 부모와 자식 관계가 아닌 컴포넌트가 아니라 페이지일 때 데이터를 전달할 수 있으면 좋겠다고 생각함 ✔️ 해결 방법 Link 과 Location 를 사용해서 문제를 해결할 수 있다. state로 {{}}를 두 번 묶어서 데이터를 전달할 수 있다. 👇 데이터를 전달하는 컴포넌트 코드 👇 import { Link } from "react-router-dom"; {title} 👇 데이터를 받는 페이지 코드 👇 import { useLocation } from "react-router-dom"; const TodoDetail = () => { const location = useLocation(); const title = location.stat..

✔️ 에러 코드 Uncaught TypeError: Cannot read properties of undefined (reading 'img') ✔️ 에러가 나온 이유 await 키워드를 사용하는 것을 깜빡했더니 위와 같은 에러가 나왔습니다. WHY?? 👉 HTTP 요청은 비동기 처리 방식으로 동작하니까! (참고) 2022.12.19 - [JavaScript] - [Deep Dive] 동기와 비동기, 비동기가 처리될 수 있는 이유 get 함수는 서버의 응답 결과를 반환하는 비동기 함수입니다. 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료됩니다. 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료됩니다. 이때 aw..

✔️ 에러 코드 Uncaught TypeError: Cannot read properties of undefined (reading 'map') ✔️ 에러가 나온 이유 객체를 가리키기를 기대하는 변수의 값이 (여기서는 product.color) null 또는 undefined인 경우 객체의 프로퍼티를 참조하면 타입 에러(TypeError)가 발생한다고 합니다. console.log(product.color)가 undefined로 나온걸 확인했습니다... 👇에러코드 👇 {product.color.map((c) => ( ))} 👇에러 해결 코드 👇 객체가 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조하자! 방법 1. 논리 연산자 &&를 사용 (옵셔널 체이닝이 생..

✔️ 에러 코드 Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform. 해석 = Component selectors는 @emotion/babel-plugin, the swc Emotion plugin, 또는 다른 Emotion-aware 컴파일러로만 사용가능합니다. ✔️ 에러가 나온 이유 vite 환경에서 emotion 라이브러리를 사용하는데 위와 같은 에러메세지가 나왔습니다. 😅 Component Selector는 상위의 컴포넌트에서 스타일링을 적용을 할 때, 하위의 컴포넌트를 선택해서 스타일링..

✔️ 에러 코드 Unhandled Runtime Error Error : Hydration failed because the initial UI does not match what was rendered on the server. ✔️ 에러가 나온 이유 Hydrate는 서버사이드에서 rendering된 정적 페이지와 번들링된 js코드를 클라이언트에게 보낸 후 js코드가 HTML DOM 위에서 다시 rendering 되면서 서로 매칭되는 과정인데 이 과정 중에서 문제가 발생해서 생긴 문제였습니다. 이 에러를 해결하기 위해서 구글링을 하다가 stackover flow에 나와 비슷한 오류를 가진 사람의 글을 보게 되었고, 결국에는 Next.js 공식 문서를 통해 해결하게 되었습니다. (Next.js는 친절하다..

이번 포스팅은 프론트단에서 카카오 소셜로그인으로 토큰까지 발급받을 수 있는 방법에 대해 정리한 글입니다. 개인적으로 구글 소셜 로그인보다 카카오 소셜 로그인이 조금더 수월하게 진행되었습니다. 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에서 인증을 받은 후 이 경로로 리디렉션된다. 이 경로는 뒤에 액세스..