재카이브

여느때처럼 React복습을 하고있는 나.오늘도 어떤 반가운 오류를 조우하게되었다Uncaught TypeError: Cannot read properties of undefined (reading 'map')The above error occurred in the  component:Uncaught TypeError: Cannot read properties of undefined (reading 'map') ==> 대충 undefined에 map을 사용하고있다라는 뜻 !!!코드는 아래와같다.(정확히는 {movie.genres.map(... 부분} {movies.map((movie) => ( {movie.title} ..

{coins.map((coin) => { return ( {coin.name} ({coin.symbol}) ); })} 변수 coins : 비트코인객체의 리스트 selectedCoin : 선택된 코인객체 배경 1. select요소 내부에 map을 이용해 출력되는 option은 value속성으로 각 coin객체를 담고 있다. 2. onClickCoinsOptionHandler함수를 통해 셀렉트박스에서 선택된 옵션의 coin객체를 새로운 seletedCoin으로 바꿔주려고한다. 문제흐름 onClickCOinsOptionHandler로 전달된 event객체를 살펴보면 아래와 같다. 선택된 코인객체의 값이 담겨있을 target을 펼쳐보면 아래와같다. (Select박스 내 모든 코인객체와 다른 속성들도 많으니 핵..

Each child in a list should have a unique "key" prop. 해당 오류는 리액트를 사용하며, LIST를 JSX를 사용하여 UI에 출력할 때 발생한다. {toDoList.map((element) => { return {element}; })} toDoList라는 Javascript List를 map함수를 이용하여 각 리스트 요소마다를 {element} 로 변환하여 반환해주는 작업이다. 결과적으로는 위와같이 성공적인 동작을 보장하지만, 콘솔에서는 아래와같은 에러 로그가 찍히게된다. 이것은 생성되는 각 요소들마다 unique한 key 속성이 필요하다는 의미이다. 요소들마다 고유의 key값을 넣어줘야 되므로 고민이 있겠지만.. 우리가 사용하는 map함수를 살펴보면 위와같은데,..

오류 내용을 살펴보자면, 에러를 살펴보란다. An error occurred. Sorry, the page you are looking for is currently unavailable. Please try again later. If you are the system administrator of this resource then you should check the error log for details. Faithfully yours, nginx. 1.nginx restart nginx오류가 간간히 나긴 했는데, 대부분 OOM 문제였다.(메모리 초과) 그때는 관리자권한으로 서버를 접속하여 COMMAND :: /etc/init.d/nginx restart 위 커맨드를 사용했다. nginx는 rest..

create-react-app을 사용하여 프로젝트를 만드려는 때에 오류가 발생했다.찬찬히 읽어보니 노드 버전이 낮다는 것.따라서 노드 버전을 업데이트 해줘야 했다. 1)node -v (버전확인) 2)npm cache clean -f (npm 캐쉬삭제) 3)npm install -g n (노드 버전관리 플러그인 n) -노드버전관리 플러그인인 n을 설치해준다. 4)n lts (n을 사용하여 설치 lts-lts버전) -n을 사용하여 lts버전을 설치한다. (*LTS - Long Term Support) 그 후에 create-react-app 수행 시 정상 작동함을 확인할 수 있었다.

[배경] MongoDB를 사용하기위해 MongoDB 공식 웹페이지의 Cluster를 사용하고자 했다. (https://www.mongodb.com/) 이번에도 마찬가지로 위의 예쁜코드를 사용했다. *connect에 나오는 저 URL이 MongoDB Cluster를 생성하여 얻은 Connection String이다. 그러나..이번에도 결과는 참혹했다. 다음과 같은 오류가 나와버린 것..! MongooseServerSelectionError: Could not connect to any servers in your MongoDB Atlas cluster. One common reason is that you're trying to access the database from an IP that isn't w..

[배경] NodeJS에서 Express프레임워크를 설치하여 적용하고, MongoDB사용을위해 MongoDB 사용 툴인 Mongoose를 설치하였다. 위처럼 코드를 예쁘게 작성해준뒤 npm run start로 시작을 해주었지만 결과는 참혹했다. MongoParseError: options usecreateindex, usefindandmodify are not supported가 발생해버린 것! 예시를 보고 이쁘게 따라쳐줬는데 뭐가 문제였을까.. [결과] 몽구스 버전이 6.0이상이라 발생하는 이유였다. 6.0이상이라면 {useNewUrlParser:true, uiseUnifiedTopology:true, useCreateIndex:true, useFindAndModifiy:false} 이 내용이 기본값이된..

오류 : TypeError: Cannot read properties of null (reading 'tagName') 오류 발생 지점은 다음과 같다. 필자의 경우는 기존 HTML을 NextJS로 옮기기 위해 기존 HTML구조를 그대로 가져왔는데 , 의 위치가 nextJS 규칙에 맞지않게 되어있었던것이 오류의 원인이였다. 왜냐하면 일반적인 HTML코드의 내부스타일은 head안에 작성되니까. 따라서 이렇게 수정한 뒤 TypeError: Cannot read properties of null (reading 'tagName') 에러는 해결되었다.

리액트에서 만나는 이 오류는 새로운 라이브러리들을 다운로드 받아 사용하려고 할때 종종 나타났던 오류이다. 해결법은 간단하다. 1. 아래의 파일 및 폴더를 삭제한다. [File] package-lock.json [Directory] node_modules 2.아래의 명령어를 사용하여 모듈들을 재설치해준다. [Command] npm install *명령어를 실행해줄때는 명령어를 실행하는 경로를 항상 유념해주자 ( 올바른위치에서 커맨드를 실행하는가? ) =>어이없게도, 본인은 잘못된 위치에서 커맨드를 수행해서 삽질을해본적이있다..ㅎㅎ 3.실행 [Command] npm start 모듈을 찾을 수 없다라는 리액트 관련 오류는 위의방법으로 모두 해결했던것같다. 오류를 겪으시는 분들 모두 잘 해결되시기를.. [좀 더..