# roadmap.sh
SSG & JAMstack
Static website란 무엇인가? Static Website 하나 이상의 정적 웹페이지로 이루어져 있는 사이트 Static Webpage 브라우저에서 동일한 방식으로 로드 되는 HTML 파일 > 정적 사이트(Static Website)는 서버 또는 CDN에 저장된 사전 빌드(pre-built)된 HTML을 제공한다. 즉, 브라우저에 빠르게 로드될 수 있는 상태다. Static Webpage vs. Dynamic Webpage 정적인 웹페이지는 단순한 HTML로 되어 있다. 브라우저에서 로드될 필요가 없어 빠르게 로드될 수 있다. 사용자가 페이지를 요청할 때마다 웹 서버에서 바로 제공된다. <span style=
How to speed up websites
지난 글에서 웹사이트 속도가 사용자 경험, SEO 및 전환율(conversion rates)에 큰 영향을 미치는 것을 배웠다. 웹사이트 성능을 개선하는 건 웹사이트로 트래픽을 유도하고 사용자를 유지하는 데 필수적이다. 웹사이트 속도를 높이기 위해 취할 수 있는 몇 가지 단계에 대해 알아보자 웹사이트 성능 테스트 >💡 사이트 속도 테스트를 통해 웹사이트의 성능을 저하시키는 특정 자산이나 리소스를 파악할 수 있다. 웹사이트 속도를 왜 테스트해야 할까? 배경 로컬 테스트 환경에서는 다양한 네트워크 조건 등에서 사이트가 어떻게 동작할 지 잘 예측하기 어렵다. 목표 실제 상황을 시뮬레이션해서 웹사이트가 실제로 얼마나 잘 작동하는지에 대한 데이터를 제공하는 것 효과 사이트의 속도뿐만 아니라 어떤 요소가 속도 저하를 일으키는지 알 수
Why Site Speed Matters
웹 사이트 로드 시간이 길면 사용자 경험, 사이트 트래픽 및 SEO에 부정적인 영향이 있을 수 있다. 웹 사이트의 성능, 속도가 이들에 어떻게 영향을 주며 그것을 어떻게 측정할 수 있는지 자세히 알아보자. Site Speed 웹 사이트 속도(성능) 브라우저가 특정 사이트의 웹 페이지를 얼마나 빨리 로드하는가를 의미한다. 성능이 좋지 않은 사이트는 브라우저에 느리게 표시되며 이러한 사이트에서는 사용자의 이탈률이 높다. 반대로 신속하게 로드되는 사이트는 일반적으로 트래픽이 많으며 전환율도 높다. Site Speed는 왜 중요할까? 페이지 속도는 전환율과 SEO 모두에 영향을 미친다. 따라서 이를 개선하면 페이지의 총 트래픽과 전환율을 모두 높일 수 있다. Conversion rate(전환율) > 웹 페이지 총 방문자 중 원하는 행동(전환)을 하는 사용자의 비율 다양한 연구 결과에 따르면 사이트 속도는
인터넷은 어떻게 동작하지?
한 두달간 멈췄었던 웹 이론 공부 https://roadmap.sh/ 에서 차근차근 처음부터 iterate하는것으로 한다. https://developer.mozilla.org/en-US/docs/Learn/Commonquestions/Webmechanics/HowdoestheInternetwork 맨 처음, 인터넷의 작동원리부터 함. 1. 요약 인터넷은 웹의 척추와도 같은 존재이다. 인터넷이 없이 웹이 존재할 수는 없다. 인터넷은, 서로 통신할 수 있는 컴퓨터들의 거대한 네트워크이다. 인터넷은 1960년대 미군의 연구 프로젝트로 시작하고 1980년대 인트라넷으로 발전하였다. 이후 계속해서 발전해왔지만, 기본 원리는 바뀐 것이 없다. 인터넷은 컴퓨터를 서로 연결하고 그 연결을 유지하는 방법이다. 2. 상세 2-1. 네트워크란 투 컴퓨터가 서로 통신할 때, 물리적으로 직접 연결하거나(이더넷 케이블) 혹은 무선으로(wifi, 블루투스)로 연
인증(Authentication) 전략
인증(Authentication) 전략은 보호된 리소스에 대한 액세스 권한을 부여하기 위해 사용자 또는 시스템의 신원을 확인하는 데 사용되는 방법 또는 기술이다. 인증이 무엇이며 어떻게 작동하는지 알고 애플리케이션에 대한 인증 전략을 선택할 때 더 나은 결정을 내려보자. Basic Authentication > - HTTP를 통해 리소스에 접근하기 위한 인증 방법으로, credentials가 요청 헤더로 전달되는 방식이다. > - API에서도 사용할 수 있으며, 이 경우에는 token based Authentication과 유사하다. > - TLS/HTTPS와 사용하지 않으면 누구나 credentials를 디코딩할 수 있기 때문에 안전하지 않다. How does it work? 클라이언트가 보호된 URL에 접근한다. 서버는 요청이 Authorization헤더가 올바른 credentials를 가지고 있는지 확
브라우저의 랜더링 과정
서론 Node.js : 구글의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 Node.js의 등장으로 자바스크립트는 서버 사이드 애플리케이션 개발에서도 사용할 수 있게 되었다. 그래도 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드다. 대부분의 프로그래밍 언어 - 운영체제나 가상머신 위에서 실행된다. 자바스크립트 - 브라우저에서 HTML, CSS와 함께 실행된다. > 그렇다면 어떻게 브라우저는 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 파싱(해석)하여 브라우저에 랜더링할까? 브라우저 랜더링 과정 브라우저는 HTML, CSS, 자바스크립트 파일 등 랜더링에 필요
[TIL 1] 인터넷이란?
인터넷이란? 💡 인터넷: 표준화된 프로토콜 세트를 통해 통신하는 서로 연결된 컴퓨터들의 글로벌 네트워크이자 전 세계 컴퓨터들을 하나로 연결하는 거대한 컴퓨터 통신망 💡 프로토콜: 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계 인터넷은 전 세계 컴퓨터들을 하나로 연결하는 거대한 컴퓨터 통신망이자 세계에서 가장 인기 있는 컴퓨터 네트워크예요. 1969년에 학술 연구 프로젝트로 시작되었으며, 1990년대에 세계적인 상업 네트워크가 되었어요. 인터넷은 소유자가 있나요? 아니요, 인터넷은 그 누구도 소유할 수 없고, 제어할 수 없는 공공재입니다. 그 덕분에 전세계적으로 사랑 받고 빠르게 발전할 수 있었어요. 대신 수천 개의 서로 다른 조직이 자체 네트워크를 운
01. How does the Internet work?
How does the Internet work? 목적 >웹 기술 인프라의 기초와 인터넷과 웹의 차이점을 배우는 것 인터넷 >- 인터넷은 웹의 핵심적인 기술 인터넷의 가장 기본적인 것은, 컴퓨터들이 서로 통신 가능한 거대한 네트워크라는 것 1960년대에 등장 웹 >- 인터넷을 활용해서 HTML 프로그램 언어로 만들어진 웹 페이지를 통신하는 것 팀 버너스리가 처음 고안 웹은 누구나 사용할 수 있도록 public domain이라는 라이센스 공개 1990년대에 등장 팀 버너스리는 컴퓨터 사이에 정보를 주고 받기 위해 최초로 웹 브라우저와 웹 서버를 개발 HTTP - 웹 브라우저와 웹 서버 사이에서 사용되는 통신 규약 HTML - 웹 페이지의 정보를 담고 있는 언어 
CSS 최적화
브라우저 렌더링과 CSS 브라우저는 CSS를 다운로드하고 CSS 개체 모델을 빌드해 페이지를 그릴 수 있다. > 스타일이 지정되지 않은 페이지를 페인팅한 다음, 스타일이 구문 분석된 후 다시 페인팅하면 나쁜 사용자 경험이 된다. 브라우저는 특정 렌더링 경로를 따른다. 브라우저 렌더링은 페인트는 레이아웃, 렌더링 트리가 생성된 후에 발생한다. (DOM과 CSSOM 트리가 모두 필요하다.) CSSOM 구성을 최적화하려면 불필요한 스타일을 제거하고 축소, 압축 및 캐시하고 페이지 로드 시 필요하지 않은 CSS를 추가 파일로 분할하여 CSS 렌더링 차단을 줄여야 한다. 렌더링 차단 최적화 > CSS는 미디어 쿼리를 사용하여 특정 조건에 대한 스타일 범위를 지정할 수 있다. 미디어 쿼리는 반응형 웹 디자인에 중요하며, 렌더링 경로를 최적화하는 데 도움이 된다. 브라우저는 이러한 **모든 스타일을 구문 분석할 때까지 렌더
SEO란 무엇인가
검색 엔진 최적화 > 검색 엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스 Google 검색의 작동 방식 Google 검색은 웹 크롤러라는 소프트웨어를 사용하는 완전히 자동화된 검색엔진이다. > 웹 크롤러는 정기적으로 웹을 탐색해 Google 색인에 추가할 페이지를 찾는다. Google 검색의 3단계 크롤링 : Google은 크롤러라는 자동화된 프로그램을 사용해 인터넷에서 찾은 페이지로부터 텍스트, 이미지, 동영상을 다운로드 한다. 색인 생성 : Google은 페이지의 텍스트, 이미지, 동영상 파일을 분석하고 Google 색인에 이 정보를 저장한다. 검색결과 게재 : 사용자의 검색어와 관련된 정보를 반환한다. 크롤링 웹에 어떤 페이지가 존재하는지 파악하는 것으로, URL 검색을 통해 페이지를 방문(크롤링)한다. Googlebot(로봇, 크롤러, 스파이더)은 알고리즘 프로세스를 사용해 크롤링할 사이트와 크롤링 빈도, 각 사이트에서 가
Domain, DNS 그리고 호스팅
📍 백엔드 로드맵의 네번째 이야기! Domain, DNS 그리고 호스팅에 대해서 알아보겠습니다! 01. 들어가면서 Domain, DNS 그리고 호스팅의 개념은 각각 다 다르지만 서로 연관되어 있어 브라우저의 동작원리를 설명하기 전에 3개의 개념을 관련지어 설명해보려고 합니다! 02. Domain 컴퓨터가 처리할 수 있는 숫자로 된 인터넷 주소 👉 IP 주소 IP 주소를 사람이 기억하기 쉽게 문자로 바꾼 인터넷 주소 👉 Domain(도메인) 영어 소문자, 숫자, 하이픈의 조합으로만 표현되어야 하고 고유한 값이어야 합니다. 02-1. Domain 체계 <img src="https://velog.velcdn.com/images/julianneyi/post/c30b8e4a-e204-4b80-9c6c-1a05f057065e/
웹 접근성이란 무엇인가
웹 접근성이란 > "Internet is for everyone, but it won't be unless WE make it so." Vint Cerf, 7. April 1999 필요성 모든 사람이 동등하게 웹을 사용할 수 있어야 한다. 정보를 다르게 처리하는 사람들은 모두 웹 사이트와 앱에 액세스하고 사용할 수 있어야 한다. 영구적/일시적/상황적 장애 외에도 모바일 장치를 사용하는 사람이나 느린 네트워크 연결을 사용하는 사람들도 포함한다. 웹 기술에는 접근성을 위한 많은 기능이 있으며 우리는 모든 사용자를 배제하지 않도록 이러한 기능을 사용해야 한다. 장점 시맨틱한 HTML은 SEO를 향상시켜, 사이트를 찾기 쉽고 시장성 있도록 해
Semantic HTML
Semantics 프로그래밍에서 Semantics는 코드 조각의 의미를 말한다. > W3C에 따르면 "시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용할 수 있다." Semantic, 즉 의미론적 요소는 브라우저와 개발자 모두에게 의미를 명확하게 설명한다. 의미 없는 요소의 예 : `, ` - 내용에 대해 알려주는 것이 없다. 의미 요소의 예 : `, , - 내용을 명확하게 정의한다. HTML을 Semantic 콘텐츠 배포를 위한 강력한 도구로 생각하자! Semantic HTML > 예를 들어 HTML의 `` 요소는 의미론적 요소로, "페이지의 최상위 표제" 역할(또는 의미)을 감싸는 텍스트를 제공한다. 이러한 태그는, 스타일에 한정적인 의미가 아닌 의미론적 가치를 지닌다. 어떻게 보일 것인가(스타일)는 `
OSI 7계층 완벽 정리
OSI 7 계층이란? 간단히 말해서, 네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것입니다. 지금부터 각각의 단계에서 어떤 일이 일어나는지 알아보러 가봅시다! 그 전에, 왜 계층을 나눈 것일까? 🤔 그 이유는 통신이 일어나는 과정을 단계별로 알 수 있기 때문입니다. 또한 단계별로 나눠놓으니 흐름을 한눈에 알아보기 쉽고, 사람들이 이해하기 쉽게 되죠! 만약 7단계 중 특정한 곳에 이상이 생기면 다른 단계의 장비 및 소프트웨어를 건들이지 않고도 이상이 생긴 단계만 고칠 수 있고요! 1계층(물리계층) 대표적인 통신 장비: 통신 케이블, 리피터, 허브 0과 1의 나열을 아날로그 신호로 바꾸어 전선으로 흘려 보내고(encoding) 아날로그 신호가 들어오면 0과 1의 나열로 해석하여(decoding) 물리적으로 연결된 두 대의 컴퓨터가 0과 1의 나열을 주고받을 수 있게 해주는 모
DNS란 무엇인가
DNS > DNS(Domain Name System)은 인터넷의 전화번호부와 같다. google.com같은 도메인 이름으로 온라인 정보에 엑세스할 수 있다. 웹 브라우저는 IP 주소로 상호작용하는데, DNS는 도메인 이름을 IP 주소로 변환해 브라우저가 인터넷 리소스를 로드할 수 있도록 해준다. 인터넷에 연결된 각 장치에는 다른 기계가 장치를 찾는데 필요한 고유한 IP 주소가 있다. DNS 서버는 IPv4, IPv6 체계의 복잡한 영숫자 IP 주소를 기억하지 않아도 된다. 도메인 이름이란? > 도메인 이름은 인터넷 인프라의 핵심 부분이다. 도메인 이름은 인터넷에서 사용할 수 있는 모든 웹 서버에 대해 사람이 읽을 수 있는 주소를 제공한다. 도메인 이름 : 클라이언트 소프트웨어에서 웹사이트에 액세스하는 데 사용되는 숫자 IP 주소 에 매핑되는 텍스트 문자열 예를 들어 Google의 도메인 이름은 'google.com' DNS 덕분에
HTTP, HTTPS란?
📍 백엔드 로드맵의 두번째 이야기! HTTP, HTTPS에 대해서 알아보겠습니다! 01. 들어가기 전 1990년 web을 세상에 내놓았을 때, 웹은 아래 4가지로 이루어져 있었습니다. html url, uri web browser, web server http 02. HTTP HTTP란? 클라이언트와 서버가 통신할 때 html, css, js가 컨텐츠라면 서버와 클라이언트가 컨텐츠를 주고받기 위해서 서로가 알아들을 수 있는 공통의 메시지 > http://google.com → 클라이언트는 http 형식으로 된 요청을 보낼거야!라고 서버에게 보내고 → 서버에게 받은 http 응답을 클라이언트는 http 형식에 따라서 웹페이지를 보여줍니다. 03. HTTPS HTTPS의 S는 Secure(보안)을 뜻합니다.
브라우저는 어떻게 동작하는가
브라우저는 널리 사용되는 소프트웨어다. 이 글을 통해 브라우저 주소 창에 google.com을 입력했을 때 브라우저가 어떻게 동작해서 구글 페이지가 화면에 보이게 되는지 알아보자. 왜 중요할까 > 빠른 사이트는 더 나은 사용자 경험을 제공한다. 사용자는 로딩 속도가 빠르고 상호 작용하기 쉬운 콘텐츠가 포함된 웹 경험을 원하고 기대한다. 웹 성능에 있어서 대기 시간과 브라우저가 단일 스레드라는 사실에 대해 이해하는 것이 중요하다. 대기 시간 대기 시간은 빠른 로드를 보장하기 위해 극복해야 하는 것 페이지 로드가 가능한 한 빨리 이루어지도록 해야 한다. 브라우저는 단일 스레드 부드러운 스크롤에서 터치 반응에 이르기까지 사이트 상호 작용이 원활하게 이루어지도록 해야 한다. 메인 스레드가 우리가 하는 모든 작업을 완료하고, 사용자 상호 작용을 처리하는 데 언제든 사용할 수 있도록 하는 **렌더링 시간
HTTP란 무엇인가
1990년대 팀버너스리가 Web을 고안했을 때, 웹에는 4가지 핵심 요소가 있었다. HTML URL, URI Web browser, Web server HTTP HTTP(HyperText Transfer Protocol) HTTP란 > World Wide Web의 기초이며 TCP/IP 기반에서 클라이언트와 서버(호스트)가 서로 통신하는 방법을 표준화하는 애플리케이션 계층 프로토콜 이다. HTTP는 콘텐츠가 인터넷을 통해 요청되고 전송되는 방식을 정의한다. 이미지 및 비디오를 가져오거나 서버에 콘텐츠를 게시하는 데도 사용된다. 기본적으로 TCP 포트 80을 사용하지만, 다른 포트도 사용할 수 있다. (HTTPS는 443 포트 사용) 웹 브라우저와 웹 서버 사이에는 라우터, 모뎀 등 많은 컴퓨터가 있다. 웹의 계층화로 이것들은 네트워크 및
인터넷은 어떻게 동작하는가
인터넷과 웹 인터넷과 웹의 관계 > 인터넷은 세상에서 가장 인기있는 컴퓨터 네트워크다. 많은 사람들은 웹 브라우저를 사용해 인터넷 콘텐츠에 접근할 수 있다. 이러한 웹의 대중성 때문에 인터넷 === 웹이라고 생각하곤 하는데, 실제로 웹은 인터넷 응용 프로그램의 하나이다. 인터넷이 운영체제라면, 웹은 그 위에서 동작하는 애플리케이션이라고 비유할 수 있겠다. 인터넷과 웹의 역사 > 1960년대에 인터넷이 등장하고, 1990년대에 웹이 등장했다. 인터넷 전세계 컴퓨터들이 연결되어 파일(데이터)을 주고 받는 거대한 네트워크 웹 인터넷을 활용해서 HTML이라는 프로그램 언어로 만들어진 웹 페이지
인터넷은 어떻게 동작하는가?
📍 백엔드 로드맵의 첫번째 이야기! 인터넷의 동작원리에 대해서 알아보겠습니다! 01. 들어가기 전 우리가 매일 접속하는 웹 브라우저, 유튜브, 실시간 게임에는 언제나 인터넷이라는 커다란 네트워크가 작동하고 있습니다. 02. 인터넷의 탄생과정 통신을 위해선 두 개 이상의 컴퓨터가 연결되어 있어야 합니다. 연결할 컴퓨터의 개수가 증가할수록 필요한 케이블 역시 그 제곱으로 증가하게 됩니다. 이더넷 : 여러 대의 컴퓨터들이 하나의 선으로 연결되어 서로 소통하는 종전의 기술 → 이걸로 수십억의 컴퓨터를 연결하기엔 역부족 그래서 나타난게 → 인터넷