2주차 개념 스터디

HTTP란 무엇인가?
HTTP는 Hypertext Transfer Protocal의 약자로 웹 상에서 서버와 클라이언트 간의 데이터를 주고받을 수 있는 프로토콜을 의미한다. 

 

HTTP 1.1 / 2.0

• HTTP 1.1 : 연결당 하나의 요청과 응답을 처리함 -> 동시전송 문제와 다수의 리소스 처리 속도 느림 -> 성능 문제가 있음                           <결론> 응답도 느리고 속도도 느리고 용량도 크고 성능도 안 좋은 프로토콜이다.
• HTTP 2.0 : HTTP 1.1의 문제점을 해결한 업그레이된 프로토콜이다. 한 커넥션에서 여러 개의 메시지를 동시에 요청 응답 처리함, 문서상에 필요한 리소스를 클라이언트 요청 없이 보내줄 수 있음, Header 정보 압축 전송 등 여러 가지 기능이 추가됨으로써 속도와 성능이 대폭 향상되었다. 

상태 코드

통일된 상태 코드가 없으면 너도나도 자기 맘대로 상태를  표현하거나 보여주지 않기에 통일화된 규칙을 만들어냄

• 100번대 : 정보 확인 -> 리소스 교체 요청 또는 전송 등의 상태를 표현해주는 역할
• 200번대 : 통신 성공 ->  클라이언트가 요청한 작업이 성공적으로 수행됐다는 상태 알리는 역할
• 300번대 : 리다이렉션 -> 클라이언트가 요청한 리소스 손실 시 다른 URL로 가라고 안내 역할
• 400번대 : 클라이언트 오류 -> 클라이언트가 서버에 보낸 요청이 잘못된 경우를 표현해주는 역할
• 500번대 : 서버 오류  -> 서버에 문제가 발생했다고 알려준 역할 (클라이언트의 잘못이 아님)

요청 메서드

• GET - 특정 리소스의 표시를 요청(데이터 받기만 함)
• HEAD - GET 메서드의 요청과 동일한 응답을 요구 그러나 응답 본문 포함하지 않음
• POST - 특정 리소스에 엔티티를 제출할 때 쓰임
• PUT - 목적 리소스 모든 현재 표시를 요청
• DELETE - 특정 리소스 삭제
• CONNECT - 목적 리소스로 식별되는 서버로의 터널을 맺음
• OPTIONS - 리소스의 통신을 설정하는 데 쓰임
• TRACE - 목적 리소스의 경로를 따라 메시지 loop-back 테스트를 함
• PATCH - 리소스의 부분만을 수정하는 데 쓰임

HTTP vs HTTPS

• HTTP : 위에 설명 보기 
• HTTPS : HTTP에 데이터 암호화가 추가된 프로토콜(공개키/개인키 암호화 방식)

Q. 그렇다면 둘의 차이점은? 

A. 당연히 보안성에 차이가 존재한다. HTTPS는 암호화가 있기에 안전하게 데이터를 주고받는 것이 가능하다. 그러나 암호화/복호화 과정이 필요하기에 HTTP에 비해 속도가 조금 느리다. 따라서 개인 정보 또는 금융 정보 같은 것을 이용할 때는 HTTPS를 사용하고 이외에 단순한 정보 검색은 HTTP를 사용한다. 

 

HTTP vs TCP vs IP

• TCP : 데이터 전달을 관리하는 규칙이다. 패킷(데이터를 잘게 쪼갠 거)을 조립하고, 손실된 패킷을 확인하고, 재전송하도록 요청하는 기능을 한다. 
• IP : 인터넷상의 주소 규칙이다. 드라마나 영화에서 IP 추적을 한다는 게 다른 말로는 위치 추적인 것이다. 옛날에는 IPv4를 사용했지만 아파트가 꽉 차면 다른 아파트가 필요하듯이 주소가 고갈되어서 IPv6로 전환되었다. 
• 통신 순서 : 클라이언트가 특정 주소 요청 -> IP 주소 받음 -> HTTP계층에서 HTTP 메시지 작성 -> TCP계층에서 HTTP 메시지 패킷으로 분리함 -> IP계층에서 전송 위치 확인함 -> 네트워크를 통해 전송 -> 다시 역순으로 실시하면 통신 끝

서버와 클라이언트란 무엇인가?

서버와 클라이언트는 서로 데이터를 주고받는 사이이다. 

• Client : 요청 메시지 작성 -> 메시지 발송 -> 서버의 응답 대기 -> 메시지 수신 -> 메시지 해석 -> 클라이언트에서 요청 추가 처리
• Server : 클라이언트의 요청 대기 -> 요청 메시지 수신 -> 메시지 해서 -> 애플리케이션에 대한 내용 처리 -> 결과 반환 -> 응답 메시지 작성 -> 메시지 발송

세션 & 쿠키란 무엇인가?

• 세션 : 웹 사이트 방문자가 웹 서버에 접속해 있는 상태(접속 시간, 활동 로그)를 하나의 단위로 보는 기술 

-특징 1) 웹 서버에 웹 컨테이너의 상태를 유지하게 위한 정보를 저장

        2) 브라우저 닫기 또는 서버에서 세션을 삭제했을 때만 완전히 삭제가 되므로, 쿠키보다 비교적 보안이 좋음

        3) 서버 용량에 따라 저장 데이터에 제한이 정해짐

        4) 각 클라이언트 고유 Session ID 부여

예시) 화면이 전환되어도 로그아웃 전까지 로그인이 계속 유지됨

 

• 쿠키 :  HTTP의 일종으로 사용자가 특정 웹 사이트를 방문할 경우, 해당 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다. HTTP에서 클라이언트의 상태 정보를 클라이언트의 PC에 저장하였다가 필요시 정보를 참조하거나 재사용할 수 있다. 

-특징 1) 이름, 값, 만료일, 경로 정보로 구성되어 있음

        2) 클라이언트에 총 300개의 쿠키를 저장 가능함

        3) 하나의 도메인 당 20개의 쿠키를 가질 수 있음 

        4) 하나의 쿠키는 4KB(=4096byte)까지 저장 가능함 

예시) 전에 방문했던 사이트 아이디와 비번 자동 입력, 팝업창 "오늘 이 창을 다시 보지 않기" 체크

 

• 세션과 쿠키의 차이

	세션	쿠키
저장 위치	웹 서버	클라이언트
저장 형식	Object	text
만료 시점	브라우저 종료시 삭제	쿠키 저장시 설정
용량 제한	서버가 가능한 용량만큼	총 300개, 하나의 도메인 당 20개, 한 쿠키당 4KB
속도	🔽	🔼
보안	🔼	🔽

 

Prettier & ESLint란 무엇인가?

• Prettier는 VS Code에서 정해진 규칙에 따라 자동으로 코드 스타일을 정리해주는 도구이다. 혼자 개발을 한다면 크게 필요하지는 않겠지만 여러 사람이 같이 개발을 하는 경우 각자의 코드 스타일이 있기 때문에 코드가 지저분해지거나 실행이 안 될 수도 있다. 이런 문제들을 Prettier에서 규칙들을 커스터마이징해 해결할 수 있기에 유용한 코드 포맷터이다. 

 

• ESLint는 자바스크립트 문법에서 에러를 표시해주거나 코드 품질을 개선해주는 도구이다. ESLint도 코드 포맷터 역할을 하지만 Prettier가 더욱 특화되어 있다 한다. 대신 ESLint는 코드 에러와 문법을 정적으로 분석한다. 정적으로 분석하면 좋은 점이 무엇인가? 코드를 정적으로 분석하면 에러를 확인할 때 프로그램을 실행하지 않아도 된다는 장점이 있다. 

 

차이점: Prettier => 포맷팅 특화, 문법 수정 안됨

           ESLint => 문법 수정 가능, 포매팅 기능은 있으나 Prettier에 비해 떨어짐

둘 다 포매팅 기능이 포함되어 있기에 같이 사용하는 경우 충돌이 일어나 에러가 날 수 있다. 

FE

브라우저의 동작

브라우저의 동작을 알기 위해서는 브라우저의 구조가 어떻게 되어 있는지 알아보는 게 좋을 것 같다고 생각했다. 

1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분임
2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어함
3. 렌더링 엔진 - 요청받은 내용을 브라우저 화면에 표시함  Ex) 파이어폭스 - 게코 엔진 / 사파리, 크롬 - 웹킷 엔진
4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨, 플랫폼 독립적인 인터페이스로 각 플랫폼 하부에서 실행됨
5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림, 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용함
6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행함
7. 자료 저장소 - 자료 저장 계층으로 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있음

랜더링 동작 과정

렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작한다. 문서의 내용은 보통 8KB 단위로 전송한다.

 

렌더링 엔진은 HTML 문서를 파싱 하고 "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환한다. 그다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱 한다. 스타일 정보와 HTML 표시 규칙은 렌더 트리를 생성한다.

 

렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시된다.

렌더 트리 생성이 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미한다. 다음은 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정이다.

 

렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱 할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.

 

DOM

문서 객체 모델(Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 인터페이스이다. 

기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다. 

 

DOM은 원본 HTML 문서의 객체 기반 표현 방식으로 둘은 서로 비슷하지만 같은 것이 아니기에 유의해야 한다. DOM이 갖고 있는 차이점은 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다.

 

DOM의 개체 구조는 “노드 트리”로 표현된다. 하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇가지는 잎들을 가질 수 있는 나무와 같은 구조로 이루어져 있기 때문이다. 

 

-DOM이 아닌 것 

1) DOM은 HTML이 아니다.  -> 자바스크립트 혹은 다른 요소에 의해 DOM을 수정됨

2) DOM은 브라우저에서 보이는 것이 아니다.  -> 브라우저에서 보이는 것은 렌더 트리임(DOM + CSSOM)

3) DOM은 개발도구에서 보이는 것이 아니다.  -> 개발도구 요소 검사기는 렌더 트리의 일부로 보여줌 

 

CSS 레이아웃

 

Webpack / Babel

• Webpack : html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식으로 모듈 번들링이라고 한다. 쉽게 말해, 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것을 Webpack이라고 한다. 

-사용하는 이유

1) 과거에는 페이지마다 새로운 html을 요청해서 배포하는 방식이었다면, 현재는 SPA 하나의 html 페이지에 여러 개의 자바스크립트 파일들을 포함한다. 연관되어 있는 자바스크립트 종송석 있는 파일들을 하나의 파일로 묶어줘서 관리하기 편하다.

2) 파일을 컴파일할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸린다. 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다. 하나의 자바스크립트 파일로 만들어서 웹페이지 성능 최적화해준다.

 

• Babel :  자바스크립트 컴파일러로서, 최신의 자바스크립트 코드를 ES5로 변환해준다. 왜 변환시켜주는가? 최신의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 브라우저가 이해할 수 있는 문법으로 변환해줘야 한다. 

-동작 과정

1) 파싱 :  코드를 읽고 추상 구문 트리로 변환시킴

2) 변환 : 코드 파싱을 통해 변환한 추상 구문 트리를 설정에 맞는 코드로 변화함

3) 출력 : 변환된 코드를 출력함

이후 플러그인을 통해 원하는 대로 설정하면 된다.

 

React / Vue / Angular 기술별 차이점과 장단점

	React	Vue	Angular
장점	배우기가 간단하고, 애플리케이션을 만들 때 복잡함이 적음 Controller, directive, template, model 처럼 분리를 하지 않고 Component 단 하나로 관리함. 뛰어난 Garbage Collection, 메모리 관리, 성능을 가지고 있음 서버 사이드 렌더링과 클라이언트 렌더링을 둘 다 지원함 간편한 UI 수정과 재사용이 용이함 다른 프레임워크나 라이브러리와 혼용하여 사용할 수 있음 즉, 개발이 완료된 서비스에도 적응이 가능함	Template와 Render Function을 모두 사용할 수 있는 옵션 간편한 Syntax와 프로젝트 설정 빠른 렌더링과 더 작은 용량 학습 곡선이 낮음 컴포넌트 기반의 프레임워크로 DOM을 작은 단위로 쪼개어 개발하는 방식으로 유지보수와 재사용성이 높음 MVVM 패턴으로 기존 jQuery를 통한 DOM 조작이 더이상 필요하지 않음 Anular의 장점인 양방향 데이터 반인딩과 React 장점인 가상돔 기반 렌더링 특징을 모두 가짐	양방향 데이터 바인딩 접근 방식 덕분에 DOM을 많이 조작할 필요가 없음 캐싱 및 기타 많은 프로세스를 지원하기 때문에 서버 성능이 향상됨 더 빠른 어플리케이션 프로토타이핑으로 시간 절약이 많이 됨 MVVM 아키텍처를 통해 데이터를 디자인 및 시각적 표현고 분리해 복잡한 웹 어플리케이션도 쉽게 관리 가능함 프레임워크를 통해 사용자 지정 지시문 만들기 가능 일반 HTMP 템플릿을 사용해 문자열이 아닌 DOM 요소로 컴파일러에 전달 가능함
단점	보여지는 부분에만 관여하기때문에 데이터 모델링, Routing, Ajax 등등의 기능을 제공하지 않음 view 외 기능들은 직접 구현하거나 라이브러리를 사용하여 구현해야 하기 때문에 JavaScript 배경지식이 부족할 경우애는 사용이 힘듬 IE8 이하 버전들을 지원하지 않음	대규모 프로젝트에 대한 지원이 부족함  플러그인이 다른 프레임워크에 비해 부족함 커뮤니티 사용의 제한 사항 확장성 부족 플러그인 부족 고도로 숙련된 전문가의 부족 모바일 지원의 어려움 양방향 바인딩의 어려움 과도한 코드 유연성	자바스크립트 지원 필수 범위가 상당히 계층적으로 배열되어 처리해야 하는 복잔한 엔터티가 될 수 있음  다른 프레임워크에 비해 학습하기 어려움

참고하면 좋을 사이트) https://www.samsungsds.com/kr/insights/frameworks.html