# Front-end Roadmap
인증(Authentication) 전략
인증(Authentication) 전략은 보호된 리소스에 대한 액세스 권한을 부여하기 위해 사용자 또는 시스템의 신원을 확인하는 데 사용되는 방법 또는 기술이다. 인증이 무엇이며 어떻게 작동하는지 알고 애플리케이션에 대한 인증 전략을 선택할 때 더 나은 결정을 내려보자. Basic Authentication > - HTTP를 통해 리소스에 접근하기 위한 인증 방법으로, credentials가 요청 헤더로 전달되는 방식이다. > - API에서도 사용할 수 있으며, 이 경우에는 token based Authentication과 유사하다. > - TLS/HTTPS와 사용하지 않으면 누구나 credentials를 디코딩할 수 있기 때문에 안전하지 않다. How does it work? 클라이언트가 보호된 URL에 접근한다. 서버는 요청이 Authorization헤더가 올바른 credentials를 가지고 있는지 확
렌더링 패턴
Rendering > 렌더링이란 데이터와 코드를 유저에게 보여주기 위한 HTML로 변환하는 과정이다. 렌더링 과정은 서버 혹은 브라우저(클라이언트)에서 이루어지며, 한번에 혹은 부분적으로 진행될 수 있다. 앞으로 설명할 렌더링 패턴들에는 UX, 성능, DX 측면에서 각각의 Trade-offs가 있다. 1. Static Website > 가장 기본적인 렌더링 패러다임 모든 웹 페이지를 미리 넣어놓는다. 클라우드 저장소(ex. AWS S3)에 정적 파일(static file) 형태로 올려놓고 도메인 이름을 지정한다. Hugo, jekyll, 11ty Drawbacks No Dynamic Data 데이터가 변경되는 웹사이트에 좋지 않다. 인터랙션이나 동적인 데이터가 많은 웹사이트에 적합하지 않다. 하지만 웹사이트는 점점 더 Dynamic해졌다.
CSS 최적화
브라우저 렌더링과 CSS 브라우저는 CSS를 다운로드하고 CSS 개체 모델을 빌드해 페이지를 그릴 수 있다. > 스타일이 지정되지 않은 페이지를 페인팅한 다음, 스타일이 구문 분석된 후 다시 페인팅하면 나쁜 사용자 경험이 된다. 브라우저는 특정 렌더링 경로를 따른다. 브라우저 렌더링은 페인트는 레이아웃, 렌더링 트리가 생성된 후에 발생한다. (DOM과 CSSOM 트리가 모두 필요하다.) CSSOM 구성을 최적화하려면 불필요한 스타일을 제거하고 축소, 압축 및 캐시하고 페이지 로드 시 필요하지 않은 CSS를 추가 파일로 분할하여 CSS 렌더링 차단을 줄여야 한다. 렌더링 차단 최적화 > CSS는 미디어 쿼리를 사용하여 특정 조건에 대한 스타일 범위를 지정할 수 있다. 미디어 쿼리는 반응형 웹 디자인에 중요하며, 렌더링 경로를 최적화하는 데 도움이 된다. 브라우저는 이러한 **모든 스타일을 구문 분석할 때까지 렌더
SEO란 무엇인가
검색 엔진 최적화 > 검색 엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스 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를 향상시켜, 사이트를 찾기 쉽고 시장성 있도록 해
Semantic HTML
Semantics 프로그래밍에서 Semantics는 코드 조각의 의미를 말한다. > W3C에 따르면 "시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용할 수 있다." Semantic, 즉 의미론적 요소는 브라우저와 개발자 모두에게 의미를 명확하게 설명한다. 의미 없는 요소의 예 : `, ` - 내용에 대해 알려주는 것이 없다. 의미 요소의 예 : `, , - 내용을 명확하게 정의한다. HTML을 Semantic 콘텐츠 배포를 위한 강력한 도구로 생각하자! Semantic HTML > 예를 들어 HTML의 `` 요소는 의미론적 요소로, "페이지의 최상위 표제" 역할(또는 의미)을 감싸는 텍스트를 제공한다. 이러한 태그는, 스타일에 한정적인 의미가 아닌 의미론적 가치를 지닌다. 어떻게 보일 것인가(스타일)는 `
DNS란 무엇인가
DNS > DNS(Domain Name System)은 인터넷의 전화번호부와 같다. google.com같은 도메인 이름으로 온라인 정보에 엑세스할 수 있다. 웹 브라우저는 IP 주소로 상호작용하는데, DNS는 도메인 이름을 IP 주소로 변환해 브라우저가 인터넷 리소스를 로드할 수 있도록 해준다. 인터넷에 연결된 각 장치에는 다른 기계가 장치를 찾는데 필요한 고유한 IP 주소가 있다. DNS 서버는 IPv4, IPv6 체계의 복잡한 영숫자 IP 주소를 기억하지 않아도 된다. 도메인 이름이란? > 도메인 이름은 인터넷 인프라의 핵심 부분이다. 도메인 이름은 인터넷에서 사용할 수 있는 모든 웹 서버에 대해 사람이 읽을 수 있는 주소를 제공한다. 도메인 이름 : 클라이언트 소프트웨어에서 웹사이트에 액세스하는 데 사용되는 숫자 IP 주소 에 매핑되는 텍스트 문자열 예를 들어 Google의 도메인 이름은 'google.com' DNS 덕분에
브라우저는 어떻게 동작하는가
브라우저는 널리 사용되는 소프트웨어다. 이 글을 통해 브라우저 주소 창에 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이라는 프로그램 언어로 만들어진 웹 페이지
.jpeg)
TIL #6 Front end - Hosting
호스팅은 무엇일까요? 호스팅이란? 서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해 주는 서비스 호스팅의 종류 웹호스팅 웹 호스팅은 여러 고객이 하나의 서버를 함께 사용하는 형태이다. 장점: 하나의 서버를 나누어 쓰기 때문에 저렴하게 이용할 수 있고, 쉽게 이용하고 관리한다. 단점: 오버셀링에 취약한 편이며, 한 사람이 과도한 리소스를 사용하면 다른 사람도 영향을 받는다 + 단독 웹호스팅 : 다른 사람 영향을 받지 않지만 비용이 비싸다. ✏︎ 오버셀링이란? : 지속 불가능한 호스팅 상태 서버호스팅 서버 호스팅은 고객이 단독 서버를 사용하는 형태이다. 장점: 빠른 데이터 속도와 넓은 하드웨어 공간을 사용할 수 있고, 서버 운영/관리를 직접 할 수 있다. 단점: 단독으로 서버를 이용하기 때문에 비용이 높다. 대형
HTML Form & 유효성 검사
Form w3school에서 HTML Form을 다음과 같이 정의 한다. > An HTML form is used to collect user input. The user input is most often sent to a server for processing. 즉 HTML은 유저의 입력값을 받아 주로 서버에 공정하기 위해 보내지는 것이다. 다음은 text type의 input element를 활용한 예제이다. 위와 같은 코드는 아래의 결과창을 보여준다. Form Attributes 폼의 Attribute에는 다음과 같은 속성들이 있다. action : 폼이 입력(전송) 되었을 때 어떠한 행동(action)을 할 지 정의한다. 
Browser & Hosting
웹 브라우저란? > 웹 브라우저란 웹 서버에서 이동하며(Navigate) 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어 이다. ex) 크롬, 사파리, 엣지, 파이어폭스 등 각 브라우저는 서로 다른 데이터 해석 방식을 갖는다. 개발자는 브라우저간의 지속성을 유지하기 위해 웹 표준을 고려한다 웹 서버는 클라이언트가 요청하는 정보를 HTTP를 따라 웹 브라우저에 전송하며, 웹 브라우저는 해당 결과를 표시한다 브라우저는 서버로부터 데이터를 전송받고, 렌더링 엔진을 통해 텍스트 및 이미지등을 변환한다. 호스팅 > 홈페이지를 운영하기 위해서는 서버 장비, 인터넷 회선 그리고 서버를 365 가동할 수 있는 최적의 환경을 갖춘 전산실과 서버를 관리할 엔지니어를 요구한다 웹 호스팅은 서버 컴퓨터의 일정 공간을 고객이 이용할 수 있도록 임대해주는 서비스이며, 고객은 값비싼 장비와 인력을 들이
Internet
인터넷이란? >컴퓨터로 연결하여 TCP/IP (Transmission Control Protocol/ Internet Protocol)라는 통신 프로토콜을 이용해 정보를 주고받는 컴퓨터 네트워크 이다 TCP/IP? 인터넷에서 컴퓨터들이 서로 정보를 주고받는데 쓰이는 통신규약(Protocal) 네트워크? 두 대 이상의 기기들이 연결되어 통신 할 수 있는 환경 즉 인터넷이란 관리 주체가 없으며 여러 네트워크가 모여 거대 망을 형성한다. Client & Server > 클라이언트/서버는 두 개의 컴퓨터 프로그램 사이에 이루어지는 역할 관계를 나타내는 것이다. 클라이언트는 다른 프로그램에게 서비스를 요청하는 프로그램이며, 서버는 그 요청에 대해 응답을 해주는 프로그램이다. 클라이언트/서버 개념은 단일 컴퓨터 내에서도 적용될 수 있지만, 네트웍 환경에서 더 큰 의미를 가진다. 네트웍 상에서의 클라이언트/서버 모델은 여러 다른 지역에 걸쳐 분산되어
TIL #5 Front end - Domain name
도메인 네임이란 무엇일까요? 도메인 네임이란? 넓은 의미 : 네트워크상에서 컴퓨터를 식별하는 호스트명 좁은 의미 : 도메인 레지스트리에 등록된 이름 도메인 네임의 구조 도메인 네임은 [ 알파벳 ] 과 [ 숫자 ] , [ . ] 로 구성되어 있다. 총 3단계로 이루어져 있으며 오른쪽에서 왼쪽으로 갈 수록 3단계, 2단계, 1단계 도메인으로 불리며 도메인의 범위가 작아진다. ewha.ac.kr에서 1단계는 국가도메인 kr, 2단계는 도메인의 성격 ac, 3단계는 도메인 네임을 등록하는 사람이 원하는 이름인 ewha 가 등록되어 있다. Reference <a
TIL #4 Front end - DNS
DNS와 작동 원리 DNS란? 도메인 네임 시스템(Domain Name System, DNS)은 호스트의 도메인 이름을 호스트의 네트워크 주소로 바꾸거나 그 반대의 변환을 수행할 수 있도록 하기 위해 개발되었다. DNS 작동 원리 사용자가 웹 브라우저를 열어 주소 표시줄에 www.example.com을 입력한다. www.example.com에 대한 요청은 일반적으로 케이블 인터넷 공급업체, DSL 광대역 공급업체 또는 기업 네트워크 같은 인터넷 서비스 제공업체(ISP)가 관리하는 DNS 해석기로 전송된다. ISP의 DNS 해석기는 www.example.com에 대한 요청을 DNS 루트 이름 서버에 전달한다. <b
TIL #3 Front end - Browsers
브라우저와 동작 원리 브라우저란? 웹 브라우저 또는 웹 탐색기는 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다. 브라우저의 기본 구조 
프론트엔드 로드맵
프론트엔드 로드맵을 토대로 하나씩 공부하기! >참조 : https://github.com/kamranahmedse/developer-roadmap/blob/master/translations/korean/README.md
TIL #2 Front end - HTTP
HTTP는 무엇일까요? HTTP(HyperText Transfer Protocol)란?     웹상에서 정보를 주고 받을 수 있는 클라이언트와 서버 사이에 이루어지는 요청 / 응답 프로토콜이다.      HyperText: 컴퓨터나 전자기기 화면에 나타나는 링크를 포함한 텍스트      Transfer: 전송      Protocol: 규약 (규칙) HTTP 기반 시스템의 구성요소 HTTP는 클라이언트 - 서버 프로토콜로 각각의 개별적인 요청(request) 들은 서버로 보내지며, 서버는 요청을 처리하는 응답(response) 을 제공한다. 이 요청
TIL #1 Front end - Internet
인터넷은 어떻게 작동 될까요? 인터넷이란? 인터넷은 웹의 핵심적인 기술로 컴퓨터로 연결하여 TCP/IP라는 통신 프로토콜을 이용해 정보를 주고받는 컴퓨터 네트워크이다. TCP/IP란? 패킷 통신 방식의 인터넷 프로토콜인 IP와 전송 조절 프로토콜인 TCP로 이루어져 있다. IP는 패킷 전달 여부를 보증하지 않고, 패킷을 보낸 순서와 받는 순서가 다를 수 있다. TCP는 IP 위에서 동작하는 프로토콜로, 데이터의 전달을 보증하고 보낸 순서대로 받게 해준다. HTTP, FTP, SMTP 등 TCP를 기반으로 한 많은 수의 애플리케이션 프로토콜들이 IP 위에서 동작하기 때문에, 묶어서 TCP/IP로 부르기도 한다. 네트워크 컴퓨터를 라우터에 연결하고, 라우터에서 라우터로, 우리는 무한히 확장할 수 있습니다. ![](https://images.velog.io/images/mome