Static website란 무엇인가? Static Website 하나 이상의 정적 웹페이지로 이루어져 있는 사이트 Static Webpage 브라우저에서 동일한 방식으로 로드 되는 HTML 파일 > 정적 사이트(Static Website)는 서버 또는 CDN에 저장된 사전 빌드(pre-built)된 HTML을 제공한다. 즉, 브라우저에 빠르게 로드될 수 있는 상태다. Static Webpage vs. Dynamic Webpage 정적인 웹페이지는 단순한 HTML로 되어 있다. 브라우저에서 로드될 필요가 없어 빠르게 로드될 수 있다. 사용자가 페이지를 요청할 때마다 웹 서버에서 바로 제공된다. <span style=

지난 글에서 웹사이트 속도가 사용자 경험, SEO 및 전환율(conversion rates)에 큰 영향을 미치는 것을 배웠다. 웹사이트 성능을 개선하는 건 웹사이트로 트래픽을 유도하고 사용자를 유지하는 데 필수적이다. 웹사이트 속도를 높이기 위해 취할 수 있는 몇 가지 단계에 대해 알아보자 웹사이트 성능 테스트 >💡 사이트 속도 테스트를 통해 웹사이트의 성능을 저하시키는 특정 자산이나 리소스를 파악할 수 있다. 웹사이트 속도를 왜 테스트해야 할까? 배경 로컬 테스트 환경에서는 다양한 네트워크 조건 등에서 사이트가 어떻게 동작할 지 잘 예측하기 어렵다. 목표 실제 상황을 시뮬레이션해서 웹사이트가 실제로 얼마나 잘 작동하는지에 대한 데이터를 제공하는 것 효과 사이트의 속도뿐만 아니라 어떤 요소가 속도 저하를 일으키는지 알 수

웹 사이트 로드 시간이 길면 사용자 경험, 사이트 트래픽 및 SEO에 부정적인 영향이 있을 수 있다. 웹 사이트의 성능, 속도가 이들에 어떻게 영향을 주며 그것을 어떻게 측정할 수 있는지 자세히 알아보자. Site Speed 웹 사이트 속도(성능) 브라우저가 특정 사이트의 웹 페이지를 얼마나 빨리 로드하는가를 의미한다. 성능이 좋지 않은 사이트는 브라우저에 느리게 표시되며 이러한 사이트에서는 사용자의 이탈률이 높다. 반대로 신속하게 로드되는 사이트는 일반적으로 트래픽이 많으며 전환율도 높다. Site Speed는 왜 중요할까? 페이지 속도는 전환율과 SEO 모두에 영향을 미친다. 따라서 이를 개선하면 페이지의 총 트래픽과 전환율을 모두 높일 수 있다. Conversion rate(전환율) > 웹 페이지 총 방문자 중 원하는 행동(전환)을 하는 사용자의 비율 다양한 연구 결과에 따르면 사이트 속도는

인증(Authentication) 전략은 보호된 리소스에 대한 액세스 권한을 부여하기 위해 사용자 또는 시스템의 신원을 확인하는 데 사용되는 방법 또는 기술이다. 인증이 무엇이며 어떻게 작동하는지 알고 애플리케이션에 대한 인증 전략을 선택할 때 더 나은 결정을 내려보자. Basic Authentication > - HTTP를 통해 리소스에 접근하기 위한 인증 방법으로, credentials가 요청 헤더로 전달되는 방식이다. > - API에서도 사용할 수 있으며, 이 경우에는 token based Authentication과 유사하다. > - TLS/HTTPS와 사용하지 않으면 누구나 credentials를 디코딩할 수 있기 때문에 안전하지 않다. How does it work? 클라이언트가 보호된 URL에 접근한다. 서버는 요청이 Authorization헤더가 올바른 credentials를 가지고 있는지 확

브라우저 렌더링과 CSS 브라우저는 CSS를 다운로드하고 CSS 개체 모델을 빌드해 페이지를 그릴 수 있다. > 스타일이 지정되지 않은 페이지를 페인팅한 다음, 스타일이 구문 분석된 후 다시 페인팅하면 나쁜 사용자 경험이 된다. 브라우저는 특정 렌더링 경로를 따른다. 브라우저 렌더링은 페인트는 레이아웃, 렌더링 트리가 생성된 후에 발생한다. (DOM과 CSSOM 트리가 모두 필요하다.) CSSOM 구성을 최적화하려면 불필요한 스타일을 제거하고 축소, 압축 및 캐시하고 페이지 로드 시 필요하지 않은 CSS를 추가 파일로 분할하여 CSS 렌더링 차단을 줄여야 한다. 렌더링 차단 최적화 > CSS는 미디어 쿼리를 사용하여 특정 조건에 대한 스타일 범위를 지정할 수 있다. 미디어 쿼리는 반응형 웹 디자인에 중요하며, 렌더링 경로를 최적화하는 데 도움이 된다. 브라우저는 이러한 **모든 스타일을 구문 분석할 때까지 렌더

검색 엔진 최적화 > 검색 엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스 Google 검색의 작동 방식 Google 검색은 웹 크롤러라는 소프트웨어를 사용하는 완전히 자동화된 검색엔진이다. > 웹 크롤러는 정기적으로 웹을 탐색해 Google 색인에 추가할 페이지를 찾는다. Google 검색의 3단계 크롤링 : Google은 크롤러라는 자동화된 프로그램을 사용해 인터넷에서 찾은 페이지로부터 텍스트, 이미지, 동영상을 다운로드 한다. 색인 생성 : Google은 페이지의 텍스트, 이미지, 동영상 파일을 분석하고 Google 색인에 이 정보를 저장한다. 검색결과 게재 : 사용자의 검색어와 관련된 정보를 반환한다. 크롤링 웹에 어떤 페이지가 존재하는지 파악하는 것으로, URL 검색을 통해 페이지를 방문(크롤링)한다. Googlebot(로봇, 크롤러, 스파이더)은 알고리즘 프로세스를 사용해 크롤링할 사이트와 크롤링 빈도, 각 사이트에서 가

웹 접근성이란 > "Internet is for everyone, but it won't be unless WE make it so." Vint Cerf, 7. April 1999 필요성 모든 사람이 동등하게 웹을 사용할 수 있어야 한다. 정보를 다르게 처리하는 사람들은 모두 웹 사이트와 앱에 액세스하고 사용할 수 있어야 한다. 영구적/일시적/상황적 장애 외에도 모바일 장치를 사용하는 사람이나 느린 네트워크 연결을 사용하는 사람들도 포함한다. 웹 기술에는 접근성을 위한 많은 기능이 있으며 우리는 모든 사용자를 배제하지 않도록 이러한 기능을 사용해야 한다. 장점 시맨틱한 HTML은 SEO를 향상시켜, 사이트를 찾기 쉽고 시장성 있도록 해

Semantics 프로그래밍에서 Semantics는 코드 조각의 의미를 말한다. > W3C에 따르면 "시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용할 수 있다." Semantic, 즉 의미론적 요소는 브라우저와 개발자 모두에게 의미를 명확하게 설명한다. 의미 없는 요소의 예 : `, ` - 내용에 대해 알려주는 것이 없다. 의미 요소의 예 : `, , - 내용을 명확하게 정의한다. HTML을 Semantic 콘텐츠 배포를 위한 강력한 도구로 생각하자! Semantic HTML > 예를 들어 HTML의 `` 요소는 의미론적 요소로, "페이지의 최상위 표제" 역할(또는 의미)을 감싸는 텍스트를 제공한다. 이러한 태그는, 스타일에 한정적인 의미가 아닌 의미론적 가치를 지닌다. 어떻게 보일 것인가(스타일)는 `

DNS > DNS(Domain Name System)은 인터넷의 전화번호부와 같다. google.com같은 도메인 이름으로 온라인 정보에 엑세스할 수 있다. 웹 브라우저는 IP 주소로 상호작용하는데, DNS는 도메인 이름을 IP 주소로 변환해 브라우저가 인터넷 리소스를 로드할 수 있도록 해준다. 인터넷에 연결된 각 장치에는 다른 기계가 장치를 찾는데 필요한 고유한 IP 주소가 있다. DNS 서버는 IPv4, IPv6 체계의 복잡한 영숫자 IP 주소를 기억하지 않아도 된다. 도메인 이름이란? > 도메인 이름은 인터넷 인프라의 핵심 부분이다. 도메인 이름은 인터넷에서 사용할 수 있는 모든 웹 서버에 대해 사람이 읽을 수 있는 주소를 제공한다. 도메인 이름 : 클라이언트 소프트웨어에서 웹사이트에 액세스하는 데 사용되는 숫자 IP 주소 에 매핑되는 텍스트 문자열 예를 들어 Google의 도메인 이름은 'google.com' DNS 덕분에

브라우저는 널리 사용되는 소프트웨어다. 이 글을 통해 브라우저 주소 창에 google.com을 입력했을 때 브라우저가 어떻게 동작해서 구글 페이지가 화면에 보이게 되는지 알아보자. 왜 중요할까 > 빠른 사이트는 더 나은 사용자 경험을 제공한다. 사용자는 로딩 속도가 빠르고 상호 작용하기 쉬운 콘텐츠가 포함된 웹 경험을 원하고 기대한다. 웹 성능에 있어서 대기 시간과 브라우저가 단일 스레드라는 사실에 대해 이해하는 것이 중요하다. 대기 시간 대기 시간은 빠른 로드를 보장하기 위해 극복해야 하는 것 페이지 로드가 가능한 한 빨리 이루어지도록 해야 한다. 브라우저는 단일 스레드 부드러운 스크롤에서 터치 반응에 이르기까지 사이트 상호 작용이 원활하게 이루어지도록 해야 한다. 메인 스레드가 우리가 하는 모든 작업을 완료하고, 사용자 상호 작용을 처리하는 데 언제든 사용할 수 있도록 하는 **렌더링 시간

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이라는 프로그램 언어로 만들어진 웹 페이지