본문 바로가기
반응형

개발하는고양이197

웹 브라우저 요청 흐름 https://www.google.com:443/search?q=hello&hl=ko 1. 웹브라우저에서 www.google.com:443 (https port 생략 가능) 를 입력 후 엔터! 2. DNS 조회(www.google.com 도메인에 해당하는 아이피를 조회 후 응답) 3. http 요청 메세지 생성 GET /search?q=hello&hl=ko HTTP/1.1 Host: www.google.com 4. http 메세지 전송 4-1. TCP/IP 패킷 생성(출발지 IP, PORT/목적지 IP, PORT 등 정보 포함) 4-2. 패킷 안에 전송 데이터 http 메세지 포함 4-3. 요청 패킷 전달 4-4. 요청 패킷 구글 서버에 도착 5. http 응답 메세지 생성 HTTP/1.1 200 OK .. 2022. 3. 25.
URI / URL / URN 차이 URI? Uniform : 리소스를 식별하는 통일된 방식 Resource : 자원, URI로 식별할 수 있는 모든 것 Identifier : 다른 항목과 구분하는데 필요한 정보 URL? Uniform : 리소스를 식별하는 통일된 방식 Resource : 자원, URI로 식별할 수 있는 모든 것 Locator: 리소스가 있는 위치를 지정 URN? Uniform : 리소스를 식별하는 통일된 방식 Resource : 자원, URI로 식별할 수 있는 모든 것 Name: 리소스에 이름을 부여 * URN 이름만으로는 실제 리소스를 찾을 수 있는 방법이 보편화 되지 않아 잘 사용하지 않음. URI는 로케이터(Locator), 이름(Name) 또는 둘 다 추가로 분류될 수 있다. URL은 scheme, authorit.. 2022. 3. 24.
DNS 만약, 우리가 네이버나 다음, 구글, 유튜브 등을 도메인주소가 아닌 IP로 접근해야 된다면? IP는 기억하기가 어렵고 특별한 경우 변경될 수도 있다. DNS는 도메인 네임 시스템(Domain Name System)으로 전화번호부의 개념으로 이해하면 좋다. 우리가 도메인명을 입력하면 해당 도메인을 IP주소로 변환 시켜준다. google.com의 아이피가 200.200.200.2라고 가정했을 때, 1. 사용자가 브라우저에 google.com를 입력한다. 2. DNS 서버에서 google.com에 해당하는 아이피로 응답해준다. 3. 응답받은 아이피로 서버에 접근한다. 만약, 아이피가 바뀌더라도 변경된 아이피를 DNS서버에 등록해주면 바뀐 아이피로 응답해주기 때문에 전혀 문제가 되지 않는다. 출처 : 1. ht.. 2022. 3. 24.
PORT PORT는 같은 IP 내에서 프로세스를 구분할 때 사용한다. 0 ~ 65535 : 할당 가능한 포트 0 ~ 1023 : 잘 알려진 포트로, 사용하지 않는 게 좋음. - FTP : 20, 21 - TELNET : 23 - HTTP : 80 - HTTPS : 443 포트 정보는 TCP 세그먼트에 포함된다. 출처 : 1. https://inf.run/iwNU + 내가 이해한대로 정리! 2022. 3. 24.
TCP, UDP 인터넷 프로토콜 스택의 4계층 애플리케이션 계층 - HTTP, FTP 전송 계층 -TCP, UDP 인터넷 계층 - IP 네트워크 인터페이스 계층 프로토콜 계층 1. 웹 브라우저에서 생성한 메시지를 SOCKET 라이브러리를 통해 전달한다. - 애플리케이션 2. TCP 정보를 생성하고 메시지 데이터를 포함시킨다. - OS 3. IP 패킷을 생성하고 TCP 데이터를 포함시킨다. - OS 4. LAN 드라이버나 장비를 통해 서버에 전달한다. - 네트워크 인터페이스 IP 패킷은 출발지 IP, 목적지 IP 등의 정보만을 담고 있다. IP패킷만으로 전송/응답을 처리할 경우 한계가 있다. IP 프로토콜 한계 참고 : https://devmango.tistory.com/61 IP(인터넷 프로토콜), 패킷(Packet).. 2022. 3. 22.
IP(인터넷 프로토콜), 패킷(Packet) 클라이언트(브라우저)와 서버는 지정된 IP주소(IP Address)를 통해 데이터를 전달한다. 데이터를 전달할 때, 패킷(Packet)이라는 통신 단위로 데이터를 전달한다. (패킷은 패키지와 버킷이 합쳐친 단어라고 생각하면 된다. 포장된 덩어리같은 개념?) 이 때, 클라이언트에서 데이터를 요청할 때도 패킷으로 전달하고 서버에서 데이터를 응답해줄 때도 패킷으로 전달한다. IP 프로토콜의 한계 비연결성 - 패킷을 받을 대상이 없거나 서비스가 불능인 상태일 때도 패킷을 전송한다. 패킷을 받을 서버가 존재하는지 대상 서버가 패킷을 받을 수 있는 상태인지 알 수 없기 때문에 우선 패킷을 전송하고 본다. 비신뢰성 - 중간에 패킷이 사라질 수도 있고, 요청 순서대로 응답 패킷이 오지 않는다. 인터넷망은 굉장히 복잡한.. 2022. 3. 22.
02-2. 뷰(Vue) 개발자 도구 & VSCODE 확장 플러그인 설치하기 뷰 개발자 도구(뷰 크롬 플러그인)은 뷰로 개발할 때 도움을 주는 유용한 도구로, 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있다. 1. Google에서 Vue.js devtools를 검색해서 크롬 플러그인 스토어로 이동하거나, https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 에서 [Chorome에 추가]버튼을 클릭한다. 2. Vue.js devtools을(를) 추가하시겠습니까? 알럿이 뜨면 '확장 프로그램 추가' 버튼을 클릭한다. VSCODE 확장 플러그인 목록 Vue 3 : Volar 색 테마 : Night Owl 파일 아이콘 테마 : Material Icon Theme 뷰.. 2022. 3. 13.
02-1.Vue.js 시작하기(인텔리제이 기준 환경세팅) 1. https://nodejs.org/ko/ 에서 LTS 버전을 다운로드 받은 후 설치해준다. ■LTS (Long Term Support) : 오랜 기간(2년) 지원이 가능하다는 의미로, 해당 버전에 대한 취약점 패치, 개선 사항에 대한 패치를 의미한다. 해당 버전에 존재하는 코어 기능에 대해 같은 코드가 같은 기능을 하도록 지원합니다. ■ 현재 버전: 개발이 진행중인 버전이다. 해당 버전에 존재하는 기능이 패치를 통해 사라지거나 변경되어 새로 코드를 작성해야할 가능성이 존재하는 버전이다. node -v npm -v2. 윈도우키 + R ▶ cmd 창에서 명령어를 입력하여 제대로 설치됐는지 확인한다. 3. 인텔리 제이가 설치되어 있지 않으면 https://www.jetbrains.com/ko-kr/ide.. 2022. 3. 13.
01-2. Vue.js의 특징 1. UI 화면단 라이브러리 Vue.js는 UI화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다. MVVM(Model - View - ViewModel) 패턴이란? 마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴이다. 즉, 화면 앞단(프런트엔드)의 화면 동작과 관련된 로직과 화면 뒷단(백엔드)의 데이터베이스 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다. MVVM 패턴으로 개발하면 화면의 요소들을 제어하는 코드와 데이터 제어로직을 분리하여 코드를 직관적으로 이해할 수 있고, 추후 유지보수까지 편해진다. 용어 설명 뷰(View) 사용자에게 보이는 화면 돔(DOM) HTML 문서에 들어가는 요소(태그, 클래스.. 2022. 3. 13.
반응형

티스토리툴바