📑 오류기록

[husky] Checking errors when build projectstdin is not a tty

아주 애정이 깊은 Stackticon 프로젝트에서 발생한 에러다. 이슈 해결을 위해 로컬에서 작업을 하고, push하려는데 발생했던 문제다. husky 관련 작업을 하루가 진행했기 때문에, 이 글의 목표는 잘 모르던 husky에 대한 이해와 함께 에러 해결 방법을 공유하기 위함이 될 것 같다. husky에 관련된 내용은 상단에, 에러 관련 내용은 하단에 작성할 예정이니 에러 해결 방법만 슥 보고 싶다면 아래로 가셔서 빠르게 해결 방법을 보는 것도 시간 절약에 도움이 될 것 같다! 👊😆✨ husky는 왜 쓰는 걸까?: 시스템으로 규칙 만들기 🐇: 우리 진짜 열심히 하자! 커밋 메세지 규칙은~ 블라블라 🦎: 너무 좋아!! 그러니까... feature, fix, chore ... style... test.....

[ eslint ERROR ] <forwardRef> Component definition is missing display nameeslintreact/display-name

0. 오류 상황 발생 Stackticon 프로젝트를 진행하면서 발생한 문제 Loading.tsx 페이지 내부에 존재하는 Stacks.tsx 컴포넌트를 forwardRef로 연결하는 과정에서 발생했다. 1. 추론 에러 메세지 Component definition is missing display nameeslintreact/display-name 를 읽어보니 eslint 오류일 것이라고 생각됐다. 궁금증 왜 발생할까? eslint오류는 왜 발생할까? 어떻게 해결하는 것이 좋을까? 2. 알아보기 1. 왜 발생할까? forwardRef() 함수를 호출할 때 익명 함수를 넘기면 컴포넌트의 이름이 나오지 않는다 -> 이 때 발생하는 에러 2. eslint오류는 왜 발생할까? eslint-plugin-react/d..

[ axios && jest ERROR] Cannot use import statement outside a module

0. 오류 상황 발생 따라하며 배우는 리액트 테스트 강의를 듣던 중, 관련 오류를 겪었다. 강사님은 성공하는데 왜 나는 오류가 생기지? axios도 분명히 설치되어있고, 코드도 같은데 발생한 문제인지라, 빠르게 구글링을 통해 문제를 해결할 수 있었다. 문제 상황 발생 시 내 코드 (볼 필요 없습니당!) Type.jsx import React, { useEffect, useState } from "react"; import axios from "axios"; import Products from "./Products"; const Type = ({ orderType }) => { const [items, setItmes] = useState([]); useEffect(() => { loadItems(ord..

[ FireBase ERROR ] Argument of type 'DocumentData' is not assignable to parameter of type 'Topic'.

0. 오류 상황 발생 firestore.ts export const getAllDocsOnCollections = async (collecionName: string) => { const querySnapshot = await getDocs(collection(db, collecionName)); return querySnapshot; }; getDocs로 collection의 모든 문서들을 받아와 반환한다. CraftRoom.tsx const setTopics = async () => { const topicArray: Topic[] = []; (await getAllDocsOnCollections(FIRESTORE_COLLECTIONS.topics)).forEach( (doc) => { const t..

[ React 18 ] Hot reloading 문제. You are importing hydrateRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"

Next.js를 이용해서 프로젝트를 만들었는데 자동 새로고침이 안되는중(hot reloading 안됨 ㅜㅜ!!) 시도해본 방법 1. .next 파일을 지웠다가 다시 시작해본다(캐시때문이라고 생각) 2. pages 안의 파일 이름을 통일 => index.tsx 파일에서 작업중이라 의미가 없음(시도해봤지만 역시 안됨) 3. pages 파일 첫글자를 대문자로 => index.tsx 파일에서 작업중이라 의미가 없음(시도해봤지만 역시 안됨) 하지만 아직 안된다 방법 아시는분들 있으면 말씀주세요 제 생각에는 react rc버전을 사용하면서 react 18에서 지원되지 않는 hydrateRoot를 사용해서 그런 것 같습니다 🚨 Warning: You are importing hydrateRoot from "react..

npm start / yarn start가 안될 때. 오류코드 : error Command failed with exit code 1.

문제 npm start와 yarn start 어느 것을 써도 error가 뜨면서 실행되지 않았다. 열심히 구글링 해 본 결과 npm update를 하고 npm(yarn) start를 하니 작동되었다. 🙇‍♀️ https://rrecoder.tistory.com/133 나는 npm update로 문제를 해결했지만 종속성 문제 때문에 이런 에러코드가 발생했을 경우에는 종속성을 제거하고 캐시를 정리한 후 다시 전송받아야 할 것이다. 방법 rm -rf node_modules yarn cache clean yarn yarn start 디렉토리의 노드 모듈을 제거한 다음에 yarn 캐시를 clean하게 만들어주고 yarn을 다시 시작한다 🙇‍♀️ https://stackoverflow.com/questions/55..

[ 줄바꿈 오류 ] warning: LF will be replaced by CRLF in...

warning: LF will be replaced by CRLF in cypress/integration/2-advanced-examples/utilities.spec.js. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in cypress/integration/2-advanced-examples/viewport.spec.js. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in cypress/integration..

[ 오류기록 / Firebase ] Firebase: Error (auth/account-exists-with-different-credential). 해결법

Firebase: Error (auth/account-exists-with-different-credential). 알고 보면 아주 간단한 에러이지만 나와 같은 코딩 병아리들에게는 오류 하나하나가 고난이기 때문에 작성해본다. 해결 방법 🔨 1. firebase의 console에서 내 프로젝트에 들어간다. 2. Authentication(인증) 파트를 클릭한다 3. 좌측 상단부 캡쳐사진. 여기서 Sign-in method 클릭. - 위 agenda는 내가 현재 만들고 있는 개인 프로젝트 이름😻🔥 4. 스크롤을 내려서 화면 중앙부에 있는 '고급' 여기서 '변경'을 눌러준다 5. 동일한 이메일 주소로 여러 계정을 만들 수 있습니다. 선택하고 저장 끝! 에러 발생 이유 : 같은 이메일이 다른 인증 방법으로 접속..