내직업은 IT종사자 (44) 썸네일형 리스트형 쿠키, 세션, 웹 스토리지 차이 (cookie, session, web storage) 1. 쿠키, 웹스토리지 (로컬스토리지, 세션스토리지) 생성 배경 HTTP는 요청과 응답을 주고 받아 한 사이클이 종료되면 연결이 끊어지는 무상태성을 가지고 있기 때문에 클라이언트의 상태를 보존하지 않습니다. 클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요시마다 데이터를 꺼내서 사용하는 방식으로 HTTP단점을 보완하고자 쿠키와 웹 스토리지를 사용합니다. 2. 쿠키(cookie)란? 만료기간이 있는 클라이언트(브라우저) 단에 저장하는 키와 값이 들어가있는 작은 데이터 파일 입니다. 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효시간이 정해지면 브라우저가 종료되도 인증이 유지됩니다. 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조합니다. 클라이언트에 300개의 쿠키 저장 가능, 하나.. 쿠버네티스(kubernetes)와 도커(docker)의 개념 쉽게 정리 목차 쿠버네티스와 도커의 차이점 쿠버네티스의 역할 어플리케이션 배포 환경의 변화 요약 1. 쿠버네티스와 도커의 차이점 쿠버네티스란? 컨테이너를 오케스트레이션 하는 도구 (예를 들어 여러 서버 (노드)에 컨테이너를 분산해서 배치하거나, 문제가 생긴 컨테이너를 교체하거나, 컨테이너가 사용할 비밀번호나 환경 설정을 관리하고 주입해 주는 일 등, 컨테이너를 분산 배치, 상태관리 및 컨테이너의 구동환경까지 관리해주는 역할을 하는 도구) 도커란? 컨테이너를 다루는 도구 , 컨테이너 런타임 프로그램 중 가장 유명하고 많이 쓰이는 종류입니다. *오케스트레이션 이란? 여러개의 컴퓨터 시스템, 애플리케이션 또는 서비스를 조율하고 관리하는 것으로, 여러개의 작업을 함께 연결하여 크기가 큰 워크 플로우나 프로세스를 실행하는.. [javascript] lodash.js 와 native 속도 차이, 그래도 lodash를 사용하는 이유 목차 lodash의 정의와 장점 lodash적용 방법(CDN, npm install, 프로젝트 적용방법) 자주쓰이는 함수, native vs lodash 속도비교 번외 헷갈렸던 점 기록... 1. lodash 의 정의와 장점 편리하게 코드를 작성하고 웹표준에 효율적으로 맞출 수 있게 해주는 Node.js 패키지 입니다 객체, 배열 등의 데이터 구조를 간편하게 함수형으로 다룰수 있고, 쉽게 변환하고 쉽게 값을 추출할 수 있어서 편리하게 코드를 작성할 수 있습니다. 그렇기 때문에 빠른 작업과 간결한 코드를 사용할 수 있습니다. 예를들어 array나 object를 반복문을 돌면서 처리해야할 것들을 한줄로 구현할 수 있습니다. -es6와 성능을 비교하자면 몇몇 함수에서 es6 가 lodash보다 속도가 더 빠.. ref, reactive 어떤 것이 더 좋을까? ref와 reactive 차이점 목차 ref()는 무엇인가? reactive()는 무엇인가? ref()와 reactive()의 차이점 ref(), reactive() 어떤것을 쓰면 좋을까? vue3(Composition api)에서 반응형 data를 사용하는 방법에는 ref, reactive가 있습니다. 1. ref()는 무엇인가? 반응형데이터를 사용할때 쓰이는 vue3에서 추가된 Composition API이며 원시타입일 때 주로 사용합니다. (String, Number, Boolean...) .value 속성에 새값을 할당 할 수 있습니다. 즉, .value로 변화하는 값을 즉시사용할 수 있으며 즉시 변화시킬 수도 있습니다. 주로 원시타입일 때 사용하지만 object 타입도 사용 가능합니다. (Array, Object..) Obje.. [vue] v-if와 v-show의 차이점 , vue3에서 v-if와 v-show 목차 v-if란 v-show란 vue3에서 v-show사용시 주의할점 v-if와 v-show 중 어떤것을 쓰는것이 좋을까?\ 요약: v-if와 v-show의 가장 큰 차이점은 v-if는 조건이 맞지않으면 아예 랜더링 하지않고 v-show는 조건에따라 css 로 display: block/ display: none처리가 됩니다. 1. v-if v-if="조건"으로 쓰면 조건의 참, 거짓 결과값에 따라 요소를 표시할지 안할지 결정할 수 있습니다. 여러가지 요소를 표시/표시하지않음 으로 한꺼번에 하고 싶으면 아래와 같이 wrapper에 v-if를 주면 됩니다. 안뇽 title ... 2. v-show v-show는 v-if와 동일하게 화면에 보여주냐 안보여주냐를 조건문 값을통해 결정할 수 있는데 v-if와 .. [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: .. 이전 1 2 3 4 5 6 다음
