본문 바로가기

🔥 🔥

(19)
자바스크립트의 원시값(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를 자바스크립..
Call Stack 콜스택 - 콜스택(호출 스택)은 LIFO(후입선출)을 기반으로 하는 자료구조이다 . - 자바스크립트는 '싱글스레드' 기반의 언어이다. 이 말은 즉, 콜스택이 하나라는 의미이다. 백그라운드 - Wep API가 모이는 장소라고 보면 된다. - 백그라운드에는 이벤트리스너나 비동기 API의 경우에만 들어간다. (무조건적으로 들어간다는 말이 아님) 큐 - 백그라운드에서 정해진 시간이 끝난 함수들이 순서대로 들어온다. 이벤트루프 - 콜스택이 비워져있는게 확인되면, 큐에서 대기하고 있는 함수들이 순서대로 이동된다. - 아래 이미지는 Javascript Event Loop를 도식화 한 것이다 - setTimeout이 호출되고 지워질 때, 백그라운드로 이동 → 백그라운드에서 setTimeout의 정해진 시간만큼 보내다가..
CORS란? CORS = Cross Origin Resourse Sharing, 교차 출처 리소스 공유 = 서로 다른 도메인 또는 포트에서 데이터(ex) API의 요청, 응답)를 주고 받을 수 있도록 하기 위한 정책, 메커니즘 예를 들어, 다른 도메인에서 이미지를 가져오거나 웹폰트,css를 가져와서 사용하는 것 CORS의 등장 이유 - Same-Origin Policy, 동일 출처 정책 때문이다, Same-Origin Policy는 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한 하는 보안방식으로 서로 다른 origin에서의 자원 공유를 제한한다. - Same-Origin Policy 적용시 다른 origin 에서의 자원 요청이 불가능하기 때문에, SPA에서 클라이언트와 서버의 도메인을 따로 유지하는 경우 자원..
LocalStorage, SessionStorage, Cookie cookie - cookie는 웹사이트에 의해 유저의 컴퓨터에 놓여지는 작은 텍스트 파일이다. - 최대 4KB의 용량을 가진 매우 작은 양의 데이터이다. - 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용된다. (유저의 신원확인으로 페이지에서 재인증을 거치지 않는다.) - HTTP 요청과 함께 서버로 보낸다. - 문자열만 저장할 수 있다는 제한이 있다. Seesion cookies - 만료일을 포함하지 않는다. but, 브라우저나 탭이 열려있는 동안에만 저장된다.(은행 웹사이트) Persistent cookies - 만료일을 포함한다.만료일까지 유저의 디스크에 저장되고 만료일이 지나면 삭제된다. ↓ HTML5에는 데이터를 클라이언트에 저장할 수 있는 WebSt..