프론트엔드 개발을 위해 백엔드 REST API 서버를 만들었는데 다음과 같은 에러가 발생했다. ❌ Mixed Content: The page at ’https://ordinary-todolist.netlify.app/login’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ’http://43.201.130.34:8000/auth/signin’. This request has been blocked; the content must be served over HTTPS. 내용을 해석해보니 요청을 HTTPS로 보내라는 것이다. 하지만 내 REST API 서버는 HTTPS 통신 설정도 안한 작고 소중한 아이였다.. 어쩔수 없지. 까짓거 한다. 도메인 구매 HTTPS 통신을 설정하기 위해서는 SSL 인증서가 필요하고, SSL 인증을 받기 위해서는 도메인이 필요하다. 도메인을 구매할 수 있는 경로는 다양하다…

Client Side Rendering 클라이언트 측에서 렌더링이 이루어지는 방식 Angular와 React와 같은 대부분의 웹 프레임워크가 지원하는 방식입니다. 기본적으로 웹 브라우저는 처음에 빈 HTML 파일을 로드합니다. 서버는 클라이언트에 필요한 데이터를 전달하고, 클라이언트는 받은 데이터를 이용해 HTML, CSS, JavaScript 등을 활용하여 브라우저에서 렌더링합니다. CSR은 초기 로딩 시간이 오래 걸릴 수 있지만, 이후 클라이언트 측에서의 상호작용에 대해서는 빠르게 처리할 수 있습니다. 일반적으로 단일 페이지 애플리케이션(SPA)과 많은 사용자 상호 작용(예: 게임)과 양식 및 채팅 애플리케이션과 같은 매우 역동적인 콘텐츠가 있는 애플리케이션에 적합합니다. CSR의 주요 단점은 검색 엔진에 최적화되어 있지 않다는 것입니다. CSR은 HTML 문서를 클라이언트 측에서 동적으로 렌더링하기 때문에 검색 엔진 크롤러가 이를 인식하지 못하고 색인하지 못할 가능성이 있습…

내 웹사이트에서 Github Issue 기능으로 업로드한 사진에 접근하도록 개발하고 있었는데 에러와 부딪히면서 CORS와 SOP에 대해 알아보게 되었다. 여러가지 이유로 사진을 Github Issue가 아닌 별개의 Github Repository에 업로드하게 되면서 에러는 해결됐지만 정말 중요한 내용이라 잊지 않도록 간략하게 정리한다. 동일 출처 정책(SOP)이란? Same-Origin Policy 출처가 서로 다르다면 리소스 상호작용을 제한하는 보안 방식 아무 스크립트나 리소스와 상호작용할 수 있도록 두면 보안이 매우 취약해지기 때문에 출처가 같아야 상호작용할 수 있도록 제한한다. 여기서 출처라는 게 뭔지 알아보자. 출처란? 두 URL의 프로토콜, 도메인 이름, 포트(명시한 경우) 가 모두 같아야 동일한 출처다. 과 동일한 출처는 다음과 같다. 위 두 URL은 path만 다를 뿐 출처는 동일하다. 아래 URL들과 같이 protocol, domain name, port 중…

URL이란? Uniform Resource Locator 웹에서 정해진 유일한 리소스의 주소 URL은 웹에 게시된 어떤 자원(리소스)를 찾기 위해서 브라우저에 의해 사용되는 메카니즘이다. 각각의 URL은 유일한 리소스를 가리킨다. URL의 구조 Protocol 브라우저가 어떤 프로토콜을 사용하는지 프로토콜: 컴퓨터 네트워크에서 원할하게 데이터를 전송하기 위해 정한 규약 Domain Name 말그대로 도메인 이름 IP 주소가 사용되기도 함 Port 포트 번호 표준 HTTP 포트를 사용한다면 포트 번호가 생략됨 HTTP의 경우 80 생략, HTTPS의 경우 443 생략 Path 웹서버에서 리소스에 대한 경로 Parameters 웹서버에서 제공하는 추가 파라미터 으로 구분 Anchor 리소스 내에 정해진 위치를 보여주는 Anchor(닻) 뒤에 오는 부분은 가치가 없다고 판단해 절대 서버에 요청을 보내지 않음 URL과 URI 차이 URI(Uniform Resource Identifie…

인터넷이란? 컴퓨터들이 서로 통신 가능한 거대한 네트워크 인터넷은 컴퓨터로 연결하여 TCP/IP를 이용해 정보를 주고받는 컴퓨터 네트워크입니다. 여기서 TCP/IP 란? Transmission Control Protocol(전송 제어 규약)과 Internet Protocol(인터넷 규약) 컴퓨터 사이의 통신 표준 및 네트워크의 라우팅 및 상호연결에 대한 자세한 규칙을 지정하는 프로토콜 스위트 데이터가 어떻게 웹을 건너 여행해야 하는지 정의하는 통신 규약 우리는 어떻게 바다 건너 먼 나라의 컴퓨터와 통신할 수 있을까요? 인터넷은 어떻게 동작할까요? 인터넷이 동작하는 방법 각 컴퓨터는 라우터라는 특수한 소형 컴퓨터에 연결됩니다. 라우터는 컴퓨터에서 보낸 메세지가 올바른 대상 컴퓨터에 최적의 경로로 도착할 수 있도록 중계 역할을 합니다. 그 라우터를 아주 먼 곳의 라우터에 연결하기 위해서 전화기 기반의 시설을 이용합니다. 전화기 기반의 시설은 이미 세계 어느 곳에서도 연결되어 있기 때…