Frontend
- HTTP란 무엇인가
HTTP란 서버/클라이언트 모델을 따라 데이터를 주고받기 위한 프로토콜이다.
HTTPS는 HTTP에 데이터암호화가 추가된 프로토콜이다.
- GET과 POST의 차이는?
GET은 주로 데이터를 읽거나 검색할때 사용되는 메서드이고 POST는 업데이트나 생성할 때 사용됨
GET은 데이터 변형위험이 없기때문에 POST보다 안전하다고 간주됨
POST요청은 클라이언트에서 서버로 전송할때 추가적인 데이터를 body에 포함할 수 있지만
GET요청은 필요한 데이터를 URL에 포함하여 요청함
- 브라우저 렌더링과정
1. HTML과 CSS를 파싱해 DOM과 CSSOM을 생성
2. 두 트리를 결합하여 렌더트리를 만듦
3. 렌더트리에서 각 노드의 위치와 크기를 계산하는 레이아웃 단계 거침
4. 계산이 완료되면 요소들을 실제 화면에 그리는 페인트단계
자바스크립트가 DOM, CSSOM을 변경하는 경우 리렌더링을 하게 된다.
- reflow
생성된 dom노드의 레이아웃 수치변경시 영향 받은 모든 노드의 수치를 계산하여, 렌더트리르 재생성하는 과정
실행될 때
dom 엘리먼트 추가, 제거, 변경
css3 엘리먼트 추가, 제거, 변경
css 스타일 추가, 제거, 변경
css 애니메이션, 트랜지션, 모든 프레임에서 리플로우
- repaint
reflow과정이 끝난 후 재성성된 렌더 트리를 다시 그리는 과정
가시성이 변경되는 순간 (background-color, opactiy)
리플로우가 된 후
- HTML 렌더링중 js실행시 렌더링 멈춤
렌더링엔진은 HTML한줄씩 순차적으로 파싱하며 DOM생성해나가다 JS만나면 DOM생성 임시중단
JS코드를 파싱하기 위해 JS엔진에 제어권을 넘기게 됨
파싱이 끝나면 다시 렌더링 엔진에 제어권을 넘겨 중단된 부분부터 HTML파싱 재개, DOM트리 생성
- 주소창에 naver.com 입력시
1. 주소입력시 url주소 중 도메인 네임부분을 DNS서버에 검색
2. DNS서버에서 해당 도메인 네임 해당하는 IP주소를 찾아 사용자가 입력한 URL정보와 함께 전달
3. 브라우저는 HTTP프로토콜을 사용해 요청 메세지를 생성하고 HTTP요청메세지는 TCP/IP프로토콜을 사용하여 서버로 전송됨
4. 서버는 response메세지를 생성, 다시 브라우저에게 데이터를 전송
5. 브라우저는 response를 받아 파싱하여 화면에 렌더링
-> URL:웹주소
-> URI: 특정리소스를 식별하는 통합자원식별자
- REST API
REST원칙을 적용하여 서비스 API를 설계한 것
-> REST란?
HTTP URI를 통해 자원을 명시하고 HTTP메서드를 통해 해당자원에 대한 CRUD를 적용하는 것
-> API란
프로그램끼리 통신 할 수 있도록 하는 중재자
:자원기반의 구조설계의 중심에 자원이 있고, HTTP메서드를 통해 이를 처리
- RestfulAPI
REST API를 제공하는 웹사이트를 RESTful하다고 함
RESTfulAPI를 통해 이해하고 쉬운 API를 만드는것이 목적
| GET | 요청받은 URI의 정보를 검색하여 응답 | PATCH | 요청된 자원 일부 수정 |
| POST | 요청된 자원을 생성 | HEAD | GET방식과 동일, 하지만 응답에 BODY존재하지않고, 응답코드, HEAD만 응답 |
| DELETE | 요청된 자원을 삭제요청 | CONNECT | 동적으로 터널모드 교환, 프락시기능요청시 사용 |
| PUT | 요청된 자원 전체 수정 | TRACE | 원격지 서버에 루프백 메세지 호출하기위해 테스트 용으로 사용 |
| OPTIONS | 웹 서버에서 지원되는 메서드의 종류를 확인 할 경우 사용 |
- 브라우저 저장소 차이점
로컬스토리지: 저장한 데이터를 지우지않는 이상 영구적 보관, 최대크기 5mb, 사용예시:자동로그인
세션스토리지: 세션종료시 클라이언트에 대한 정보삭제, 최대크기 5mb, 사용예시: 비로그인 장바구니
쿠키: 웹사이트에서 쿠키설정시 모든 웹요청에는 쿠키정보가 포함-> 서버부담 증가
= 로컬은 클라이언트 정보를 영구적으로 저장하는 반면 세션은 브라우저 닫을 경우 정보가 삭제
쿠키는 로컬&세션에 비해 용량이 매우 작고, 치명적 단점에는 암호화가 없어 정보 도난 위험이 있다.
- CORS 란
cross resource sharing
한 도멘인 또는 origin의 웹페이지가 다른 도메인을 가진 리소스에 액세스 할 수 있게하는 보안 메커니즘
-> 에러 해결방법
서버에서 access-control-allow-origin 세팅
- 시멘틱 마크업이란?
의미에 맞는 태그를 사용해 문서를 작성하는 것을 말함.
시멘틱하게 작성시 각 요소가 자체적인 의미를 가지기때문에 개발자 입장에서 가독성이 높아지고 유지보수가 쉬워짐
장치에서 콘텐츠의 계층구조를 더 쉽게 이해할 수 있다.
검색엔진은 html의 계층구조에 따라 키워들의 중요도를 파악하기 때문에 시멘틱하게 작성된 html 구조는 크롤러에 더 구체화한 정보를 제공하게 됨
- SPA 싱글페이지 렌더링
(하나의 페이지에서 실행)
최초 한번페이지 전체를 로딩한 후부터 데이터만 변경해 사용할 수 있는 웹 애플리케이션
- CSR 클라이언트 사이드 렌더링
최초로드시 필요 파일을 전부 받고 사용자의 인터렉션에 따라 클라이언트단에서 받아와 렌더링 해주는 방식
기본틀만 받고 브라우저에서 동작으로 DOM그림
단점: 초반 뼈대만 다운받기때문에 SEO취약, 초기 화면 렌더링 속도 느림
- SSR 서버사이드 렌더링
요청시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식
이미 다 만들어진 DOM받음
단점: 매렌더링마다 서버거치기때문에 속도느림
- webpack
프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 사용 할 수 있는 번들로 묶고 파킹하는 모듈 번들러
*모듈번들러: 여러개의 나워져있는 파일들을 하나로 만들어주는 라이브러리
- babel
모든 실행환경에서 js가 정상동작 할 수 있게 ES6코드를 ES5로 변환
리액트의 jsx, ts까지 변환해주는 js컴파일러
- polyfill
브라우저에서 지원하지않는 코드를 사용가능한 코드 조각 플러그인 의미