TIL Day-2

뚜리의 개발일기·2021년 8월 3일

JavaScript TIL js 데브코스 프로그래머스

TIL

목록 보기

2/40

JavaScript 주요 문법

함수형 프로그래밍

상태가 없기 때문에 사이드 이펙트가 없다 (but, 메모리와 성능문제)
함수 단위로 나눠져 재사용성이 높다 (but, 복잡성)
함수의 조합으로 코드가 간결하다 (but, 함수형으로 생각하는 숙력도 필요)

선언형 프로그래밍

함수형 프로그래밍과 유사
사고에 대한 패러다임
무엇을 해결해야할지에 집중하고 해결 방법은 컴퓨터에게 위임하는 방법

함수형에 대해 공부할 때 참고할 교재

객체지향

객체지향의 객체는 현실에 있는 것을 추상화한 것
최소 단위인 객체끼리 메시지를 주고받으며 통신
자바스크립트는 프로토타입을 통해 객체지향을 표현

객체 생성 방법 3가지

객체 리터럴

const person = {
	name: "토리",
    company: "데브코스",
    move: function (destination){
    	console.log(`${destination}(으)로 이동합니다.`);
    },
};

Object 생성자 함수

const person = new Object();
person.name = "토리";
person.company = "데브코스";
person.move = function (destination){
	console.log(`${destination}(으)로 이동합니다.`);
};

생성자 함수

function Person(name, company, move){
	this.name = name;
    this.company = company;
    this.move = function (destination){
    	console.log(`${destination}(으)로 이동합니다.`);
    };
}

프로토타입

자바스크립트의 객체는 속성(Attribute)과 행위(Method)로 정의
객체를 이용하여 추가적으로 객체를 생성
기존 객체를 효율적으로 사용할 수 있는 방법

Object.create() 는 기존의 객체를 재활용

모듈

모듈과 컴포넌트 쉽게 구분하는 방법
모듈은 설계 시점에 의미있는 요소
컴포넌트는 런타임 시점에 의미있는 요소

특징

항상 use strict(엄격 모드)로 실행
모듈 레벨 스코프가 있어 import하지 않는 한 참조 불가
단 한 번만 평가(실행)
지연 실행이 가능하여 모든 DOM이 만들어진 후 실행(defer와 동일)

쿠키와 세션

HTTP 통신
HTTP Request는 기본적으로 상태가 존재하지 않아서
서버는 어떤 브라우저에서 요청이 온 것인지 알 수 없어
헤더에 쿠키를 담으면 서버가 쿠키를 읽어 어디서 온 요청인지 알 수 있다.

쿠키🍪
클라이언트에서 저장하고 관리하는 데이터
브라우저를 닫아도 데이터는 유지
서버가 Set-Cookie를 응답 헤더로 내려주면 클라이언트는 받아서 알아서 저장
아니면 클라이언트에서 받아서 자체적으로 조작
각 상태의 수명을 정해줌

취약점

XSS(Cross Site Script)공격
JavaScript를 이용해 악의적인 사용자가 다른 사용자의 쿠키값을 탈취
쿠키를 암호화하지 않고 보내면 중간에 탈취 당할 가능성, 해결방법은 HTTPS🔒

클라이언트가 아무리 쿠키를 보내도 서버는 쿠키 주인이 누구인지 모른다??
주인을 알게 해주는 방법

Session
쿠키의 HTTP Session Id를 식별자로 담아 클라이언트와 서버간 통신이 가능
서버는 식별자로 사용자를 구분하고 응답

문제점

세션은 서버에 파일이 저장됨 (저장공간의 문제)
만약 서버가 2대라면 세션 관리가 어려움 (인증정보에 대한 적절한 응답불가)
인증 용도로 사용❌

서버와 클라이언트간 인증은 별도 토큰(JWT-JSON Web Token)을 이용,
쿠키는 클라이언트와 자체적이고 지속적인 데이터 관리 용도로 사용

쿠키대신 로컬 데이터를 관리하는 웹 스토리지 등장✨
쿠키가 하기 힘든 것들을 지원

로컬 스토리지 (반영구적 데이터 저장, 브라우저 종료해도 데이터 남음)

// 데이터 저장
localStorage.setItem('name', '토리');
console.log(localStorage.getItem('name')); //토리


// 데이터 삭제
localStorage.removeItem('name');
localStorage.clear(); //모두 삭제

세션 스토리지 (새 창을 생성할 때 마다 데이터 저장, 브라우저 닫는 순간 사라짐)

// 데이터 저장
sessionStorage.setItem('name', '토리');
console.log(sessionStorage.getItem('name')); //토리

// 데이터 삭제
sessionStorage.removeItem('name');
sessionStorage.clear(); //모두 삭제