이번 포스팅에서는 Dev.to의 How I learn any front-end framework 포스팅에 대한 번역을 바탕으로 React, Angular, Vue.js 같은 프론트엔드 Framework를 어떻게 공부해야하는지 알아봤습니다.
프론트엔드 Framework을 공부하기로 했다면, 보통 유튜브나 구글 검색 등을 통해서 튜토리얼을 찾아보죠. 그런데 생각보다 알아야 할 것도 많고 막막할 때가 있습니다. 프론트엔드 Framework은 종류도 많고 어느 세월에 다 배울 수 있을지도 걱정되기도 하는데요. 하지만 아래와 같은 방법으로 공부를 진행하면 더 효율적으로 빠르게 프레임워크를 배울 수 있습니다.
먼저 프론트엔드 Framework에서 공통적으로 나오는 개념 3가지에 대해 알아봅니다. 어떤 프론트엔드 Framework을 공부하든 다음 3가지 컨셉을 가지고 있죠.
1. 컴포넌트 (Component)
컴포넌트를 만드는 이유는 "재사용성"입니다. 최근 자바스크립트 Framework은 JSX나 HTML 템플릿 엔진을 사용하고 있죠. 그리고 create, render, destroy 등 각 컴퍼넌트의 생애주기(Life Cycle)에 따른 hook을 제공하고 있습니다.
2. 라우팅 (Routing)
프론트엔드 Framework은 client-side 라우팅을 생성하거나 관리할 수 있는 API를 제공하고 있습니다.
3. 상태관리 (Managing state)
컴퍼넌트 사이에 데이터를 공유해야할 때가 있습니다. 이를 해결하기 위해 프론트엔드 Framework은 상태를 관리할 수 있는 API를 제공합니다. 예를 들어 React는 Context API, Angular는 Service를 가지고 있죠. 그리고 관리해야할 상태 데이터의 규모가 커지면 redux 같은 라이브러리를 사용할 수도 있습니다.
이렇게 프론트엔드 Framework의 3가지 핵심 개념을 이해했으면 바로 Sample App을 만들어봐야 합니다. "백견이 불여일타"라고 하죠. 기본 개념을 익혔다면 더 많은 책을 읽고 더 많은 강의를 듣는 것보다 직접 만들면서 부딛히는 것이 가장 빨리 Framework을 배울 수 있는 방법입니다.
그러면 어떤 App을 만들어봐야 할까요? 참고한 글에 따르면 다음 순서에 따라 App을 만들어 보는 것을 추천합니다.
1. Find & Display
먼저 Youtube API나 Github API 등을 이용해서 데이터를 리스트 페이지, 상세 페이지에 보여주는 App을 만들어봅니다. 그리고 여기에 검색 기능을 추가해봅니다.
Find & Display App을 만들어보면서 다음과 같은 내용을 배울 수 있습니다.
- HTTP 클라이언트를 이용하여 API를 호출하는 방법
- 키보드 이벤트 리스너를 사용하는 방법 (ex. 사용자가 검색어 입력 시)
- 데이터를 화면에 보여주는 방법
- 화면을 꾸미는 방법
- 화면의 구조
- 리스트에서 링크를 통해 상세 페이지로 이동하는 방법
2. Auth App
앞선 App에서 사용한 API가 자체적으로 인증 기능을 제공하기도 합니다. 하지만 여기서는 직접 인증 App을 만들어 보세요. 로그인과 회원 등록 페이지를 만들고 사용자가 로그인하면 사용자 프로필 페이지로 바로 이동할 수 있도록 합니다. 그리고 로그인 하지 않은 사용자는 로그인 페이지로 이동하도록 만들어 보세요.
Auth App을 만들어보면서 다음과 같은 내용을 배울 수 있습니다.
- 사용자 인증과 페이지 라우팅 방법
- JWT (JSON Web token) 사용 방법
3. CRUD App
다음으로 생성, 조회, 수정, 삭제 기능을 하는 CRUD App을 만들어봅니다. CRUD App의 예로는 Bookmark app, To-do App을 들 수 있죠. 데이터를 처리할 때는 local storage를 통해 오프라인으로 관리할 수 있게 하거나 Firebase 또는 다른 백엔드 프레임웍을 이용하여 온라인으로 처리할 수도 있습니다.
CRUD App을 만들어보면 다음과 같은 내용을 배울 수 있습니다.
- 사용자 입력 데이터에 대한 검증 (form data)
- put, delete, post, get HTTP 요청
- Back-End Framework와 연동 및 인증 방법
4. Chat App
이 전까지의 앱은 단방향(unidirectional)으로 동작하는 앱이었습니다. 이런 앱은 상태 관리에 대한 문제가 거의 없죠. 하지만 web socket 같은 것을 이용한 Chap App은 양방향(bidirectional)으로 동작합니다. 사용자의 상태를 관리할 다른 방법을 찾아야 합니다.
Chat App을 만들어보면 다음과 같은 내용을 배울 수 있습니다.
- react의 redux, angular의 ngrx, vue.js의 vuex 활용 방법
- 리엑티브한 App을 만드는 방법
이상 프론트엔드 Framework을 공부하는 방법에 대해 알아봤습니다. Framework은 효율적으로 개발하기 위한 도구입니다. 너무 Framework 공부에 빠지지 말고, 직접 App 개발을 해가면서 그 쓰임을 익히는 것이 중요하다고 생각합니다. 아무쪼록 프론트엔드 프레임웍 공부할 때 도움이 되길 바라면 아래 글도 한 번 읽어보시길 바랍니다.
읽어볼 만 한 글
Javascript Call Stack - 자바스크립트 기초 공부 #1
Javascript Primitive Types - 자바스크립트 기초 공부 #2
Sass 문법 정리 (mixin, include, expend, partial, import, if문)
구글API 사용법, 키 발급, OAuth 인증 방법 정리
'Dev Talks > Front-End Dev' 카테고리의 다른 글
| Javascript Primitive Types - 자바스크립트 기초 공부 #2 (0) | 2019.03.13 |
|---|---|
| Javascript Call Stack - 자바스크립트 기초 공부 #1 (0) | 2019.03.12 |
| Sass 문법 정리 (mixin, include, expend, partial, import, if문) (0) | 2019.02.08 |
| Sass 사용법 및 Sass 문법 공부 방법 정리 (0) | 2019.02.05 |
| 크롬 개발자모드 콘솔에서 jQuery 사용하는 방법 (0) | 2017.08.25 |
댓글