웹 애플리케이션 아키텍처의 구성과 흐름

웹 브라우저의 주소창에 URL을 입력하고 사용자가 원하는 페이지를 보기까지 여러 단계의 통신이 이루어진다.이러한 동작에 필요한 각 요소와 그 사이의 상호 작용을 정의해 놓은 것을 웹 애플리케이션 아키텍쳐라고 부른다. 위 그림은 웹 애플리케이션 아키텍쳐를 도식화한 것이다.다양한 웹 애플리케이션 아키텍쳐가 존재하며, 각 요소의 역할과 상호작용을 이해해 웹의 규모와 목적에 따라 적절한 웹 애플리케이션 아키텍처를 설계할 수 있다.적합한 아키텍처를 통해 실제 웹 구현 단계에서 발생할 수 있는 위험을 줄이고 안정적으로 웹을 운영할 수 있게 된다! 아키텍처를 구성하는 대표적인 요소들을 정리해보자  웹 애플리케이션 아키텍쳐웹 클라이언트웹 클라이언트는 사용자의 요청(Request)을 서버로 보내고, 서버의 응답(Resp..

• format_list_bulleted 네트워크
• · 2025. 1. 30.
• textsms

[인증/인가] 쿠키, 세션, 토큰, JWT

개념정리인증 (Authentication)서비스를 이용하려는 유저가 등록된 회원인지 확인하는 것 인가 (Authorization)인증을 받은 유저가 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차 HTTP의 관련 특성1) 무상태 (stateless)- HTTP 프로토콜은 무상태 프로토콜- 각 요청이 독립적이며, 서버가 이전 요청에 대한 정보를 기억하지 않음 (이전에 인가된 요청이 왔는가? 모른다)- 따라서 각 요청마다 상세 정보를 알려줘야 함 2) 비연결성 (connectionless)- 서버와 클라이언트는 연결되어있지 않음- 서버 입장에서는 매번 새로운 클라이언트의 요청을 받는 것 쿠키- 브라우저에 저장되는 작은 데이터 조각, key-value 쌍으로 저장- HTTP 무상태성과 비연결성 특성..

• format_list_bulleted 네트워크
• · 2024. 9. 6.
• textsms

axios

axiosnode.js 와 브라우저를 위한 Promise 기반 http 클라이언트http를 이용해 서버와 통신하기 위해 사용하는 패키지 axios 설치yarn add axios json-server 설정content 부분 없애기 요청GET이제 response.json()으로 json을 해석하는 과정이 필요없다 POST id는 랜덤 string으로 생성됨  DELETE- axios로 서버에 delete 요청- 브라우저 화면에서도 사라지도록 삭제한 id의 todo를 state에서 filter 해줌 PATCH- PATCH: 원래 있던 값에서 원하는 값만 업데이트 (일부수정)- PUT: 기존 값을 무시하고 완전 수정 Custom Instance위 내용들은 기타 설정을 전혀 적용하지 않은 순수한 Axios를 사용..

• format_list_bulleted 네트워크
• · 2024. 9. 5.
• textsms

LAN, WAN은 무엇일까?

네트워크 (network)긴밀하게 연결된 것을 의미한다. 사람들 간의 소통, 교통상황 등 네트워크의 주체는 다양할 수 있다.컴퓨터 네트워크는 컴퓨터 간 데이터를 주고받는 통신망을 의미한다!네트워크는 전 세계를 연결할 수 있는 거대한 네트워크가 있고, 그 안에 여러개의 중간급 네트워크가, 그 안의 더 작은 네트워크들로 구성되어 있다.이처럼 네트워크를 범위에따라 구분한 것 중 일부가 LAN, WAN이다.  LAN (Local Area Network)지리적으로 가까운 기기들이 서로 연결된 소규모 네트워크집, 학교, 회사와 같이 지리적으로 가까운 위치의 기기들이 중심기기(공유기 등)에 연결된 형태통신에 필요한 선이 짧으므로 데이터를 주고받을 때 오류가 적고 속도가 빠름  WAN (Wide Area Network..

• format_list_bulleted 네트워크
• · 2024. 7. 9.
• textsms