[면접준비] 프론트엔드 개발(javascript)

* 프론트엔드

MVC패턴이란?

Model, View, Controller
-model:소프트웨어 내에서 데이터
-view:사용자에게 보이는 화면 내용
-controller:모델과 뷰의 상호 작용을 관리하는 것
jQuery란?

jQuery는 클라이언트 측 HTML 스크립팅을 간소화하기 위해 고안된 크로스 플랫폼 자바스크립트 라이브러리다. DOM내용을 쉽게 탐색하기 좋다.
Rest란?

자원의 이름으로 구분하여 자원의 상태를 주고받는 모든 것
Rest http 메소드

creat:생성(post)
read:조회(get)
update:수정(put)
delete:삭제
Rest API란?

rest기반으로 api를 구성한 것
리소스, 메서드, 메세지 3개로 구성된다.
웹에 존재하는 모든 자원에 고유한 URL을 부여해 활용하는 것으로 자원을 정의하고 자원에 대한 주소를 지정하는 방법론.
Restful이란?

rest원리를 따라 rest API를 제공하는 웹서비스를 Restful하다고한다.
Rest장단점
1. 장점
  - HTTP 프로토콜의 인프라를 그대로 사용하므로 REST API 사용을 위한 별도의 인프라를 구출할 필요가 없다.
  - HTTP 프로토콜의 표준을 최대한 활용하여 여러 추가적인 장점을 함께 가져갈 수 있게 해준다.
  - HTTP 표준 프로토콜에 따르는 모든 플랫폼에서 사용이 가능하다.
  - Hypermedia API의 기본을 충실히 지키면서 범용성을 보장한다.
  - REST API 메시지가 의도하는 바를 명확하게 나타내므로 의도하는 바를 쉽게 파악할 수 있다.
  - 여러가지 서비스 디자인에서 생길 수 있는 문제를 최소화한다.
  - 서버와 클라이언트의 역할을 명확하게 분리한다.
2. 단점
  - 표준이 존재하지 않는다.
  - 사용할 수 있는 메소드가 4가지 밖에 없다.(HTTP Method 형태가 제한적이다.)
  - 브라우저를 통해 테스트할 일이 많은 서비스라면 쉽게 고칠 수 있는 URL보다 Header 값이 왠지 더 어렵게 느껴진다.
  - 구형 브라우저가 아직 제대로 지원해주지 못하는 부분이 존재한다.( PUT, DELETE를 사용하지 못하는 점)
```
  
```
REST가 필요한 이유
- 애플리케이션 분리 및 통합
- 다양한 클라이언트의 등장
- 최근의 서버 프로그램은 다양한 브라우저와 모바일 디바이스에서도 통신을할 수 있어야 한다.

GET과 POST는 HTTP프로토콜을 이용해서 서버에 무언가를 전달할 때 사용하는 방식입니다.

GET : 서버로부터 정보 조회
POST : http body에 담아서 전송. 길이제한이없음, 보안적으로 안전하지만 어쨌든 암호화해야함
호이스팅
1. 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
2. 호이스팅은 코드에서 변수 선언의 동작을 설명하는데 사용되는 용어다. var 키워드로 선언되거나 초기화된 변수는 현재 스코프의 최상위까지 옮겨진다. 이것을 호이스팅이라고 부른다. 그러나 선언문만 호이스팅되며 할당(있는 경우)은 그대로 있게 된다.
3. 사실 선언은 실제로 이동되지 않는다 - JavaScript 엔진은 컴파일 중에 선언을 파싱하고 선언과 해당 스코프를 인식한다. 선언을 해당 스코프의 맨 위로 옮겨지는 것으로 생각하여 동작을 이해하는 것이 더 쉬울 뿐이다.
DOM이란?

텍스트 파일(HTML 파일)로 만들어진 웹 문서를 브라우저에 렌더링 하려면 브라우저가 이해할 수 있는 구조로 메모리에 올려야 합니다.
브라우저의 렌더링 엔진은 모든 요소(Element)와 속성(Attribute)등을 각각의 객체로 만들고 이것을 트리 구조로 구성하며, 우리는 이를 DOM이라고 부릅니다
Virtual DOM 장점

가상돔은 변화가 있을 때마다 실시간으로 돔을 수정하지 않고, 가상돔에 해당 변경 사항을 반영한다.
그 후 이전 돔과 가상돔을 비교하여, 바뀐 부분만 실제 돔에 적용한다.
따라서 기존의 돔과 달리 불필요한 렌더링 횟수가 줄어들게 된다.
-Virtual DOM의 동작 과정
변경 사항이 생기면 ReactDOM.render()가 호출 된다. 해당 과정은 변경점을 찾는 작업과 변경점을 실제 UI 적용하는 과정으로 나누어진다
렌더링이란?

웹사이트가 그려지는 과정
클라이언트 사이드 렌더링(CSR), 서버 사이드 렌더링 (SSR), 정적 사이트 생성 (SSG) 비교
1. 클라이언트 사이드 렌더링 (CSR)
  - 자바스크립트에서 DOM을 만들어서 내려주는 방식이다.
  - 장점 : 원하는 부분만 JS로 취사선택해 수정하기 때문에 변경이 빠르다. 기존웹(traditional web)에서 페이지를 이동하려면 흰색 화면이 뜨고 Loding Indicator를 이용할 수 없으며 내용이 금방금방 바뀌어야 하는 웹인 경우에 새로고침을 5초마다 해주어야 했던것을 크게 개선했다.
  - 단점 : JS 번들 사이즈가 높아진다. 브라우저의 Computing Power를 사용하므로 SSR보다는 성능 면에서 떨어진다.
  - 적합한 사이트 : 실시간성이 중요한 서비스의 경우 가장 적합하다
  - React, Vue와 같은 프레임워크가 차용하고 있는 방식이다.
2. 서버사이드 렌더링 (SSR)
  - 서버에서 HTML 콘텐츠를 만들어서 내려준다.
  - 장점 : DB- API - data - HTML로 만드는 프로세스가 서버에서 일어나므로 HTML을 금방 내려줄 수 있다. 크롤러가 접근했을때 CSR이 JS연산하고있는동안 SSR 사이트에 더 일찍 도착하므로 검색 엔진 상위에 올라가고 싶다면 우위에 있을 수 있다
  - 단점 : 결국은 Client에 그려줘야하므로 서버, 클라이언트, HTML 생성 사이의 프로세스가 느려질수록 UX가 나빠진다.
  - 적합한 사이트 : 웹 콘텐츠가 많은 뉴스 사이트같은 서비스에 가장 적합하다.
3. 정적 사이트 생성 (SSG)
  - 사이트 Build 시점에 HTML(CSS, JS..)을 한 번 생성하여 CDN에 올려놓고 유저가 접근하면 전달한다.
  - 장점 : 대용량 트래픽에 최적화되어있다. 어지간하면 안죽는다. 죽는 경우가 있다면 CDN이 뻗어서 전세계가 고통받는 수준...(CloudFront)
  - 단점 : 변경이 잦은 서비스의 경우에는 적합하지 않다

MVVM 패턴 = Model. View. ViewModel

DOM이 변경됐을 때 뷰모델의 DOM Listeners를 거쳐서 모델로 신호가 간다
데이터를 뷰모델에서 뷰로 보냈을 때 화면이 reactive하게 반응
Webpack

webpack 은 이렇게 import(혹은 require) 한 모듈들을 불러와서 한 파일로 합치는(bundling) 작업
javascript 기반 웹 프레임워크 React vs Vue
1. React와 Vue의 공통점
  UI 렌더링 시 가상 DOM을 활용한다.
  컴포넌트를 제공한다.
2. React의 특징
  React가 Vue에 비해서 개발문서가 잘되어 있음.
  대규모 앱에서 테스트, 투명도 측면에서 더 장점을 발휘한다.
3. Vue의 특징
  빠른 프로토타이핑
  단일 파일 컴포넌트
  Vue.js는 자바스크립트 프레임워크 중 하나로, SPA 개발에 특화되어 있습니다.
  templete에 기반하여 앱을 만들기 때문에 가독성이 좋다.
  배우기 쉽다
웹서버와 웹브라우저의 통신
1. 웹 브라우저에서 파일이 저장되어 있는 웹 서버의 주소를 입력
2. 웹 브라우저가 정보 요청
3. 웹 서버가 정보를 보냄
4. 웹 브라우저가 정보를 화면에 표시

쿠키와 세션의 차이
1. 쿠키(Cookie)(클라이언트에 저장)
  HTTP의 일종으로 사용자가 어떤 웹 사이트를 방문할 때 생성되는 정보를 담은 임시 파일입니다. 즉, 쿠키는 서버가 사용자의 웹 브라우저에 저장하는 데이터를 말합니다.
2. 세션(Session)(웹서버)
  일정 시간동안 같은 사용자(브라우저)로부터 들어오는 일련의 요구사항을 하나의 상태로 보고, 그 상태를 일정하게 유지시키는 기술입니다
http와 https차이

보안차이. http는 보안에 약하고 변조위조 가능, https는 변조불가능하게 막음
xhtml과 html의 차이

XHTML이 XML 문법을 따르므로 HTML과 문법 규칙이 약간 다르다.
XHTML을 사용하면 할 수 있으나, HTML로는 불가능한 일이 있다.
HTML을 사용하면 할 수 있으나, XHTML로는 불가능한 일이 있다.
CSS를 이해하는 방식에 차이가 있다.
클라이언트 쪽의 스크립트(예: 자바 스크립트)를 다루는 방식에 차이가 있다.
meta 태그

HTML문서가 어떤내용을 담고 있고, 키워드는 무엇이며, 누가 만들었는지에 대한 정보. 즉, 문서 자체의 특성
DOM에서 id와 class의 차이

id는 유일한 값, class는 여러번 중복이 가능
이벤트 버블링, 캡쳐링의 차이
1. 이벤트 버블링 - 하위 엘리먼트에서 상위 엘리먼트로 이벤트가 전파되는 특성
  (DOM 요소에서 이벤트가 트리거되면 리스너가 연결되어 있는 경우 이벤트 처리를 시도한 다음, 해당 이벤트가 부모에게 bubbling되고 부모에서 같은 이벤트가 발생한다. 이 bubbling은 요소의 최상단 부모요소인 document까지 계속적으로 발생시킨다. 이벤트 bubbling은 이벤트 위임의 작동 메커니즘이다.)
2. 이벤트 캡쳐링 - 상위 엘리먼트에서 하위 엘리먼트로 진행
javascript 프레임워크 사용이유

프론트엔드의 개발이 복잡해지면서 등장하였습니다.
JavaScript 프레임 워크를 활용하면 SPA(Single Page Application)와 같은 고급 웹 애플리케이션을 개발하는 데 훨씬 용이합니다.
jquery란?

DOM을 쉽게 조작하기 위한 라이브러리
mpa vs spa
1. MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고,
  그에 맞춰 전체 페이지를 다시 렌더링한다.
  인터넷 주소창에 주소를 입력하거나, 링크를 클릭하는 등 사용자가 어떤 요청을 하면,
  그에 맞는 html, 이미지 등의 파일들이 전부 다운로드 되고 다시 렌더링 된다.
2. SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드한다.
  그 이후 새로운 페이지 요청이 있을 경우,
  페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신한다.
  어떤 링크를 클릭한다고 해서 그에 관련된 모든 파일을 다운받는게 아니라,
  필요한 정보만 받아서 그 정보를 기준으로 업데이트 될 뿐이다.
  그래서 SPA를 CSR(Client Side Rendering)방식으로,
  MPA를 SSR(Server Side Rendering)방식으로 렌더링한다고 말한다.
spa 장단점
1. 장점
  -좋은 사용자 경험!
  전체 페이지를 업데이트를 할 필요가 없기 때문에 빠르다!
  (웹사이트의 성능과 직결된다.)
  전체 페이지를 업로드하면서 발생하는 '깜박' 거림이 없다.
  페이지의 일부만 바뀌는 것이기 때문에 application의 반응이 빠르다.
  -개발하기에 더 심플하다.
  서버의 사용없이도 개발을 시작할 수 있다.
  크롬으로 디버깅하기 쉽다.
  -로컬 데이터를 효과적으로 캐시(cache)* 할 수 있다.
  SPA의 Appication은 서버에게 정적리소스를 한번만 요청한다.
  그리고 받은 데이터는 전부 저장해놓는다.
  이 데이터는 오프라인에서도 사용 가능하다.
2. 단점
  -초기 구동 속도가 느리다.
  초기에 웹 애플리케이션에 필요한 모든 정적 리소스를 한번에 다 받기 때문!
  -SEO(Search Engine Optimization, 검색 엔진 최적화) 관점에 불리하다.
mpa 장단점
1. 장점-SEO(Search Engine Optimization, 검색 엔진 최적화) 관점에 유리하다.*
  MPA는 완성된 형태의 HTML파일을 서버로부터 전달받는다.
  따라서 검색 엔진이 페이지를 크롤링하기에 적합하다.
2. 단점-새로운 페이지를 이동하면 화면이 깜빡인다.
  새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링 하기 때문이다.
  프론트엔드와 백엔드가 밀접하게 연관되어있다. (Tightly coupled!)
  프론트엔드와 백엔드가 서로 연관이 높아 개발이 복잡해질 수 있다.
라우팅이란?
데이터를 보낼 최적의 경로를 선택하는 과정으로, 주어진 데이터를 최적화 된 형태로 주고받을 수 있는 경로를 선택하는 과정
1. 링크 방식(전통적 방식)
  클라이언트의 리퀘스트마다 중복된 HTML과 JavaScript, CSS를 매번 받아와야 하므로 퍼포먼스 측면에서 비효율
2. AJAX 방식
  자바스크립트에서 비동기Asynchronous로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식. 페이지에서 업데이트가 필요한 부분만을 로드하여 갱신하고, 새로고침 없이 불필요한 리소스의 중복 요청을 막기 때문에 퍼포먼스 측면에서 더 우수
  AJAX는 URL을 변경 시키지 않으므로 주소창의 주소가 변경되지 않습니다. 이는 브라우저의 히스토리history 관리가 불가능하며, 뒤로가기를 사용할 수 없음
ajax란?

Ajax(Asyncronous JavaScript and XML)는 비동기 웹 응용 프로그램을 만들기 위해 클라이언트 측에서 사용되는 웹 개발 기술의 집합이다. Ajax를 사용하면 웹 애플리케이션은 기존 페이지의 화면 및 동작을 방해하지 않으면서 백그라운드에서 비동기적으로 서버로 데이터를 보내고 받을 수 있다. Ajax는 프리젠테이션 레이어에서 데이터 교환 레이어를 분리해 웹페이지 및 확장 웹 애플리케이션이 전체 페이지를 다시 로드할 필요 없이 동적으로 컨텐츠를 변경할 수 있도록 한다. 실제로 최근에는 일반적으로 네이티브 JS의 장점 때문에 XML대신 JSON을 사용한다.
ajax장단점
1. [장점]
  -상호작용성이 좋아진다. 서버의 새로운 컨텐츠를 전체 페이지를 다시 로드할 필요 없이 동적으로 변경할 수 있다.
  -스크립트나 스타일 시트는 한번만 요청하면 되므로 서버에 대한 연결을 줄여준다.
  -상태를 페이지에서 관리할 수 있다. 메인 컨테이너 페이지가 다시 로드되지 않기 때문에 JS의 변수와 DOM의 상태가 유지된다.
  -기본적으로 SPA의 대부분의 장점과 같다.
2. [단점]
  -동적 웹 페이지는 북마크하기 어렵다.
  -브라우저에서 JS가 비활성화 된 경우 작동하지 않는다.
  -일부 웹 크롤러는 JS를 실행하지 않으며 JS에 의해 로드된 콘텐츠를 볼 수 없다.
  -SPA 대부분의 단점과 같다.
타입스크립트란?

타입을 명시하지 않는 자바스크립트와 달리, 타입스크립트를 통해 정적 타입을 명시하여 사용할 수 있다.
- 타입스크립트의 장점
타입스크립트는 코드에 목적을 명시하고, 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거할 수 있다.
프로젝트가 크고, 복잡할수록 타입스크립트가 가진 강점이 점점 더 강해진다.

Author And Source

이 문제에 관하여([면접준비] 프론트엔드 개발(javascript)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@i_am_developer/면접준비-프론트엔드-개발javascript

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[면접준비] 프론트엔드 개발(javascript)

* 프론트엔드

Author And Source

좋은 웹페이지 즐겨찾기