2 년만에 리액트 과정을 열며..

코드스쿼드에서 웹프론트엔드를 맡고 있는 크롱이라고 합니다.

크롱? 네 전 이곳에서 크롱이라고 부릅니다.

이런 저런 이유로 리액트 단기코스를 열고 싶어도 바쁘다는 핑계로 미뤄 왔습니다. 현업에 계신 개발자분들을 만나 뵙고, 함께 배우고 싶은데 말이죠

올해는 우선순위를 높여서 2년만에 다시 열기로 했습니다.

이 글은 이미 광고냄새가 풀풀 나고 있군요.

그래도, 관심있는 분들이 교육비와 소중한 시간을 낭비하시지 않도록, 어떤 교육인지 주저리 주저리 설명해보겠습니다.

리액트는 발전했는가?

작년에 바이러스가 우리의 세상을 멈추게 한 듯, 리액트도 성장을 멈춘 거 같아 보였습니다. 비동기 UX를 똑똑하게 제어할 것 같은 Concurrent 모드는 더디어 보이고, 그다지 새로운 feature 가 릴리즈 노트에 보이진 않습니다.

작년 크리스마스 쯤, Server Component라는 놀라운 것을 보여주긴 하더군요. 개인적으로는 꽤 놀라운 변화로 느끼고 있습니다. 음 뭐랄까? 새로운 길을 열어준 느낌? 그 길이 막다른 길이 될지, 활짝 열린 길이 될지는 아직 지켜봐야 하지만 전 긍정적인 느낌입니다.

그 사이에 리액트의 인기는 다른 프레임워크에 밀리지 않고 여전히 1위 자리를 잘 지키고 있는것 같군요.

Hooks 는 ? 네 2년이 된 거 같네요. 현업에서 어떤가요? ‘Hooks은 때려치워라! 여전히 클래스가 최고다?’ 그런곳은 별로 안보이네요.

Hooks은 클로저라는 자바스크립트의 매력을 담아 함수형으로 객체 만들기에 성공한 모델이 됐습니다. 클래스를 싫어하는 건 아니지만, 이 함수적 표현의 컴포넌트가 자리를 잡았다는 것이 가장 큰 발전인거 같습니다. (Hooks 만세~클로저 만세~)

그래서 뭐 리액트 사용법을 배우는 것인가?

네 50%는 맞습니다. ‘클린 리액트 웹 프로그래밍' 과정은 리액트 사용법을 익히는 것 맞습니다.

나머지 50%는?

바닐라 프로그래밍을 배우는 것입니다. 상태관리, 이벤트관리, 렌더링, 컴포넌트 설계 이런건 리액트 프로그래밍의 비밀이 아닙니다. 그냥 바닐라 프로그래밍입니다.

어떻게 객체를 나누고, 뷰와 모델을 어떻게 역할로 나누고, 어떤 협력관계로 다루는 지는 여전히 웹 프론트엔드만의 지식도 아니고 그냥 프로그래밍의 기본지식을 배워나가는 것입니다.

교육과정의 50%는 바닐라 입니다.

리액트를 배우는 뽀인트

전 프레임워크가 감춰논 추상화를 깨닫는 것은, 단기적으로 어렵고 경험적인 지식이 필요하다고 봅니다. 어찌보면 시간이 해결해주는 것이라 어려운 일도 아니라고 봅니다. 필요한 건 꾸준함? 네 그게 더 필요한 거 같네요.

단기적으로는 뭘 배울 수 있을까요? 저도 늘 많은 고민이 됩니다. 그런데 어쩌죠? 교육 6주가 지나도 여러분들이 1–2년 동안 리액트를 한 사람보다 리액트를 더 잘 하는 개발자가 되지 못할 확률이 높습니다.

물론 경험적인 지식도 학습적인 방법으로 일부분 배울수는 있겠죠. 이부분도 제가 노력할 부분이겠고요.

음, 대신 이런걸 중점적으로 함께 배우는 건 어떨까요?

리액트의 철학, 리액트의 렌더링 방식, 데이터를 어떻게 관리 하는지, 리액트가 왜 그렇게 동작 하는지? 등.. 우리는 이런 리액트의 본질을 깨닫고 고민하는 시간을 갖는 겁니다. 이녀석이 가진 마법의 원리를 조금씩 깨닫는다면 앞으로 다룰때도 좀도 제대로 잘 다루지 않을까요? 단기적으로 이런점을 중요하게 배울 수 있다고 생각하고 있습니다.

깨끗한 리액트라고?

과정이름은 ‘클린 리액트 웹 프로그래밍' 입니다. 클린코드 아시죠? 네 클린 코드란 무엇인가요? 그저 가독성 좋은 코드인가요? 그렇지 않죠. 변경에도 유리하고, 구조가 탄탄하며 성능까지 유리한 코드! 이런 부분이 클린 코드라고 봐야할 거 같습니다.

복잡한 애플리케이션을 만드시는 분이라면 아시겠지만, 리액트가 가이드한 방향대로 프로그래밍 한다고 최선의 코드가 되는 건 아니겠죠. 아 동작은 됩니다만..

프로그래밍의 복잡도가 올라가면 리액트건, 바닐라건 Vue.js건 모두 다 복잡해지고 지저분해지는건 마찬가지 입니다. (이 시점에서 ‘아 리액트 꾸졌네 엄청 복잡해지자나, 상태관리는 뭐 엉망인데? 뷰로 옮길까? 아니다 타입스크립트 도입을 해야 했어 …’ 이러지는 마세요..)

프레임워크와 라이브러리가 이 문제를 몽땅 해결해주지는 않는 거 같습니다.

제 생각에는 리액트를 클린하게 코딩한다는 것도 그저 프로그래밍의 클린코드라는 관점에서 보면 다를 바 없습니다. 객체를 어떻게 나눠야 하는지?, 상태 변경의 방식은 단방향으로 어떻게 설계 해야 할지?, 객체 협력과 의존성 관리는 어떻게 해야할지? 이런 부분은 리액트의 가이드에 나와있거나 리액트의 API가 모두 다 해결해주지 않습니다.

중요한 관점은, 현대의 컴포넌트 개발방식을 어떻게 구현해야 하는지? SPAs를 어떻게 만들어야 하는거야? 라는 관점에서 살펴봐야 할 문제들입니다.

그래서 클린 리액트 웹 프로그래밍 과정에서는 클린 리액트 코드를 만들기 위해 리액트와 라이브러리로 이 문제를 해결하는 것이 아닌, 기본적인 클린코드의 관점으로 해결하고 싶습니다.

과정내내 정기적인 코드리뷰와 수업에서 이런 부분을 녹여낼 생각입니다.

최신 기능

교육과정에서 넣고 싶은 주제는 많지만, 서버사이드 렌더링과 서버컴포넌트이야기는 안할 수가 없습니다. 웹프론트엔드 개발자의 역할은 저도 잘 모르겠습니다. 그런데 CSS를 포함한 UX측면의 발전의 축이있고, 또 다른 방향은 서버사이드로 뻗어 나가고 있다는 것입니다. 양쪽의 발전이 웹프론트엔드 개발의 엄청난 매력 아닐까요?

아무튼 교육 막판에는 서버컴포넌트 등의 리액트의 미래에 대해서 살며시 경험해 볼 생각입니다.

아 Redux는 이런저런 이유로 다루지 않습니다 ^^; 이유가 많은데.. 아무튼 교육에서는 상태관리라는 관점에 더 집중합니다.

누가 참여하시는 것이 좋나요?

백엔드 개발자, 주니어개발자, 마크업개발자? 리액트 전문가??(아 환영해요. 어느순간 조교의 자리에 있으실지도)

이 글을 보시고, 관심있고 배우고 싶은 분들 이라면 모두 다 상관 없습니다.

다만 자바스크립트를 잘 모르시는 분들은 안됩니다. 기본 문법은 전혀 다루지 않습니다.

그리고 혹시 지원 하시는 분이 많다면… 더 필요한 분들에게 기회를 드릴 생각입니다. (과정이 망하지 않기를…!)

6주간 새로운 분들과 함께 배울 생각에 저도 벌써 많이 기대되는군요.

— — —

리액트 코스는 4월에 모집/시작합니다.

https://codesquad.kr/page/react.html

코드스쿼드 크롱.