CS 및 자바스크립트

CS와 자바스크립트 면접 질문을 적어보려고 합니다.

Git, Github

git

• 오픈소스버전관리시스템
• 본인의 코드와 수정내역을 기록하고 관리하는 버전 관리 프로그램

github

• git repository를 위한 웹 기반 호스팅 서비스 (원격 저장소)
• 클라우드 서버를 사용해 로컬에서 버전관리한 소스코드를 업로드 하여 공유

http, https

http는 텍스트 기반 통신규약으로 인터넷에서 데이터를 주고받을 수 있는 프로토콜

❗http와 https 차이점은 인증서 차이이다.

• http는 따로 암호화 과정을 거치지 않기 때문에 중간에 패킷을 가로챌 수 있고 수정할 수 있습니다. 보안에 취약함

• https는 암호화계층을 거쳐 패킷을 암호화하여 사용이 됨.

프레임워크, 라이브러리

❗제어 흐름에 대한 주도권을 누가 가지고 있는가.

프레임워크

• 제어를 자체적으로 가지고있으며 프로그래머가 직접 코드를 적어서 사용

라이브러리

• 프로그래머가 흐름에 대해 제어하며 필요한 상황마다 사용 가능

MVC, MVVM

MVC - Model-View-Controller의 약자로 애플리케이션을 세 가지 역할로 구분한 개발 방법 입니다.

• Controller를 조작하면 Model을 통해 데이터를 가져오고 그 데이터로 View를 통해 시각적표현을 제어하며 사용자에게 전달

CORS

• 교차출처리소스 현 도메인에서 리소스를 받지 않고 다른 도메인에서 리소스를 요청합니다.

주로 서버와 함께 작업을 할 때 나타납니다. (리액트: port: 3000, 서버 port: 8000)

REST API

REST의 특징을 기반으로 만들어진 API를 구현한 것.

• HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다.

Ajax, axios, fetch

Ajax

• 자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신입니다.
• 기존 페이지의 화면 및 동작을 방해하지 않으면서 백그라운드에서 비동기적으로 서버로 데이터를 보내고 서버에서 데이터를 받아올 수 있습니다.

axios

• axios는 Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리입니다.
• 비동기로 HTTP통신을 할 수 있으며 return을 Promise 객체로 해주기 떄문에 response 데이터를 다루기 쉽습니다.

fetch

• ES6부터 들어온 JavaScript 내장 라이브러리입니다.
• promise 기반으로 만들어졌기 떄문에 axios와 마찬가지로 데이터를 다루기가 쉽고 내장 라이브러리라서 편리함

Local Storage, Session Storage

• 로컬스토리지는 브라우저를 껏다가 켜도 데이터가 남아있으며
  세션 스토리지는 페이지를 새로고침 까지는 데이터가 유지 되지만 창을 닫으면 사라진다.

자바스크립트란?

객체지향언어, 싱글스레드로 동작하며 프로토타입기반 언어이다. (동기적)

객체지향언어

• 자료구조와 이를 중심으로 한 모듈을 먼저 설계한 다음에 이들의 실행 순서와 흐름을 짜는 방식

프로토타입

• class대신 기존 객체를 복사하여 새로운 객체를 생성함.

GET, POST

서버에서 데이터를 받아올때 사용 함.

• GET 서버에서 데이터를 조회할 때
• POST 서버에서 데이터를 생성 및 수정할 때

Event Loop

• Event Loop는 Call Stack과 태스크 큐의 상태를 체크하여, Call Stack이 빈 상태가 되면, 태스크 큐의 작업을 Call Stack으로 밀어넣는 역할을 한다.

스코프

변수가 유효할 수 있는 범위이며 일반적으로 중괄호에 감싸진 영역

• 스코프는 Local, global로 나뉘어 지는데 Local(지역변수), global(전역변수) global(전역)에서는 지역변수 참조가 가능하고 local(지역)는 전역변수 참조가 불가능 합니다.

클로저

내부함수의 변수가 외부함수의 변수에 접근 할 수 있는 매커니즘
함수와 함수가 선언된 어휘적 환경의 조합을 통해 만들어진 매커니즘

정보은닉,

호이스팅

호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.

let, const, var

❗ES6 이전에는 변수를 선언 할 수 있는 방법은 var이 유일했습니다. ES6이후 var의 단점을 보완하기 위한 let과 const가 도입이 되었습니다.

var

• 변수의 중복선언이 가능해 의도치않게 변수의 값의 변경이 일어날 가능성이 커서 지향함

let

• 재선언은 불가능 재할당은 가능

const

• 재선언, 재할당 불가능

this

❗자신이 속한 객체 또는 자신이 생성할 인스터스를 가리키는 자기 참조 변수

•  함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됨.

• 바인딩 (식별자와 값을 연결하는 과정을 말한다.)

forEach, map

forEach

• 배열의 요소에 반복 값을 반환하지 않는다

map

• 각 요소에서 함수를 호출하여 결과로 새 배열을 작성하여 각 요소를 새 요소에 매핑

❗forEach는 단순히 배열을 반복하려면 사용, 원본 배열을 변경하기 싫다 map

==, ===

== (동등비교연산자)

• 암묵적 타입 변환을 통하여 타입을 일치시켜 비교 (느슨한비교)

=== (일치비교연산자)

• 값과 타입을 모두 고려하여 동등함을 비교 (엄격한비교)

undefined, null, undeclared

undefined

• 반환이 된다면 참조한 변수가 선언 이후 값이 할당되지 않을 상태, 즉
  초기화 되지 않은 변수라는 것을 알 수 있습니다.

null

• 변수에 값이 없다는 것을 의도적으로 명시하고 싶을때 사용됩니다.

undeclared

• 변수 선언도 할당도 되어있지 않은 상태를 말합니다.

Function 일반함수, 화살표함수

일반함수 - 생성자 함수로 사용 가능

• 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정

동적 - 실행 시간에 이루어지거나 실행 시간에 변경됨.

화살표함수 - 생성자 함수 사용 불가

• 화살표 함수는 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.

정적 - 실행 시간 전에 일어남. 실행 시간에는 변하지 않는 상태로 유지.

콜백함수

Js에서 비동기적 프로그래밍을 할 수 있게 해줌.

• 콜백함수는 이름 없는 "익명의 함수"를 사용한다. 함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다.

콜백지옥

• 콜백함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들정도로 깊어지는 현상이다.
• 비동기적인 작업을 수행하기 위해 콜백함수를 익명함수로 전달하는 과정에서 생기는 콜백지옥을 Promise, async/await 등을 사용해 방지

promise, Async/Await

비동기 함수 호출 또는 비동기 연산이 완료되었을 때, 이후에 처리할 함수나 에러를 처리하기 위한 함수를 설정하는 모듈 (ES6)

❗비동기 처리에 사용되는 객체 콜백함수의 단점인 콜백지옥을 해결하기 위해 나옴.

Promise 3가지 상태

• pending(대기): fulfilled(이행)도 rejected(거절)도 안된 초기 상태
• fulfilled(이행): 비동기 연산이 성공적으로 완료된 상태, 결과값을 반환한다.
• rejected(실패): 비동기 연산에 실패한 상태, 에러를 반환한다.

Async/Await

async/await는 ES2017(ES8)에서 추가된 Promise를 더욱 쉽게 사용할 수 있도록 하는 문법이다.

• async함수는 function 앞에 위치하고 해당 함수는 항상 Promise를 반환한다.

• 자바스크립트는 await키워드를 만나면 프로미스가 처리될 때까지 기다린다. 결과는 그 이후 반환된다.