본문 바로가기

🔥 🔥

(14)
yarn berry 기존 프로젝트에서 사용하던 npm과 yarn1의 단점 npm 비효율적인 의존성 탐색 lock 파일이 없어서 생기는 의존성 이슈 문제 (npm도 추후에 npm5 버전 업데이트 이후로 package-lock.json을 생성하여 패키지 잠금을 지원하게 되었다.) (해당 이슈에 대해 알아보던 중 초기 기사문을 읽어볼 수 있었다.)[https://www.bloter.net/newsView/blt201604040002] 보안이슈 패키지가 늘어날수록 성능저하 발생 위 문제 해결을 위해 facebook을 중심으로 google 등 회사들이 npm의 문제를 해결하기 위해 새로운 패키지 매니저인 yarn을 발표하였다. yarn 왼쪽이 npm, 오른쪽이 yarn 방식이다. 다운받은 패키지 데이터를 cache에 저장하여 중복된..
JavaScript 일급 객체 (first class citizen) 일급객체란? 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. (출처 : 위키) 쉽게 말해 특정 언어에서 객체를 값으로 취급하는 것을 말한다. ✅ 자바스크립트에서는 함수가 일급객체이다. 아래와 같은 조건을 만족하는 객체는 일급객체를 의미한다. 1. 변수나 상수에 저장 및 할당할 수 있어야 한다. let fruits = function(){ return "apple"; } console.log(fruits); 2. 파라미터(객체의 인자)로 전달할 수 있어야 한다. let fruits = function(){ let apple = 10; return apple; } let bo..
디바운스(Debounce)와 스로틀(Throttle) 알아보기 기술면접을 준비하면서 디바운스와, 스로틀을 알게 되었다. 아직 프로젝트에 직접 적용해보지 않았지만 미리 어떤 건지 익혀두기 위해 정리해두려 한다. 디바운스, 스로틀은? - DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트를 제어하는 방법이다. 디바운스와 스로틀을 비교해보자면, 디바운스는 아무리 많은 이벤트가 발생해도 무시하고 특정 시간 사이에 어떤 이벤트도 발생하지 않았을 때, 마지막 한 번만 해당 이벤트를 발생시킨다. 스로틀은 일정한 시간이 지날 때마다 해당 이벤트를 발생시키고, 아래 링크에서 디바운스와 스로틀의 차이를 확인할 수 있다. The Difference Between Throttling, Debouncing, and Neither ... code..
자바스크립트의 원시값(Primitive Type)과 참조값(Reference Type) 자바스크립트는 원시타입과 참조타입 두가지의 자료형이 제공된다. 원시 타입 - null, undefined, string, number, boolean, symbol 참조 타입 - Array, Object, Function 원시 타입 데이터는? - 변수에 할당될 때 메모리 상에 고정된 크기로 저장되고 해당 변수가 원시 데이터의 값을 보관한다. - 원시 타입 자료형은 모두 변수 선언, 초기화, 할당시 값이 저장된 메모리 영역에 직접적으로 접근한다, 즉 변수에 새 값이 할당 될 때 변수에 할당된 메모리 블럭에 저장된 값을 바로 변경한다는 뜻이다. - 변수에 새로운 값을 할당하면 변수가 참조하는 메모리 공간의 주소가 바뀌게된다. - 값을 복사 참조 타입 데이터는? - 자바스크립트는 객체의 메모리를 직접 조작하지..
배열에서 최솟값 찾기 | JS - Math.min() let arr = [5, 7, 1, 3, 2, 9, 11]; function solution(arr) { return Math.min(...arr); //spread연산자 사용 } //1 - func.apply(thisArg, [argsArray]) - Math.min.apply() let arr = [5, 7, 1, 3, 2, 9, 11]; function solution(arr) { return Math.min.apply(null, arr); } //1 - arr[0]을 기준으로 for문 돌리기 let arr = [5, 7, 1, 3, 2, 9, 11]; function solution(arr) { let min=arr[0]; for(let i=0; i
Function Expressions과 Function Declarations 함수 표현식과 함수 선언식 Function Declarations 함수 선언식 function 함수명(){ //구현로직 } Function Expressions 함수 표현식 let 함수명 = function (){ //구현로직 } Function Expressions 함수 표현식 Function Declarations 함수 선언식 호이스팅 영향을 받지 않는다. 호이스팅의 영향을 받는다. 클로저로 사용 or 콜백으로 사용
실행 컨텍스트 (Execution Context) Execution Context, 실행 컨텍스트란? - 자바스크립트 코드가 실행되는 환경을 의미한다. - 세 가지 타입의 실행 컨텍스트가 있다. (마지막 타입의 eval은 지금 공부하지 않는다.) 1. Global Execution Context - 자바스크립트 엔진이 실행될 때(코드가 없더라도) Global Execution Context가 생성된다. - 생성과정에서 전역 객체인 Window Obiect를 생성하고 this가 Window객체를 가리킨다. 2. Function Execution context - 함수가 호출될 때마다 함수에 대한 Execution context가 생성된다. Call stack - 코드가 실행되면서 생성되는 Execution context을 저장하는 자료구조이다. => 엔진..
모듈 번들러, 트랜스 파일러 프론트엔드 개발은 모듈단위로 파일을 엮어서 개발을 진행한다. 이 모듈단위로 개발을 진행하며 아래와 같은 문제가 발생한다. 1. 모듈은 서로 의존성을 띄는데 이 모듈 사이의 우선순위는 어떻게 정할 것인가 2. 모듈이 많아질수록 HTTP 요청이 많아지게 되는데, 이러면 오버헤드의 문제는 어떻게 해결할 것인가 3. ES6스펙의 코드를 어떻게 처리 할 것인가 위와 같은 문제를 해결하기 위해 모듈 번들러가 등장했다. 각각의 의존성을 해결하여 하나의 자바스크립트 파일로 만들어주는 도구이다. 모듈 번들러로 유명한 번들러로 webpack, parcel, rollup이 있다. 트랜스 파일러는 특정 언어로 작성된 코드를 비슷한 언어로 변환해주는 도구이다. - ES6를 ES5로 변환시켜준다 - react JSX를 자바스크립..