리액트 강의별 수강 후기

내가 자바스크립트를 본격적으로 시작하게 되고 문법을 집중적으로 파게 된 계기는 바로 리액트 때문이라고 할 수 있다. 오늘은 바로 리액트를 공부하기 위해 거쳐 온 필자의 강의 수강 내역에 관해 이야기해보려고 한다.

리액트를 알게 된 계기

안드로이드 5.0 당시에는 머티리얼 디자인이 유행이었는데 나는 이것을 웹에서도 사용해보고 싶었다. 안드로이드 롤리팝이 출시된 지 몇 년이 지난 시점이었기 때문에 분명히 라이브러리 형식으로 존재할 것으로 생각했고 구글링을 한 결과 역시 이곳을 통해 존재하는 것을 확인하였다.

그런데 사용법을 확인하고자 하니 React를 import 하라는 것이었다. 오잉? React는 도대체 뭘까?

리액트를 알아가는 과정

SPA라는 개념에 관해서도 잘 파악하지 못했었는데 내가 눈 깜짝할 사이 웹은 Font-end와 Back-end로 양분화되어가고 있었고 점차 극명하게 갈라져 나가고 있던 시기였던 것으로 기억한다.

누구든지 하는 리액트 - 김민준 강사

맨 처음에 React의 존재를 공부하기 위해 켰던 것은 동영상 강의였다. 원래 같았으면 책을 사서 공부했겠지만, 책은 주문하고 배송하는 시간까지 걸리는 소요 시간이 있어서 동영상이 빨리 배울 수 있을 거라는 생각이 들었다. 무엇보다도 백문이 불여일견이라고 동영상으로 배우는 것이 좀 더 현장감이 있을 것 같아서 선택하였다.

당시에는 묘하게 React hooks가 막 등장했던 시기인 2019년 2월이었던 것으로 기억한다. 아직은 클래스 컴포넌트를 사용한 방식이 주류였다. 2020년 9월에 Vue 3를 발표했지만 아직까지는 3버전보다는 2를 많이 쓰는 것처럼. 그래서 처음에는 조금 어렵게 느껴지기도 했다.

그런데 솔직히... 무료 강좌여서 그런지 강의 내용만으로는 깊이 있게 알기가 힘들었던 듯하다. 그래서 좀 더 심층적인 강의를 찾기 위해 여정을 떠난 결과... 나는 Nomad Coders를 알게 되었다.

Nomad Coders

사실 Nomad에서도 처음에는 클래스 컴포넌트를 이용하여 구성하는 강의를 진행하다가 어느 순간 함수형 컴포넌트를 이용하여 만드는 강의를 진행했다. 처음에는 클래스 방식으로 만들고 라이프 사이클에 관한 메서드를 기억해야 한다는 것에 부담을 많이 느꼈는데 함수형 컴포넌트에서는 hooks를 어떻게 사용하는지 정도만 기억하면 되기도 하고 간편하게 작성할 수 있어서 쉽게 배울 수 있었다.

물론 유료 강좌를 찾으러 떠나 온 것이었지만, Nomad Coders에서는 유료 강좌의 난도가 꽤 있어 보였다. 그래서 무료 강의로 개념을 차근차근 익히고 유료 강의를 수강하는 방식을 선택했다.

ReactJS로 영화 웹 서비스 만들기

대표적으로 리액트를 공부하게 되고 점차 흥미를 느끼게 된 과목은 바로 ReactJS로 영화 웹 서비스 만들기 강좌였다.

단순히 Open API를 이용하여 웹에서 받아온 JSON 형식을 구성한 리액트 컴포넌트를 이용해 렌더링하는 것이었는데 꽤 프런트엔드 단에서 작업하는 것이 재미있었다.

👉 Nomflix 바로가기

Instagram 클론

그다음에 내가 진정으로 배우고 싶었던 강좌는 바로 인스타그램을 클론하는 것이었다. 이런 메이저 사이트를 클론한다면 내 실력이 한 단계 업그레이드가 되고 경험치가 쌓일 수 있다고 생각하여 진행하게 되었다.

여담

여담이기는 하지만 Nomad Coders에서는 Nicolas라는 강사가 강의를 주도하고 있는데 강사 당신께서 이야기하시기를 천재라고 말씀을 하셨었다. 그런데 강의를 듣고 나니 그게 좀 체감이 된달까. 이분은 React만 하는 게 아니라 GraphQL, 타입스크립트, CSS(SCSS), Node, PUG, 파이썬까지 모두 능숙하게 다루신다. 거의 혼자 풀스택을 뛰고 있다는 이야기인데 강의도 정말 많다.

사실 이 강의는 매우 길고 React Native까지 다룬다. 그런데 React Native까지 진도를 나가기에는 당시에는 한계에 부딪혔기 때문에 React의 기본적인 기능과 이 강의에서 다루는 내용을 복습하고자 혼자 낑낑 부딪혀가면서 인스타그램을 응용한 SNS를 만들어 보았다.

카카오스토리 + 인스타그램을 혼합시킨 Farmpet이라는 애완동물 SNS 서비스를 만들어보았다. 역시 응용을 하니까 난관에 계속 부딪히게 되면서 문제를 해결하는 능력이 오름과 동시에 오류와도 친숙해지게 되었다.

후기

자막 보며 집중하기

니꼴라쓰 선생님은 한국어로 가르치지 않는다. 영어가 모국어 수준처럼 익숙지는 않은 내게는 자막이 꼭 필요했다. 그래서 자막을 보면서 수업을 따라 했으므로 수업에 좀 더 집중할 수 있는(?) 의외의 장점이 있었다.

그렇지만, 설명만큼은 충분하고 다양한 방법을 알려 주셨기 때문에 배우는 데 정말 재미있게 학습을 했던 것 같다.

최신 기술 트렌드 익히기

아직은 한국에서 Rest API가 대세인 것으로 생각하고 있는데 니꼴라스 선생님은 GraphQL을 가르친다. 약간 기술 트렌드가 북미쪽에서 유행할 법한 느낌으로 구성을 해주신 것 같은데 한국에서 취업을 고려한다면 이 부분은 좀 고려해야 할 것 같다.

Redux를 가르치지 않는 강의도 있다

개인적인 생각으로는 상태 관리 라이브러리를 하나쯤은 익히는 것이 취업에 도움이 될 것이라고 생각해서 배우고 싶었는데 인스타그램 클론 2.0버전 기준으로는 니꼴라스 선생님이 Redux를 이용하지 않고 Context API만을 이용하여 가르쳐 주셨다. 물론 Context API를 사용하는 방법과 Redux를 사용하는 방법이 유사하므로 쉽게 배울 수는 있겠지만, 써 보고 안 써보고의 차이는 분명히 존재할 것으로 생각했기 때문에 비 부분은 조금 아쉽다고 생각했다.

패스트캠퍼스 (김민준 강사)

2020년쯤에는 다시 강의를 듣게 되었는데 패스트 캠퍼스에서 할인해서 강좌를 묶어 파는 시기가 있었다. 이때 프런트엔드 개발 패키지가 있었는데 이곳에서 또다시 김민준 강사님을 만나 뵐 수 있게 되었다.

유튜브에서도 워낙 강의를 차분하게 잘 알려주셔서 이분한테 좀 더 자세히 배우면 어떨까 하는 생각이 들었는데 유료라면 굉장히 더 가져갈 부분이 많을 것으로 생각했고 마침 강사님도 함수형 컴포넌트를 기준으로 강의를 해주실 것을 기대했는데 내게 딱 맞는 강좌였달까...

그런데 이번 강의에서는 Redux를 다룬다고 하니, 어느 정도 리액트를 학습한 내게는 Redux라는 수업을 받기에도 공부량이 차오른 것 같아서 선택하게 되었다.

후기

무한회독 교과서

다행히(?) 리액트는 v16.8 이래로 v17.0.1버전까지 문법적인 큰 변화는 없어 보인다. 그래서 아직도 함수형 컴포넌트를 학습할 때 이 강좌를 활용하면서 공부를 하고 있다.

이전에는 자바스크립트 ES6만 급하게 배워서 공부한 느낌이었다면, 이번에는 자바스크립트의 개념(프로토타입 등)에 관해서도 심층적으로 공부하면서 일반적인 객체지향 프로그래밍(Java)과는 어떠한 차이가 있는지를 곰곰이 생각해 보면서 학습을 하게 되었다.

그런 의미에서 함수형 컴포넌트라고 의미에 관해 조금씩 알아갈 수 있었고 왜 다음의 코드에서 onClick을 설정할 때 함수를 바로 호출하면 안 되는지도 어느 정도 설명할 수 있겠다는 자신감이 생겼다.

function Test(){
  // 틀렸음
    return <button onClick={call('123')}>버튼</button>
}

function Test(){
  // 맞았음
    return <button onClick={() => alert('안녕하세요')}>버튼</button>
}

---

총평과 느낀점

모든 강의를 수강하고 나니 사실 제대로 짜인 기본을 익히기 위한 커리큘럼 하나 정도만 무한 회독한다면 충분한 것 같다.

계속해서 강의를 배웠지만, 역시나 기본이 가장 중요한 것 같다. 특히 리액트를 시작하면 useState를 맨 먼저 배우게 되는데 이때 가장 먼저 겪게 되는 것이 바로 배열 디스트럭처링 문법이다. 이것은 ES6 문법 중 하나인데 리액트는 이렇게 세련된 문법을 곳곳에 패턴처럼 사용하게 만든다(안 써도 되겠지만...).

기초가 없을 때 배웠을 때는 이 문법이 익숙지 않아서 기억하기도 힘들었고 조금만 오류가 나도 어디서 오류가 났는지 원인을 파악하기도 힘들었다. 그리고 응용하는 것 자체가 너무 힘들었다. 그런데 자바스크립트에 관해 좀 더 많이 공부하게 되면서 이러한 문제에 관해서도 상당 부분이 해결되었다. 그리고 React에서 최적화하는 기법(React.memo, useMemo, useCallback)에 관해서도 어느 정도 이해할 수 있는 깊이가 달라지는 것 같다고 생각한다. 고차 함수에 관해서도 어떻게 리액트가 사용하는지 대략적인 감이 올 것이고.

리액트가 어려운 이유

리액트는 상태를 보관하는 방법을 기본적으로 useState와 useReducer를 이용한다. 이러한 상태를 관리하는 리액트만의 철학에 관해서 이해해야 하지, 상태를 관리하는 철학에서 ES6문법을 사용해야 하지, 함수 단위로 컴포넌트를 관리하니까 어떤 방식으로 렌더링이 되는지도 이해해야 하지. 동시에 배워야 할 것들이 너무 많다.

그러나 이 처음의 고개만 잘 뛰어넘으면 리액트의 세상에서 마음껏 즐겁게 뛰놀 수 있는 날이 올 수 있을 것으로 생각한다.