FrontEnd

[React] Warning: Each child in a list should have a unique "key" prop. 에러 원인 및 해결방법

리스트를 map메서드로 보여주던 중 에러 발생 Warning: Each child in a list should have a unique "key" prop. 에러 발생 코드 {chatList.map((value, index) => ( index로 key값을 주는 것을 지양한다고 한다. 항목들이 삽입,삭제 될 경우 독립적인 key값이 아니게 된다..! 2. key={value} -> 이 역시도 리스트들 중 같은 value값이 존재하면 key값은 독립적이지 않다. 결론 순회하고 있는 각 배열 값의 id로 key값을 부여하였다. 이 id값은 데이터베이스에 저장되어 있는 id값이기 때문에 삽입, 삭제가 되어도 독립적인 값이다. {chatList.map((value, index) => (

[React] npm start 시 ERR_CONNECTION_REFUSED (사이트에 연결할 수 없음 localhost에서 연결을 거부했습니다.)

어느날 코드도 설정도 바꾸지 않았는데 npm start 를 하니 이런 에러를 만나게 되었다. 이게 정말 막막했던 이유는 localhost자체가 안되는 것이 아니라 다른 프로젝트는 npm start 했을 때 실행이 잘 되는데 이 프로젝트만 안된다는 것이었다. 현재 react개발을 맡고 있고 java와 spring으로 백엔드 두명이 개발 중이며 통신 확인은 백엔드 팀원 노트북 ip에 내가 접속(같은 와이파이에 없을 경우 포트포워딩)하여 진행하고 있었다. 여태 통신 확인도 잘 되다가 정말 불쑥 이런 에러를 보게 되었다. 끝없는 구글링과 여러 자문을 구해 내가 시도한 방법 1. 인터넷 연결 확인 -> 인터넷 연결 때문 아님 2. node_modules, package-lock.json 삭제 후 캐시 클린 작업 ..

[JS] 옵셔널 체이닝(Optional chaining) 연산자 - 객체에 안전하게 접근하기

✅ 옵셔널 체이닝 연산자 (?.) 에 대해 정리해보자! 1. 형식 객체 ?. 키 2. 의미 왼쪽 객체가 null, undefined가 아닌 경우에만, 객체.키 값을 참조한다.(왼쪽 객체가 null, undefined이면 undefiend를 반환한다) 3. 활용 객체의 프로퍼티를 참조할 때, null 체크를 편하게 할 수 있다.(여러번 중첩 사용 가능) 4. 예시코드 const obj_1 = null; console.log(obj_1.name); // error 발생 console.log(obj_1?.name); // undefined const obj_2 = { name: 'juda', family : { father: '아빠', mother: '엄마' } } console.log(obj_2?.name)..

[JS] 단축평가 ( 논리합 연산자 ||, 논리곱 연산자&& )

- 단축 평가란? 논리합 연산자인 || 와 논리곱 연산자인 && 는 왼쪽부터 오른쪽으로 평가를 진행한다. 평가결과가 나오면 끝까지 진행하지 않고 결과를 반환하는 것을 단축평가라 한다. 피연산자를 그대로 반환 (타입 변환하지 않음) 하는 것이 특징! 1. 논리합( || ) 연산자 단축평가 둘중 하나만 true 이면 true로 평가되므로 왼쪽 피연산자가 true이면 바로 왼쪽 피연산자를 그대로 반환한다. 문자열의 경우 빈 문자열이 아닌 경우는 모두 true로 평가된다 "something" || false; // "something" "something" || true; // "something" 왼쪽 피연산자가 false 인 경우 오른쪽 피연산자를 그대로 반환한다. false || "something"; /..

[React] 프로젝트 생성(CRA) 및 설치 (+ typescript 버전)

1. CRA 로 react 프로젝트 생성 npx create-react-app 프로젝트명 1-1. typescript를 사용할 경우 npx create-react-app 프로젝트명 --template typescript 2. styled-components, react-router-dom, swr 설치 styled-components 설치 (javascript) npm i styled-components styled-components 설치 (typescript) -> typescript에서 오류없이 사용하기 위해서는 styled-component의 type들을 가지고 와야한다. npm i styled-components @types/styled-components react-router-dom 설치(j..

[JS] 자바스크립트의 숫자 타입

https://judahhh.tistory.com/21 [JS] 모던 자바스크립트 Deep Dive 6장 - 데이터 타입 6장 - 데이터 타입 자바스크립트의 모든 값은 데이터 타입을 갖는다. 자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 구분 데이터 타입 설명 원시 타입 숫자 타입 숫자, 정수, 실수 구분 없이 judahhh.tistory.com 내가 정리한 이 글을 보고 내가 정리했지만 그 와중에 몰랐던 것을 발견하여 정리해보려고 한다 숫자 타입에 대해 정확히 알지 못하고 정리한 것 같아 부끄럽다!@!!! 자바스크립트의 데이터 타입 중 숫자 타입에 대해서 알아보자 자바스크립트의 숫자 타입 자바스크립트는 독특하게도 숫자 타입이 하나 밖에 없다. int, long, float, double과 같은..

[JS] var, let, const 와 호이스팅(Hoisting)

변수 선언 방식은 var, let, const 3가지가 있는데 var 로 선언이 가능했는데 왜 const 와 let 이 나오고 var은 이제 더 이상 권장하지 않는 것일까? var 키워드로 선언한 변수의 문제점 1) var키워드로 선언한 변수는 중복 선언이 가능하다. var x=1; var y=1; //var키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용 //초기화 문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var키워드가 없는 것처럼 동작 var x=100; var y;//초기화문이 없으므로 이 변수 선언문은 무시됨 console.log(x);//100 console.log(y);//1 이 예제의 var 키워드로 선언한 x변수와 y변수는 중복 선언되었다. 이처럼 var 키워드로 선언한..

[JS] 모던 자바스크립트 Deep Dive 7장 - 연산자

연산자란? 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 만든다. 이때 연산의 대상을 피연산자라고 한다. 피연산자, 그리고 피연산자와 연산자의 조합으로 이루어진 연산자 표현식은 값으로 평가될 수 있는 표현식이다. 7. 1 산술 연산자 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우, NaN을 반환한다. 7.1.1 이항 산술 연산자 연산자 의미 부수 효과 + 덧셈 x - 뺄셈 x * 곱셈 x / 나눗셈 x % 나머지 x 7.1.2 단항 산술 연산자 연산자 의미 부수효과 ++ 증가 o -- 감소 o + 효과 없음 x - 양수를 음수로, 음수를 양수로 반전한 값 반환 x 7.1.3 문..