에러 해결

에러 해결 시리즈 - 00. 개괄.본 벨로그 시리즈에서는 내가 공부 중, 혹은 개발 중 경험했던 에러에 대한 내용을 하나씩 정리하고 있습니다.

배열 형식의 데이터와 점 표기법으로 호출한 map 함수를 사용하였을 때, 위와 같은 에러가 발생되었다.근본으로 잠시 돌아와서, 나는 단지 배열 형식의 데이터를 만들었을 뿐인데 여기서 바로 map 함수를 호출할 수 있다. 도대체 이 map 함수는 어디서 온 것인가?쉽게

프로젝트를 진행하면서 상단 메뉴바의 UI를 구현 할 때, 모바일 환경에서의 사용을 고려하여 반응형 웹으로 설계하였다. 화면의 가로 길이가 700px 이상일 경우에는 위와 같이 렌더링 되지만..화면의 가로 폭이 700px 이하로 감소했을 때에는 이렇게 메뉴 UI가 전환되

프로젝트 회원가입 기능을 구현할 때, 사용자가 입력한 이메일이 이메일 형식과 일치하는지 여부를 확인하기 위한 이메일 유효성 검사 기능을 구현하였다.프론트단에서 입력한 값을 가져와서 정규 표현식 패턴에 부합하는지 test() 함수를 적용, 그 결과값을 반환하도록 유효성

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value

리액트로 프로젝트를 구현하면서 가장 많이 쓰는 함수 중 하나는 단연 useEffect였다. 컴포넌트가 렌더링 되었을 때, 특정 상황에서 특정 작업이 실행될 수 있도록 해주는 역할이다보니 많이 사용할 수 밖에 없었기 때문이었다. 그리고 이 에러는 useEffect를 사용

프로젝트의 백엔드과 데이터베이스는 구현이 간편하고 배포까지 한꺼번에 처리해주는 구글 파이어베이스를 사용하였다.과거 Oracle이나 MySQL같은 RDBMS를 사용했던 시절에 비해서 데이터베이스에서 데이터를 주고받는 것이 간편하면서도 조금만 복잡한 기능을 구현하기만 해도

Redux로 전역 State 관리를 했었을 때, Store에 저장해야 할 값을 Dispatch를 통해 Action으로 Reducer에게 전달하였다. 그런데 어찌된 일인지 Store에 값이 저장되지 않았다!Redux를 처음 쓰다보니 내가 적용을 잘못한 것인지, Dispa

react-router-dom에서는 기존 HTML의 a 태그를 Link 컴포넌트로 바꾸어 제공하고 있다. a 태그와 사용법은 흡사한데, url 주소를 작성하는 속성이 href에서 to로 바뀌었다는 점만 기억하면 사용 방법은 거의 동일하다.a 태그와 Link 컴포넌트와의

회원가입 기능을 구현하고 테스트를 하던 중, 위와 같은 에러가 발생하였다.처음보는 에러였는데, 원인을 검색해보니 이유는 다음과 같았다. The root cause for this error is not sending the email and password correc

기능을 구현하다보면 내부에서 단계별로 동작해야하는 코드들이 존재하기 마련이다. 그런데 기능이 수행되는 동안에 에러가 발생하였다면? 그 즉시 전체 기능을 중단하여야 한다. 이를 위해서 사용하는 개념이 바로 try-catch문이다.try 문 내부에서는 기능 수행을 위해 동

요 녀석은 정확하게 말해서 에러가 아니라 경고문에 해당하지만.. 어디가 잘못되어서 출력되는 것이기도 하니 에러 해결 시리즈에 작성하였다.경고의 원인은 map 함수 내부에 작성한 화살표 함수을 잘못 작성한 것이다.우선 화살표 함수의 작성 방법은 다음과 같다.화살표 함수에

프로젝트의 상품 등록 기능을 구현하면서 상품의 구매옵션을 등록하는 UI를 제작하였다. 각 옵션은 기본 금액에서 액수가 추가되는지 감소하는지 여부를 option 태그를 이용해 구현하였는데, 기본 옵션을 금액 변동 없음으로 설정하기 위해서 option 태그의 selecte

요 녀석은 에러는 아니고 경고임. 다만 리액트 기본 규칙에 어긋나서 발생한 경고이니 만큼 에러 해결 시리즈에 포함함.제품 등록 기능을 구현하면서 내가 입력한 정보를 동일하게 화면에 출력해주는 기능을 구현하였다. 일단 테스트 용도로 만들었기에 input 태그를 그대로 사

상품 등록 기능을 구현하면서 상품의 제품설명 이미지를 등록하는 기능을 제작하였다. 등록된 이미지는 파이어스토어 스토리지에 저장되고, 스토리지에서 제공되는 웹 이미지 URL을 이용하여 상품 페이지에서 이미지를 출력하는 방식이다.그런데 위와 같은 에러가 발생하였다.에러의

등록한 상품을 조회하는 기능을 구현했을 때, DB에서 데이터를 꺼내와서 화면에 출력하는 기능을 만들었다. 그런데 데이터가 모두 정상적으로 꺼내져왔음에도 위와 같은 에러가 발생되었다.컴포넌트에서 화면에 출력할 수 있는 데이터 타입에는 제한이 있다. 문자열이나 숫자같은 데

구현한 기능에 버그가 있어 급하게 수습하고, 변경된 기능에 따라 UI도 바꿔주었는데 위와 같은 에러가 발생하였다.내가 무언가 에러를 발생시킬 만한 일을 하지 않았고, 처음 보는 에러라서 살짝 당황했지만 사실 이건 다소 어이없는 짓을 저질렀을 때 발생하는 에러이다.에러

상품을 등록했을 때, 등록한 상품이 바로 스토어에 공개되어서는 안된다. 따라서 상품을 등록한 시점에서는 스토어 비공개 속성을 걸어두고, 등록 상품 조회 페이지에서 공개 여부를 변경할 수 있도록 기능을 구현하였다.그리고 메인 페이지에서는 스토어에 공개된 상품만을 가져오도

나는 git을 사용하는 클라이언트로 소스트리를 사용하고 있다. 지금까지 아무 문제 없이 잘 사용하고 있었는데, 어느 날 갑자기 예고도 없이 소스트리가 망가져버렸다!프로그램을 실행하면 로고까지는 출력되는데 정작 소스트리가 켜지지 않는 것이다. 일시적인 문제로 실행은 안됬

React.js에서 모듈 혹은 라이브러리를 설치할 때 아래와 같은 에러가 발생되면서 설치가 중단되는 경우가 있다.이 에러의 원인은 React.js에서 모듈 설치시 발생되는 종속성(dependency) 에러로, React.js와 각 모듈의 버전 문제 차이로 발생되는 것이

A non-serializable value was detected in an action, in the path: register. ...파이어베이스에서 반환된 유저 데이터를 Redux에서 받아왔는데, 위와 같은 에러가 발생하였다.구글링 결과 Redux에는 직렬화할

다른 일로 GitHub에 새로운 Repo를 생성하고 소스트리로 클론하려고 하는데.. 위와 같은 에러가 출력되었다?평소에 하던대로 진행하던 일이라 에러가 생길 건덕지가 없는데 갑자기 난리가 난 것.에러문을 읽어보면 해당 경로가 '다른 누군가'가 소유중이라서 안전하지 않다

원티드에서 주최하는 8월 프론트엔드 인턴십신청을 위해 사전과제를 만들던 와중에 다음과 같은 에러를 경험하였다.본 사전 과제는 회원 가입을 완료하면 서버에 데이터가 저장되고, 로그인을 하게 되면 서버에서 사용자가 입력한 아이디와 비밀번호를 확인한 뒤 서버에 존재하는 사용

CRA로 React.js app을 새로 생성하고, eslint를 설치한 뒤 init하는 과정에서 위와 같은 에러가 발생하였다.에러의 발생 원인은 @typescript-eslint/parser와 @typescript-eslint/eslint-plugin 사이에서 의존성

프로젝트를 진행하면서 문법 자동 검사를 위해 ESLint를 적용했다. 이를 통해 들여쓰기 설정을 비롯한 다양한 코드 작성 규칙을 적용할 수 있었다. 하지만 switch-case 문을 사용할 때 들여쓰기와 관련된 이상한 문제가 발생하기 시작했다.ESLint의 장점은 코드