HTML, CSS, JS에 대한 설명은 넘어가겠습니다.
(만약 JS 사용법을 모르겠다면 셀렉터, DOM 조작, AJAX를 공부해보세요. 예: 웹개발로 배우는 자바스크립트 기초 - 유튜브 일부 무료공개만 봐도 충분, 모던 JavaScript 튜토리얼)
모든 내용을 볼 필요는 없습니다. 한 파트의 내용에 막혀 있기보다 여러 파트를 반복해서 보는 게 전체 구조를 잡기 더 쉽습니다.
처음 개념 이해에 참고하면 좋은 자료들이지만, 정확한 내용은 아닐 수 있습니다. 정확한 내용은 공식문서를 통해서 확인해야 합니다.
SPA(Single Page Application)는 하나의 HTML 페이지에서 동적으로 콘텐츠를 갱신하는 웹 애플리케이션 방식입니다.
- MDN Web Docs - 단일 페이지 애플리케이션 (Single-page application, SPA)
- 토스페이먼츠 개발자센터 - SPA(Single Page Application)
SPA의 가장 대표적인 라이브러리인 React를 사용해봅시다.
상태(State)와 컴포넌트(Component)의 개념만 이해하면 충분합니다.
-
React 사용하기
- 온라인 Playground
- React Playground 예시 사이트
-
TIP: "{언어/프레임워크 이름} Playground"로 검색하면 온라인에서 특정 기술을 사용할 수 있는 사이트를 찾을 수 있습니다.
- 로컬에서 사용하기
- 공식문서나 학습자료의 내용을 참고하세요.
- 온라인 Playground
-
React 학습자료
- React 공식문서 - learn: 리액트는 공식문서가 잘 되어 있는 편입니다. 한글도 제공합니다.
- Youtube - 2022 코딩애플 리액트 강의: 리액트를 쉽게 알려주는 영상입니다. 무료 공개만 봐도 충분합니다.
- MDN - 클라이언트 사이드 JavaScript 프레임워크 - Web 개발 학습하기
브라우저는 여러 구성요소로 이루어져 있습니다.
SPA를 구현하고 이해하는 데 있어서 가장 중요한 것은 렌더링 과정입니다.
- 학습 자료
이제 기본적인 SPA(React)와 브라우저의 렌더링 원리를 이해했으므로, SPA를 직접 구현할 수 있습니다.
- Youtube - 코딩애플 - 상남자 특) 리액트 직접 만들어서 씀
- 책 - 프레임워크 없는 프론트엔드 개발: SPA와 상태관리 라이브러리까지 간단하게 만들어보는 책입니다.
- 공식 Github 예제
- 2023 프레임워크 없는 프론트엔드 개발 스터디: 인터넷에 공개된 스터디 자료. 정리가 괜찮게 되어 있는 편입니다.
- fork해서 직접 따라해보는 것도 좋습니다.
- 항해99 프론트엔드 코스 - React의 핵심 기능을 직접 구현해보며 내부 동작 원리를 이해하기: 구현 코드는 따로 찾아봐야 합니다.
대략적으로 이해하고 구현까지 완료하였다면, 개선을 시도해 볼 수 있겠습니다.
- 개선 예시
- Diff 계산 알고리즘 최적화
- 리렌더링 시간 감소
- TypeScript 도입
- 테스트코드 작성
- 전역 상태 관리 (아마 과제 요구사항을 보면 이미 구현되어 있을 것 같긴 하네요)
현재 권장되는 기술인 React Compiler와 같은 컴파일 타임 최적화 기법을 살펴보는 것도 좋습니다.
또는 SolidJS나 Svelte가 Virtual DOM을 사용하지 않고도 React보다 빠른 속도를 달성하는 원리를 알아볼 수 있습니다.