본문 바로가기

전체 글199

5. HTTP 상태코드 HTTP 상태코드 상태 코드 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 1xx (Informational): 요청이 수신되어 처리중 2xx (Successful): 요청 정상 처리 3xx (Redirection): 요청을 완료하려면 추가 행동이 필요 4xx (Client Error): 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음 5xx (Server Error): 서버 오류, 서버가 정상 요청을 처리하지 못함 클라이언트가 인식할 수 없는 상태코드를 서버가 반환하면 상위 상태코드로 해석해서 처리함으로써 미래에 새로운 상태 코드가 추가되어도 클라이언트를 변경하지 않아도 되는 장점이 있다. 1xx (Informational) 요청이 수신되어 처리중 ※ 거의 사용하지 않음.. 2023. 3. 22.
4. HTTP 메서드 좋은 URI 설계 가장 중요한 것은 리소스 식별 리소스와 해당 리소스를 대상으로 하는 행위을 분리 리소스: 회원 행위: 조회, 등록, 삭제, 변경 HTTP 메서드 종류 주요메서드 GET: 리소스 조회 POST: 요청 데이터 처리, 주로 등록에 사용 PUT: 리소스를 대체, 해당 리소스가 없으면 생성 PATCH: 리소스 부분 변경 DELETE: 리소스 삭제 기타메서드 HEAD: GET과 동일하지만 메시지 부분을 제외하고, 상태 줄과 헤더만 반환 OPTIONS: 대상 리소스에 대한 통신 가능 옵션(메서드)을 설명(주로 CORS에서 사용) CONNECT: 대상 자원으로 식별되는 서버에 대한 터널을 설정 TRACE: 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트를 수행 GET 리소스 조회 서버에 전달하고.. 2023. 3. 22.
3. HTTP 란 무엇인가? HTTP HyperText Transfer Protocol 주요내용 모든 것이 HTTP HTTP 역사 기반 프로토콜 HTTP 특징 클라이언트 서버 구조 Stateful, Stateless 비 연결성(connectionless) HTTP 메시지 모든 것이 HTTP HTML, TEXT IMAGE, 음성, 영상, 파일 JSON, XML (API) 거의 모든 형태의 데이터 전송 가능 서버간에 데이터를 주고 받을 때도 대부분 HTTP 사용 HTTP 역사 HTTP/0.9 1991년: GET 메서드만 지원, HTTP 헤더X HTTP/1.0 1996년: 메서드, 헤더 추가 HTTP/1.1 1997년: 가장 많이 사용, 현재 기반이 되는 내용이 많은 가장 중요한 버전 RFC2068 (1997) -> RFC2616 (19.. 2023. 3. 17.
2. URI 와 웹 브라우저 요청 흐름 URI와 웹 브라우저 요청 흐름 주요내용 URI 웹 브라우저 요청 흐름 URI 통합 자원 식별자 (Uniform Resource Identifier) Uniform : 리소스 식별하는 통일된 방식 Resource : 자원, URI 로 식별할 수 있는 모든 것(제한 없음) Identifier : 다른 항목과 구분하는데 필요한 정보 "URI는 로케이터(locator), 이름(name) 또는 둘 다 추가로 분류될 수 있다 URL (Uniform Resource Locator) Locator : 리소스가 있는 위치를 지정 URN (Uniform Resource Name) Name : 리소스에 이름을 부여 잘안씀 위치는 변할 수 있지만, 이름은 변하지 않는다. ex) urn:isbn:8960777331 (어떤 책.. 2023. 3. 17.
1. 인터넷 네트워크 인터넷 네트워크 주요내용 인터넷 통신 IP(Internet Protocol) TCP, UDP PORT DNS 인터넷 통신 인터넷 망에 수많은 노드(위성, 해저광케이블, 기타 통신서버 및 장비)들을 거쳐 통신하는 과정 인터넷 프로토콜 스택의 4계층 애플리케이션 계층 - HTTP, FTP 전송 계층 - TCP, UDP 인터넷 계층 - IP 네트워크 인터페이스 계층 프로토콜 계층 IP 인터넷 프로토콜 역할 지정한 IP 주소(IP Address) 에 데이터 전달 패킷(Packet) 이라는 통신 단위로 데이터 전달 IP 패킷정보 출발지 IP, 목적지 IP, 기타... 클라이언트 패킷 전달 서버 패킷 전달 IP 프로토콜의 한계 비연결성 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷 전송 비신뢰성 패킷 소실 .. 2023. 3. 15.
JS DocumentFragment documentFragment DocumentFragment 메모리상에만 존재하는 경량화된 DOM 이다 1. DocumentFragment 를 DOM 노드에 추가한다고 해도 DocumentFragment 노드는 등록되지 않고 그 자식 노드들만 추가됩니다. 2. DocumentFragment 를 DOM 에 추가하면 DocumentFragment 노드의 자식 요소들은 더 이상 메모리상에 존재하지 않습니다. 주의사항 DocumentFragment 를 appendChild 와 같은 함수로 DOM 에 추가하고 난 후 DocumentFragment 의 자식노드는 더 이상 생성한 메모리 상의 위치에 존재하지 않습니다. 만약 이를 유지 시키고 싶다면 cloneNode 를 통해 복제하는 방법이 있습니다. 참고 https.. 2023. 3. 14.
JS 이벤트 위임 이벤트 위임 (delegate) 이벤트 흐름을 활용하여 이벤트를 발생시키고 싶은 요소를 이벤트 리스너가 설치된 부모 요소의 자식으로 배치하여 단일 이벤트 리스너가 여러개의 이벤트 대상을 처리할 수 있게 하는 프로그래밍을 이벤트 위임이라 한다. 이벤트 리스너의 event 객체에는 돔에서 일어나는 이벤트의 정보가 들어있다 event.currentTarget : 이벤트가 등록된 요소를 의미 this : 이벤트 리스너안의 this 는 event.currentTarget 가 참조하는 대상과 같다 event.target : 이벤트가 최초에 발생한 요소를 의미 generate item initial item 참고 https://www.inflearn.com/course/%EC%BD%94%EB%94%A9%EC%9D%B.. 2023. 3. 14.
JS 이벤트 흐름 이벤트 흐름 예시 1. 브라우저 화면에서 이벤트가 발생 2. 이벤트가 발생했을 때 브라우저가 제일 먼저 하는 일은 이벤트 대상을 찾아냄 이벤트가 발생한 좌표에 무엇이 있는지 확인하기 위해 렌더링 과정중의 하나인 페인트 기록을 찾아봅니다. 3. 캡처링 단계 최상위 window 객체부터 타겟요소까지 캡처링 단계 의 이벤트 리스너가 등록이 되어 있는지 확인하고 있다면 이벤트를 실행 후 자식요소로 이동 페인트 기록을 통해 좌표를 알아낸 브라우저는 해당 좌표에 위치 한 요소의 이벤트 리스너를 실행 4. 버블링 단계 캡처링이 끝나고, 최초에 이벤트가 발생했던 타겟요소부터 window 객체까지 버블링 이벤트 리스너가 있다면 실행 후 다음 직계 부모 요소로 이동 참고 https://www.inflearn.com/cou.. 2023. 3. 14.
JS reflow & repaint reflow & repaint Reflow ( 레이아웃 다시 구성 ) 생성된 DOM 노드의 레이아웃 변경 시 영향을 받는 모든 노드(부모, 자식)의 수치를 다시 계산하여 레이아웃 트리(렌더 트리)를 재생성하는 작업을 말합니다 Reflow 를 발생하게 하는 속성 width, height, padding, margin, float, position 등등 … 레이아웃에 영향을 주는 모든 속성 Repaint ( 화면 다시 그리기 ) Reflow 과정이 끝나고 재생성된 레이아웃 트리(렌더 트리) 를 다시 레이어에 그리는 작업 Repaint 를 발생하게 하는 속성 color, border-radius, background, box-shadow 등등 … 시각적으로 보여지는 모든 속성 reflow & repaint 와.. 2023. 3. 14.
JS 웹 페이지 렌더링 과정 웹 페이지 렌더링 웹 브라우저의 기본적인 구조 랜더링 단계 1. 파싱 ( 철근 세우기 단계 ) HTML 을 파싱하여 DOM 으로 변환합니다. 오타 혹은 잘못된 문법을 사용했을 경우 예외처리를 합니다. 와 같은 태그를 만나면 리소스를 다운로드 합니다. 태그를 만나면 DOM 파싱을 중단하고 자바스크립트를 해석합니다. 2. 스타일 계산 ( 시멘트 채우기 단계 ) CSS 을 파싱하여 CSSOM 으로 변환합니다. CSSOM 정보를 통해 돔 노드에 대한 스타일을 결정합니다. 결정된 스타일은 크롬 개발자 도구의 computed 항목에서 확인 가능합니다 3.레이아웃 ( 내부 설비 단계 ) 레이아웃 트리(렌더 트리) 를 생성합니다. 돔과 계산된 스타일을 따라가며 요소의 크기나 좌표와 같은 정보를 담은 레이아웃 트리를 생.. 2023. 3. 14.
JS BOM (Browser Object Model) BOM (Browser Object Model) 웹 브라우저의 다양한 기능을 객체처럼 다루는 모델 대표적인 객체 종류 1. window 객체 Global Context (전역 공간)이자 브라우저 창을 나타내는 객체 입니다. 전역 변수나 전역 함수의 경우 window의 프로퍼티처럼 작동하 게 됩니다. 중요 프로퍼티 - innerWidth, innerHeight, screenX, screenY, scrollBy( ), scrollTo( ) 등등 2. screen 객체 사용자 환경의 디스플레이(모니터) 정보를 가지는 객체입니다. 중요 프로퍼티 - availHeight, availWidth, width, height, orientation 3. location 객체 사용자가 보고 있는 페이지의 URL을 다루는 .. 2023. 3. 14.
JS hoisting 호이스팅 함수 선언과 변수 선언은 코드를 실행할 때 해당 선언 스코프 최상단으로 끌어올려집니다. 이런 현상을 호이스팅이라고 합니다. 알고가야하는 내용 함수에는 두 가지 리터럴 형태가 존재한다. 1. 함수 선언 함수 선언은 function 키워드 뒤로 함수 의 이름을 적어서 사용합니다. function test() { return "test" } 2. 함수 표현식 함수 표현식은 function 키워드 뒤로 이름을 적지 않고 사용합니다. 이름이 없기 때문에 익명 함수라고 부르기도 합니다. var testValue = function() { return "testValue" } 변수 관련내용 선언한 변수의 값 까지 끌어올려지지는 않고 선언만 끌어올려짐 console.log(testValue); //undefi.. 2023. 3. 13.

티스토리툴바