📚 22.11.21 5회차 스터디 정리본

📌 Ajax

• Ajax가 뭔가요 어떤 것을 담당하고 있죠?

  • 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식
  • XMLHttpRequest 객체를 기반으로 동작

• Ajax를 사용하면 기존 방식과 어떤 차이가 있을까요?

  • 이전 웹페이지는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링
  • Ajax 사용시 장점
    1. 변경할 부분을 갱신하는데 필요한 데이터만 전송받기 때문에 불필요한 데이터 통신이 발생하지 않는다.
    2. 변경할 필요가 없는 부분은 다시 렌더링 하지 않기 때문에 화면이 순간적으로 깜박이는 현상이 발생하지 않는다.
    3. 클라이언트와 서버와의 통신이 비동기 방식으로 동작하기 때문에 서버에 요청을 보낸 이후 블로킹이 발생하지 않는다.

• JSON 이 뭔가요?

  • 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷
  • 객체 리터럴과 유사하게 키와 값으로 구성

• JSON이 제공하는 정적 프로토타입 메서드에 대해 몇가지 말해볼 수 있나요?

  • JSON.stringify()
    • 객체(배열)를 JSON 포맷의 문자열로 변환
    • 클라이언트 → 서버로 객체 전송할 때 객체를 문자열화하는데 이를 직렬화라 함
  • JSON.parse()
    • JSON 포맷의 문자열을 객체로 변환
    • 서버 → 클라이언트에 전송된 JSON 데이터를 객체로서 사용하기위해 역직렬화

• Ajax로 HTTP 요청을 보내기 위해서는 어떤 방법을 사용할 수 있나요?

  • fetch
    • HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환
    • 404, 500같은 HTTP 에러가 발생해도 reject하지 않아서 명시적으로 에러를 처리할 필요가 있다
  • XMLHTTPRequest
  • axios
    • 모든 http 에러를 reject하는 프로미스를 반환 → 모든 에러를 catch에서 처리할 수 있어서 편리

• XMLHttpRequest와 fetch 메서드의 차이는 무엇이라고 생각하시나요?

  • fetch 함수는 XMLHTTPRequest 객체보다 사용법이 간단하고 프로미스를 지원하기 때문에 비동기 처리를 위한 콜백 패턴의 단점에서 자유롭다

📌 REST API

• REST API가 뭔가요?

  • REST를 기반으로 서비스 API를 구현한 것
  • HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처
  • 즉, API 설계의 중심에 자원(Resource)이 있고 HTTP Method 를 통해 자원을 처리하도록 설계하는 것

• REST API의 구성은 어떤 것이 있나요?

  • 자원 - URI
  • 행위 (자원에 대한 행위) - HTTP 메서드
  • 표현 (자원에 대한 행위의 구체적 내용) - payload

• REST API를 설계하는데 중요한 것이 있을까요?

  • URI는 리소스를 표현하는데 집중
  • 행위에 대한 정의는 HTTP 요청 메서드를 통해 하는 것

• HTTP 요청 메서드에 대해서 아는대로 얘기해보세요

  • GET : 모든/특정 리소스 취득
  • POST : 리소스 생성 (페이로드 O)
  • PUT : 리소스의 전체 교체 (페이로드 O)
  • PATCH : 리소스의 일부 수정 (페이로드 O)
  • DELETE : 모든/특정 리소스 삭제

• HTTP 상태 코드를 아는대로 말해주세요

  • 200 : 성공
  • 204 : 요청을 성공적으로 처리, 콘텐츠 제공 X
  • 401 : 권한 없음, 인증이 필요
  • 404 : 서버가 요청한 페이지를 찾을 수 없음
  • 500: 내부 서버 오류

📌 Promise

• 콜백이란 뭐라고 생각하나요?

  • 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미합니다.
    어떤 일을 다른 객체에게 시키고, 그일이 끝나는 것을 기다리지 않고 끝나고 부를 때까지 다른 일을 하는 것을 말합니다.
    이 때문에 동기가 아닌 비동기적으로 처리되는 비동기 방식의 함수라고 할 수 있습니다.

• 프로미스가 뭔가요?

  • 자바스크립트에서는 비동기 처리를 위한 패턴 중 하나로 콜백함수 사용
  • 콜백 헬 → 가동성이 나쁘고 비동기 처리 중 발생한 에러 처리가 곤란하고 여러개의 비동기 처리를 한번에 처리하는데도 한계
  • 콜백 패턴이 가진 단점을 보완하고 비동기 처리 시점을 명확하게 표현하기 위해 ES6에서 비동기처리를 위한 또 다른 패턴으로 Promise를 도입

• 프로미스 생성 방법

  • Promise 생성자 함수를 new 연산자와 함께 호출하면 Promise 객체가 생성
  • Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달 받음
    • 이 콜백 함수는 resolve와 reject 함수를 인수로 전달받음

• 프로미스의 상태를 나타내는 것은 어떤 것들이 있나요?

  • pending
    • 비동기 처리가 아직 수행되지 않은 상태
    • 프로미스가 생성된 직후 기본 상태
  • fulfilled
    • 비동기 처리가 수행된 상태 (성공)
    • resolve 함수 호출
  • rejected
    • 비동기 처리가 수행된 상태 (실패)
    • reject 함수 호출

• 프로미스의 후속 처리 메서드

  • then
  • catch
  • finally

• 프로미스 빌트인 객체가 제공하는 정적 메서드에 대해 알고 있나요?

  • resolve / reject
    • 이미 존재하는 값을 래핑하여 프로미스를 생성하기 위해 사용
    • 인수로 전달받은 값을 resolve/reject 하는 프로미스 생성
  • all
    • 여러 개의 비동기 처리를 모두 병렬 처리할 때 사용
    • 인수로 전달받은 배열의 모든 프로미스가 모두 fulfilled 상태가 되면 종료
    • 하나라도 rejected 되면 나머지는 즉시 종료하고 에러가 catch 메서드로 전달
  • race
    • 가장 먼저 fulfilled 상태가 된 프로미스의 처리 결과를 resolve하는 새로운 프로미스 반환
    • rejected는 Promise.all과 똑같이 동작
  • allSettled
    • 전달받은 프로미스가 모두 fulfilled 또는 rejected 상태가 되면 처리 결과를 배열로 반환

📌 제너레이터와 async await

• 제너레이터란 뭔가요? 일반 함수와는 어떤 차이가 있죠?

  • 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수

  • 일반 함수와 차이점

    1. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.
    2. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.
    3. 제너레이터 함수를 호출하면 함수 코드를 실행하는 것이 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환한다.

• 제너레이터의 구조

  • function* 키워드로 선언
  • 하나 이상의 yield 표현식 포함
  • 이외에는 일반 함수 정의하는 방법과 같다
  • 제너레이터 객체
    • next, return, throw 메서드를 가짐
    • next : 제너레이터 함수의 yield 표현식까지 코드 블록을 실행

• async/await 가 뭔가요? 기존의 Promise와는 어떤 차이가 있죠?

  • 제너레이터보다 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있다
  • 프로미스의 후속 처리 메서드 없이 마치 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현 가능

• Promise와 async/await의 차이점 한 줄 요약

  • 에러 처리
    • 프로미스
      • 후속처리 메서드인 .catch()를 이용해 에러 핸들링
    • async/await
      • try … catch 문 사용
  • 가독성
    • async/await은 동기 처리처럼 구현할 수 있기 때문에 코드 흐름을 이해하기 쉽다
    • 프로미스는 .then() 지옥의 가능성이 있다.

📌 에러

• 에러처리를 왜 해야 하나요?

  • 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료되기 때문이다

• 자바스크립트에서 에러를 처리하는 방법에는 뭐가 있을까요?

  1. 예외적인 상황이 발생하면 반환하는 값을 if문이나 단축 평가 또는 옵셔널 체이닝 연산자를 통해 확인해서 처리하는 방법
  2. 에러 처리 코드를 미리 등록해 두고 에러가 발생하면 에러 처리 코드로 점프하도록 하는 방법
     a. try … catch … finally 문
     b. Error 객체 생성 → throw문으로 에러 객체 던지기

📌 모듈

• 모듈이 뭔가요?

  • 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각
  • 기능을 기준으로 파일 단위로 분리
  • 애플리케이션과 완전히 분리되어 개별적으로 존재하는 모듈은 재사용이 불가능하므로 존재의 의미가 없음 → 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능 → export
  • 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용가능 → import

📌 자바스크립트의 메모리 관리

참고자료

1. 값을 선언할 때, 함수 호출의 결과, 메소드를 통해 자동으로 메모리를 할당

2. 값 사용

3. 할당된 메모리가 더 이상 필요없을 때 해제 ⇒ 가비지 콜렉션

• 가비지 콜렉션

  • 자동 메모리 관리 방법
  • 더이상 필요하지 않은 모든 메모리를 찾아서 해제
  • 모든 객체를 모니터링하고 도달할 수 없는 객체는 삭제
  • mark-and-sweep 이 가비지 컬렉션 기본 알고리즘
    • 방문 → mark
    • mark 되지 않으면 삭제