Web 5

[Web] 로그인했다고? 너 누군데? 세션과 JWT에 대해

세션과 JWT을 다루기 전에 먼저 인증(Authentication)과 인가(Authorization)에 대해서 알아야 한다. 1. 인증(Authentication)과 인가(Authorization)  인증은 쉽게 말해 로그인이라고 생각하면 된다.내가 이 사이트에 가입된 회원임을, 즉 특정 서비스에 일정 권한이 주어진 사용자임을 아이디와 패스워드 등을 통해 인증하는 것이다. 인가는 이렇게 한 번 인증을 받은 사용자가 이후 서비스의 여러 기능들을 사용할 때,예를 들어 구글 이메일에 로그인한 후 보낸 메일함이나 스팸 메일함 등을 보는 것처럼,내 계정으로만 할 수 있는 활동을 할 때, 서버가 이 사용자가 로그인되어 있음을 식별하고 허가해주는 과정이다.즉, 로그인이 유지되는 상태에서 일어나는 동작이라고 보면 된다..

Web 2025.03.27

[Web] SPA? MPA? CSR? SSR? SSG?

CSR과 SSR을 알아보기 전에 먼저 SPA와 MPA에 대해 알아보자.  1. SPA (Single Page Application)하나의 페이지로 구성된 웹 어플리케이션을 말하며, 원하는 부분만 클라이언트에서 동적으로 바꿀 수 있는 웹페이지 구성 방식이다.React, Angular, Vue 등의 프레임워크들이 SPA 방식이다.아래의 에어비엔비 사이트를 보면 메뉴를 클릭했을 때 아래의 해당되는 부분만 바뀌는 것을 확인할 수 있다.  2. MPA (MultiPageApplication)여러 개의 페이지로 구성된 웹 어플리케이션을 말하며, 전환할 때마다 새로운 HTML 파일을 받아와 페이지 전체를 새로 렌더링하는 웹페이지 구성 방식이다.매번 새로운 HTML을 서버로부터 받아온다는 단점 때문에 AJAX가 등장하..

Web 2025.03.22

[Web] Webpack이란 무엇일까?

Webpack은 웹 애플리케이션 개발에서 자주 사용하는 모듈 번들러(module bundler)이다.자바스크립트, CSS, 이미지 등 다양한 파일을 의존성 그래프(dependency graph)로 관리하고 이를 하나 또는 여러 개의 번들(bundle) 파일로 묶어준다.이 과정을 통해 애플리케이션의 성능을 최적화하고, 배포를 쉽게 만들어주는 역할을 한다.쉽게 말해 주방의 요리사로 비유할 수 있다. 모듈 번들러에 대해 잘 모른다면? [Web] 모듈 번들러, 한 페이지로 끝내기모듈 번들러(Module Bundler)란?여러 개의 파일(모듈)을 하나의 파일(또는 몇 개의 파일)로 묶어주는 도구이다. 이를 통해 웹 애플리케이션을 실행하기 위해 필요한 모든 파일을 효율적으로 관리하mi-dairy.tistory.co..

Web 2024.12.14

[Web] 모듈 번들러, 한 페이지로 끝내기

모듈 번들러(Module Bundler)란?여러 개의 파일(모듈)을 하나의 파일(또는 몇 개의 파일)로 묶어주는 도구이다. 이를 통해 웹 애플리케이션을 실행하기 위해 필요한 모든 파일을 효율적으로 관리하고 브라우저에서 실행 가능한 형태로 제공할 수 있으며 개발자는 복잡한 코드를 관리하고 성능 최적화된 웹 애플리케이션을 쉽게 배포할 수 있다.대표적인 모듈 번들러로는 Webpack, Parcel, Vite, Rollup 등이 있다. 비유를 하자면 웹 애플리케이션은 복잡한 재료(코드, 이미지, CSS)를 가진 요리와 같고 모듈 번들러는 요리를 만들기 위해 재료를 준비하고 최적화된 형태로 포장하는 주방 관리자로 비유할 수 있다.  1. 필요한 이유현대의 웹 애플리케이션은 규모가 커지고 복잡해지면서 여러 개의 ..

Web 2024.12.13

[Web] CORS 에러는 왜????? 발생하는 걸까?

한 사이트에서 주소가 다른 서버로 요청을 보낼 때 CORS 에러를 한 번쯤은 본 적 있을 것이다. 그렇다면 CORS 에러는 왜 생기며 우리를 괴롭히는(?) 걸까? CORS를 이해하기 전, 먼저 SOP에 대해 알아야 한다.  1. SOP (Same Origin Policy)SOP는 말 그대로 동일 출처 정책, 즉 동일한 출처(Origin) 끼리만 API 등의 데이터 접근이 가능하도록 막는 정책을 말한다.다르게 말하면 다른 출처의 리소스를 사용하는 것에 제한하는 보안 방식이다.  출처(Origin)란 어떤 걸 말하는 걸까? URL은 위의 사진과 같이 Protocol, Host, Port, Path, Query-String, Fragment .. 등으로 이루어져있다.이 중 출처는 Protocot, Host, ..

Web 2024.12.12