1. 브라우저의 렌더링 과정

• 주소창에 구글 입력시 DNS가 구글 서버로 찾아간다. 이후 서버에서 HTML 파일을 클라이언트로 보내 HTML 파일 파싱 및 DOM Tree 생성 link 태그를 만나 css 파싱 및 CSSOM 트리 생성 후 DOM , CSSOM 합쳐 Render Tree 생성 이 과정 중 Script를 만나면 HTML파서는 JS 코드를 실행하기 위해 파싱 중단 JS 엔진실행 및 JS코드 파싱

2. Http와 Https 통신 방식의 차이

• HTTP는 암호화가 추가되지 않았기 때문에 보안에 취약한 반면, HTTPS는 안전하게 데이터를 주고받을 수 있다. 하지만 HTTPS를 이용하면 암호화/복호화의 과정이 필요하기 때문에 HTTP보다 속도가 느리다. 또한 HTTPS는 인증서를 발급하고 유지하기 위한 추가 비용이 발생하다. 개인 정보와 같은 민감한 데이터를 주고 받아야 한다면 HTTPS를 이용해야 하지만, 단순한 정보 조회 등만을 처리하고 있다면 HTTP를 이용하면 된다.

3. HTTPS의 동작 과정

• SSL과 같은 프로토콜을 사용하여 공개키/개인키 기반으로 데이터를 암호화하고 있다. 대칭키 암호화 방식으로써 공개키 암호화 시 개인키로만 복호화할 수 있고, 개인키 암호화 시 공개키로만 복호화할 수 있다.

4. OOP에 특징

• 상속은 상위 클래스로 부터 하위 클래스로 유산을 물려주는것과 같이, 부모의 특성과 기능을 사용할 수 있는 것을 말함.
• 다형성은 같은 함수가 있다면 그 함수가 매개변수에 따라 다른 역할을 할 수 도 있다.
• 캡슐화는 외부에서 쉽게 데이터를 접근할 수 없게 만들기도하고, 데이터 구조와 데이터를 다루는 방법들을 하나로 묶는것.
• 추상화는 인터페이스로 클래스들의 공통적인 변수, 메소드들을 묶어 표현하는 것

5. 함수형 프로그래밍이란?

• 거의 모든 것을 순수 함수로 나누어 문제를 해결하는 기법으로, 작은 문제를 해결하기 위한 함수를 작성하여 가독성을 높이고 유지보수를 용이하게 해준다.

6. OOP와 함수형 프로그래밍의 차이

• 객체지향 프로그래밍의 경우, 클래스 디자인과 객체들의 관계를 중심으로 코드 작성이 이루어진다. 상태, 멤버변수, 메서드 등이 긴밀한 관계를 가지고 있다. 특히 멤버변수가 어떤 상태를 가지고있는가에 따라 결과가 달라지고,
  함수형 프로그래밍의 경우는 값의 연산 및 결과 도출 중심으로 코드작성이 이루어진다. 함수 내부에서 인자로 받은 값을 별도로 저장하거나 하지 않고, 간결한 과정으로 처리하고 매핑하는데에 주 목적을 둔다.

7. 웹 프로토콜이란?

• 웹에서 쓰이는 통신규약입니다. 통신을 할때 상호 약속을 통해 요청/응답을 주고 받는 것입니다.

8. Http 통신이란?

• 웹 프로토콜중 하나로 W3상에서 정보를 주고받을 수 있는 프로토콜이다. 80번 포트를 사용한다.

9. Http 1.1과 2.0의 차이는?

• Http 1.1 속도개선을 위해 SDPY(구글 제안 프로토콜) 기반으로 HTTP/2.0 등장하였고, Header 정보를 HPACK 압축 방식으로 보내며, 한 커넥션에 여러 메시지를 주고 받을 수도 있다.

10. AJAX란?

• XMLHttpRequest 객체를 이용하여 페이지의 일부만을 위한 데이터를 로드하는 기법이며 JavaScript를 사용하여 클라이언트와 서버간에 XML 데이터를 주고받는 비동기 통신입니다.

11. Promise란?

• ES6부터 정식 채택되어 Promoise 생성자 함수를 통해 인스턴스화하며, 비동기 처리에 성공하면 resolve메소드를 호출해서 비동기 처리 결과를 후속처리 메소드로 전달한다.
  비동기 처리에 실패하면 reject메소드를 호출해서 에러메시지를 후속처리 메소드로 전달한다.
  후속처리메소드는 then과 catch가 있다. 둘다 Promise를 반환한다.
  then을 가지고 메소드 체이닝을 통하여서 콜백헬 문제를 해결 할 수 있다.

12. Async, Await란?

• Promise를 더욱 쉽게 사용할 수 있도록 해주는 ES8문법입니다. 이 문법을 사용하려면 함수의 앞부분에 async 키워드를 추가하고, 해당 함수 내부에서 Promise 의 앞부분에 await 키워드를 사용합니다. 이렇게 하면 Promise 가 끝날 때 까지 기다리고, 결과 값을 특정 변수에 담을 수 있습니다.

13. 실행 컨텍스트란?

• 자바스크립트의 코드들이 실행되기 위한 환경이며, 2가지의 실행 컨텍스트가 있습니다.
  전역 컨텍스트는 브라우저의 경우 window 객체를 생성하여, 이를 글로벌 객체로 설정한다. 프로그램에는 오직 한개의 전역 컨텍스트만 있을 수 있다.
  함수 컨텍스트는 함수가 실행될 때마다,새로운 컨텍스트가 만들어진다. 각 함수는 고유의 컨텍스트를 가진다. 이때, 생성 과정은 함수 선언 시 함수 스코프 체인 생성 후 변수, 인자, 스코프 체인, this 객체화 및 지정합니다.

14. 호이스팅(Hoisting)란?

• 자바스크립트 컴파일러가 선언과 구현(실행)을 별도로 처리하기 때문에 변수, 함수의 선언부가 최상단으로 끌어올려지는 현상을 이야기한다.

15. 클로저(Closure)란?

• 반환된 내부함수가 자신이 선언됬을때의 환경인 스코프를 기억하여 자신이 선언되었을때의 환경 밖에서 호출되어도 그 환경에 접근/기억할 수 있는 함수
• 사용 하는 이유 :
  1) 현재 상태를 기억하고 변경된 최신 상태를 유지하기 위해
  2) 전역 변수의 사용을 억제 하기위해
  3) 정보를 은닉하기 위해

16. 가비지컬렉터란?

• 메모리 할당을 추적하고 필요하지 않은 영역을 판단해서 회수하는 것이며,
  힙 메모리 내에서 더 이상 참조되지 않거나, 사용되지 않는 객체는 새로운 객체로 재할당될 수 있도록 정리시키는 과정이다.

17. 이벤트 루프란?

• Call Stack과 Callback Queue의 상태를 체크하여,
  Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어넣는다.
  이러한 반복적인 행동을 틱(tick) 이라 부른고 덕분에 멀티 스레드 처럼 보여진다.

18. 프로토타입이란?

• 생성자 함수가 생성할 모든 인스턴스가 공통적으로 사용할 프로퍼티나 메소드를 프로토타입에 미리 구현해 놓음으로써 또 구현하는것이 아니라 상위 객체인 프로토타입의 자산을 공유하여 사용할 수 있습니다.

19. This란?

• 일반 함수 내부에서의 this는 글로벌 객체와 바인딩된다.
• 메서드 내부에서의 this는 메서드를 호출한 객체와 바인딩된다.
• 생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스와 바인딩된다.
• Call, Apply, Bind 메서드 사용 시, 메서드에 첫 번째 인수로 전달하는 객체에 바인딩 된다.

20. ES6에 대한 지원이 완벽하지 않다. 해결방법은 무엇인가?

• Babel을 사용한다. ES6이상의 문법의 코드들을 브라우저가 이해할 수 있게끔 ES5이하의 문법으로 변환합니다. 이때 Babel은 트랜스파일러를 통해 한언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환합니다.

21. ES6 에서 추가된 스펙?

• let, const, 화살표함수, 클래스, 프로미스, 스프레드 연산자 등

22. var, let, const 차이는?

• var는 변수를 중복 선언했음에도 각기 다른 값이 출력되어, 유연한 변수 선언으로 간단한 테스트에 편리 단, 코드량이 많아 진다면 변수에 의도를 파악하기 힘든 단점이 있습니다.
• let은 변수의 중복 선언을 막고, 재할당은 가능하다. 이로인해 변수에 의도를 파악하기 좋다.
• const는 변수의 중복 선언, 재할당 모두 불가능하다.

23. 라이브러리, 프레임워크 차이는?

• 둘의 가장 큰 차이는 자유도에 있습니다. 프레임워크를 가지고 개발을 하게되면 프레임워크의 규약을 지키면서 개발해야한다. 하지만 라이브러리는 도구임으로 자유롭게 써도 무방하다.

24. 메소드 체이닝이란?

• method().filter().map() 이런 메서드를 연속적으로 이어서(체이닝) 쓸 수 있는 방식을 말합니다. 장점은 코드가 짧아진다는 장점이 있고, 단점은 에러가 났을때 어느 부분의 메소드에서 오류가 났는지 확인이 어렵습니다.

25. 메모라이제이션이란?

• 로컬캐쉬(Cache) 기술 중 메모리에 특정 정보를 기록해두고 필요 할때 마다 정보를 가져와 활용하는 기법입니다. 성능 개선이 주 목적이며, 불필요한 리소스 낭비를 방지하기 위해 메모라이제이션을 사용합니다.

26. RESTful API란?

• 웹상에서 사용되는 여러 리소스를 HTTP URI로 표현하고, 해당 리소스에 대한 행위를 HTTP Method로 정의하는 방식입니다. REST API의 설계 가이드인

  1. 리소스에 대한 행위는 HTTP Method(POST, GET, PUT, DELETE)로 표현해야 합니다.
  2. /(슬래시)는 계층 관계를 나타낼때 사용합니다.
  3. URI 마지막 문자에 /(슬래시)를 사용하지 않습니다.
  4. URI에 _(underscore)는 사용하지 않도록 합니다. 또한 영어 대문자보다는 소문자를 씁니다. 그리고 가독성을 위해서 긴 단어는 잘 사용하지 않습니다.
  5. URI에 동사는 GET, POST와 같은 HTTP Method를 표현하기 때문이다.
  6. 동사가 아니라 명사를 사용한다.
  7. URI에 파일의 확장자(예를들어 .json , .JPGE)를 포함 시키지 않습니다.

등을 고려하여 RESTful한 API라고 합니다.

27. CORS란?

• Protocol,Host,Port가 같다면 출처가 같고 다르면 다른 출처라고 이야기한다.
  모든 출처에 대해 받는건 보안상 위험하니 원하는 출처들의 자원만 받는 정책이라 생각하면 된다. 20년 2월 4일 릴리즈된 구글 크롬(Google Chrome)80버전부터 새로운 쿠키 정책이 적용 되어 Cookie의 SameSite 속성의 기본값이 "None"에서 "Lax"로 변경되었습니다.

28. Webpack이란?

• 모듈 번들링이라고 한다. 자바스크립트 파일들을 하나의 파일로 만들어주는 방식을 모듈 번들링이라고 한다.

29. CSR과 SSR의 차이?

• CSR의 과정 :
  • HTML 및 static파일들이 로드 되면서 데이터가 있다면, 데이터 또한 서버에 요청하고 그것이 화면상에 나타나게 된다. Browser가 서버에 HTML과 static파일을 요청한 후 로드되면 사용자의 상호작용에 따라서 javascript를 통해 동적으로 Rendering한다. 필요에 따라 데이터를 서버에 요청해서 받아와 Rendring한다.
• SSR의 과정 :
  • 완전하게 만들어진 HTML파일을 받아오고 Rendering하게 된다. 웹서버에 요청할때 마다 Browser 새로고침이 일어나고 서버에 새로운 페이지에 대한 요청을 하는 방식.

TBD