[TIL][02.03] ES6, SSR, CSR, SSG, SOP, CORS

BOM (Browser Object Model) : 브라우저 환경을 조작하는 객체 (window, location, navigator, history 등)

DOM (Document Object Model) : HTML 문서를 조작하는 객체 (document 객체 포함)

 

팝업 알림

prompt 입력창 생성

alert 알림창 생성

 

타이밍 이벤트

setTimeout : 지정된 밀리초 동안 기다린 후 함수 실행

setInterval : setTimeout()과 동일하지만, 함수 실행을 계속해서 반복

 

쿠키 (Cookies)

컴퓨터에 작은 텍스트 파일로 저장되는 데이터

웹 서버가 웹 페이지를 브라우저로 전송하면 연결이 끊어지고 서버는 사용자에 대한 모든것을 잊음

쿠키는 사용자에 대한 정보를 기억하는 방법을 제공

 

DOM 이벤트 : 웹 페이지에서 발생하는 다양한 동작(클릭, 입력, 스크롤 등)을 감지하고 처리할 수 있도록 하는 기능

ES6

• Arrow Functions : 문법이 간결하고 가독성이 좋으며, this가 상위 스코프를 유지. 콜백 함수에서 this 문제 해결, bind() 없이도 this를 일관되게 유지.

let obj = {
  myVar: 'foo',
  
  myMeth: function jes() { 
    console.log(this.myVar) ; //수행 컨텍스트가 obj
  
    setTimeout(() => { //화살표 함수, function()객체가 만들어질때 this를 바인딩, bind()한 것처럼 lexical scope을 갖는다
      console.log(this.myVar); //수행 컨텍스트가 obj
    }, 1000);
  }
}
obj.myMeth(); // foo  foo

어떤 객체에 귀속되는 함수(즉, 메소드)를 만들 때는 프로퍼티에 할당되는 함수를 function 키워드로 만들고 그 함수 내부에서 호출되는 콜백 함수는 화살표 함수로 만들기

• 구조분해할당 : 값을 쉽게 변수에 할당할 수 있도록 돕는 문법
• 스프레드 연산자 (...): 배열의 아이템을 펼쳐서 사용, for문이나 인덱스로 하나하나 접근하지 않음
• for...of loop: 배열을 순회하는 루프 (object에서는 for...in 사용)
• Map: 키와 값의 쌍을 저장하는 자료구조 (행렬처럼 키-값을 매핑)
• Set: 중복되지 않은 값들을 순서 없이 저장하는 자료구조
• Class: 객체 지향 프로그래밍에서 사용되는 클래스

 

렌더링 방식

• SSR (Server Side Rendering): 서버에서 웹 페이지를 미리 만들어서 브라우저에 보내는 방식. 처음 로딩 속도가 빠름
• CSR (Client Side Rendering): 웹 페이지를 처음엔 빈 HTML로 보내고, 브라우저에서 JavaScript를 사용해 콘텐츠를 동적으로 만드는 방식. 페이지가 빠르게 반응하지만, 처음 로딩은 좀 느릴 수 있음.
• SSG (Static Site Generation): 웹 페이지를 미리 만들어서 서버에 저장하고, 사용자가 요청하면 그걸 바로 보내는 방식. 로딩이 매우 빠름.

 

HTTP 요청 방식

• GET : 쿼리 스트링이 url에 포함됨(?name=a&todo=b)
• POST : 리퀘스트 바디에 포함됨

브라우저 fe서버에서 정적파일 받아옴 >> 브라우저에 렌더링된 js 이벤트 발생 시 be서버에 요청 및 응답받아옴

SOP (Same-Origin Policy)

웹 브라우저는 보안을 위해 기본적으로 동일 출처(Same Origin)의 리소스만 접근할 수 있도록 제한한다. 즉, 서로 다른 출처의 데이터를 가져오는 것을 차단한다. 주로 악의적인 스크립트가 다른 출처의 리소스를 무단으로 요청하는 것을 막는 역할을 한다. SOP에 의해 응답을 받지 못하더라도 백엔드 서버에서는 요청에 대한 처리는 진행된다. 따라서 SOP 그 자체가 보안 정책은 아니다.

CORS (Cross-Origin Resource Sharing)

CORS는 Same-Origin Policy를 우회해 다른 출처의 리소스를 요청할 수 있게 해준다. 백엔드 서버에서 CORS를 설정하여 다른 출처의 요청을 허용할 수 있으며, 이를 통해 다양한 도메인 간의 데이터 공유가 가능해진다. 그러나 CORS는 보안을 강화하는 기능이 아니라, 특정 리소스에 접근을 허용하는 방식일 뿐이다.