📚TIL

day10

객체지향과 함수형 프로그래밍

• 객체지향 프로그래밍을 한다고 하더라도 내부 매서드 로직은 이터러블 프로그래밍을 사용하여 어우러질 수 있음
• for, if i++ 같은 언어들을 이터러블 프로그래밍으로 대체 가능

day14

module - import

• export키워드로 내보내진 변수, 함수 등을 불러올 수 있는 키워드
• module을 쓰는 경우 맨 처음에 불러오는 script는 type="module" 넣기
• script에서 import, export키워드로 다른 모듈을 편하게 불러올 수 있음
• import를 사용하면 간편하게 의존성 관리가 가능
• import 사용시 프로젝트가 커지고 오래됐을 때 사용하지 않는 script를 찾아 관리하는 것이 쉬워짐
• import는 항상 최상위에 위치

import defaultExport from "module-name"
//module-name 내에 export default로 내보내진 것을 가져옴

import * as allItems from "module-name"
//module-name 내에 export된 모든 것을 가져옴
//as 이후 이름은 중복만 아니면 자유롭게 정할 수 있음

import { loadItem } from "module-name"
//module-name 내에서 export된 것 중에 특정한 값만 가져옴
//,를 통해서 여러개를 가져올 수 있음

import { loadItem as loadSomething } from "moduel-name"
//module-name 내에서 export된 것 중에 특정 값만 이름을 바꿔서 가져옴
//이름의 중복을 피하기 위해서 사용

import defaultFunction, { loadingItem } from "module-name"
//export default된 것과 개별 export된 것을 한번에 가져올 수 있음

import "module-name"
//별도의 모듈 바인딩 없이 불러오기만 함
//불러오는 것만으로 효과가 있는 스크립트의 경우 사용

module의 장점

• 각 JavaScript별로 사용되는 모듈을 명시적으로 import해오기 때문에, 사용되거나 사요오디지 않는 스크립트 추적에 용이
• script태그로 로딩하는 경우 의존성에 따라 순서를 정렬해야하나 import로 불러올 시 순서와 무관하여 script를 더 잘게 쪼갤 수 있음
• script src로 불러오는 것과 다르게 전역오염이 일어나지 않음

비동기 처리

• 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 JavaScript의 특성
• JavaScript는 single-thread기 때문에 비동기로 이뤄지는 작업이 많음
• callback은 JavaScript에서 비동기를 다룰 때 전통적으로 사용
• 비동기 실행 예시

//XMLHttopRequest(XHR) : 
//데이터를 비동기로 요청하고, 요청 후 동작을 비동기로 처리
function request(url, successCallback, failCallback){
	const xhr = new XMLHttpRequest()
    
    xhr.addEventListener('load', (e) => {	
    	if(xhr.readyState == 4){
        	if(xhr.status === 200){
            	successCallback(JSON.parse(xhr.responseText))
            }else{
            	failCallback(xhr.statusText)
            }
        }
    })
  
  xhr.addEventListener('error', (e) => failCallback(xhr.statusText))
  xhr.open('GET', url)
  xhr.send()
}

Promise

• 비동기 작업을 제어하기 위해 나온 개념으로 callback hell을 어느정도 벗어날 수 있도록 해줌
• 계속해서 비동기 작업을 이어나갈 수 있는 것이 Promise의 핵심 개념
• Promise로 정의된 작업끼리는 연결할 수 있으며 체인 형태로 연결해 depth가 크게 증가하지 않음
• Promise는 then을 통해 비동기 작업 이후 실행할 작업을 지정
• cath를 통해 에러가 발생했을 때에도 Promise chain이 멈추지 않고 동작하게 할 수 있음
• Promise 예시

const promise = new Promise((resolve, reject) => {
	//내부에서 비동기 상황이 종료될 때 resolve함수 호출
  	//내부에서 오류 상황일 때 reject함수 호출
 	//reject를 통해 실행이 끝난 이후 어떤 문제가 있었는지 알려줌
})

function asyncPromiseWork(){
	return new Promise((resolve, reject) => {
    	//some code..
    	return resolve('complete')
    })
}
asyncPromiseWork().then(result => console.log(result))
//result에는 resolve를 호출하며 넘긴 complete가 들어있음
//then으로 넘겨진 함수가 resolve가 호출되는 순간 실행됨

PromiseWork()
	.then(result => {
		return PromiseNextWork(result)
	}).then(result => {
		return PromiseNextWork(result)
	}).catch(e => {
		alert('에러 발생!')
	}).finally(() => {	
  //성공, 실패여부와 상관없이 호출해야하는 코드가 있다면 finally 사용
  //자원정리, 로딩중 처리 종료 등에 사용
		alert('어쨋든 작업은 종료!')
	})

Promise 내장 함수

• Promise.all(iterable) : 여러개의 Promise를 배열로 받아 Promise를 동시에 쭉 실행시키고 처리가 끝난 후 then 호출
• Promise.race(iterable) : 여러 Promise 중 하나라도 resolve, reject될 경우 종료
• Promise.any(iterable) : 여러 Promise 중 하나라도 resolve 되면 종료히며 race와 비슷하나 먼저 끝난 reject는 무시되고 resolve가 가장 먼저 된 것만 가져온다는 차이가 있음
• Promise.allSettled(iterable) : 여러 Promise들이 성공했거나 실패했거나 상관없이 모두 끝날 때 까지 기다린 후 처리
• Promise.resolve() : 주어진 값으로 이행하는 Promise.then 객체를 만들며 주어진 값이 Promise인 경우 해당 Promise가 반환됨
• Promise.reject() : 주어진 값으로 reject 처리된 Promise.then 객체를 만들며 주어진 값이 Promise인 경우 해당 Promise가 반환됨

async/await

• async/awiat를 이용해 Promise를 동기 코드처럼 보이게 짤 수 있음
• 사용시 비동기로 실행되지만 코드의 실행을 위에서 아래로 순차적으로 파악할 수 있음
• async 사용법

//function 앞에 async 붙이기
async function asyncFunction(){
	const res = await request(...)
}

//파라미터 정의하는 괄호 앞에 async 붙이기
const asyncFunction = async () => {
	const rest = await request(...)    
}
                               
//async키워드 함수가 붙은 함수는 실행 결과를 Promise로 감쌈
async function asyncRun(){
	return 'hi, hyoco'    
}

console.log(asyncRun())	//Promise{<fulfilled> : 'hi, hyoco'}
asyncRun().then((message) => console.log(message))	//hi, hyoco

• await : 비동기 코드를 호출할 수 있도록 해주며 현재 코드를 실행하는 함수에 async가 붙어야 동작

const work = async () => {
	console.log('작업 시작')
	
  	await delay(1000)
  	console.log('작업 1 완료')
  	
  	await delay(1000)
  	console.log('작업 2 완료')
  	
  	await delay(1000)
  	console.log('작업 3 완료')
  	
  	await delay(1000)
  	console.log('모든 작업 완료')

}

• async/awiat 오류를 다루기 위해 try,catch를 이용하여 오류메세지를 통해 오류의 원인 파악

🌊하루를 마치며

남은 10일차 강의와 14일차 강의를 모두 들었다! 매우 고됐던 함수형 프로그래밍 강의가 끝났다는 것에 행복했다..! 14일차는 module과 promise에 관련된 강의였다. module에 대해서 배웠는데 이 부분은 몰랐던 부분들이어서 생소했던 개념이지만 어렵지 않게 이해가 됐다. 다른 부분들 보다도 html에서 script를 불러올 때 의존도에 따라서 고민하지 않는다는 부분이 굉장히 편리하게 느껴졌다! module이후에 다시 한번 Promise, async/await 강의가 나왔는데 이전에 개념적으로 부족하다고 느꼈던 부분이라서 지난주에 놓치고 지나쳤던 부분들을 다시 공부할 수 있었다.

주말에 밀린 강의를 모두 마무리하고 싶었는데 이해가 안되는 부분들을 돌려서 다시듣고 필기하면서 강의 듣는 시간이 늘어나 마무리하지 못했다.. 하루가 24시간이라는게 원망스러운 날이었다. 얼른 기술의 발달로 사람이 안자고 안먹어도 살 수 있었으면 좋겠다고 생각했다 ㅎvㅎ 내일은 과제를 하기 위해서라도 밀린 15일차 강의를 들은 후 시간이 부족해서 빈칸으로 남겨둔 TIL을 채워넣을 생각이다! 4주차도 화이띵! ! !