본문 바로가기

반응형

내직업은 IT종사자/javascript

(20)
쿠키, 세션, 웹 스토리지 차이 (cookie, session, web storage) 1. 쿠키, 웹스토리지 (로컬스토리지, 세션스토리지) 생성 배경 HTTP는 요청과 응답을 주고 받아 한 사이클이 종료되면 연결이 끊어지는 무상태성을 가지고 있기 때문에 클라이언트의 상태를 보존하지 않습니다. 클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요시마다 데이터를 꺼내서 사용하는 방식으로 HTTP단점을 보완하고자 쿠키와 웹 스토리지를 사용합니다. 2. 쿠키(cookie)란? 만료기간이 있는 클라이언트(브라우저) 단에 저장하는 키와 값이 들어가있는 작은 데이터 파일 입니다. 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효시간이 정해지면 브라우저가 종료되도 인증이 유지됩니다. 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조합니다. 클라이언트에 300개의 쿠키 저장 가능, 하나..
[javascript] lodash.js 와 native 속도 차이, 그래도 lodash를 사용하는 이유 목차 lodash의 정의와 장점 lodash적용 방법(CDN, npm install, 프로젝트 적용방법) 자주쓰이는 함수, native vs lodash 속도비교 번외 헷갈렸던 점 기록... 1. lodash 의 정의와 장점 편리하게 코드를 작성하고 웹표준에 효율적으로 맞출 수 있게 해주는 Node.js 패키지 입니다 객체, 배열 등의 데이터 구조를 간편하게 함수형으로 다룰수 있고, 쉽게 변환하고 쉽게 값을 추출할 수 있어서 편리하게 코드를 작성할 수 있습니다. 그렇기 때문에 빠른 작업과 간결한 코드를 사용할 수 있습니다. 예를들어 array나 object를 반복문을 돌면서 처리해야할 것들을 한줄로 구현할 수 있습니다. -es6와 성능을 비교하자면 몇몇 함수에서 es6 가 lodash보다 속도가 더 빠..
[javascript] javascript engine 이벤트 루프(Event Loop) 와 틱(tick) 목차 자바스크립트 엔진에 대해서 자바스크립트 엔진 동작 원리 런타임 호출스택 비동기콜백 & event loop 1. 자바스크립트 엔진에 대해서 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터(해석기), 대체적으로 웹 브라우저에서 사용됩니다. 엔진에 의한 인터프리터 방식이므로 별도의 컴파일 과정이 필요없다. 즉 웹브라우저에서 즉시 해석되어 실행됩니다. 자바스크립트는 웹브라우저 뿐만아니라 Node.js, Electron, React Native 등의 프로젝트와 그 밖의 다양한 곳에서 동작합니다. *브라우저 별 엔진 종류 스파이더몽키(SpiderMonkey) 최초의 자바스크립트 엔진. 넷스케이프 브라우저를 위해 브렌던 아이크(JS 창시자)에 의해 개발되었다. 엔진은 C++로 구현 그 뒤로 (자바스크립트 ..
[javascript] javascript는 메모리관리가 어떻게 될까? (feat. 메모리 누수 사례) 목차 메모리의 생명주기 메모리의 저장공간 Heap과 Stack 가비지콜렉터 메모리 누수 사례 1. 메모리의 생명주기 자바스크립트에서 변수나 함수를 사용할 때 JS엔진은 메모리를 할당하고 더이상 필요하지 않으면 해제 합니다. 메모리 할당은 '이 공간을 내가 쓰겟다'라고 찜해놓는 과정이며, 메모리 해제를 하면 공간이 확보되어 또 다른 용도로 사용할 수 있게 됩니다. [메모리 할당] js 엔진에서 알아서 처리되는 과정이며, 자바스크립트는 생성한 객체에 필요한 메모리를 할당 합니다. (* 메모리관점에서 객체는 변수 타입 object뿐만 아니라 함수와 함수의 스코프까지 칭합니다.) [메모리사용] 변수에서 읽거나 쓰는 것 [메모리 해제] js 엔진에서 알아서 처리되며, 할당되었던 메모리가 해제되면서 해제된 메모리는..
[javascript] 변수 참조타입 메모리 접근 방식, 참조타입 복사가 필요한 이유 (shallow copy, deep copy) 목차 원시값, 참조값이란? 그리고 복사가 필요한 이유 얕은 복사의 정의와 방법 깊은 복사의 정의와 방법 들어가기전에! 자바스크립트 엔진은 가상머신으로 돌아가는데 버츄얼 머신 메모리 모델에는 힙과 콜스택 영역으로 나눠져 있습니다. (힙: 참조타입, 콜스택: 원시타입) 1. 원시값, 참조값 이란? 그리고 복사가 필요한 이유 1.1 원시값이란? 원시값은 기본자료형을 의미합니다. 예: Number, String, Boolean, Null, undefined 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장됩니다. 1.2 원시값은 어떻게 작동하는가? 자바스크립트에서 원시타입을 선언(declare)하면 이는 stack에 저장됩니다. * stack이란 LIFO(last in first out: ..
[javascript] 유사배열객체(Array-like Objects) 란? 대체 무엇인가.. 요약! - 배열은 1) length가 있다. 2) index가 0부터 시작해서 1씩 증가한다. - 유사배열의 조건도 위와 같다. 1) length 속성을 포함해야한다. 2) 숫자 형태의 index가 존재해야한다. - 유사배열은 array가 아니다! (Array.isArray(유사배열) === false) 1. 유사배열이란? 유사배열(array-like objects)은 배열처럼 대괄호로 감싸져 있으며 각 요소가 indexing을 통해 담겨져 있는 형태를 띈다. 유사배열은 함수에서 처리 결과로 배열을 반환하고 싶을 때, Array에서 기본으로 내포되어있는 기능을 제공하고 싶지 않거나 Array에 내포되어있지 않은 기능을 제공하고 싶을 때 사용한다. 2. 유사배열의 예 사진처럼 페이지 내의 특정한 선택자를 ..
[javascript] 배열 생성하는 여러가지 방법(ES6) (배열생성자 new Array() / Array.of() / Array.from() ) javascript에서 배열을 생성하는 방법은 변수에 대괄호를 안에 요소를 넣어서 정의해 줄 수 있고, const arr = ['apple', 'banana', [1,2,3]]; 그 외에 Array() 생성자, Array.of(), Array.from()을 이용해서도 만들 수 있다. let arr1 = new Arr(100); //[empty, empty .... 100개의 empty] arr = new Arr(4,6,8); // [4,6,8] let arr2 = Array.of(2); //[2] arr2 = Array.of(2,4,6,8); // [2,4,6,8] let arr3 = Array.from('test'); // ['t','e','s','t'] 1. new Array() 생성자 Array 생..
[javascript] 다차원 배열을 일차원으로 변경하는 방법 flat(), flatMap(), map() 함수형 프로그래밍을 하기 위해서 즉, 명령형 프로그래밍이 아닌 선언형 프로그래밍을 하기 위해서는 언어 내부에 포함된 고차함수(Higher-Order Function) (예: Array prototype인 map, filter, reduce) 를 잘 이용해야한다. 여기에 ECMAScript 2019(ES10) 부터 새롭게 flat()과 flatMap() 이 추가되었다. 둘 다 중첩된 배열 구조를 평탄화 하기 위해 사용하는 함수이며 IE에서는 호환이 되지않는다. 명령형프로그래밍이란? ↓ 더보기 명령형(imprerative) vs 선언형(declarative) 명령형 프로그래밍은 어떻게 할 것인가 (How)를 표현하고, 선언형 프로그래밍은 무엇을 할 것인가 (What)을 표현한다. //명령형 function..

반응형