프론트엔드 면접 질문 1

웹팩 (Webpack)?

코드는 재사용성을 높이고 유지보수를 편리하게 하기위해 모듈화 된다.

• 웹팩 은 자바스크립틍 어플리케이션 을 위한 정적 모듈 번들러이다. 여러 의존 관계에 있는 모듈들을 하나의 js 파일로 번들링하는 역할을 수행한다.
• 웹 팩은 4가지로 구성된다.
• 1. 엔트리 : 모듈의 시작점을 의미한다.
• 2. 아웃풋 : 엔트리를 시작으로 모든 모듈을 하나로 묶어 범들링 을 한 결과물을 내보낼 위치를 선정한다.
• 3. 로더 : 로더는 비 자바스크립틑 파일을 웹펙이 이해하게끔 변경하는 역할을 함
• 4. 플러그인 : 번들된 결과물을 처리한다.

ESlLint , Prettier

• ESLint 는 ecma Script 를 lint 는 에러가 있는 코드에 표시를 달아 놓은 것 을 의미한다.
• ESLint => 자바스크립트 문법에서 에러를 표시해주는 도구이다.
• Prettier => 코드를 읽어들여 개발자가 설정한 옵션에 따라 코드를 다시 리포멧 하는 코드 포맷터이다.
• ESLint 는 코드 모맷터역할도 하지만 , 주로 코드 에러를 잡아내고 코드문법을 강제하는 등 코드 품질 개선에 중점을 둔 다.반면
• Prettier는 코드가 정갈해보이도록 하는 것이 중점이지, 코드의 에러를 잡아내지는 못한다.

 

타입스크립트

자바스크립트 를 확장한 언어이다. 자바스크립트는 인터프리티어 언어이지만

타입슨크립트는 컴파일 언어이며 동시에 타입 기반언어이다.

따라서 컴파일 단계에서 타입 체크로 인한 타입 오류를 잡아낼 수 있으며 , 암묵적 형변환, 호이스팅 , 복잡성 등의 문제도 해결한다.

 

쿠키 

로컬 , 세션 스토리지가 등장하기전에 브라우저 에 저장소 역할을 했다. 

만료 기한이 있는 키-값의 저장소이다.

서버 와 로컬을 모두 정보를 저장한다,

 

웹스토리지

• 웹 스토리지는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5에 새로 추가된 저장소이다.
• 쿠키는 4KB 제한이 있는 반면, 웹 스토리지는 5MB 제한이 있다.
• 네트워크 요청 시 서버로 전송되는 쿠키와는 다르게, 웹 스토리지 객체는 전송되지 않는다.
• 서버가 HTTP 헤더를 통해 웹 스토리지 객체를 조작할 수 없다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행된다.
• 웹 스토리지로는 로컬 스토리지와 세션 스토리지가 있다.

 

 

로컬스토리지 =>

데이터를 지우지 않는 이상 영구적으로 남는다. (브라우저가 종료해도 데이터가 유지된다)

도메인이 다른경우, 로컬 스토리지에 접근 할 수 없다. 

 

세션스토리지 => 

세션마다 데이터가 개별적으로 저장된다. 여러 탭을 실행하면, 탭마다 개별적인으로 데이터가 각각 저장이된다.

새로 고침 후 데이터가 사라지지 않고, 세션을 종료해야만 자동제거가 된다.

같은 도메인 이라도 세션이 다르면 데이터에 접근할 수 없다.

지속적으로 필요한 데이터는 로컬에 저장하고 잠깐 동안 필요한 정보는 세션 스토리지에 저장한다.

 

웹프로토콜, HTTP 통신

• 웹 프로토콜은 웹에서 쓰이는 통신규약이다.
• HTTP 통신은 요청과 응답으로 이뤄져있다. 클라이언트가 데이터를 달라고 서버에 요청하면, 서버는 해당 데이터를 클라이언트로 응답한다.

 

HTTP, HTTPS 차이

• HTTP 는 엄호화 가 추가되지 않았기에 보안에 매우 취약하다, 반면에 HTTPS는 안전하게 데이터를 주고 받을수 있다.
• HTTPS 는 암호화 및 복호화 의 과정이 필요하다, 또한 인증서를 발급하고 유지하기 위한 추가비용이 발행한다.

 - 단순 정보를 조회시 -> HTTP ,  개인정보와 같은 민감한 데이터가 오고갈때  HTTPS를 사용한다.

 

브라우저의 렌더링 과정 설명.

 

1. www.naver.com 치면 네이버 서버를 찾아간다.
2. DNS 서버가 연결해줄 곳을 찾는다.
3. 서버의 기본 설정이 대부분 index.html 로 되어있어, 서버에서 이 파일을 클라이언트로 응답한다.
4. 브라우저는 텍스트로 이뤄진 index.html 파일을 파싱한다.
5. 브라우저 엔진은 한줄씩 읽어가며 DOM 트리를 만든다.
6. 완성된 DOM 트리와 CSSOM(CSS Object Model) 트리를 합쳐 렌더링 트리를 만들고 화면에 그린다.

 

 

 (참고 사이트 https://ddb8036631.github.io/question/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-1/#10-http%EC%99%80-https-%EC%B0%A8%EC%9D%B4)