Today Hailie Learned

SOP란? SOP은 Same-Origin Policy의 줄임말로, 동일 출처 정책을 말한다. https://shinystarforever.tistory.com:443 https:// => 프로토콜 shinystarforever.tistory.com => 호스트 443 => 포트 출처(origin)는 프로토콜, 호스트, 포트의 조합으로 되어있고, 이 중 하나라도 다르면 동일한 출처로 보지 않는다. **알아두기** http 프로토콜의 기본 포트는 80 https 프로토콜의 기본 포트는 443 SOP은 애초에 다른 사이트와의 리소스 공유를 제한하기 때문에 로그인 정보가 타 사이트의 코드에 의해서 새어나가는 것을 방지할 수 있다. => 이러한 보안상 이점 때문에 SOP은 모든 브라우저에서 기본적으로 사용하고..

API의 대표적인 아키텍처인 REST API 어떻게 요청과 응답을 하는 것이 바람직한 방법인가? 👇👇 REST API “Representational State Transfer”의 약자 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말한다. HTTP 프로토콜을 기반으로 요청과 응답에 따라 리소스를 주고받기 위해서는 알아보기 쉽고 잘 작성된 메뉴판이 필요한데, 이 역할을 API가 수행해야 하므로 모두가 잘 알아볼 수 있도록 작성하는 것이 중요하다. 로이 필딩 (Roy Fielding)의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개되었다. REST API를 디자인하는 방법 레오나..

SSR(Server Side Rendering) 웹 페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌더링한다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송한다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링된다. 서버에서 웹 페이지를 브라우저로 보내기 전에 서버에서 완전히 렌더링했기 때문에 Server Side Rendering 이라고 한다. ✔️ 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음, 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보낸다. ✔️ 웹 페이지를 살펴보던 사용자가, 브라우저의 다른 경로로 이동하면 브라우저가 다른 경로로 이동할 때마다 서..

웹페이지에서 일부분만 바꾸고 싶다면 AJAX를 사용한다. AJAX 란? AJAX는 Asynchronous JavaScript And XMLHttpRequest의 약자로, JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법이다. AJAX의 가장 큰 특징은, 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것이다. 예를들어 1, 구글 홈페이지에서 검색창의 경우, 유저가 검색창에 한 글자씩 입력할 때마다, 해당 글자로 시작하는 단어들을 서버로부터 받아와, 추천 검색어로 보여준다. 예를들어 2, 무한 스크롤이 발생할 때마다 Fetch를 통해 데이터를 가져와서 업데이트하고 렌더링하기 예를들어 3, 네이버..

HTTP란? HyperText Transfer Protocol의 줄임말로, HTML과 같은 문서를 전송하기 위한 프로토콜이다. HTTP Messages (클라이언트와 서버 사이에서 데이터가 교환되는 방식) HTTP Messages 의 유형 2가지 요청(Requests) 응답(Responses) start line : start line에는 요청이나 응답의 상태를 나타낸다. 항상 첫 번째 줄에 위치합니다. 응답에서는 status line이라고 부른다. HTTP headers : 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합이다. empty line : 헤더와 본문을 구분하는 빈 줄. body : 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함한다. 요청과 응답의 유형에 따라..

Domain name 웹 브라우저를 통해 특정 사이트에 진입을 할 때, IP 주소를 대신하여 사용하는 주소 택시타서 서울시청이 목적지라고 할 때, 서울시청의 도로명 주소가 아닌 '서울시청'이라고 말해도 도착지에 도착하는 것처럼 이해하면 쉽다. DNS(Domain Name System) 네트워크 상에 존재하는 모든 PC는 IP 주소가 있다. 그러나 모든 IP 주소가 도메인 이름을 가지는 것은 아니다. 로컬 PC를 나타내는 127.0.0.1 은 localhost 로 사용할 수 있지만, 그 외의 모든 도메인 이름은 일정 기간 동안 대여하여 사용한다. 대여한 도메인 이름과 IP 주소는 매칭하는 작업이 필요한데, 네트워크에는 이것을 위한 서버가 별도로 있고, 이를 DNS(Domain Name System)이라고..

IP 주소란? (IP address(Internet Protocol address) ➥ 네트워크에 연결된 특정 PC의 주소를 나타내는 체계 인터넷에 연결된 모든 PC는 IP 주소체계를 따라 네 덩이의 숫자로 구분된다. 이렇게 네 덩이의 숫자로 구분된 IP 주소체계를 IPv4라고 한다. IPv4는 Internet Protocol version 4의 줄임말로, IP 주소체계의 네 번째 버전을 뜻한다. IPv4는 각 덩어리마다 0부터 255까지 나타낼 수 있다. 따라서 2^(32)인 약 43억 개의 IP 주소를 표현할 수 있다. 알기! localhost, 127.0.0.1 : 현재 사용 중인 로컬 PC를 지칭한다. 0.0.0.0, 255.255.255.255 : broadcast address, 로컬 네트워크..

URL은 서버가 제공되는 환경에 존재하는 파일의 위치를 나타낸다. CLI 환경에서 폴더와 파일의 위치를 찾아 이동하듯이, 슬래시(/)를 이용해 서버의 폴더에 진입하거나 파일을 요청할 수 있다. # username에는 사용자 이름 입력하기 # Ubuntu: file://127.0.0.1/home/username/Desktop/ # macOS: file://127.0.0.1/Users/username/Desktop/ ➥ 크롬 브라우저에 입력하면, 브라우저로 PC의 폴더와 파일을 탐색할 수 있다. URL은 Uniform Resource Locator의 줄임말로, 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다. URL은 scheme, hosts, url-path로 구분할 수 있..

클라이언트 - 서버 아키텍처(2티어 아키텍처) // Client Server Architecture (2 Tier Architecture) 상품 정보를 인터넷 어딘가에 존재하는 서버로부터 받아온다. 🤔만약 서버가 따로 존재하지 않고, 전부 앱 안에 담겨 있다면? ➥ 끊임없이 앱을 업데이트해야한다. 앱을 사용하는 사람들에게 상품 정보를 실시간으로 전달하기 어렵다. 또한 결제도 불가! (결제도 은행 서버와 연결해서 하는거니까) 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍쳐 / 클라이언트-서버 아키텍처라고 부른다. 리소스를 사용하는 앱이 클라이언트, 리소스를 제공하는 곳은 서버 서버는 리소스를 전달만 해주고, 리소스를 저장하는 공간이 따로 있다. 여기가 바로 데이..