필요성 / 중요성 리액트 컴포넌트 렌더링이 일어나는 중요 원인 중 하나가 props의 동등 비교에 따른 결과이다. JS에서의 동등비교가 일어나는 로직에 대해 잘 알고 있어야 렌더링 방지 및 렌더링 최적화 등의 기능을 올바로 활용할 수 있다. 데이터 타입 / 값을 저장하는 방식의 차이 원시 타입(primitive type)과 객체 타입(object/reference type)이 있는데, 객체를 제외한 모든 것들이 원시 타입에 속한다. 원시 타입은 불변 형태의 값으로 저장되고, 객체 타입은 변경 가능한 형태로 저장이 된다. 객체는 눈에 보이는 value가 동일하더라도 참조가 다르기 때문에 값이 같지 않다. 그러나 같은 value는 동일한 주소에 저장이 되기에 비교 결과가 같게 나온다. const hello1..

브라우저 HTML, CSS, JS를 실행하여 렌더링하는 것이 주요 목적으로 Client-side APIs(DOM, BOM, Canvas, XMLHttpRequest, fetch, SVG, Web Storage...)를 제공한다. node.js 브라우저 외부에서 JS 실행이 주요 목적으로 브라우저와 동일하게 ECMAScript를 제공하지만, Client-side APIs 대신에 Node.js 고유의 API를 제공한다.

자바스크립트의 특징 중 하나는 인터프리터 언어라는 것이다. 인터프리터 언어 vs 컴파일러 언어 실행이전 작업 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간코드인 바이트코드로 변환 후 실행 코드가 실행되기 이전 단계인 컴파일 타임에 소스코드 전체를 머신 코드로 변환 후 실행 실행파일 인터프리터는 실행파일을 생성하지 않고 컴파일러는 생성한다. 단계의 분리 인터프리트 단계와 실행 단계가 분리되어 있지 않아서 한 줄씩 바이트코드로 변환하고 즉시 실행한다. 컴파일 단계와 실행 단계가 분리되어 있어 컴파일 단계를 거치고 실행 파일을 실행한다. 과정의 수행 코드가 실행될 때마다 인터프리트 과정이 반복적으로 수행된다. 실행에 앞서 컴파일은 한번만 수행된다. 코드실행 속도 인터프리트 단계와 실행 단계가 분리되..

JS의 역사 1995년 탄생 1999년 표준화 완료 2005년 AJAX 등장 비동기 웹 애플리케이션 개발 가능 폭발적인 UX 향상 2008년 V8엔진 출시(Google) 2009년 node.js, 서버 개발 활성화(지각변동) 2015년 ECMAScript6(ES6) 버전 출시 2016년 FE Framework 대중화(React, Angular, Vue), SPA 개발 활성화 JS 언어적 특징 객체 지향 프로그래밍 지원 동적언어 함수형 프로그래밍 비동기 처리 클라이언트/서버 모두 사용가능

여러 파일 관리 웹개발을 할 때에 사실 html 파일 하나에 모든 코드를 입력하여도 코드 동작에는 지장이 없다. 하지만, 보통 html파일, css파일, js파일로 구분하여 작업을 진행하는 것이 일반적이다. 스타일과 관련된 항목을 수정할 때에는 바로 CSS 파일로 가고, 기능구현과 관련된 것을 추가/수정 할 때에는 바로 js 파일로 가서 작업을 진행하면 되는 큰 이점이 있기 때문이다. js파일 여러개 관리하기 보통 js 파일이 코드의 양이 매우 많다. 그리고 수많은 함수들로 이루어져 있어서, 수백줄 혹은 수천줄이 되는 코드들을 일일이 스크롤하며 파악하는 것은 비효율적이고 정신건강에 매우 해롭다. 따라서 영혼의 평안을 추구하는 이들은 js파일명을 기능 구현 단위로 쪼개어 코드를 작성하고, 각 파일들을 하나..

.every() ??? 배열 안의 모든 요소를 특정 조건에 대하여 검사하는 함수. array.every(callbackFn, thisArg) 형태로 사용 Boolean 값을 반환함 callbackFn: Boolean 값을 반환해야 함 thisArg: 선택사항, callbackFn을 끝내는 조건 예시 function isBigEnough(element, index, array) { return element >= 10; } [12, 5, 8, 130, 44].every(isBigEnough); // false [12, 54, 18, 130, 44].every(isBigEnough); // true console.log([1, , 3].every((x) => x !== undefined)); // true ..