JavaScript 프론트엔드 주요 개념 정리 (1)

안녕하세요? 프론트엔드 개발자 김반석입니다.본격적으로 취업을 위한 지원을 하고 있으며 프론트엔드 기술면접을 앞두고 있는데요. 평소에 당연하게 사용하던 것들도 말로 설명해보라고 하면 어떻게 설명해야 할지 막막합니다.기술면접도 대비하고 그간 배워온 내용도 제 언어로 정리할 겸 질문과 답변 형식으로 정리를 하려고 합니다.질문은 구글에서 검색한 블로그와 자료들을 참고했습니다. (감사합니다)가장 중요하다고 생각하는 JavaScript부터 시작합니다.

 

JavaScript의 데이터 타입

JS는 기본적으로 8가지 데이터 타입이 있다.

참고로 JS는 동적 언어(dynamically typed)다. 즉, 변수의 데이터 타입이 고정이 아니고 할당하는 값에 따라 바뀔 수 있다.

// no error
let message = "hello";
message = 123456;

 

원시 타입(primitive data type)

1. Number
   • 정수나 실수를 나타낸다.
   • ±Infinity, NaN과 같은 특수한 값도 있다.
   • 64비트 포맷으로 -(2^53 -1) ~ (2^53 -1) 사이를 표현할 수 있다.
2. BigInt
3. String
4. Boolean
5. null
   • nothing, empty, unknown
6. undefined
   • 값이 할당되지 않았음을 의미한다.
   • 변수를 선언하고 값은 할당하지 않으면 undefined가 된다.
7. Symbols
   • objects를 위한 고유 식별자를 만든다.

객체 타입(Objects type)

1. Objects
   
   • primitive는 하나의 값만 담을수 있는데 Objects는 데이터 모음을 저장할 수 있다.
   • Array, Date, Error, Function
   • "key:value" 쌍을 property라고 한다. key를 property name이라고도 하는데 string이나 symbol이 될 수 있다.
   • object를 복사하면 레퍼런스가 복사되고 object 사본이 만들어지는 것이 아니다. (원시 타입과 다른점)

 

Method, this

obect property인 function을 method라고 한다.

user = {
	sayHi: function() {
    	alert("Hello")
    }
}

//더 짧은 버전
user = {
	sayHi() {
    	alert("Hello")
    }
}

 

• object 안에서 method에서 가리킨 this는 object 자체다.
• method를 호출할 때 this는 before dot에 위치하는 object를 가리킨다.
• arrow function은 this가 없다.

let user = {
	name: "Jhon",
    age: 30,
    
    sayHi() {
    	alert(this.name) //Jhon
    }
}

user.sayHi(); //Jhon, 여기서 this는 user가 된다.

 

Constructor

비슷한 object를 여러개 많들어야 할때 constructor function과 new operator를 사용한다.

constructor function은 두가지 규칙을 따른다.

1. 첫 문자를 대문자로 한다.
2. new operator로 실행한다.

function User(name) {
	this.name = name;
    this.isAdmin = false;
}

let User = new User("Kim")

 

Asynchronous

비동기를 처리하는 방법으로 callbacks, promise, async/await 세 가지가 있다.

 

1. Callbacks

액션이 시작되고 끝나면 콜백 함수가 실행된다. 

한 두개 정도 callback이 중첩(nesting)되는 것은 좋다. 그런데 더 많아지면 어떨까? 콜백이 많아지면 보기에도, 관리하기도 안좋다.

이를 해결하는 것이 Promise다.

 

2. Promise

순서대로 코드가 실행되게 해준다.

promise는 특별한 자바스크립트 object인데 "producing code"와 "consuming code"를 연결해준다.

즉, producing code에서 결과가 나오면 consuming code에서 사용할 수  있게 해준다.

then, catch, finally 메서드를 사용해서 결과를 처리할 수 있다.

let promise = new Promise(function(resolve, reject) {
	//executer, new Promise가 만들어지면 자동으로 실행되는 코드
	//success일 경우, resolve(value) 콜백 실행
    //error 발생할 경우, reject(error) 콜백 실행, reject 콜백의 argument는 Error object로 하는게 좋음
});

성공시 실행

.then(successHandlingFunction, ErrorHandleingFunction)
.then(successHandlingFunction)

에러시 실행

then(null, errorHandlingFunction)
catch(errorHandlingFunction)

상관없이 실행

.finally(f)

예시

let promise = new Promise((resolve, reject) => { ... })
promise.then(f)

//혹은
new Promise((resolve, reject) => {})
.finally()
.then()

//Promises chaining
new Promise((resolve, reject) => {
	...
}).then(result => {
	...
    return ...
}.then(result => {
	...
    return ...
}).then(return => {
	...
    return ...
})

// Promises chaining - promise를 반환하기
new Promise((resolve, reject) => {
	...
}).then(result => {
	...
    return new Promise((resolve, result) => {
    	...
    })
}.then(result => {
	...
    return new Promise((resolve, result) => {
    	...
    })
}).then(return => {
	...
    return ...
})

에러 핸들링

promises chaining 마지막에 .catch()를 넣어주면 체인에서 발생한 에러를 잡아준다.

 

3. Async/await

function 앞에 async를 붙인다. 그러면 함수는 promise를 반환한다.

//result가 1인 resolved promise를 반환한다
async function() {
	return 1;
}

await는 async function 안에서만 동작한다.

await는 promise result가 나올 때까지 코드 실행을 중단한다.

 

RESTful API

API(Application Programming Interface)는 애플리케이션간에 소통을 도와주는 프로그램이다. 레스토랑에 웨이터가 주문을 받고 음식을 갖다주는 것처럼 메신저 역할을 한다.

동일한 언어를 써야 의사소통을 할 수 있는 것처럼, API도 표준화된 방식으로 디자인해야 한다.

그 중에 하나가 REST(Representational State Transfer)다. (cf GraphQL)

 

REST는 두 가지 중요한 규칙을 따른다.

1. 특정한 패턴의 Endpoint URLs를 사용한다. 자원의 위치를 나타낸다.
2. HTTP request를 사용한다. (GET, POST, PUT/PATCH, DELETE) 자원을 어떻게 처리할지 요청한다.
   • PUT 자전거를 통째로 바꾸기
   • PATCH 자전거를 고장난 부분만 바꾸기

HTTP	DB
GET	READ
POST	CREATE
PUT, PATCH	UPDATE
DELETE	DELETE

REST API를 제공하면 RESTful하다고 할 수 있다.