시나브로 자바스크립트

• innerHTML
• createElement
• appendChild
• addEventListener

기본적인 DOM API 를 배우고 프론트엔드 프레임워크 없이 어떻게 HTML 을 구성하고 이벤트를 붙이는지 연습해 봅니다.

쇼핑몰 상품 리스트와 장바구니 부분을 구현해 봅니다. 목표는 DOM API 를 직접 사용하며 동적인 인터랙션을 구현해 보는 건데요.

상품을 장바구니에 넣었다 뺐다 하는 과정에서 같은 데이터(담긴 수량)를 화면 여기저기(상품 리스트와 장바구니)에 동시에 잘 업데이트하도록 개발합니다. 그리고 이 과정에서 모던 프론트엔드 프레임워크가 왜 필요한지 체감해 봅니다.

지난 강좌에서 구현한 쇼핑몰 상품 리스트와 장바구니를 조금 더 관리하기 좋게, 디자인, 의미, 역할을 고려해서 여러 개의 컴포넌트로 쪼개며 리팩토링해봅니다.

쇼핑몰 만들기 마지막 에피소드로, DOM element 를 일일이 찾아서 수량을 업데이트하던 구현 방식 대신, 데이터를 업데이트하면 그에 맞게 reactive 하게 DOM 이 저절로 업데이트 되도록 구현해 봅니다.

Express 를 사용해 보며 웹서버의 기초를 배웁니다. 요즘 Vercel 이나 Netlify 에서 제공해 주는 Serverless Function 이 쉽고 편한데요. 그런 게 있기 전에는 어떻게 백엔드를 구성했는지 Express 를 통해 알아봅니다.

그리고 vite 으로 띄운 프론트엔드가 Express 서버에 요청을 보내 받은 데이터를 렌더링 해보고, 그러는 과정에서 겪는 CORS 라는 이슈에 대해서도 알아봅니다.

다양한 예제를 통해 대표적인 Array methods 인 filter, map, reduce 를 연습해 봅니다. 기본적인 문법은 숙지하셨다는 가정하에 체력 단련 느낌으로 진행합니다.

npm 라이브러리는 어떤 구조를 가져야 하는지 살펴보고, Common JS 와 ES Module 에 얽힌 복잡한 이슈를 천천히 이해해 봅니다. 그리고 작업한 라이브러리를 npm 에 직접 배포해 봅니다.

jQuery 의 아주 작은 subset 을 만들어봅니다.

yarn workspace 를 통해 monorepo 를 구성하는 방법을 익히고, 그 안에 라이브러리, 예제 앱, 문서 사이트까지 작업해 봄으로써 라이브러리 개발을 위한 전반적인 워크플로우를 체험해 봅니다.

vitest 를 사용하여 unit test 를 작성해 보기도 하며, 라이브러리 빌드 프로세스를 거치면서 생기는 개발 시 어려움을 체험하고, Tree-shake 에 대해서도 살펴봅니다.

영화 검색 사이트를 만들어봅니다. 결과물은 아주 간단하지만, 이 에피소드에서 매우 중요한 개념들을 다루게 됩니다.

브라우저의 History API 를 배우고, 이를 이용하여 React Router 와 같은 Client-Side Routing 을 직접 구현해 봅니다.

지난 에피소드에 이어 Server-Side Rendering 을 Express 서버로 직접 구현합니다.

그리고 클라이언트에서 이를 Hydration 하는 부분까지 구현합니다.

여기까지 마치고 나면 Next.js 의 SSR + Hydration 의 과정을 꽤 상세하게 이해할 수 있게 됩니다.

Array 메소드 연습 에피소드와 비슷하게 비동기를 더 잘 다루기 위해 callback, Promise, async, await 을 연습해 봅니다.

Jekyll, Gatsby, Next.js 등을 써서 정적 웹사이트를 많이 만드는데요. 그런 툴들이 어떤 식으로 정적 웹사이트를 만들어주는지 살펴보고, 그 빌드 프로세스를 흉내 내봅니다.

그 과정에서 아무 프레임워크나 툴 없이 Node.js 로 작성한 스크립트가 마크다운으로 쓰여진 포스트들을 정적 블로그로 빌드 하게 해주고 Vercel 에 배포까지 해봅니다.

CLI 용 npm 라이브러리의 구조는 어떤지 살펴보고, 직접 CLI 를 직접 만들고 NPM 에 배포해 봅니다. 그 후에는 npm install -g <package-name> 으로 설치해 사용할 수 있게 됩니다.

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

예전엔 위와 같은 형식으로 form 을 작성하곤 했는데요. 저게 어떻게 작동하는 건지 실제로 예전 방식으로 구현해 봅니다. 그리고 지금은 왜 저렇게 안 하는 건지 이해합니다.

요즘은 react-hook-form 과 같은 라이브러리를 많이 사용하는데 이런 라이브러리의 이점을 이해하고, 우리도 비슷한 걸 만들어봅니다.