본문 바로가기

전체 글

 (175)
HTTP의 특징 : Stateless와 connectionless를 살펴보자 무상태 프로토콜(Stateless) stateful : 서버가 클라이언트의 이전 상태를 보존 (상태 유지) (ex. 다른 점원으로 바뀌면 에러 발생) stateless : 서버가 클라이언트의 이전 상태를 보존하지 않음 (무상태) (ex. 다른 점원으로 바뀌어도 상관 없음 → 클라이언트가 서버에 필요한 데이터를 다 넘겨줌) 갑자기 고객이 증가해도 점원을 대거 투입 가능 → 갑자기 클라이언트 요청이 증가해도 서버를 대거 투입 가능 무상태는 응답 서버를 쉽게 바꿀 수 있음 → 무한한 서버 증설 가능! 한계 로그인 상태를 서버에 유지 상황 → 쿠키, 세션을 사용해서 상태 유지 상태 유지는 최소한만 사용 비 연결성(connectionless) 서버는 연결 유지X, 최소한의 자원 사용 HTTP는 기본이 연결을 유지..
웹 브라우저 요청 흐름을 따라가보자 https://jootang2.tistory.com/135 구글 URL을 해석해보자! (https://www.google.com:443/search?q=hello&hl=ko) 실제 구글 URL을 파헤쳐보면서 주소에 어떤 정보들이 담겨져 있는지 알아보자! 준비물 : https://www.google.com:443/search?q=hello&hl=ko URL의 구조 : scheme://[userinfo@]host[:port][/path][?query][#fragment] 준비물의 구 jootang2.tistory.com 이전 게시글에서 URL의 구조를 통해 의미를 알아봤다. 오늘은 이런 URL이 들어오면 웹 브라우저에서는 어떤 순서대로 처리하는 지에 대해서 알아보자! https://www.google.com..
구글 URL을 해석해보자! (https://www.google.com:443/search?q=hello&hl=ko) 실제 구글 URL을 파헤쳐보면서 주소에 어떤 정보들이 담겨져 있는지 알아보자! 준비물 : https://www.google.com:443/search?q=hello&hl=ko URL의 구조 : scheme://[userinfo@]host[:port][/path][?query][#fragment] 준비물의 구조: https://www.google.com:443/search?q=hello&hl=ko 1. scheme 주로 프로토콜 사용 프로토콜 : 어떤 방식으로 자원에 접근할 것인가 하는 약속 (ex. http, https, ftp...) 2. userinfo URL에 사용자 정보를 포함해서 인증 거의 사용하지 않는다. 3. host a. 포트(port) b. 접속 포트 c. 일반적으로 생략 (http는 8..
[인프런x코드캠프] 훈훈한 Javascript_10日 오늘은 onkeydown함수를 통해 입력할 때마다 어떤 변화가 일어나게 하게 만들었다. keycode를 통해서 Enter를 누를때마다 html ul태그 안에 li태그와 span태그를 추가할 수 있게 했다. window의 event를 통해서 keyCode를 가져올 수 있다. if(window.event.keyCode === 13 ) { createTodo(); } appendChild함수를 통해서 ul 태그 내부에 원하는 태그를 추가했다. 아주 기본적인 todo-list형태를 만들었다! 내일은 버튼을 눌렀을 때 내부 태그들을 삭제하는 기능을 구현해 볼 계획이다. 설날에 아주 푹 쉬고와서 컨디션이 좋다. 새복많~~
TCP, UDP 차이 TCP 연결지향 - TCP 3 way handshake (가상 연결) SYN: 클라 → 서버 SYN + ACK : 서버 → 클라 ACK : 클라 → 서버 데이터 전달 보증 순서 보장 신뢰할 수 있는 프로토콜 현재는 대부분 TCP 사용 UDP 기능이 거의 없음 연결지향 (TCP 3 way handshake X) 순서 보장 X 데이터 전달 및 순서 보장되지 않지만, 단순하고 빠름 IP와 거의 같다 (+Port, checksum 정도) 애플리케이션에서 추가 작업 필요 HTTP/1.1: 가장 많이 사용!!! HTTP2 : 성능 개선 HTTP3 : TCP 대신 UDP 사용, 성능 개선 결론적으로, 2와 3은 성능개선이기 때문에 1.1버전을 학습하면 된다. 현재 구글은 3으로 넘어가고 있고, 네이버는 2인 것을 쉽..
[인프런x코드캠프] 훈훈한 Javascript_9日 디데이 카운터를 완성시키고 두번 째 예제를 다룬다. 이번에는 to-do-list를 만든다. 사용자의 위치를 가져와 위치의 지역명, 지역의 날씨, input을 통해 할일 목록을 list up 해주는 기능을 가진 웹 이다. 본격적으로 들어가기 전에 어떻게 JS에서 HTML에 접근하는 지 알수있었다. DOM(Document Object Modal)을 통해서 HTML의 값에 접근할 수 있다. DOM은 브라우저가 HTML문서를 파싱하는 과정에서 생겨나는 객체이다. 이 객체는 트리구조를 가지고 있고, 이를 통해 HTML에 접근 가능하다. 뜻도 정확히 모르고 기능 구현만을 위해서 썼다면, 이제는 차근차근히 뜻과 함께 좀 더 깊은 이해를 통해서 예제를 받아들여야 한다. 두번 째 예제인 투두리스트도 열심히 만들어야겠다.
[인프런x코드캠프] 훈훈한 Javascript_8_디데이 카운터 완성 오늘 수업을 통해서 D-Day-Counter 를 완성했다. 함수에 인자를 활용하고 localStorage를 통해 브라우저를 종료해도, 또는 컴퓨터를 꺼도 계속 실행되는 D-Day-Counter가 완성됐다. 함수 내부에서 인자를 받은 함수를 사용할 때 : 화살표 함수 사용 (익명 함수) ex) const intervalId = setInterval(counterMaker(targetDateInput), 1000); X const intervalId = setInterval(() => counterMaker(targetDateInput), 1000); O Web Storage 1. Session Storage : key-value 형태 저장 , 로컬 환경에 데이터 저장 세션 단위로 구분되며 활용 세션: 사용..
[인프런x코드캠프] 훈훈한 Javascript_7日 오늘은 D-day Counter가 어느정도 Counter의 역할을 할 수 있게 학습했다. 현재는 시간을 입력하는 남은 시간이 표시만 된다. 그리고 아래 함수들을 통해서 반복적으로 실행되게 만들어주어 Counter의 형태를 갖추게 만들어줬다. setTimeout(~, 지연시간[ms]) : 함수의 실행을 지연시켜주는 함수 setInterval(반복실행 할 함수의 이름,지연 시간) 초기화 버튼을 누르면 실행되고 있는 Counter를 초기화 시켜주는 기능도 구현했다. 1. 실행되고 있는 interval을 intervalArr이라는 배열에 intervalId를 담아준다. 2. 초기화 버튼을 누르면 intervalArr의 길이만큼 clearInterval(intervalId)함수를 실행 시켜주어 멈춰준다. for ..

티스토리툴바