Today Hailie Learned

✔️ 에러 코드git push ssh: connect to host github.com port 22: Connection timed out   ✔️ 해결 방법 1. 현재 git remote 연결 주소를 확인한다. git remote -v 아래처럼 나온다. origin git@gitlab.com:프로젝트 경로/test.git (fetch)origin git@gitlab.com:프로젝트 경로/test.git (push)  2. git remote url을 변경한다. git remote set-url origin https://gitlab.com/프로젝트 경로/test.git 3. git pushgit push origin   😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩..

로컬에서 백엔드를 실행하는데 연결이 되지 않아서 터미널을 봤더니 아래와 같은 메세지가 나왔습니다. Connection to localhost:5432 refused. Check that the hostname and port are correct and that the postmaster is accepting TCP/IP connections. 그리고 디비버를 실행했더니 친절하게 PostgreSQL에 문제가 있다고 알려줬습니다. 다양한 원인이 있겠지만, 쉽고 간단하게 다시 PostgreSQL 을 연결하는 방법으로 문제를 해결했습니다. 바로바로 삭제 후 재설치! # postgresql이 설치되어 있는것들을 모두 삭제 합니다. $ brew uninstall postgresql # 설치 되어있는 postgr..

TOC 나 앵커를 작업하다가 스크롤이 해당 위치로 정확하게 가지 않는 에러가 있었습니다. See the Pen css scroll by HelloHailie (@hellohailie) on CodePen. 이 에러의 원인은 네비게이션바였습니다. 네비게이션바에 상단에 항상 fixed 되어 있기 때문에 네비게이션 바 height 만큼을 추가해줘야 가리지 않습니다. 이를 아주 간단하게 해결할 수 있습니다. scroll-margin-top: calc('헤더 height' + 10px); 아래처럼 해당되는 곳에 scroll-margin-top 을 설정해주면 문제를 해결할 수 있습니다. See the Pen css scroll by HelloHailie (@hellohailie) on CodePen.

✔️ 에러 코드 '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는 친절하다..