프론트엔드
-
[Web] DNS란?프론트엔드 2022. 2. 10. 17:53
DNS는 Domain Name System 또는 Domain Name Server를 일컫는다. 인터넷은 서버들을 구분하기 위해 IP주소를 기본 체계로 이용하는데, IP주소는 숫자로 이루어진 조합이기 때문에 사람이 기억하고 사용하는 데에 어려움이 있다. Domain Name System은 이러한 IP주소(예: 192.0.2.44)를 사람이 기억하기 쉬운 문자열 형태로 이루어진 도메인 네임(예: www.amazon.come)으로 변환하는 역할을 하며, Domain Name Server는 이런 역할을 하는 서버 컴퓨터를 말한다. 처음 네트워크가 등장했을 때는, 사용자 PC의 Hosts 파일에 다른 사용자들의 IP정보들을 기록해서 사용했다. 그러나 네트워크가 방대해지면서, 사용자 PC의 Hosts 파일에 수없이..
-
[Web] HTML 문서 파싱 & DOM 트리 생성 과정 알아보기프론트엔드 2022. 2. 10. 17:51
문서(HTML, CSS)가 어떻게 파싱되고 어떻게 DOM Tree가 되는가? 문서 파싱과 DOM Tree 구축 컴파일 전 동작 소스코드가 컴파일 과정을 거치기 전에, 소스코드 내용을 파싱하여 컴파일이 가능한 단위로 만드는 과정이 있다. 파싱 문서 파싱 : 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것. 파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데, 파싱 트리 또는 syntax 트리라고 부른다. 일반적인 파싱 과정은 어휘 분석과 구문 분석으로 나뉜다. 어휘 분석 : 의미없는 공백, 줄 바꿈을 제거하고 토큰(의미있는 문자) 단위로 분해하는 과정. 구문 분석 : 언어의 구문 규칙을 적용하는 과정. 어휘 분석기로부터 새 토큰을 받아서, 구문 규칙과 일치하는지 확인함. 파싱 작업은 파서에..
-
[Web] 렌더링 엔진은 어떻게 동작할까?프론트엔드 2022. 2. 10. 17:47
렌더링 엔진 렌더링 엔진 : 요청 받은 내용을 브라우저 화면에 표시함. 렌더링 엔진은 HTML, XML 문서, 이미지를 표시할 수 있고, 플러그인이나 브라우저 확장 기능을 이용해 PDF 등 다른 유형도 표시할 수 있다. 렌더링 엔진은 통신을 제외한 거의 모든 경우에 단일 스레드로 동작한다. 통신은 몇 개의 병렬 스레드에 의해 진행될 수 있다. 병렬 연결의 수는 보통 2개에서 6개로 제한된다. 브라우저의 주요 스레드는 이벤트 루프를 유지하기 위해 무한 반복된다. 이벤트 루프는 배치, 그리기 등의 이벤트를 리스닝하고 처리한다. 렌더링 엔진의 종류 파이어폭스 : 모질라의 게코(Gecko) 엔진 사파리, 크롬 : 웹킷(Webkit) 엔진 웹킷 엔진 : 처음에는 리눅스 플랫폼에서 동작하도록 제작된 오픈소스 엔진인..
-
[Web] 브라우저 프로토콜의 종류, HTTP 프로토콜프론트엔드 2022. 2. 10. 17:45
프로토콜의 종류 HTTP/HTTPS 프로토콜 : 웹 브라우저는 서버에 자원을 요청하고 응답을 받기 위해 HTTP 프로토콜을 사용한다. 그 외의 웹 관련 프로토콜 : IP 프로토콜 (Internet Protocol) : IP는 각각의 패킷을 IP 주소와 MAC 주소를 통해 상대방에게 전달하는 역할을 한다. IP 주소 : 각 노드에 부여된 주소 MAC 주소 : 각 네트워크 카드에 할당된 고유의 주소 ARP 프로토콜 : ARP를 이용해 IP 주소를 MAC 주소로 변환하여 목적지를 찾아간다. IP주소는 유동적이기 때문에 고유의 대상이 될 수 없지만(변경될 수 있음), MAC 주소는 고유하기 때문에 ARP 프로토콜을 사용해 IP주소를 MAC주소로 변환하는 것이다. TCP/UDP 프로토콜 : TCP (Transmi..
-
[Web] 브라우저의 기능과 기본 구조프론트엔드 2022. 2. 10. 17:42
참고한 글 : 브라우저는 어떻게 동작하는가? 브라우저 브라우저 : 가장 많이 사용하는 소프트웨어 (아마도) 오픈소스 브라우저(사파리, 크롬, 파이어폭스 등. 사파리는 부분적으로 오픈소스)가 시장 점유율의 상당 부분을 차지하고 있음 브라우저의 주요 기능 브라우저의 주요 기능 : 사용자가 선택한 자원을 서버에 요청하고, 전송받은 자원을 브라우저 화면에 표시하는 것. 자원은 주로 HTML 문서이며, 자원의 주소는 URI(Uniform Resource Identifier, 각 자원의 서버 주소)에 의해 정해짐. 브라우저는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한 웹 표준(표준 명세)에 따라 HTML 파일을 해석해서 표시한다. 브라우저의 사용자 인터페이스는 표준 명세가 없..
-
[Web] 세션/쿠키 인증과 토큰 인증(Access Token, Refresh Token)프론트엔드 2022. 2. 10. 17:38
인증 Reference : https://tansfil.tistory.com/58?category=475681 인증이란 / 인증이 필요한 이유 인증이란 프론트엔드 관점에서 봤을 때 : 사용자의 로그인, 회원가입과 같이 사용자 입장에서 서비스의 도입 부분을 가리킴. 서버사이드에서 봤을 때 : 모든 API 요청에 대해 사용자를 확인하는 작업. 인증이 필요한 이유 서버에서는 요청을 받았을 때, 누구의 요청인지를 정확히 알아야 한다. 그렇지 않으면 자신의 정보가 타인에게 유출될 수 있다. 따라서 프론트엔드(앱)에서는 누가 요청하고 있는지에 대한 단서를 서버에 보내야 하며, 서버에서는 그 단서를 정확히 파악해 맞는 데이터를 뿌려줘야 한다. HTTP 요청에 대해 모바일, 웹 서비스에서 가장 많이 쓰이는 통신 방식...
-
[React] React에서 input 이벤트 사용하기 (onChange, onInput, onBlur)프론트엔드 2022. 2. 10. 17:36
자바스크립트의 onChange, onInput 이벤트는 onChange : input에서 포커스가 벗어났을 때, input에 입력된 값이 변경되었다면 이벤트 발생 onInput : input에 입력된 값이 변경될 때마다 이벤트 발생 이렇게 이벤트 발생 조건에 차이가 있다. 그런데 React에서는 onChange, onInput이 동일하게, input 값이 변경될 때마다 (포커스 아웃이 없어도) 이벤트가 발생한다. 그래서 리액트에서는 onChange와 onInput이 사실상 동일한 이벤트로 취급되고, 이 중에서는 onChange가 더 자주 사용되는 것 같다. 그렇다면 React에서 자바스크립트의 onChange 이벤트처럼 input에서 포커스가 벗어났을 때 값의 변경이 있는 경우 이벤트를 감지하려면 어떻게..
-
[반응형 웹] 어떤 해상도의 기기가 가장 많을까? 해상도 점유율 확인하기프론트엔드 2022. 2. 10. 17:25
https://gs.statcounter.com/screen-resolution-stats 에서 해상도별 점유율을 확인할 수 있다. Edit Chart Data를 눌러서 차트 형식 등을 변경할 수 있다. 내가 작업 중인 프로젝트는 데스크탑만 지원할 예정이기 때문에 차트를 편집해 데스크탑 해상도 점유율만 확인해봤다. 1920x1080, 1366x768 두 해상도의 점유율만 합쳐서 40퍼센트 이상으로 압도적이다. 이렇게 해상도 점유율을 확인했다면, 점유율이 높은 해상도 위주로 내 프로젝트가 화면에서 어떻게 보이는지 체크해보면서 개선할 수 있다. 크롬 개발자 도구의 Toogle Device Toolbar를 사용해 특정 해상도에서 웹 페이지가 어떻게 보이는지 확인해볼 수 있다. Toogle Device Tool..