리액트 공부법

현업에서 리액트로 개발하는 초보 개발자입니다.
저 또한 작성자님처럼 힘들게 공부했고 여전히 많이 부족합니다.

그래도 어느정도 제안이나 주의해야할 점은 말씀드릴 수 있겠네요

 

1. 책으로 공부하지말 것 => 금방 훅훅 바뀝니다. 타이핑을 아무리 잘해야 안돌아가고 오히려 멘탈만 상합니다.

2. 리액트 관련 구글링시에는 무조건 지난 1년이내로 설정해서 검색할 것 (필수입니다.)

3. 라이브러리가 잘 안붙는 다면 해당 라이브러리 깃헙 이슈 필히 확인

4. 적용이 잘안되거나 어려움이 있는 라이브러리는 고집하지말고 다른 대안으로 대체

(리액트의 진영은 굉장히 거대합니다. 언제나 대안이 있기 때문에 정신 건강을 챙깁시다.)

 

리액트는 프레임워크가 아닌 라이브러리!! 때문에 앱의 규모가 커질수록 필요한 것들이 많기 때문에

나중에는 감당안될정도로 러닝커브가 상승합니다.

 

1. 처음에는 CRA(create react app)을 이용해서 정말 너무나도 간단한 앱을 만든다. 미친듯이 간단한 앱

(초보일 경우 처음부터 투두앱은 비추천합니다. => 차라리 간단한 토글 버튼 또는 간단한 카운터 앱이 좋습니다)

2. 간단히 만든 앱에 redux를 적용한다

3. 그 앱에 react-redux를 적용한다

4. 이해할때까지 몇번이고 다시 기본앱 => redux => react-redux 사이클을 반복한다.

5. CRA를 버린다. npm run eject 명령어 입력시 CRA 구조가 나오는 데 어마어마합니다.

react boilerplate 라고 검색해서 입맛에 맞는 걸 찾아보기도 하고 직접 따라치고 수만가지 오류를 경험하고

웹팩에 좌절하며 나만의 보일러 플레이트를 만든다 => 마지막으로 만든 앱을 올린다

6. 비동기를 적용한다 (간단한 api 호출 또는 로컬 데이터) json-server 와 axios가 적용하기 쉽습니다.

7. 비동기 적용시 thunk 적용! 만약 실력이 좋다면 saga!

8. 리팩토링으로 타입을 적용한다. (초보) prop-types => flow => typescript (고수)

9. 서버에 올려본다. express 아니면 서버리스도 괜찮습니다.

10. jest 적용해서 컴포넌트 유닛 테스트

 

이정도만 몇번반복해도 살이 될거라고 생각합니다.

그 외에도 컴포넌트 방식의 CSS, JWT 토근 적용, SEO, SSR 등 해볼 건 많으니

처음부터 거대한 걸 만들기보다는 작은 걸로 계속 규모를 키워보시는 걸 추천합니다.

저 또한 저렇게 잡은 계획으로 아직 공부하고 있습니다ㅠㅠ

 

공부 자료는 위에 분이 추천해주신 유데미 강좌와 벨로퍼트님 자료 그리고 egghead 추천합니다

 

공부에 답은 없으니 어느정도 참고 하셨으면 좋겠습니다.