브라우저가 렌더링하는 과정
- URL을 해석한다.
- DNS(Domain Name System)를 조회한다.
- 해당 IP가 존재하는 서버로 이동한다.
- ARP(Address Resolution Protocol)을 이용하여 MAC 주소 변환을 한다.
- TCP 통신을 통해 Socket을 연다.
- 서버는 응답을 반환한다.
- 브라우저는 렌더링한다.
https와 https의 차이
| http | https | |
|---|---|---|
| 포트 | 기본 포트 80 | 기본 포트 443 |
| 용도 | 이전 텍스트 기반 웹 사이트 | 모든 최신 웹 사이트 |
| 보안 | 추가 보안 기능 없음 | 퍼블릭 키 암호화에 SSL 인증서 사용 |
| 장점 | 인터넷을 통한 통신 지원 | 신뢰성 및 검색엔진 순위 개선 |
http : 암호화 되지 않은 데이터를 전송한다.
https : http 요청 및 응답을 SSL 및 TLS 기술에 결합한다.
함수형 프로그래밍
프로그램은 순차, 분기, 반복, 참조로 구성된다.
함수형 프로그래밍의 장점
1. 상태가 없기 때문에 사이드 이펙트가 없다.
2. 재사용성이 높다.
3. 코드가 짧고 간결하다.
함수형 프로그래밍의 단점
1. 변수조작이 되지 않는다.
2. 함수를 잘개 쪼개야한다. 때문에 많아져서 복잡해진다.
3. 많은 숙련도가 요구된다.
선언형 프로그래밍과 명령형 프로그래밍
명령형 프로그래밍 : 문제를 어떻게 해결해야 하는지 컴퓨터에게 명령을 내리는 방법
let a = [1, 2, 3, 4, 5];
for(let i = 0; i < 5; i++) {
if (a[i] % 2 === 0) {
console.log(a[i]);
}
}선언형 프로그래밍 : 무엇을 해결해야 할지에 집중하고 해결방법은 컴퓨터에 위임하는 방법
[1, 2, 3, 4, 5]
.filter((item) => item % 2 ===0)
.forEach((item) => console.log(item));javaScript는 멀티패러다임이 가능하므로 둘다 사용하자!
객체지향과 프로토타입
객체지향의 객체는 현실에 있는 것을 추상화한 것
(현실에 존재하는 것을 코드로 옮기는 것이 아니다!)
추상이란 사물이 지니고 있는 여러 측면중 특정한 부분만 보는 것을 의미한다.
객체지향
- 객체 위주로 설계하고 프로그래밍하는 패러다임
- 객체지향 언어에선 추상화의 최소 단위가 객체다.
- 각각의 객체는 메세지를 주고 받을 수 있다.
객체지향의 오해
- 객체지향은 패러다임일 뿐 언어와는 관계가 없다.
- 언어는 지향하는 것을 조금 더 편하게 구현할 수 있게 도와줄 뿐이다.
- 따라서 클래스가 없는 JavaScript, Go, C언어로도 객체지향 프로그래밍을 할 수 있다.
- 자바스크립트는 프로토타입을 통해 객체지향을 표현한다.
- 절차지향보다 객체지향이 무조건 더 좋은 것은 아니다.
- 만들어야하는 프로그램에 따라 절차지향이 더 적합할 수 있다.
- 비교적 간단한 프로그램일수록 절차지향이 더 만들기 쉽고 직관적이다.
- 객체지향은 객체간 통신하기 때문에 흐름이 더 직관적이어서 더 복잡한 프로그램에 적합하다.
자바스크립트의 객체 : 클래스 기반 언어처럼 속성(Attribute)과 행위(Method)를 정의할 수 있다.
객체 생성방법
// 객체 리터럴
const person = {
name: "송인재",
move : function(destination) {
console.log(`${name}`이(가) 이동합니다.);
},
};// Object 생성자 함수
const person = new Object();
person.name = "송인재";
person.move = function(destination) {
console.log(`${name}`이(가) 이동합니다.);
};// 생성자 함수
function Person(name, company, move) {
this.name = name;
this.move = function(destination) {
console.log(`${name}`이(가) 이동합니다.);
};
}프로토 타입 : 기존의 객체를 복사하여 새로운 객체를 생성하는 방식
function Person(name, company, move) {
this.name = name;
Person.protype.getName = function() {
return this.name;
};
Person.protype.setName = function(name) {
this.name = name;
};
}
const song = new Person("송인재");
const kim = new Person("김인재");
console.log(song); // Person { name: '송인재" }
console.log(Person.constructor); // [Function, Function]
console.log(Person.__proto__); // [Function]
console.log(kim.constructor); // [Function: Person]
console.log(song.__proto__); // Person { getName : [Function], setName: [Function] }상속 흉내내기(1) : 부모 객체를 이용하여 프로토타입 함수 정의하기
function Person(name) {
this.name = name;
}
Person.prototype.getName = function () {
return this.name || "인재";
}
function Korean(name) {}
Korean.prototype = new Person();
const song = new Person("송인재");
const kim = new Korean("김인재");
console.log(song.getName()); // 송인재
console.log(kim.getName()); // 인재상속 흉내내기(2) : 부모 생성자를 빌려 쓸 수 있다.
function Person(name) {
this.name = name;
}
Person.prototype.getName = function () {
return this.name || "인재";
}
function Korean(name) {
Person.apply(this, arguments);
}
Korean.prototype = new Person();
Korean.prototype.setName = function(name) {
this.name = name;
};
const song = new Person("송인재");
const kim = new Korean("김인재");
console.log(song.getName()); // 송인재
console.log(kim.getName()); // 김인재
kim.setName("이인재");
console.log(kim.getName()); // 이인재Object.create : 기존 객체를 재활용할 수 있다.
const song = {
name: "송인재",
getName: function() {
return this.name;
},
};
const kim = Object.create(song);
kim.name = "김인재";
console.log(song.getName()); // 송인재
console.log(kim.getName()); // 김인재
console.log(lee.__proto__); // {}
console.log(kim.__proto__); // { name: "송인재", getName: [Function: getName] }쿠키와 세션, 웹 스토리지
Cookie
- 클라이언트에서 저장, 관리하는 데이터들, 브라우저를 닫아도 데이터를 유지할 수 있다.
- 서버에서 Set-Cookie를 응답 헤더로 내려주면 클라이언트는 받아서 저장한다.
- 클라이언트에서 자체적으로 조작할 수 있다.
- 각 상태에 수명을 정할 수 있다.
Set-Cookie
- Set-Cookie: 키=값, 옵션
- 응답헤더에 담으면 브라우저가 알아서 저장한다.
- 각 데이터엔 여러 옵션이 존재한다.
expires : 쿠키 만료 날짜를 지정한다.
HttpOnly : JavaScript에서 쿠키에 접근 못하도록 막는다.
Max-Age: 쿠키 수명을 정한다. 이때 Expires는 무시된다.
Domain : 도메인이 일치하는 요청만 쿠키가 전송된다.
Path : 패스와 일치하는 요청만 쿠키가 전송된다.
쿠키의 취약점
- XSS(Cross-Site Script) 공격을 당할 수 있다.
- JavaScript를 이용해 악의적ㅇ니 사용자가 다른 사용자의 쿠키값을 탈취할 수 있다.
- 쿠키를 암호화하지 않고 보내면 쿠키값을 중간에 탈취 당할 가능성이 있다. (->HTTPS)
Session
- HTTP Session Id를 식별자로 사용자를 구분한다.
- 클라이언트는 HTTP Session Id를 쿠키 형태로 저장한다.
- 서버 자체적으로 기록하고 관리한다.
세션의 문제점
- 세션을 서버에 파일로 저장하기 때문에 사용자가 많아지면 메모리 관리가 어렵다.
때문에 서버와 클라이언트간 인증은 별도 토큰을 사용하고
쿠키는 클라이언트 자체의 지속적인 데이터 관리 용도로 많이 사용된다.
Web Storage
- 클라이언트에 데이터를 저장하기 위한 새로운 방법
- HTML5부터 등장했다.
- 쿠키에서 하기 힘든 것들을 지원하기 위해 등장했다.
- Local Storage와 Session Storage가 있다.
Local Storage
- 로컬 스토리지에 데이터를 저장하면 반영구적으로 데이터가 저장된다.
- 브라우저를 종료해도 계속해서 데이터가 남는다.
- 저장했던 도메인과 이용하는 도메인이 다른 경우엔 접근할 수 없다.
- 쿠키와 마찬가지로 Key-Value 형태로 저장한다.
Session Storage
- 새 창을 생성할 때마다 개별적으로 저장되는 데이터를 관리한다.
- 브라우저를 닫는 순간 사라진다.
- 같은 도메인이어도 세션이 다르면 데이터에 접근할 수 없다.
- 쿠키와 마찬가지로 Key-Value 형태로 저장한다.
IndexedDB
- Transactional한 로컬 데이터베이스
- 새로운 웹 브라우저 표준 인터페이스
- 많은 양의 구조화된 데이터를 저장할 때 유용하다.
- 비동기적으로 작동한다.
꿈을 꾸고 도전하기🌟