[FE - ConnecTo] DAY39 TIL👩🏻‍💻

22.09.02 여러 자료를 찾아보며 공부한 내용들을 정리하였습니다 😊
피드백은 언제나 환영입니다! 🍊

에러 처리

에러 처리할 때 예외적 상황이란, 내가 기대한 대로 코드가 동작하지 않는다는 것을 의미함.

대부분의 에러는 재할당 때문에 발생하게 되는데, 이 때 에러란 무엇일까?

문법적인 부분을 지키지 않거나, 타입이 잘못된 경우에 발생함.

대부분의 에러는 타입 에러를 일으키는데, ESLint 사용을 하면 문법 에러는 발견하기 힘듬!

만약 인수의 타입이 예상한 것과 다른 경우, 바로 에러 처리를 하는 것이 바람직함.

에러 또한도 재사용성이 가능해야하므로, 에러를 전파시켜서 위에서(전역에서) 처리해야 하는데, 비동기 함수 사용시 에러 전파가 안되는 문제가 발생하는데, 이를 await가 해결할 수 있음.

에러는 호출자 방향으로 전파되는데, 이 때 호출자는 caller라고 불며, 함수가 호출되기 직전에 콜 스택에 푸시된 실행 컨텍스트임. 하지만, 비동기 함수는 호출자가 없기 때문에 에러가 소실되므로 에러 처리를 할 수가 없음. 그래서 비동기 함수의 에러 처리는 await와 try-catch를 사용하여 구현할 수 있음.

에러 객체는 최대한 구체적은 메세지를 전달할수록 좋음. 에러의 궁극적인 목적이 개발자에게 오류를 알리기 위한 것이기 때문임. 그래서 프로그램을 강제 종료 시키지 않는 것은 부차적인 목적임.

---

모듈

자바스크립트의 본래 목적은 애플리케이션 개발이 아니어서, ES5까지 모듈 기능이 제공되지 않았음.

모듈 기능이 제공되지 않으면 애플리케이션을 만들 수 없는데, 만약 만드려면, 한 파일로 만들어야 하는데, 솔직하게 불가능함. 그래서 파일을 쪼갤 수 있는 방법이 모듈임.

파일을 쪼개는 기준

1. 기능별로
2. 화면별로

모듈이 없었을 때는 파일을 분리해도 전역을 공유하는 문제점이 있었는데, 변수끼리 서로 충돌하는 현상이 발생함. 이를 해결하기 위해서는 즉시 실행 함수로 감싸줬는데, 더 근본적인 해결 방법이 바로 모듈임.

• export 명령어 다른 모듈에서도 특정 식별자를 사용할 수 있게끔 하는 명령어
  
• import 명령어 다른 모듈에서 export한 식별자를 참조하여 사용할 수 있게끔 하는 명령어
  

모듈을 사용하면 기본적으로 정보 은닉이 가능한데, 모듈 안에서 선언한 변수는 클래스의 private 필드와 유사하게 동작함.

• export의 종류

  1. default : 기본적으로 사용하는 명령어이며, 하나만 내보내고 싶을 때 사용함.

  2. named : 여러 개를 내보내고 싶을 때 사용.

     export는 적으면 적을수록 좋지만, 한 20개 정도까지는 괜찮음..!

---

Babel

바벨은 최신 문법을 사용하여 개발하고 싶은데 브라우저에서 지원하지 않는 경우에 사용함.

ES6+는 ES6 이상의 문법을 의미하고, ES.NEXT는 현재 제안 단계에 있는 문법을 의미하는데, 이러한 문법들을 트랜스파일링(ES5 이하의 사양으로 다운그레이드) 시켜주는 것이 Babel임.

하지만, promise 처럼 ES5 이하에서 대체할 수 없는 문법들이 존재하기 때문에, 이런 경우에는 polyfill을 사용해야 함.

---

Webpack

프론트엔드에서 사용하는 리소스 파일들을 번들링하기 위해서 사용함.

빨리 검색해서 학습하고 사용하는 것이 중요함.

document 문서 잘 읽어보기!