hyyyeon 님의 블로그

HTTP 특징✓ 클라이언트 서버 구조 ✓  무상태 프로토콜, 비연결성- HTTP 메시지로 송수신- 단순함, 확장 가능  클라이언트 서버 구조 Request Response 구조  클라이언트는 서버에 요청을 보내고, 서버는 대기하다가 요청에 대한 응답을 보냄클라이언트와 서버를 개념적으로 분리해야 함1) 클라이언트 - UI, UX, 사용성에 집중 2) 서버 - 비즈니스 로직, 데이터 처리에 집중장점-  클라이언트, 서버는 각각 독립적으로 진화 가능-  각각의 역할에만 집중 가능 (ex. 트래픽이 폭주하면 서버에서만 수정) 상태, 무상태(Stateless) 프로토콜Stateful (상태)- 서버가 클라이언트의 상태 보존  ✓  Stateless (무상태)- 서버가 클라이언트의 상태를 보존X클라이언트 요청이 ..

HTTP (HyperText Transfer Protocol)HTTP는 하이퍼 텍스트를 주고 받기 위한 규칙(통신 규약)이다.처음엔 문서간에 링크를 통해 연결할 수 있는 프로토콜로 사용했으나, 현재는 모든 것을 전송한다. HTTP 메시지에 모든 것을 전송- 서버간에 데이터를 주고 받을 때도 대부분 HTTP 사용   (게임서버와 같은 특수한 경우에만 TCP를 직접 연결해서 사용) - 거의 모든 형태의 데이터 전송 가능HTML, TEXTIMAGE, 음성, 영상, 파일JSON, XML (API)  HTTP 역사HTTP/0.9 (1991년) : GET 메서드만 지원, HTTP 헤더XHTTP/1.0 (1996년) : 메서드, 헤더 추가HTTP/1.1 (1997년) : 가장 많이 사용, 우리에게 가장 중요한 버전 ..

웹 브라우저가 동작하는 방법1. 웹 브라우저에 URL 입력 2. HTTP 요청 메시지 생성1. DNS를 조회해서 IP를 확인하고, port는 생략되어있으면 프로토콜(https)을 보고 유추2. HTTP 요청 메세지를 생성함 HTTP 요청 메시지 내용get - 쿼리정보, HTTP 버전정보Host 정보 3. HTTP 메시지 전송2. SOCKET 라이브러리를 통해    2-1. 헤더 부분에 IP, PORT 정보를 넣어서 3WH로 웹브라우저(클라이언트)와 웹서버(서버)를 연결함    2-2. 데이터(HTTP 요청 메시지)를 TCP/IP 계층에 전달4. 패킷 생성헤더 부분에 출발지 IP, PORT, 목적지 IP, PORT 정보등을 담고 데이터 부분에는 HTTP 요청 메시지를 담아 TCP/IP 패킷을 생성한다. 5..

URI, URL, URN  URI  (Uniform Resource Identifier ) 리소스를 가리키는 고유한 식별자  Uniform : 리소스를 식별하는 통일된 방식Resource : URI로 식별할 수 있는 모든 데이터, 서비스, 파일 등을 의미ex) 웹페이지, 이미지, API, DB 등 (사진참고)Idenrifier : 다른 항목과 구분하는 데 필요한 정보 ex) 사람을 식별할 때 주민등록번호로 식별 하는 것  - URI : 자원의 위치(Locator)와 이름(Name)을 모두 포함한다    URL  (Uniform Resource Locator) → 위치 기반 식별특정 리소스가 어디 있는지를 나타냄 (웹 주소)    ex) https://www.example.com/index.html  UR..

인터넷 통신클라이언트 ------------- 서버클라이언트 -------------인터넷 (노드) ------------ 서버수 많은 인터넷 망에서 어떻게 원하는 곳에 전달 수 있을까? => 최소한의 규칙 (IP) 필요  IP  (Internet Protocol)IP 주소 부여메세지 전달을 위해 출발지(클라이언트) 목적지(서버)에 IP를 부여함IP 역할지정한 IP 주소(IP Address)에 데이터 전달패킷(Packet)이라는 통신 단위로 데이터 전달  IP 프로토콜의 한계 비연결성- 패킷을 받을 대상이 없거나 서비스 불능 상태여도 클라이언트는 대상 서버의 상태를 알 수 없어 패킷을 항상 전송하게된다.비신뢰성- 패킷 소실- 패킷 전달 순서 문제패킷 용량의 크기가 크면 나눠서 보내게 됨 -> 같은 노드(..

브라우저에는 크게 두 개의 스토리지가 있다.로컬 스토리지와 세션 스토리지 Web StorageHTML5 스펙에서는 웹 스토리지라는 것이 추가됨 Cookie네트워크 요청 시 서버로 함께 저장되는 문자열 데이터쿠키도 일종의 저장소, 사용자의 활동 정보를 브라우저에 기록해뒀다가 서버에 전달쿠키와 네트워크 요청이 많아지면 비효율이 발생함.=> 쿠키는 모든 네트워크 요청에 포함되기 때문로컬 스토리지와 세션 스토리지는 네트워크 요청에 포함되지 않기 때문에 쿠키와 다르게 비효율XLocal Storagekey-value 쌍으로 데이터를 저장하고 조회할 수 있는 데이터 저장소서버로 전달되지 않음지우지 않는 이상 브라우저나 탭을 닫았다 열어도 유지됨Session Storagekey-value 쌍으로 데이터를 저장하고 조회..

1. 마우스 관련 이벤트onClick : 마우스를 클릭했을 때 발생 (눌렀다 뗐을 때)onMouseDown : 마우스를 눌렸을 때 발생onMouseUp : 마우스를 뗐을 때onMouseEnter : 특정 요소에 마우스 커서가 들어갔을 때onMouseLeave : 요소에 커서가 밖으로 나갔을 때onMouseMove: 요소 안에서 마우스 커서를 움직이면 2. 키보드 관련 이벤트onKeyDown : 키를 눌렀을 때 (문자가 입력되지 않아도 반응함 ex.한영키, ctrl키)onKeyUp : 누른 키를 뗐을 때onKeyPress : 키 누르고 문자가 입력되면 (문자에만) 3. Focus, Form 이벤트onFocus : 요소에 포커스가 되면 발생onBlur : 포커스가 사라지면 발생onChange : form 요..

1. JSX란?Javascript 확장한 문법 (Javascript XML)JSX = HTML + Javascript *jsxconst element = Hello world; 2. JSX의 특징JSX에서 사용되는 태그의 속성 이름이 HTML과 다름태그를 꼭 닫아줘야 함하나의 태그로 감싸져 있어야 함

1. React란? 사용자 인터페이스를 만들기 위한 Javasccript 라이브러리 (SPA 라이브러리)*SPA (Single Page Application)  html을 한 번만 받아와서 웹 애플리케이션을 실행시킨 후, 이후에는 필요한 데이터만 받아와 화면에 업데이트하는 것 *MPA(멀티 페이지 애플리케이션) 페이지를 이동할 때마다 서버에서 새로운 HTML을 받아오고, 필요한 CSS, JS, 이미지 파일 등을 로딩하여 화면을 구성하는 방식이다. -> 서버 자원을 많이 사용하고, 로딩 속도가 느릴 수 있다. *프레임워크 : 개발을 위한 기본 틀  ex) 리액트, 스프링부트, 플러터  *라이브러리 : 특정 기능을 수행하는 코드 모음   ex) jQuery(js)  2. React 특징 1) Componen..