TIL

입문영 CSS 강의 촬영 & Webpack과 Babel

2022.07.29

입문용 CSS 강의 촬영 완료

강의 촬영을 전부 마치고 수업 자료 제작에 들어갔다. 강의용 자료와 레퍼런스 코드를 제작하는 단계, 실제 촬영을 진행하는 단계, 수업과 함께 실제 수강생들이 보게 될 수업 자료를 제작하는 단계에서 각각 고려해야 할 것이 너무도 달라 내 마인드셋을 변경하는데에 시간이 좀 걸리는 중.

Apollo-client의 fromPromise와 flatMap

회사 개발팀 쪽에서 로그인 인증 관련하여 치명적인 오류가 발생했다는 소식을 들었다. 해당 이슈에 대한 리포트를 들으며 Apollo-client에서 fromPromise와 flatMap이라는 메서드를 제공한다는 사실을 알게 되었다.

  1. 여러번의 토큰 재요청이 중첩되어 프로미스 체인으로 인한 에러가 발생할 때, Apollo-client는 해당 구문의 출력값을 zen-observable이라는 라이브러리에서 제공하는 Observable 객체로 바꿔준다.
  2. fromPromise는 Observable 객체를 Promise로 바꾸어 뱉어준다.
  3. 그 다음에 flatMap을 이용하여 forward를 실행할 수 있도록 만들어준다.

참고: Apollo Client 토큰 재발급

2022.07.20

Webpack과 Babel

Webpack과 Babel이 보통 함께 언급되기 때문에 지금까지 두 모듈의 역할을 헷갈리고 있었는데, 그 차이점을 확실하게 이해하게 되었다.

Webpack이란? 모던 자바스크립트 웹 서비스 & 웹 어플리케이션을 위한 번들러(Bundler)이다.

Babel이란? 자바스크립트 컴파일러이다. 일부에서는 컴파일러보다는 트랜스파일러가 좀 더 정확한 지칭이라는 의견도 있다. 트랜스파일러는 a라는 언어를 a로 번역해준다. Babel은 자바스크립트를 또 다른 형태의 자바스크립트로 바꿔주는 역할을 한다.

모던 자바스크립트는 ES6 이후의 문법을 사용하지만, 아직 ES6을 제대로 실행시키지 못하는 구버전의 브라우저 환경도 많이 남아있다. 그런 환경을 위해, ES6 문법의 자바스크립트 코드를 ES5 이전의 코드로 변경시켜 주는 것이 바로 Babel이 가지고 있는 주요 기능이다.

CSS 입문자 강의

css를 업무에 지장이 없을 정도로는 사용한다고 생각했는데, 입문자를 위한 full 커리큘럼을 짜고 수업을 진행하다 보니 나도 그간 어설프게 아는 부분이 많았다는 것을 깨닫고 있다.