자바스크립트 심화

모듈

• js파일 : json파일에서 type:module로 설정해서 사용
• cjs파일 : 항상 cjs로 해석
• mjs파일 : 항상 esm으로 해석

ESM(ES모듈)

named export

export // 내보내기
export { 내보낼것1, 내보낼것2 }; // 여러개 한번에 내보내기
import { 가져올 데이터 } from '파일경로' // 가져오기
import { 원래이름 as 새이름 } from '파일경로' // 이름바꿔서가져오기

default export

export default // 내보내기(한개만가능)
import 아무이름 from '파일경로'// 가져오기(한개만가능)
import * as 아무이름 from '파일경로' // 한번에 import하기

CJS(CommonJS모듈)

require // 가져오기
module.exports // 내보내기

npm(node packahe manager)

해당 디렉토리로 이동한후 npm install로 설치하면
디렉토리에 아래 파일들이 생성됨
소스파일(index.js)과 package.json파일만 받아서
npm install하면 package.json을 읽어서 자동으로 설치함

• node_modules
• package-lock.json : 현재 노드모듈에 있는 모든 모듈의 버전(package.json파일만 공유하지말고 lock파일도 같이 공유하면 공유한 사람과 똑같은 버전으로 진행가능)
• package.json : 현재 패키지에 대한 정보들
  • dependencies필드 : 현재 패키지에 필요한 서브파티모듈의 목록
  • type필드 : 패키지안에서 사용할 모듈 시스템 정의
  • scripts : key:command(파일명) 정의하면 npm run key로 command(파일)실행가능

서브파티 모듈실행
import {함수} from '모듈명'

callback(콜백헬 발생할수있음)

• 어떤 함수의 아규먼트로 전달되는 함수를 콜백함수라고함
• 함수 선언하고 아규먼트로 전달
• arrowfunction으로 바로 만들어서 아규먼트 전달

promise(콜백헬 해결가능)

비동기 작업의 진행, 성공, 실패를 가져와서 처리가능

• pending : 비동기 작업 끝나기를 기다리는 중
• fulfilled : 성공적으로 끝났음. 결과값으로 갖게 됨
• rejected : 실패함. 오류를 결과값으로 갖게 됨

await, async

• await는 async function() 안에서만 사용하거나 "type":"module" 설정하면 파일에서 바로 await사용가능
  • 변수 = await fetch('데이터URL') : await를 마주치면 기다리는동안 다른코드실행하고 돌아옴
• async는 항상 promise를 리턴함, await를 쓰면 결과값가져오기가능
  • async () => 기다리는동안 비동기작업 진행
  • async function()은 await으로 받아와야함

try, catch, finally

try{코드} catch(error){에러가 발생했을때 동작할 코드} finally{결과 상관없이 마지막에 동작할 코드}

then() 메소드

• promise객체가 완료될때까지 기다렸다가 콜백 실행함
  • 그리고 그 결과값을 콜백의 아규먼트로 전달함
  • 기다리는 동안에는 이후 코드 먼저실행
• 항상 promise를 리턴함
  • 콜백이 promise를 리턴하면 그대로 리턴
  • 콜백이 평범한 값을 리턴하면 그 값을 가지는 promise로 리턴

위에 내용 간단하게 한번에 요약(1개의 프로미스)

fetch('데이터URL')
	.then() // 파싱
	.then() // 성공했을때
    .catch() // 실패했을때
    .finally() // 성공 실패 상관없이 모두실행

여러개 프로미스 다루기(병렬)

.all() // 모두 성공시 resolved값 배열로 반환, 실패시 이유반환

async function 함수명() { // function 앞에 씀
let 변수명 = await // async 함수 내에서 사용

fetchData // Promise 리턴
fetchUser // Promise 리턴
}
new Promise(callback) // callback 함수는 (resolve, reject) 두인자를 받음

### 객체지향프로그래밍
>
프로퍼티와 메소드로 객체들의 상호작용을 중심으로 프로그래밍하는것
변수(프로퍼티): 객체의 상태
함수(메소드): 객체의 행동
#### Object Literal(객체를 나타내는 문자열): {프로퍼티, 메소드}
#### factory function

function createUser(email, birth) { // factory function
const user = { // Object Literal
email, // 프로퍼티
birth,
buy(item) { // 메소드
console.log(${this.email} buys ${item.name});
},
};
return user;
}
const user1 = createUser('seon042@gmail.com', '19990101');

#### Constructor function(생성자함수): 생성시 new사용

function User(email, birth) { // 함수이름 첫글자 대문자
this.email = email; // this는 생성된 user1을 가리킴
this.birth = birth;
this.buy = function (item) {
console.log(${this.email} buys ${item.name});
};
}
//생성(new사용)
const user1 = new User('seon042@gmail.com', '1999-01-01');

#### Class:프로퍼티(변수)는 constructor안에 정의하고, 메소드(함수)는 밖에 나누어 작성, 생성시 new사용

class User {
constructor(email, birth) { // 프로퍼티
this.email = email;
this.birth = birth;
}
buy(item) { // 메소드
console.log(${this.email} buys ${item.name});
}
}

### 객체지향프로그래밍 4기둥
#### 추상화:원하는방향으로 간략화해서 나타내는 것
#### 캡슐화:객체의 프로퍼티에 직접 접근하지못하도록 막는것(closure사용하면 완벽하게 가능)
>
#### setter 메소드:설정하려고 할때 체크하고 보냄

set email(address) { // setter 메소드
if (address.includes('@')) { // @가 들어있으면 이메일로 판단
this.email = address; // 숨기고 싶은 프로퍼티는 붙임 이제 _email이 진짜 이메일임
} else {
throw new Error('이메일아닌데?');
}
}
user1.email = '선경'; // 바꾸려고 시도하면 set 실행됨

#### getter 메소드:set 사용하고나서 _없애는용도

get email() { // 파라미터 필요없음
return this._email;
}

#### 상속: extends, supper사용, overriding

class AUser extends User {
constructor(email, birth, level) {
super(email, birth); // 부모클래스 호출
this.level = level;
}
} // user에 있는 프로퍼티와 메소드를 AUser로 상속시킴
buy(item) {
super.buy(item); // 오버라이딩 된상태에서 자식클래스 메소드에서 부모클래스 메소드 호출가능
}

#### 다형성 : 부모클래스에 있는 메소드를 사용하기 싫을때 자식클래스에서 같은이름으로 만들어서 호출하면 overriding가능