<div id="readability-page-1" class="page"><div><p><h2 id="0275"><strong>프론트엔드 학습 로드맵</strong></h2></p><p><h2 id="1488">2022년에 프론트엔드 배우기</h2></p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*TU-qvzpao35Ef9VMZbNeLg.jpeg" width="700" height="467" role="presentation"></p></div><figcaption>Photo by <a href="https://unsplash.com/@anniespratt?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener ugc nofollow" target="_blank">Annie Spratt</a> on <a href="https://unsplash.com/s/photos/study?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener ugc nofollow" target="_blank">Unsplash</a></figcaption></figure><p id="f4ca"><strong>읽기 전에</strong> 언제나 그렇듯 이 글에는 주관이 많다. 이 글은 “내가 만약 지금 프론트엔드를 가르친다면 어떻게 가르칠까?” 에 가깝다. 그러니 어느정도 가치 판단은 스스로 내리기를 바란다. 이 글에서는 총 6개의 스프린트 (12주)를 거치는 동안의 학습법을 다룬다. 물론 시간은 더 넉넉하게 사용해도 괜찮다. 여기서는 하루 4시간을 이론 학습에 투자하고, 2시간을 휴식, 다시 4시간을 실습 학습에 투자하는 걸 기대하고 있다.</p><h2 id="d26f">2주 단위 스프린트로 학습</h2><p id="0e74">스프린트는 짧은 시간의 사이클을 반복하면서 재빠르고 날렵하게 소프트웨어 개발을 이루는 방법론 중 하나이다. 국내에서는 애자일 스크럼 방식에서 2주 단위의 스프린트를 돌리는 게 이른바 개발 업계에서 하나의 문화처럼 자리잡았는데, 잘 이해가 되지 않더라도 2주 단위의 스프린트를 돌리는 걸 체내에 익혀두면 좋다.</p><p id="ceb7">대체로 스프린트 하나는 이렇게 이루어진다.</p><ul><li id="3ca0">첫째날: 스프린트 플래닝</li><li id="9c45">매일: 데일리 스탠드업</li><li id="9d23">마지막날: 스프린트 회고</li></ul><p id="51ae">여기서 스프린트 플래닝 시간에 본인의 학습 목표를 잡고, 매일 스탠드업에서 본인의 현재 학습 상황을 점검하고, 마지막 스프린트 회고에서 최초의 목표를 잘 이루었는 지 점검해보자. 만약 지난 스프린트에서 학습하는 과정이 힘들었거나, 제대로 수행하지 못했다면 플래닝을 너무 과하게 하였을 가능성이 있다. 반대로 너무 여유로웠다면 플래닝 단계에서 너무 여유롭게 잡은 것이다.</p><p id="4777">또한 앞으로 공부해야하는 내용들은 백로그라는 이름으로 관리하되, 추후 백로그에 있는 아이템들을 지속해서 스프린트에 인입시켜 더 학습하는 연습을 해보자.</p><h2 id="3a3b">Jira 나 Asana를 사용해보자</h2><p id="c914">반드시 Jira를 사용할 필요는 없지만, 우선 Jira는 무료 플랜이 존재하고 국내에서 가장 많이 쓰이는 태스크 매니저이기 때문에 회사에 입사했을 때 Jira를 사용해야할 가능성이 높다. 2주 단위 스프린트를 돌릴 때 템플릿을 제공하기 때문에 Jira를 잘 활용하는 것도 괜찮은 전략이 될 수 있다.</p><p id="2dfe">물론 처음 보면 막막할 것이다. 그럴 때는 아래 가이드 문서를 참고하여 시작해보자:</p><p id="049e"><a href="https://www.atlassian.com/ko/software/jira/features/scrum-boards" rel="noopener ugc nofollow" target="_blank">https://www.atlassian.com/ko/software/jira/features/scrum-boards</a></p><p id="ac68">Asana는 Jira와 마찬가지로 태스크 매니저 도구인데 Jira보다 조금 더 UX가 좋다(고 생각한다). Asana도 무료 플랜을 제공하고 프로젝트 관리에 용이하게 쓸 수 있기 때문에 개인적으로는 추천한다.</p><p id="267c"><a href="https://asana.com/ko" rel="noopener ugc nofollow" target="_blank">https://asana.com/ko</a></p><h2 id="4222">Git과 GitHub를 미리 학습해두자</h2><p id="1d29">글을 쓰다보니 너무 기본인 항목이라 깜빡했는데, 최근에는 개발을 하기 위해서는 Git, GitHub에 대한 이해도는 기본이기 때문에 반드시 학습해두고 시작하자. 개인적으로는 진유림님의 인프런 강의를 추천한다:</p><p id="fc54"><a href="https://www.inflearn.com/course/%ED%8C%80%EA%B0%9C%EB%B0%9C-%EA%B9%83-%EA%B9%83%ED%97%88%EB%B8%8C#reviews" rel="noopener ugc nofollow" target="_blank">팀 개발을 위한 Git, GitHub 입문 — 인프런 | 강의</a></p><p id="5084">무료 강의도 있다:</p><p id="f04c"><a href="https://www.inflearn.com/course/git-and-github" rel="noopener ugc nofollow" target="_blank">[무료] Git과 GitHub 시작하기 — 인프런 | 강의</a></p><h2 id="506a">스프린트 1 ~ 스프린트 2</h2><h2 id="d502">실습: React &amp; Next 튜토리얼 따라하기</h2><p id="1316">먼저 첫 스프린트의 아침이 밝았다. 만약 여러분들이 완전히 자바스크립트, HTML, CSS에 대한 이해가 없더라도 괜찮다. 먼저 React와 Next 공식 사이트에서 제공하는 튜토리얼을 따라해보자.</p><p id="1d8c">React 튜토리얼 (한국어): ​​<a href="https://ko.reactjs.org/tutorial/tutorial.html" rel="noopener ugc nofollow" target="_blank">https://ko.reactjs.org/tutorial/tutorial.html</a></p><p id="007f">Next 튜토리얼 (영어): <a href="https://nextjs.org/learn/foundations/about-nextjs" rel="noopener ugc nofollow" target="_blank">https://nextjs.org/learn/foundations/about-nextjs</a></p><p id="caba">이 튜토리얼을 따라하면서 여러분들은 가장 기본적인 웹 애플리케이션을 구현하는 경험을 할 것이다. 튜토리얼을 따라하는 것만도 어려울 수 있으나 이해되지 않더라도 우선 튜토리얼을 따라해보며 코드가 동작하고, 동작하지 않을 때 문제를 파악하는 능력을 높일 필요가 있다.</p><h2 id="f444">이론: 자바스크립트 기본, HTML / CSS 기본</h2><p id="0de7">현재 자바스크립트를 깊이 있게 이해할 필요는 없지만, JavaScript에서 기초 내용을 어느정도 이해해야 React &amp; Next의 문법을 이해할 수 있을 것이다. 기본 파트에 대해서는 모던 JavaScript 튜토리얼을 통해 공부하면 된다.</p><p id="9836">모던 JavaScript 튜토리얼 (한국어): <a href="https://ko.javascript.info/" rel="noopener ugc nofollow" target="_blank">https://ko.javascript.info/</a></p><p id="fd6c">여기서 파트 1을 모두 공부한다면 좋지만 만약 시간이 부족하다면 아래 내용들만 먼저 봐도 좋다.</p><ul><li id="e7a1">자바스크립트 기본</li><li id="d494">코드 품질</li><li id="e765">객체: 기본</li><li id="b2a2">자료구조와 자료형</li><li id="3dde">함수 심화학습</li><li id="1486">에러 핸들링</li><li id="d843">프라미스와 async, await</li><li id="b16d">모듈</li></ul><p id="62ba">HTML과 CSS에 대해서는 앞으로 계속 공부해야하는 영역이지만, 처음에 기초를 잘 잡아두는 게 좋다.</p><p id="d4f8">아래 링크에 있는 내용은 다 살펴보도록 하자</p><p id="d851">HTML (한글, 일부 영문): <a href="https://developer.mozilla.org/ko/docs/Learn/HTML" rel="noopener ugc nofollow" target="_blank">https://developer.mozilla.org/ko/docs/Learn/HTML</a></p><p id="da33">CSS (영문): <a href="https://web.dev/learn/css/" rel="noopener ugc nofollow" target="_blank">https://web.dev/learn/css/</a></p><h2 id="23eb">스프린트 3 ~ 4</h2><h2 id="82e5">실습: Next 커머스 데모 UI 따라하기</h2><p id="3b65">Next에서 제공하는 예제 중에서 커머스 데모가 있는데, 이 커머스 데모는 쉬워보이지만 생각보다 고려해야하는 게 상당히 많다. 우선 Route를 여러개 설정해야하고, 동적 라우팅에 대한 이해도 필요하다. 아직 API 연동까지는 하지 않겠지만, 데이터 포맷에 대해서도 이해하여 적절한 수준의 데이터셋을 만들어낼 수 있어야 한다.</p><p id="712e">데모 (영문): <a href="https://demo.vercel.store/" rel="noopener ugc nofollow" target="_blank">https://demo.vercel.store/</a></p><p id="a114">저장소 (영문): <a href="https://github.com/vercel/commerce" rel="noopener ugc nofollow" target="_blank">https://github.com/vercel/commerce</a></p><p id="198b">가급적 저장소를 보지 않고 하는 걸 권장하는 데, 저장소를 보고 이해하려면 Mono Repo에 대해서도 이해해야하고, 또 Shopify 등과 연동하는 방식에 대해서도 어느정도 알아야하기 때문이다. 간단한 Feature에 대해서만 참고하도록 하자.</p><ul><li id="fa07">상품 목록 / 상품 상세</li><li id="33c7">장바구니</li><li id="ba3c">검색</li><li id="9116">위시리스트</li></ul><h2 id="12ff">이론: 자바스크립트 심화, React / Next 이해</h2><p id="4750">이제 모던 JavaScript 튜토리얼에서는 파트 2까지 모두 읽어보고 이해할 필요가 있다. 다행인 건 파트 2가 파트 1에 비해서 분량이 적다는 점이지만, 문제는 파트 2가 내용 하나하나를 파고들면 조금 더 어렵다.</p><p id="16c9">모던 JavaScript 튜토리얼 (한국어): <a href="https://ko.javascript.info/" rel="noopener ugc nofollow" target="_blank">https://ko.javascript.info/</a></p><p id="1531">그래서 파트 2를 공부할 때 충분히 시간을 들이는 걸 권장한다.</p><p id="40ec">React와 Next의 특성에 대해서도 공부할 필요가 있다. React 문서는 Function component + Hooks를 중심으로 한 예제가 더 많은 Beta 버전과 현재 공식 버전 두 갈래로 나뉘어져 있다. Beta 버전은 현재 진행 중인 문서이기 때문에 가급적이면 공식 버전 문서를 먼저 보고 이후에 Beta 문서를 보는 걸 권장한다.</p><p id="38a0">공식 리액트 문서 (한글): <a href="https://ko.reactjs.org/docs/getting-started.html" rel="noopener ugc nofollow" target="_blank">https://ko.reactjs.org/docs/getting-started.html</a></p><p id="3a33">리액트 문서 Beta (영문): <a href="https://beta.reactjs.org/" rel="noopener ugc nofollow" target="_blank">https://beta.reactjs.org/</a></p><p id="9cbb">공식 문서에서는 주요 개념에 있는 모든 내용, Hook에 있는 모든 내용은 이번 스프린트 내에 끝내는 걸 권장한다.</p><p id="b1f0">Next 공식 문서에서는 Basic Features에 있는 내용들은 모두 숙지하도록 하자. 이 내용들을 모두 알아야하는 이유는 여기서 Server Side Rendering, Client Side Rendering 등에 대해서도 다루고 공통 레이아웃 등에 대한 내용도 함께 다루어 컴포넌트 구조화에 대해 이해하기 좋기 때문이다.</p><p id="3cb9">Basic Feature: Pages | Next.js (영문): <a href="https://nextjs.org/docs/basic-features/pages" rel="noopener ugc nofollow" target="_blank">https://nextjs.org/docs/basic-features/pages</a></p><h2 id="416e">스프린트 5 ~ 6</h2><p id="d7b1">만약 여기까지 따라왔을 때, 여기까지 잘 따라오지 못했을 거라는 걸 알고 있다. 애초에 스프린트 1 ~ 4 까지의 두 달이라는 짧은 시간동안 시니어의 지도 없이 따라하기에는 약간 무리가 있을 수 있다. 따라서 지금 여기서부터의 스프린트는 스프린트 1 ~ 4까지 했던 것들을 복습하고 정리하는 데에만 시간을 쓸 것이다.</p><p id="9756">만약 스프린트 1 ~ 4에 있던 것들이 무사히 끝났고, 이론에 대한 내용도 다 이해를 한 사람이라면 아래의 목표를 이루어보자. 당연히 이번 스프린트 내에 모두 끝낼 것들은 아니다.</p><p id="f57e">Challenge 1: 타입스크립트를 적용해보자.</p><p id="afba">Challenge 2: CI/CD를 적용해보자.</p><p id="fc9b">Challenge 3: Vercel을 이용해 배포해보자.</p><p id="46c5">Challenge 4: <a href="https://github.com/public-apis/public-apis" rel="noopener ugc nofollow" target="_blank">Public API</a>를 적용해보자.</p><h2 id="1afc">마무리</h2><p id="3802">이렇게 3달의 시간이 지났다. 여러분들이 아마 학습 기관을 통해 학습한다면 더 빡세게 수업을 들을 가능성이 높지만, 이정도 수준을 3달정도 공부했다면 <strong>이제 시작할 준비</strong>가 되었다고 생각한다. 앞으로 지속해서 실습 (클론 코딩이나 자체 프로젝트를 추천)과 이론 (기존에 배웠던 걸 더 깊이있게 배우고 블로그에 작성하자) 공부를 이어나가도록 하자.</p><p id="0c5c">궁금한 점이나 피드백은 choeun@techhtml.dev 또는 글 댓글로 남겨주시길 바란다.</p></div></div>

Stories by 조은, Eun Cho on Medium

choeun

2022년에 프론트엔드 배우기
읽기 전에 언제나 그렇듯 이 글에는 주관이 많다. 이 글은 “내가 만약 지금 프론트엔드를 가르친다면 어떻게 가르칠까?” 에 가깝다. 그러니 어느정도 가치 판단은 스스로 내리기를 바란다. 이 글에서는 총 6개의 스프린트 (12주)를 거치는 동안의 학습법을 다룬다. 물론 시간은 더 넉넉하게 사용해도 괜찮다. 여기서는 하루 4시간을 이론 학습에 투자하고, 2시간을 휴식, 다시 4시간을 실습 학습에 투자하는 걸 기대하고 있다.
2주 단위 스프린트로 학습
스프린트는 짧은 시간의 사이클을 반복하면서 재빠르고 날렵하게 소프트웨어 개발을 이루는 방법론 중 하나이다. 국내에서는 애자일 스크럼 방식에서 2주 단위의 스프린트를 돌리는 게 이른바 개발 업계에서 하나의 문화처럼 자리잡았는데, 잘 이해가 되지 않더라도 2주 단위의 스프린트를 돌리는 걸 체내에 익혀두면 좋다.
대체로 스프린트 하나는 이렇게 이루어진다.
첫째날: 스프린트 플래닝
매일: 데일리 스탠드업
마지막날: 스프린트 회고
여기서 스프린트 플래닝 시간에 본인의 학습 목표를 잡고, 매일 스탠드업에서 본인의 현재 학습 상황을 점검하고, 마지막 스프린트 회고에서 최초의 목표를 잘 이루었는 지 점검해보자. 만약 지난 스프린트에서 학습하는 과정이 힘들었거나, 제대로 수행하지 못했다면 플래닝을 너무 과하게 하였을 가능성이 있다. 반대로 너무 여유로웠다면 플래닝 단계에서 너무 여유롭게 잡은 것이다.
또한 앞으로 공부해야하는 내용들은 백로그라는 이름으로 관리하되, 추후 백로그에 있는 아이템들을 지속해서 스프린트에 인입시켜 더 학습하는 연습을 해보자.
Jira 나 Asana를 사용해보자
반드시 Jira를 사용할 필요는 없지만, 우선 Jira는 무료 플랜이 존재하고 국내에서 가장 많이 쓰이는 태스크 매니저이기 때문에 회사에 입사했을 때 Jira를 사용해야할 가능성이 높다. 2주 단위 스프린트를 돌릴 때 템플릿을 제공하기 때문에 Jira를 잘 활용하는 것도 괜찮은 전략이 될 수 있다.
물론 처음 보면 막막할 것이다. 그럴 때는 아래 가이드 문서를 참고하여 시작해보자:
https://www.atlassian.com/ko/software/jira/features/scrum-boards
Asana는 Jira와 마찬가지로 태스크 매니저 도구인데 Jira보다 조금 더 UX가 좋다(고 생각한다). Asana도 무료 플랜을 제공하고 프로젝트 관리에 용이하게 쓸 수 있기 때문에 개인적으로는 추천한다.
https://asana.com/ko
Git과 GitHub를 미리 학습해두자
글을 쓰다보니 너무 기본인 항목이라 깜빡했는데, 최근에는 개발을 하기 위해서는 Git, GitHub에 대한 이해도는 기본이기 때문에 반드시 학습해두고 시작하자. 개인적으로는 진유림님의 인프런 강의를 추천한다:
팀 개발을 위한 Git, GitHub 입문 — 인프런 | 강의
무료 강의도 있다:
[무료] Git과 GitHub 시작하기 — 인프런 | 강의
스프린트 1 ~ 스프린트 2
실습: React & Next 튜토리얼 따라하기
먼저 첫 스프린트의 아침이 밝았다. 만약 여러분들이 완전히 자바스크립트, HTML, CSS에 대한 이해가 없더라도 괜찮다. 먼저 React와 Next 공식 사이트에서 제공하는 튜토리얼을 따라해보자.
React 튜토리얼 (한국어): ​​https://ko.reactjs.org/tutorial/tutorial.html
Next 튜토리얼 (영어): https://nextjs.org/learn/foundations/about-nextjs
이 튜토리얼을 따라하면서 여러분들은 가장 기본적인 웹 애플리케이션을 구현하는 경험을 할 것이다. 튜토리얼을 따라하는 것만도 어려울 수 있으나 이해되지 않더라도 우선 튜토리얼을 따라해보며 코드가 동작하고, 동작하지 않을 때 문제를 파악하는 능력을 높일 필요가 있다.
이론: 자바스크립트 기본, HTML / CSS 기본
현재 자바스크립트를 깊이 있게 이해할 필요는 없지만, JavaScript에서 기초 내용을 어느정도 이해해야 React & Next의 문법을 이해할 수 있을 것이다. 기본 파트에 대해서는 모던 JavaScript 튜토리얼을 통해 공부하면 된다.
모던 JavaScript 튜토리얼 (한국어): https://ko.javascript.info/
여기서 파트 1을 모두 공부한다면 좋지만 만약 시간이 부족하다면 아래 내용들만 먼저 봐도 좋다.
자바스크립트 기본
코드 품질
객체: 기본
자료구조와 자료형
함수 심화학습
에러 핸들링
프라미스와 async, await
모듈
HTML과 CSS에 대해서는 앞으로 계속 공부해야하는 영역이지만, 처음에 기초를 잘 잡아두는 게 좋다.
아래 링크에 있는 내용은 다 살펴보도록 하자
HTML (한글, 일부 영문): https://developer.mozilla.org/ko/docs/Learn/HTML
CSS (영문): https://web.dev/learn/css/
스프린트 3 ~ 4
실습: Next 커머스 데모 UI 따라하기
Next에서 제공하는 예제 중에서 커머스 데모가 있는데, 이 커머스 데모는 쉬워보이지만 생각보다 고려해야하는 게 상당히 많다. 우선 Route를 여러개 설정해야하고, 동적 라우팅에 대한 이해도 필요하다. 아직 API 연동까지는 하지 않겠지만, 데이터 포맷에 대해서도 이해하여 적절한 수준의 데이터셋을 만들어낼 수 있어야 한다.
데모 (영문): https://demo.vercel.store/
저장소 (영문): https://github.com/vercel/commerce
가급적 저장소를 보지 않고 하는 걸 권장하는 데, 저장소를 보고 이해하려면 Mono Repo에 대해서도 이해해야하고, 또 Shopify 등과 연동하는 방식에 대해서도 어느정도 알아야하기 때문이다. 간단한 Feature에 대해서만 참고하도록 하자.
상품 목록 / 상품 상세
장바구니
검색
위시리스트
이론: 자바스크립트 심화, React / Next 이해
이제 모던 JavaScript 튜토리얼에서는 파트 2까지 모두 읽어보고 이해할 필요가 있다. 다행인 건 파트 2가 파트 1에 비해서 분량이 적다는 점이지만, 문제는 파트 2가 내용 하나하나를 파고들면 조금 더 어렵다.
모던 JavaScript 튜토리얼 (한국어): https://ko.javascript.info/
그래서 파트 2를 공부할 때 충분히 시간을 들이는 걸 권장한다.
React와 Next의 특성에 대해서도 공부할 필요가 있다. React 문서는 Function component + Hooks를 중심으로 한 예제가 더 많은 Beta 버전과 현재 공식 버전 두 갈래로 나뉘어져 있다. Beta 버전은 현재 진행 중인 문서이기 때문에 가급적이면 공식 버전 문서를 먼저 보고 이후에 Beta 문서를 보는 걸 권장한다.
공식 리액트 문서 (한글): https://ko.reactjs.org/docs/getting-started.html
리액트 문서 Beta (영문): https://beta.reactjs.org/
공식 문서에서는 주요 개념에 있는 모든 내용, Hook에 있는 모든 내용은 이번 스프린트 내에 끝내는 걸 권장한다.
Next 공식 문서에서는 Basic Features에 있는 내용들은 모두 숙지하도록 하자. 이 내용들을 모두 알아야하는 이유는 여기서 Server Side Rendering, Client Side Rendering 등에 대해서도 다루고 공통 레이아웃 등에 대한 내용도 함께 다루어 컴포넌트 구조화에 대해 이해하기 좋기 때문이다.
Basic Feature: Pages | Next.js (영문): https://nextjs.org/docs/basic-features/pages
스프린트 5 ~ 6
만약 여기까지 따라왔을 때, 여기까지 잘 따라오지 못했을 거라는 걸 알고 있다. 애초에 스프린트 1 ~ 4 까지의 두 달이라는 짧은 시간동안 시니어의 지도 없이 따라하기에는 약간 무리가 있을 수 있다. 따라서 지금 여기서부터의 스프린트는 스프린트 1 ~ 4까지 했던 것들을 복습하고 정리하는 데에만 시간을 쓸 것이다.
만약 스프린트 1 ~ 4에 있던 것들이 무사히 끝났고, 이론에 대한 내용도 다 이해를 한 사람이라면 아래의 목표를 이루어보자. 당연히 이번 스프린트 내에 모두 끝낼 것들은 아니다.
Challenge 1: 타입스크립트를 적용해보자.
Challenge 2: CI/CD를 적용해보자.
Challenge 3: Vercel을 이용해 배포해보자.
Challenge 4: Public API를 적용해보자.
마무리
이렇게 3달의 시간이 지났다. 여러분들이 아마 학습 기관을 통해 학습한다면 더 빡세게 수업을 들을 가능성이 높지만, 이정도 수준을 3달정도 공부했다면 이제 시작할 준비가 되었다고 생각한다. 앞으로 지속해서 실습 (클론 코딩이나 자체 프로젝트를 추천)과 이론 (기존에 배웠던 걸 더 깊이있게 배우고 블로그에 작성하자) 공부를 이어나가도록 하자.
궁금한 점이나 피드백은 choeun@techhtml.dev 또는 글 댓글로 남겨주시길 바란다.