[2주차 과제] 새롭게 배운 것들

2023.06.17

2주차 과제 팀원들의 comment를 참고 하면서 몰랐던 부분이나 부족한 부분을 공부
JSDoc / 모듈 시스템(ESM, CommonJS, AMD, UMD) / throw / 옵셔널 체이닝 / callback / return

1. JSDoc

JS 코드에 주석을 달기 위해 사용되는 마크업 언어
JS용 API 문서 생성기

https://jsdoc.app/
https://typescript-kr.github.io/pages/jsdoc-reference.html
https://www.youtube.com/watch?v=kz5phYvre_s

1. 설치

npm -i -D jsdoc

2. 주석

/** ... */

3. 예제

/**
* 면적 구하기 함수
* @param {number} width - 가로
* @param {number} height - 세로
* @returns {number} 면적
*/
function getArea(width, height){
	return width * height;
}

4. 문서 자동 생성 기능

방법1. target 지정해서 직접 실행
node_modules/jsdoc/jsdoc.js index.js

방법2. package.json -> npm run jsdoc

"scripts": {
	"jsdoc": "jsdoc index.js",
},

실행시키면 /out폴더에 문서 생성

5. Type Checking

최상위 폴더에 jsconfig.json 를 만들고 밑에 코드 추가

{
  "compilerOptions":{
    "allowJs": true,
    "checkJs": true,
  },
}

6. 주요 tags

1. @param 함수에서 자주 사용

/**
* @param {{ x: number, y: number }} pos
*/
function getPos({x: x, y: y}){
	console.log(x,y);
}
getPos({x: 1, y: 2})
getPos({y: 2}) // 에러 발생

2. @type 변수의 type 표기

/** @type { number } */
let width;

/** @type { boolean } */
let isReady = false;

/** @type { string[] } */
let fruits = ['apple', 'banana', 'cherry'];

// 타입 오류 발생
width = '100px';
isReady = 'true';
fruits = ['apple', 'banana', 'cherry', 1];

3. @typedef 타입 만들어 재사용 하기

/**
* Person 타입 정의
* @typedef {Object} Person - 사람
* @property {string} name - 이름
* @property {string\number} id - 아이디
* @property {number} age - 나이
*/

/** @type {Person} */
const person = {
  name: 'jiyoon',
  id: 237,
  age: 25,
};

person.email = 'angella990825@gmail.com'; // 오류

4. @callback 콜백 함수 표시

/**
* onFocus 콜백
* @callback onFocus
* @param {Event} e
* @returns {void}
*/

/** @type {onFocus} */
const onFocus = (e) => {
  console.log(e.target);
};

7. 자주 쓰는 패턴

1. 해당 파일의 모든 타입 체킹 무시

//@ts-nocheck

2. any 타입

/** @param {*} data */
function handleData(data){
  console.log(data);
}

3. @async, @class, @event, @global

2. 모듈 시스템

https://www.youdad.kr/js-module-system/
https://hini7.tistory.com/226

플러그인 파일이나 쪼개진 자바스크립트 코드 조각을 재사용하기 위해서 각각의 파일을 등록하고, 등록된 파일을 자바스크립트에서 불러와서 사용할 수 있게 해주는 프로그램

서버사이드와 클라이언트 사이드

1. ESM

• 주로 클라이언트 사이드에서 사용
• 언어 자체에 표준으로 탑재된 모듈 시스템
• export-import 문법 사용
• 비동기로 동작하여 속도가 빠르고 실제 사용 부분만 import 하여 메모리가 적게 차지하고, 가독성이 좋고 순환 의존성을 지원
  webpack과 같은 번들러와 같이 사용

1. export

1. named export 방식

• 선언된 변수명을 그대로 export 하는 방식
• named export는 모듈 내에 여러개의 export가 존재 할 수 있음
• 변수를 선언함과 동시에 내보내기를 할 수도 있고, 먼저 정의된 변수들을 모아서 내보내거나, 먼저 정의된 함수를 별칭으로 바꿔서 내보낼 수도 있음

export const name1 = 'lee';
export const name2 = 'kim';

const age1 = 25;
const age2 = 10;
export { age1, age2}

let key1;
export { key1 as key2} // 다른 모듈에서 import 할 때는 key2라는 이름으로 import

2. default export 방식

• 모듈에서 하나만 존재
• 변수를 직접 내보낼 수 없음

export default expresison;

3. export-from 방식

• import와 export를 한 번에 처리하는 문법
• 주로 패키지의 다른 모듀들을 모아서 일관된 형태로 내보내거나 관리 할 때 사용
• 클라이언트 사이드의 환경에서 from을 사용할 때, .js확장자를 적어야 함

2. import

• name은 import한 값의 현재 스코프 이름
• as 별칭으로 불러옴
• {member} export한 모듈의 멤버 이름

import name from 'module-name';
import * as name from 'module-name';
import {member} from 'module-name';

3. Module Type

<script type ="module" src="foo.mjs"></script>
script 태그에 type="module"을 선언하면 자바스크립트 파일은 모듈로 동작
이때, 모듈이라는 것을 명확하게 표헌하기 위해 확장자는 mjs를 붙이자

2. CommonJS

• 서버 사이드에서 사용하며(Node.js), 동기적으로 작동
• require 문법 사용

3. AMD

• 서버 사이드와 클라이언트 사이드에서 사용할 수 있지만 클라이언트 사이드에서 주로 사용
• 비동기적으로 작동
• define-require 문법 사용
• 잘 안씀 -> ESM

4. UMD

• CommonJS와 AMD를 모두 사용하기 위한 구현 패턴

3. throw

throw 연산자를 사용하면 에러를 직접 만들 수 있다.
이론상으론, throw 인수에 모든 것을 넘길 수 있지만, 대개 내장 Error 클래스를 상속받은 에러 객체를 인수에 넘긴다.

https://ko.javascript.info/try-catch

1. 문법

throw <error object>

2. 에러 객체 관련 생성자

let error = new Error(message);
let error = new SyntaxError(message);
let error = new ReferenceError(message);
// ...

3. 예시

let error = new Error("이상한 일이 발생했습니다");

alert(error.name); // Error
alert(error.message); // 이상한 일이 발생했습니다

4. 옵셔널 체이닝(?.)

?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.

1. obj?.prop

• obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함

2. obj?.[prop]

• obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함

3. obj?.method()

• obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함

5. callback

모던 자바스크립트, https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98

콜백 함수 - 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수, 함수형 프로그래밍 패러다임과 비동기 처리에서 중요

고차 함수 - 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수

고차 함수는 콜백 함수를 자신의 일부분으로 합성함
콜백 함수는 고차 함수에 의해 호출되며 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있음

6. return

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/return

1. 구문

return [[expression]]; expression: 반환할 값으로 사용할 표현식, 생략시 undefined 반환

2. 함수

1. 함수 중단 - 함수는 return을 호출하는 지점에서 즉시 실행을 멈춤

function counter() {
  for (let count = 1; ; count++) {  // 무한 반복
    console.log(count + "A"); // 5까지
      if (count === 5) {
        return;
      }
      console.log(count + "B");  // 4까지
    }
  console.log(count + "C");  // 절대 나타나지 않음
}

counter();

// 출력:
// 1A
// 1B
// 2A
// 2B
// 3A
// 3B
// 4A
// 4B
// 5A

2. 함수 반환 - 클로저 연관

function magic(x) {
  return function calc(x) { return x * 2 };
}

var answer = magic();
answer(3); // 6