JS' 공부흔적

테스트 코드를 작성 후 테스트 하던 중 위와 같은 에러를 겪었다. jest는 js나 jsx 이외의 확장자를 가진 파일을 불러올 수 없다. 따라서 png 파일 또한 불러올 수 없다. 이와 관련해서 많이 찾아보고 많은 방법을 시도해 봤다. 실제 이미지를 불러오지 않고 mocking file을 불러오도록 fileMock.js 파일을 생성해 봤고 identity-obj-proxy라는 라이브러리도 설치해 봤는데, 해결되지 않았다. 내 에러를 해결해 준 것은 jest-transform-stub이라는 라이브러리였다! jest는 기본적으로 non JavaScript asset을 다룰 수 없는데, 이 라이브러리를 설치하면 이로 인해 발생하는 에러를 피할 수 있을 것이다. 문서에 위와 같이 적혀 있는데, 내 에러를 해결해..

이번에 사이드 프로젝트를 진행하면서 jest와 react-testing-library를 사용하여 테스트 코드를 작성하는 연습을 해보고 있다. 그중에서 svg 파일과 관련해서 내가 겪었던 에러들을 정리하고자 한다. 첫 번째 에러 이 에러는 jest와 관련된 것은 아니다. 그러나 Vite 기반의 React로 개발을 진행하고 있다면 알고 있어야 한다. svg와 관련한 첫 번째 에러는 vite 환경에서 svg를 사용하기 위한 설정을 하지 않아서 발생했었다. 이때는 vite-plugin-svgr이라는 라이브러리를 설치하여 해결했었다. // vite.config.js ... import svgr from "vite-plugin-svgr"; ... export default ({ mode }) => { ... ret..

lint 검사를 돌리던 중 아래 에러가 발생했다. 처음 보는 에러에 CR은 또 뭔지.. 바로 검색해봤다. 위는 요약하자면 Windows 환경에서 발생하는 에러이며, Windows와 Prettier의 줄 바꿈 방식이 달라서 발생한다. 원래 평소에는 Mac 환경에서 개발했었는데, 이번에는 집에 데스크탑이 있어서 Windows 환경에서 개발 중이었다. (최근에 최신형 맥북으로 업그레이드해서 다시 맥으로 개발할 예정 ㅎㅎ..) 두 OS는 각각 새로운 줄 바꿈을 하는 방식이 다르다. 줄 바꿈 방식에는 2가지가 있는데 아래와 같다. LF: Line Feed(\n) CR: Carriage Return(\r) 이는 과거에 타자기를 사용하던 시절에 줄바꿈을 위해 사용하던 방식이라고 한다. LF는 현재 커서의 위치를 유지..

얼마 전에 사이드 프로젝트 팀에 중간 합류했다. 기존에는 로컬 서버를 띄워놓고 테스트를 해왔는데, 며칠 전에 서버 개발자 분께서 서버를 배포하셔서 이제 배포된 서버에서 테스트 할 수 있게 되었다. 코드를 보니 이전에 작업하시던 프론트 개발자 분께서 CORS 에러에 대해 proxy 설정으로 대응해놓으셨다. "/back": { target: "http://localhost:8000", changeOrigin: true, rewrite: (path) => path.replace(/^\/back/, ""), }, 이제 실서버 주소를 적어야 하는데, 노출 방지를 위해 .env 파일에 환경변수를 등록해놓고 이를 불러와서 아래와 같이 쓰고자 했다. "/back": { target: import.meta.env.VIT..

React를 사용해 개발하면서 라우팅 기능을 구현할 때 대부분 react-router-dom을 사용할 것이다. react-router-dom에는 수많은 라우터 중에 HashRouter와 BrowserRouter가 존재한다. 둘 중에서 대부분 BrowserRouter를 사용하여 라우팅을 구현할 것이다. BrowserRouter와 HashRouter를 비교하는 글들이 많은데, 각각의 특징을 간단히 적자면 아래와 같다. Hash Router 주소에 Hash(#)가 붙는다. Hash(#) 때문에 검색 엔진이 읽지 못한다. (SEO 최적화 X) 별도의 서버 설정을 안 해도 새로고침 시에 에러가 발생하지 않는다. Browser Router History API를 사용한다. 별도의 서버 설정을 하지 않으면 URL에 ..

Firestore에서 데이터를 불러오려고 하는데 아래와 같은 에러가 발생했다. 이를 해결하는 방법은 우선 해당 Firebase Console로 이동한다. 그리고 아래와 같이 Firestore Database를 클릭한다. 아래와 같이 규칙 탭에 들어간다. 아래 코드에서 false를 true로 바꿔주면 에러가 해결된다!

React에서 Firebase를 연결해 로그인 기능을 구현하던 중, API KEY가 유효하지 않다는 에러가 발생했다. auth/api-key-not-valid.-please-pass-a-valid-api-key. .env 파일을 생성하여 아래와 같이 관련된 값들을 저장한 후에 firebase-config 파일에서 불러다 쓰고 있었다. REACT_APP_FIREBASE_API_KEY = ... REACT_APP_FIREBASE_AUTH_DOMAIN = ... REACT_APP_FIREBASE_PROJECT_ID = ... REACT_APP_FIREBASE_STORAGE_BUCKET = ... REACT_APP_FIREBASE_MESSAGING_SENDER_ID = ... REACT_APP_FIREBASE_..

JSON.parse(localStorage.getItem("treasureList")); 위와 같이 localStorage에서 데이터를 불러온 후 파싱해주는 과정에서 아래와 같은 에러가 발생했다. string | null 타입은 string 타입에 할당할 수 없다는 뜻이다. localStorage는 string이나 null 타입을 반환하는데, JSON.parse는 string을 필요로 하기 때문에 발생하는 에러이다. 따라서 JSON.parse 안의 값이 항상 string이 되도록 수정해줘야 한다. JSON.parse(localStorage.getItem("treasureList") || "{}"); 이렇게 localStorage에서 불러온 값이 null이라면 "{}"라는 string 값으로 대신하면서 에..

오늘의집 클론코딩을 진행하면서 Axios로 api 통신을 하면서 에러가 발생했을 때, 지금까지는 catch문 안에 console.log(e)로만 출력을 했었다. 그치만 에러가 발생하는 경우는 여러가지가 있다. 예를 들어, 상품에 대한 리뷰를 작성할 때는 상품을 구매하지 않았는데 리뷰를 작성하려 할 때, 또는 이미 리뷰를 작성한 상품에 대해 또 리뷰를 작성하려고 할 때 에러가 발생한다. 이렇게 상황에 따른 에러 메시지를 출력할 때는 아래와 같이 작성하면 된다. axios.post(~) .then(~) .catch((e) => { alert(e.response.data.message); //메시지를 지정해 준 경우 }