쿠키는 브라우저에 저장되는 작은 크기의 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부입니다. 쿠키는 주로 웹 서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장합니다. 이게 바로 쿠키입니다. 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달합니다. 쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰입니다. 사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정합니다. 사용자가 동일 도메인에 접속..

useRef () 는 리렌더링하지 않는다. 컴포넌트의 속성만 조회&수정한다. 특정 DOM 선택하기 컴포넌트 안의 변수 만들기 리렌더링 방지하기 1. useRef 가 무엇인가요? 📑 useRef는 .current프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 본질적으로 useRef는 .current프로퍼티에 변경 가능한 값을 담고 있는 상자와 같습니다. 2. useRef 를 언제 사용하나요? 2-1. 특정 DOM 선택하기 🎯 사진 출처: learnjavascriptfast.com JavaScript 를 사용할 때는, 특정 DOM 을 선택해야 하는 상황에 getElementById, querySel..

const 키워드 선언은 블록 범위로 상수를 선언한다. 상수 값은 재할당 할 수 없으며 다시 선언할 수도 없다. const cars = ['BMW', 'Benz', 'Volvo']; cars = ['Audi', 'Tesla', 'Kia']; // 재할당 // Uncaught TypeError: Assignment to constant variable. const로 선언된 상수는 재할당 및 재선언할 수 없다. 따라서 const로 선언한 배열 또한 재할당 및 재선언될 수 업새다. const로 선언된 배열에 값을 재할당하려고 하면 위와 같이 에러가 난다. 에러 메세지에는 변경할 수 없는 값을 수정하려고 할 때 발생하는 TypeError가 뜨며, '상수에 할당을 했습니다.'고 나온다. const cars = [..

require / exports 와 import / export 키워드 자바스크립트 개발을 하다보면 모듈을 불러오는 문법 두가지를 접하게 된다. 이 둘은 비슷하며내서도 달라서 혼돌을 줄 수 있다. 둘 다 외부의 파일이나 라이브러리의 코드를 불러온다는 같은 목적을 가지고 있지만, 전혀 다른 문법 구조를 가지고 있다. require / exports : Node.js에서 사용되고 있는 CommonJS 키워드이고 Ruby 언어 스카일과 비슷하다고 할 수 있다. /* CommonJS */ const name = require('./module.js'); /* CommonJS */ const name = '고양이'; module.exports = name; import / export : ES6에서 새롭게 도입된..

브라우저 저장소 웹 스토리지 : 웹 데이터를 클라이언트에 저장하기 위해 만들어진 키-밸류 형식의 저장소 쿠키 : 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-밸류 형식의 저장소 | 웹 스토리지 로컬 스토리지 세션 스토리지 데이터 유지 브라우저 종료시 보관 브라우저 종료시 삭제 데이터 범위 동일한 도메인 전역 공유 브라우저간 공유 안됨 로컬 스토리지와 세션 스토리지의 차이점은 영구성과 범위에 있다. * 도메인이 같더라도 브라우저가 다르면(탭 브라우저, 다른 브라우저) 브라우저 컨택스트가 다르기 때문에 각각의 세션 스토리지가 형성되어 데이터 공유가 되지 않는다 | 쿠키 우리가 HTTP 요청을 보낼때 서버에 특정 요청을 보내면 서버는 요청 자체만으로는 이 요청이 누가 보낸 것인지 알 수 없..

this 사용 규칙 JavaScript에서 가장 난해하게 쓰이는 곳 마다 바뀌는 this 이다. | this 는 4가지 규칙으로 쓰이고 그 공식을 바탕으로 정해진 결과를 가져온다. 함수안에서 this를 쓰면 함수의 내용만으로는 this가 어떤 값을 가져오는 지 알 수 없다. 함수가 어떤 방식으로 실행하느냐에 따라 this 결정된다. 1. 일반 함수 실행 방식 아래 있는 strict mode가 아닌 이상 무조건 글로벌 객체를 가리킵니다. var age = 1; // global object function foo() { console.log(this.age); //this === global object : 브라우저에서는 window를 가리킨다. } foo(); // 1 (글로벌 객체 실행) new foo..