TIL - 2022.07.20 수요일

열심히 만들고 있는 강의 자료들😇

오늘 배운 것

1. Webpack과 Babel

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

 

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

MPA 웹 실무를 뛸 때부터, 괜찮은 웹사이트를 보면 소스코드를 뜯어보는 습관이 있었다. 기존의 jQuery 웹페이지의 경우에는 대부분 개발자 도구로 웹페이지를 열어보면 분리된 html/css/js 파일을 확인할 수 있다. php나 asp 등으로 작업을 진행하더라도 웹 브라우저에 그릴 때에는 html/css/js 파일로 렌더링되기 때문인데, 이상하게 최근 핫한 웹 서비스 페이지의 경우에는 html/css/js가 용도별로 분리되어 있지 않고 한두개의 파일에 몽땅 합쳐져 있는 경우가 많았다. 그마저도 개행 없이 모든 코드가 한줄에 싹 쑤셔넣어져 있는 모습이 신기했던 기억이 난다. 분명 개발자가 이런 형태로 작업을 했을리는 없는데 왜 브라우저에 도착한 소스코드가 이런 형태인거지? 싶어서 말이다.

 

Next.js를 처음 배우면서, 내가 작업하는 SPA 페이지의 소스코드가 그런 식으로 되어있다는 것을 알고 "유레카!"의 기분을 느꼈던 기억이 난다. 옛날에 내가 뜯어보며 신기해했던 그 코드들이, 대부분 JS SPA 프레임워크/라이브러리로 만들어진 페이지라는 것을 알게 된 것이다. 그 당시에는 Next.js라는 프레임워크가 그 병합 작업을 해준다고 생각했다. 하지만 알고보니 Next.js 자체가 아니라 Webpack과 같은 번들러가 해주는 역할이었다.

 

그리고 Babel은 자바스크립트 컴파일러이다. 사실 이 정의부터가 의문이었다. 자바스크립트는 인터프리터 언어인데 왜 컴파일러가 필요하지?

알아보니 일부에서는 컴파일러보다는 트랜스파일러가 좀 더 정확한 지칭이라는 의견도 있더라. 엄밀하게 말해서, 트랜스파일러는 컴파일러와는 조금 다르다. 컴파일러는 a라는 언어를 전혀 다른 b라는 언어로 번역해주는 도구지만, 트랜스파일러는 a라는 언어를 a로 번역해준다. Babel은 자바스크립트를 또 다른 형태의 자바스크립트로 바꿔주는 역할을 한다.

 

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

참고로 Sass 등의 CSS 전처리기와 typescript도 트랜스파일러에 포함된다.

2. CSS 입문자 강의

css를 업무에 지장이 없을 정도로는 사용한다고 생각했는데, 입문자를 위한 full 커리큘럼을 짜고 수업을 진행하다 보니 나도 그간 어설프게 아는 부분이 많았다는 것을 깨닫고 있다. 가장 큰 예시가 캐스케이딩의 개념. 실무에 문제가 없을 정도의 직관적 인지는 갖추고 있지만, 캐스케이딩이 구체적으로 무엇을 의미하며 어떠한 원리로 동작하는지에 대해서는 잘 알고 있지 못했다. css에서 사용할 수 있는 함수의 개념도 모호했는데, 글로 정리하고 말로 설명하다보니 조금 가닥이 잡힌다.

 

css 커리큘럼을 짜고 수업 내용을 정리하는 것은 내가 그동안 알고 있었던 것에 대한 재정의 작업이라는 생각이 든다. 업무 강도는 결코 만만하지 않지만.. (아니, 사실 육체적으로는 매우 하드하지만) 머리는 팽팽 돌아가고 있다. 공부가 정말 많이 된다. 지금 정리한 내용들도 블로그에 차근차근 써나가고 싶다.

 

앞으로 할 것

• 장장 4개월만에 TIL을 다시 쓰기 시작한 것은 바로 성취감이 필요해서다.
  취업하고, 다시 일을 시작하니 하루하루가 너무 정신없이 지나간다. 매일매일의 대화나 업무 과정에서 참 많은 것을 배우는데, '이 내용도 정리해서 블로그에 써야지' 라고 메모만 해놓고 정작 글은 한 줄도 쓰지 못한 채 흘려보내고 있다. 매일매일의 배움을 날려보내기 너무 아까우니 다시 꾸준히 써보자..!
• 라이브러리나 프레임워크의 도움 없이 Webpack과 Babel으로 개발 환경을 세팅하는 연습
• Next.js와 GraphQL 이용한 미니 프로젝트 진행시키기. 한동안 css만 생각했더니 리액트 문법이 미묘하게 낯설어져서 놀랐다.