25장 클래스 자바스크립트는 프토토타입 기반 객체지향 언어다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어다. 하지만 클래스 기반 언어에 익숙한 프로그래머들은 이에 혼란을 느끼는 경우가 생겼고, 이에 ES6에서 클래스가 도입되었다. 클래스 정의 클래스는 class 키워드를 사용하여 정의한다. 일반적이지는 않지만 함수와 마찬가지로 표현식으로 클래스를 정의할 수도 있다. // 클래스 선언문 class Person {} // 익명 클래스 표현식 const Person = class {} // 기명 클래스 표현식 const Person = class MyClass {}; 클래스를 표현식으로 정의할 수 있다는 것은 클래스가 값으로 사용할 수 있는 일급 객체라는 것을 의미한다. 클래..
인증/보안 Cookie 쿠키는 서버에서 클라이언트에 영속성 있는 데이터를 저장하는 방법입니다. 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있습니다. 그러므로 쿠키를 이용하는 것은 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고, 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함입니다. 서버가 클라이언트에 특정한 데이터를 저장할 수 있습니다. 서버는쿠키를 이용하여 데이터를 저장하고 이 데이터를 다시 불러와 사용할 수 있지만, 데이터를 저장한 이후 아무 때나 데이터를 가져올 수는 없습니다. 데이터를 저장한 이후 특정 조건들이 만족되어야 다시 가져올 수 있기 때문입니다. 요청하는 서버의 도메인, 경로, sameSite 등의 조건이 맞아떨어질 경우 같이 전송됩니다 쿠키 옵션 종류..
네트워크 IP / IP Packet IP는 IP 주소(IP address)에 패킷이라는 통신 단위로 데이터를 전달합니다. IP 프로토콜의 대표적인 단점 비연결성 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷을 전송합니다. 비신뢰성 중간에 패킷이 사라질 수 있고, 패킷의 순서를 보장할 수 없습니다. TCP vs UDP TCP(전송 제어 프로토콜, Transmission Control Protocol) 연결 지향 - TCP 3 way handshake(가상 연결) 데이터 전달 보증 데이터 전송이 성공적으로 이루어진다면 이에 대한 응답을 돌려주기 때문에 IP 패킷의 한계인 비연결성을 보완할 수 있다. 순서 보장 만약 패킷이 순서대로 도착하지 않는다면 TCP 세그먼트에 있는 정보를 토대로 다시 패킷 전송..
19장 프로토타입 객체지향 프로그래밍 객체지향 프로그래밍은 프로그램을 멍령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다. 객체지향 프로그래밍은 실세계의 실체(사물이나 개념)을 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작한다. 실체는 특징이나 성질을 나타내는 속성(attribute/property)을 가지고 있고, 이를 통해 실체를 인식하거나 구별할 수 있다. 그리고 다양한 속성 중에서 원하는 프로그램에 필요한 속성만 간추려 내어 표현하는 것을 추상화라 한다. const person = { name : 'HWANG', age : 15 } 이름과 나이 속성으로..
38장 브라우저의 렌더링 과정 구글의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경인 Node.js의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 개발 언어가 되었다. 하지만 자바스크립트가 가장 많이 사용되는 분야는 역시 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드다. 대부분의 프로그래밍 언어는 운영체제나 가상 머신 위에서 실행되지만 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML,CSS 와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다. 이를 위해 브라우저가 HTML,CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게..
[사용자 친화 웹] 웹 표준 & 접근성] 웹 표준 웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙을 의미합니다. 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있습니다. 웹 표준의 장점 유지 보수의 용이성 각 영역을 분리함으로써 유지 보수가 용이해지고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 있습니다. 웹 호환성 확보 웹 표준을 준수하여 웹 사이트를 제작하면 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나오도록 할 수 있습니다. 검색 효율성 증대 웹 표준에 맞춰 웹 사이트를 작성하는 것만으로도 검..
[React 상태관리] Redux 상태 관리 상태 상태는 변하는 데이터입니다. 특별히 UI, 프론트엔드 개발에서는 '동적으로 표현되는 데이터' 입니다. 로컬 상태 로컬 상태는 특정 컴포넌트 안에서만 관리되는 상태를 말합니다. 보통 컴포넌트 내에서만 영향을 끼치는 상태가 로컬 상태로 구분됩니다. 다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터, input box, select box 등과 같이 입력값을 받는 경우가 이에 해당합니다. 전역 상태 전역 상태는 프로덕트 전체 혹은 여러 가지 컴포넌트가 동시에 관리하는 상태를 말합니다. Single source of truth(신뢰할 수 있는 단일 출처 원칙) : 데이터 무결성을 위해, 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 와야 합니다. ..
37장 Set과 Map Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체의 특성은 수학적 집합의 특성과 일치하기 때문에 이를 이용해 교집합, 합집합, 여집합 등을 구현할 수 있다. Set 객체의 생성 Set 객체는 Set 생성자 함수로 생성한다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set(); console.log(set); // Set(0) {} Set 생성자 함수는 이터러벌을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set 개체에 요소로 저장되지 않는다. const set = new Set([1,2,3,3]); console.log(set); // Set(3) {1,2,3} const..
