React 교육 시작하기

이번에 후배가 인턴을 하게되면서 준비했던 내용을 정리해봤다.

레이첼이랑 둘이서 하다보니 이게 맞는건지 확신이 안들었는데, 이참에 다시 개념을 잡을 수 있었다.

(혹시 이 시리즈를 보고 '어 이거 아닌데?' 하시는 분이 계시면 댓글로 알려주시면 감사하겠습니다ㅠㅠㅠ)

 

첫날에는 가볍게 React에 대해서 학습했다.

CRA, Babel, Redux, Webpack 등등 느낌만 받길 원했는데,

내가 처음 React을 접했을때 엄청난 모듈들에 압사 당했을때처럼 후배도 조금 쫄게 되었다. (도망안갔으면 좋겠다고 생각한거 같다...)

 

1. CRA: https://create-react-app.dev/
2. Babel: https://babeljs.io/
3. React + Redux 구조 흐름도 파악하기

둘째날부터 본격적으로 교육을 시작했다.

일명 '<CRA 없이 React 프로젝트 구축하기>'! CRA는 많은 모듈을 설치부터, 설정까지 다 해주지만 가~끔 이 설정을 바꿔줘야할때가 있다.

그럴때 너무 막막하지 않고 중요한 모듈은 어떤 역할을 하는지 눈으로 보기 위해서 계획했다.

React, Babel, Webpack 등을 설치하고 설정해서 빌드한 화면에 '임무완수'라고 나오도록 요구를 했다.

그리고 퇴근하기전에 Git에 올려서 알려달라고 했다.

 

덧붙여서 npm과 yarn에 대해서도 얘기했다. npm을 사용해봤을 것 같아 yarn을 한번 해보고 둘 중 더 편한걸로 사용하라고 했다.

나는 yarn을 더 많이 사용하는데, yarn을 사용하는 이유가 없어 찾아보니 속도나 성능을 더 좋다고 한다.

하지만 npm도 버전업하면서 yarn 보다 더 빠른 부분이 있다고 한다.

 

훌륭한 에밀리(후배)는 금방 해냈다.

그래서 신나서 React Route에 대해 과제를 드렸다. 바로 블로그 따라하기!

내가 정말 도움을 많이 받은 벨로퍼트님 블로그 글을 알려주고 한번 따라해보라고 했다.

https://velopert.com/3417

react-router :: 1장. 리액트 라우터 사용해보기 | VELOPERT.LOG

React Route는 4버전부터 라우트 안에 라우트를 둘수 있어 편해졌다.

사내 프론트 프로젝트도 라우트로 코드 스플릿이 되어 있는데, url에 따라 화면을 나누는 목적 이외에도 소스 관리를 하기가 좋았다.

팝업과 일반 화면, 상위 화면과 하위 화면이 url 구조처럼 컴포넌트가 나눠져 있어 뭔가 마음이 안정된다.

이에 대한 내용은 교육 마무리할때 다시 한번 언급을 해줘야될 것 같다.

 

React Route까지 후배는 잘 따라와줬다.

개념도 중요하지만 나는 일단 따라해보고 개념을 잡는 편이라 후배에게도 내가 공부하는 방식대로 커리큘럼을 만들었다.

도움이 됐으면 좋겠다.