1 - CSR 생성 mac → 키체인 접근 → 인증서 지원 -> 인증기관에서 인증서 요청 2 - DNS 검증 SSL 인증서를 발급하기 전에, 해당 도메인의 소유주가 맞는 지 확인하는 검증 단계입니다. 도메인 구입 사이트 또는 호스팅 사이트에서 cname 등록인 필요합니다. (ex. aws route53, gabia 등) 하루를 기다려도 검증이 안될 시 잘못 입력한 부분이 있는지 확인해야 합니다. Type: CNAME Record Host: CNAME Value: CNAME value TTL: Automatic 🚫 주의할점: Host 입력 시 도메인 제거 후 입력할 것! 3 - SSL 인증서 다운로드 DNS 검증 완료 시 구매 사이트로부터 다운로드 4 - chain 파일 생성 (필요 시) SSL & CSR Decoder 접속 후 CSR 입력 후 DECODE Bundle (Nginx) 다운로드 5 - 개인키 파일 생성 mac → 키체인 접근 → 도메인 검색(ex. google.com)…

포스팅 배경 Namecheap SSL 인증에 대한 자료 부족 Namecheap 사이트에서 생성한 SSL 인증서가 만료되어, https 적용을 위해 재발급 했습니다. Namecheap 에서 제공하는 문서만으로는 재발급이 쉽지 않아서 작성했습니다. 이 게시물이 저와 같은 상황의 분들에게 도움이 되면 좋겠습니다. 순서 인증서 발행 인증서 다운로드 CNAME 등록 모든 인증서 파일을 단일 파일로 결합 Nginx 설정 확인 및 재실행 전체 과정 1. 인증서 발행 https://ap.www.namecheap.com/domains/ssl/detail/*CertificateID*/*PrimaryDomain*/dashboard 해당 페이지로 접속하거나, Namecheap 사이트에서 Domain List → Details → SSL → Details 로 이동합니다. (갱신하고자 하는 Domain 과 Certificate 선택) 만료된 CSR Code 를 복사합니다. 만료된 CSR Code를 사용…

www.google.com을 검색 시 화면이 출력되는 과정 사용자가 주소창에 구글 주소를 입력한다. (https://www.google.com) DNS에서 도메인 주소에 해당하는 IP 주소를 찾는다. 브라우저가 서버와 TCP connection을 한다. 브라우저가 서버에 HTTP 요청을 한다. 서버가 HTTP 응답을 보낸다. html 파일과 CSS 파일을 각각 파싱 하여 DOM, CSSOM Tree를 만든다. (Parsing) DOM Tree 와 CSSOM Tree를 결합하여 Render Tree를 만든다. Render Tree에서 각 노드의 위치와 크기를 계산한다. (Layout) Layout 단계에서 계산된 값을 여러 Layer로 나눠 픽셀을 채워 넣는다. (Painting) 여러 Layer로 나누어진 픽셀들을 우리가 보는 화면처럼 합성해 준다. (Composite) 15 번은 통신과 관련된 과정이고, 611 번은 화면이 어떻게 그려지는지(렌더링)에 대한 과정입니다. 본 게시물…

​ 에러 배경 vue 에서 kakao map api 를 사용하여 지도에서 맛집(장소)을 검색했다. 주소 이외의 장소에 대한 상세정보가 필요했다. 카카오 플레이스 (map.place.kakao) 로 장소에 대한 정보를 조회 요청했다. Cors Error 발생 ​ 에러 발생 이유 로컬 주소(localhost:8000) 와 조회하려는 주소(map.place.kakao:443) 의 출처가 다르다. ​ CORS Error (Cross-Origin Resource Sharing) 간단히 말해서, 브라우저에서 요청하는 주소와 응답하는 주소(출처)가 다를 때 허락한 요청 외에는 에러를 발생시키겠다. ​ ex) 둘을 비교하면 프로토콜(http) 와 호스트(loaclhost), 포트(8000) 모두 다르다. 에러 발생 요청하는 주소: http :// localhost : 8000 응답하는 주소: https :// map.place.kakao : 443 ​ 허락한 요청이란? 출처가 다르더라도 요청을 …

안녕하세요. 이번 게시물은 이전 게시물 [SPA - 등장 배경]의 다음 편입니다. 이전 게시물에서는 SPA가 등장한 배경, MPA와 차이점을 소개했습니다. SPA는 하나의 페이지를 서버로부터 받아와 브라우저에서 렌더링을 하며 내용을 채웁니다. 이는 CSR과 궁합이 맞으며, 실제로 SPA + CSR로 많이 사용됩니다. 반면 MPA는 문서에 대한 처리를 서버에서 전적으로 하므로, SSR과 궁합이 맞습니다. 따라서, 이번 게시물에서는 SPA/MPA 원리와 연관이 있는 CSR/SSR에 대해 소개하려 합니다. CSR(Client Side Rendering) 클라이언트에서 렌더링을 하는 것 클라이언트는 빈 껍데기의 index.html을 받고, 추가로 서버로부터 js 파일을 다운로드합니다. 추가로 필요한 데이터는 서버에 요청해서 데이터를 받은 다음에 동적으로 html을 생성합니다. 장점 페이지를 전환하는 과정에서 링크로 이동하는 것이기 아니기 때문에 깜빡임이 없으므로 사용자 친화적이다. 서버…

많은 웹 프론트엔드 개발자가 React, vue, angular 프레임워크를 사용하여 개발한다. 이들은 모두 SPA 프레임워크이다. 그런데 SPA는 뭘까? SPA를 설명하기 앞서, SPA는 모던 웹의 패러다임이라고 한다. 과거 웹 페이지에 대비해 어떠한 목적으로 SPA를 사용하기 시작한 지 알아봤다. 1. 서버의 부하 감소 과거의 웹 페이지 형태(MPA, Multi Page Application)에서는 사용자가 메뉴를 클릭 시, 완전히 새로운 페이지를 서버에서 전송해 줬다. 서버에서 다음과 같은 작업이 이루어졌다. 사용자에게 요청이 들어오면, DB로부터 데이터를 가져온다. ASP, JSP, PHP 같은 파일에 데이터를 넣어준 후 HTML 형태화 시켜서 전송해 준다. ​ 과거의 웹 페이지에서 브라우저는 화면을 보여주기만 할 뿐, 요청한 웹 문서에 대한 처리는 전부 서버에서 담당한 것으로 보인다. 즉, 페이지가 요청될 때마다 서버에 부하가 생긴다. ​ SPA는 웹 애플리케이션에 필요한…