본격적인 강좌에 들어가기 앞서,

• 우리가 만드는 프론트엔드 작업물이 어떤 과정을 통해 빌드 되고 어떻게 배포 되는지,

• 번들러(bundler)라 불리는 것들의 역할이 뭔지

• 대표적인 번들러인 Parcel 와 Vite 을 사용해보고

• 간단한 작업물을 Vercel 에 배포하는 과정

• 그리고 Tailwind CSS 를 빈 프로젝트에 붙이는 과정까지

앞으로 만들게 될 많은 미니 프로젝트를 위한 기초를 다져봅니다

📺 영상 보기: https://youtu.be/j541SGnGcew

Tailwind CSS 는 일반적으로 Bundler 와 함께 사용됩니다. 그냥 tailwind.css 라는 파일을 link 태그로 추가하지 않고요. 왜 그럴까요?

그리고 저는 왜 Tailwind CSS 를 사용할까요? Tailwind CSS 가 가져다주는 장점을 설명합니다.

📺 영상 보기: https://youtu.be/4fqP2j_ZekA

Node.js 의 버전은 빠르게 올라가고 있다 보니, 여러 프로젝트에서 사용하는 Node.js 버전이 제각기 다른 경우가 흔합니다.

이럴 때 관리를 잘 해주지 않으면, 엉뚱한 버전의 Node.js 를 사용해서 문제가 생기기도 하는데요.

세 가지 Node.js 버전 매니저를 소개하고 그 원리와 장단점을 설명합니다.

📺 영상 보기: https://youtu.be/4CEzGp_cH1k

터미널 프롬프트를 원래 있는 그대로 사용하시나요? 몇 가지 툴을 설치함으로써 아름답고 실용적인 터미널 생활을 해보세요.

📺 영상 보기: https://youtu.be/HUn1ePxTTrM

• innerHTML

• createElement

• appendChild

• insertBefore

• addEventListener

등의 API 를 차근차근 배워볼 생각이에요. 이게 정말 모든 프론트엔드 개발의 근간이에요.

그 이후로 쭉, 각 에피소드의 예제들을 이 API 들을 가지고서 개발할 건데요 (React, Vue.js 같은 프레임워크 없이) 이게 어떻게 불편하고 어떤 문제가 있어서 프레임워크를 쓰게 되는지 자연스레 설명하게 될 예정입니다.

쇼핑몰을 통째로 만드는 건 아니고, 그냥 상품 리스트와 장바구니가 있는 화면을 구현해 봅니다. 목표는 DOM API 를 직접 사용하며 동적인 인터랙션을 구현해 보는 건데요.

장바구니에 넣고 빼고, 숫자 늘리고 줄이고, 같은 데이터를 화면 여기저기에 잘 적용하는 과정을 보여드리면서 아주 예전에는 어떻게 구현했었는지, 어떤 불편함이 있었는지, 이런 히스토리와 함께 React 같은 프레임워크가 이런 상황을 어떻게 나아지게 했는지 약간의 역사 공부 비슷한 게 곁들여질 것 같아요.

예제들을 진행하면서 100% 프론트엔드 코드만으로 할 수는 없고 백엔드가 필요한 순간들이 있을 텐데요. express 를 가지고 간단한 로컬 웹서버를 만들어 봅니다.

요즘 Vercel 이나 Netlify 에서 제공해 주는 Serverless Function 이 참 쉽고 좋은데요. 그게 있기 전의 시절을 상상하며 프론트엔드 코드 + express 서버가 같이 돌아가는 상황을 테스트해봅니다.

이 강좌는 이후 에피소드에서 만날 cors 문제를 해결하기 위함도 있고, 또 다른 에피소드(hint: ssr)를 위한 준비 단계이기도 합니다.

forEach, filter, map, reduce 등의 Array methods 에 부담을 느끼시는 분들이 계신 거 같아서, 한번 연습을 해보는 시간을 가지는 건 어떨까 하는 생각이 들어요. 이건 진짜 기초 체력을 단련하는 느낌의 에피소드에요.

늘 가져다가 사용하는 무수히 많은 npm 라이브러리. 직접 만들고 배포해 보신 적 있나요? npm 라이브러리의 기본적인 구조, 형태를 알아보고, 직접 배포까지 가봅시다. 그리고, 제대로 된 라이브러리를 개발하고 운영하기 위해 필요한 디테일들을 소개해 드립니다.

옛날 옛적에 jQuery 라는 라이브러리가 있었는데요. 에피소드 5에서는 거의 아무 기능 없는 라이브러리를 배포해 봤다면, 이번엔 비교적 제대로 된 라이브러리를 만들어 배포해 봅니다.

이 에피소드에서는 기본적인 class 사용과, class 없이도 closure 를 통해 비슷한 효과를 내는 방법을 비교해 봅니다. 그리고 나무를 흔든다는 게 뭔지도 배우게 됩니다.

Jekyll, Gatsby, Next.js 등을 써서 정적인 웹사이트를 만들어보셨거나, 그렇게 만들어진 웹사이트를 구경해 본 적 있으신가요?

Next.js 로 마크다운 정적 블로그 만들기

이런 튜토리얼도 많이 보셨을 거예요. 이 에피소드에서는 저런 과정을 따라 해보지 않아요. Jekyll, Gatsby, Next.js 이런 거 하나도 없이, 그냥 맨바닥에서부터 Node.js 하나만 가지고 정적 웹사이트를 만드는 과정을 한 땀 한 땀 밟아 봅니다.

어려울 것 같겠지만 오히려 생각보다 더 단순해요. 정적인 웹사이트를 왜 만들고, 어떻게 만드는지 기본을 밟아보시고 나면, 저런 프레임워크로 정적 웹사이트 만드는 과정을 잘 이해하실 수 있게 돼요. 왜냐면, 이 에피소드에서 저와 함께 밟을 과정의 일부를 이렇게 저렇게 추상화해 놓은 게 저 프레임워크들이니까요.

뭘 추상화한 건지 그 대상을 모르면, 당연히 추상화된 결과물도 이해하기 쉽지 않겠죠.

이건 약간 큰 에피소드가 될 예정인데요. 사실 별다른 걸 만들진 않아요. 영화 목록 보여주는 페이지 + 검색하면 검색 결과 보여주는 페이지, 이렇게 딱 두 개만 만들 거예요. 하지만 두 서브 에피소드로 나뉠 가능성이 높아요.

왜냐면, 브라우저의 history API 를 배워볼 예정이에요. 그게 무슨 뜻이냐면, React Router 같은 client side routing 을 직접 구현해 보게 된다는 거예요. 너무 깊게 가진 않을 거예요. 아주 단순한 수준에서 어떤 일들이 벌어지는지 이해할 수 있게 실습해 봅니다.

그런 후에는, server side rendering (SSR) 을 express 서버로 구현해 봅니다. Next.js 를 사용하면 SSR 를 자동으로 해줘서 좋다던데, 그게 도대체 뭔지? SSR 에 늘 따라다니는 Hydration 이라는 건 또 뭔지?

순수하게 Node.js + express 가지고 직접 해봅니다.

저런 걸 직접 구현한다고 생각하면 되게 어렵고 막막할 것 같지만, 의외로 안 그럴 거에요. 빈 캔버스 위에 핵심 기능만 딱딱 구현해 나가니 눈에 더 잘 보일 거예요.

이미 프레임워크가 놓여 있는 상태에서는 뭐가 뭔지 구분하려면 너무 많은 지식이 필요하거든요.

그래서 이런 연습이 도움 될 거예요.

기본적인 개념들은 알고 계시다는 전제하에 약간의 연습 세션을 가져보고자 합니다. Array methods 연습 에피소드와 비슷한 느낌이에요. 자바스크립트에서의 비동기 다루는 건 마치 기초 체력과도 같습니다.

<form action="/save" method="post">

이게 도대체 뭐죠? action, method 를 form 에 한 번도 안써본 분들에게 알려드리는 옛날 옛적의 form 구현 방식을 설명해 드립니다.

form 을 submit 하는 방식이 ajax라 불리던 것의 등장으로 어떻게 바뀌었고, 요즘은 또 어떻게 달라졌는지.

react-hook-form 같은 라이브러리는 왜 쓰게 됐는지. 안 쓰고 할 순 없을지? 한번 얘기해 볼게요.

그리고 한발 나아가, 자바스크립트 만으로 Form 라이브러리를 만든다면 어떻게 해볼 수 있을지? 간단한 함수를 한두 개 만들어보시죠.

커맨드라인 용 앱은 어떻게 만들까요? 당연히 자바스크립트로 가능합니다. 어떤 구성을 갖춰야 하고, 어떤 원리로 돌아가는지 살펴봅니다. npm install -g <아무 이름 여러분이 정하는 대로> 가 실현될 거예요.