[원티드1월챌린지] FE 프리온보딩(React-Query) 후기

1. 어떤 챌린지 이고 어떤 강의일까?

원티드 프리온보딩 챌린지란?

원티드에서 매달 프리온보딩 챌린지를 하고 있다.

강의도 해 주면서 원티드를 통해 채용연계(물론 지원은 스스로 해야하죠 ^^7) 및 상금 수여까지 한다.

(높은 강의 퀄리티를 보면 채용연계 보단 공짜로 개발자 교육시켜주고 싶어서 안달난 것 같은...크흠... 원티드 애용하겠읍니다.)

회차가 꽤 된 것 같던데, 지난 11월에야 이런 좋은 교육을 알게 됐다니. 후회가 된다.

12월 챌린지(monorepo) 때 강의 내용이 너무 좋았어서 이번 강의도 신청하게 됐다.

이번 챌린지의 주제/내용

React Query 를 적용해 TODO List CRUD 기능이 있는 웹서비스를 만들어 보는 주제였으며,

강의를 들으면서 사전과제를 발전시키는 방식으로 과제가 주어졌다.

(물론 api 서버는 완성된 것을 제공해 주셨다.)

채용과 관련 된 꿀팁도 많이 전수해 주시고, 마지막 강의땐 ReadMe 잘 작성하는 방법까지 전수해 주셨다.

 

멘토님은 개발자계의 국민MC

강사는 무려 명함 앱 [리멤버] 를 만드는 회사의 오종택 멘토님이었다.

국민MC 뺨치는 진행력과 하이퀄리티의 강의내용, QnA 까지 꼼꼼하게 해주신다.

강의는 1월 2, 3번째 주 화/금 요일에 진행됐고, 오피셜 강의 시간은 저녁 8~11 시 이지만 종종 12시 까지 진행 됐다. (오히려좋아)

시간 가는 줄 모르게 강의가 재밌었고 zoom 으로 수강자 분들이 채팅치는 것도 꿀잼이었다.

---

2. 강의 때 무엇을 배웠을까??

[강의때 배운 모든 개념을 나열하면 한도 끝도 없을 것 같아서 Best로 인상깊었던 몇 가지만 간단히 적었다.]

사용자에게 좋은 UI/UX 팁

• 삭제버튼 클릭 시 Yes or No 선택 Dialog
• skeleton (데이터 로딩 중 화면 같은 것)

Redux, 그리고 React-Query의 장점

• React-Redux 도 사실 Context-Api 야! (React-Redux 로 전역 상태 관리할 때 사용하는 useSelector Hook은  React의 Context-Api 를 사용한다.)
• api call 을 통해 Redux 에 저장된 정보는 저장 된 시점 부터 '최신 정보' 가 아니다. 이를 stale-while-revalidate 전략을 통해 '가능한' 최신 정보를 갖게 해줘야 한다. redux 로도 불가능한 기능은 아니겠지만, react-query 에선 stale time과 cache time 을 useQuery hook 의 파라미터로 넘겨주기만 해도 된다.(react-query 내부에 해당 기능이 들어가 있다.)

선언형 프로그래밍

• 코드를 알아보기 쉽게 하려면, '어떻게 하는지' 가 아니라 '무엇을 하는지' 를 노출해라. 이름만 보고도 '무엇을 하는지' 알기가 쉽다. ('어떻게 하는지' 를 추상화 해 '무엇을 하는지' 로 리펙터링)

Error 핸들링, suspense 와 같은 서버 상태 관련

• Error 핸들링, Fallback, Suspense 를 선언적인 react component 로 만들기

관심사의 분리

• 아래 두 예시를 비교해 보자. BadSampleComponent 의 함수 body 엔 api로 부터 데이터를 가져오고, 데이터를 ui 상에 보여주기 위해 처리하는 로직 까지 비즈니스 로직을 전부 가지고 있다.
• 이 로직이 길어지면 길어질 수록 우리의 컴포넌트의 'view 를 보여주는 로직' 을 이해하기 어렵다. (view 는 error 여부에 따라서도, data 내부 정보 상태에 따라서도 보여주는 로직이 한 없이 복잡해질 수 있다.)
• 이럴 때, GoodSampleComponent 와 같이 비즈니스 로직을 useSample 과 같이 custom hooks 로 빼준다면 어떨까? 우린 이제 이 컴포넌트를 디버깅할 때 view 로직의 문제라 생각될 땐 view 로직만 집중해서 볼 수 있다.
• 비즈니스 로직을 보고 싶다면 useSample hook 을 열어서 해당 비즈니스 로직만 집중해서 볼 수 있다.

function BadSampleComponent() {
	...api 쿼리 로직...
    ...api 쿼리 결과 처리 로직...
    const result = ...쿼리 결과를 처리한 최종 데이터...
    
    if(result.error) {
    	return <div>네트워크 문제가 발생했습니다.</div>
    }
    return <div>{result.data}</div>
}

function GoodSampleComponent() {
    const [data, error] = useSample(...파라미터...);
      
    if(error) {
    	return <div>네트워크 문제가 발생했습니다.</div>
    }
    return <div>{data}</div>
}

Typescript

• typescript 를 잘못 사용하지 않는 법(ex any 남발하기)
• 제네릭  같은 고급 개념들 (타입을 변수처럼 주입해 사용하기)
• typescript 의 장점은 리펙터링을 하면서 몸소 느껴볼 수 있었다. Javascript 였다면 지금 당장엔 런타임에서도 이상없을지 몰라도, 언젠간 사이드 이펙트가 발생할 수 있는 부분이 존재했다. 이 부분을 Typescript 가 발견해 줬다.
• 고마워 TS도치야!

면접관에게 어필할 수 있는 ReadMe

• 면접 사전과제의 경우, 면접관이 내 프로젝트를 볼 수 있는 시간은 한정돼 있다. 프로젝트를 '빠르고 자세히', '잘' 볼 수 있게 도와주는 ReadMe 를 작성하는 꿀팁을 전수 받았다.

---

3. 나는 무엇이 부족했을까?

프론트엔드 사이드의 개념

• 강의를 듣다 보니 처음 듣는 단어 및 개념이 흘러 들어나왔다.
  처음 듣는 단어나 들어봤지만 개념은 모르는 것이 꽤 많았는데,
  대부분이 리액트에 한정된 단어가 아니라 프론트엔드 개발자라면 알아야 할 단어들이었다.
  난 리엑트를 잘 모르는 것이 아니라 프론트엔드를 잘 모르는 것이 아니었을까. (2년차 물 경력자 손 번쩍 듭니다!)

개발자의 기본 덕목 - 남의 것 보기!

• Todo list 과제를 하면서, "프로젝트의 디렉터리 구조는 어떻게 하는 게 좋을까, typescript + react-query는 어떻게 쓰는 게 좋을까?" 는 고민이 있었다.
  평소 다른 사람의 코드를 봐도 '완벽히' '꼼꼼히' 보지 않았던 나였는데, 이번에 다른 사람들의 오픈소스를 보면서 굉장히 꼼꼼히 보게 됐다.
  프로젝트 구조만 보려고, react-query 사용법만 보려고 했다가 api(axios) 구현부와 컴포넌트가 궁금해서 봤는데, 
  그동안 제대로 이해하고 있지 못했던 '관심사의 분리' 를 왜 하고 어떻게 하는지 이해가 돼버렸다.
  이를 계기로 해당 오픈소스 두 개를 굉장히 꼼꼼히 살펴봤고, 
  '이 부분은 이래서 이렇게 했구나!'
  '여긴 왜 이렇게 했지? 저렇게 해야 더 깔끔하지 않나?'
  라는 기특한 생각을 하게 될 정도로 '남의 코드 보기' 에 빠져들게 됐다.

단순히 과제를 완벽히 수행하지 못 함!

• 가능한 잠도 줄여가며 과제를 했지만, 두 번째 과제는 수행조차 하지 못하고 난리부르스였다.
• 뭐 시간이야 부족했다지만 시간이 부족하지 않았어도 과제를 충분히 수행할 수 있었을까 싶다. (다른 과제 수행한 사람들은 놀기만 하는 사람들도 아니잖아!! 나만 바쁘냐?!)
• 과제 수행 중간중간에 '개발자로서의 능력 부족', 'FE 지식 부족', 'React 지식 부족' 등등 많은 부족함을 느꼈던 것 같다.
• 이 부족함들은 챌린지를 수행하면서 공부했던 것들과 추가로 공부할 것들을 통해 채워지긴 할 것이다.
• 다음 2월 챌린지 까지 2주 정도 시간이 남았으니 부족함을 계속 채워가면서 미처 수행하지 못했던 과제들을 수행하고 Todo List 프로젝트를 발전시켜 보자.

---

4. 해결할, 해결된 학습 부채 (각종 레퍼런스들)

 

강의를 듣다 보니 학습할 것이 산더미 만큼 부채로 다가왔다.

 

강의에서 처음 듣는 개념에 대한 레퍼런스,

강사님이나 다른 교육생 분들이 올려주신 레퍼런스,

레퍼런스 안에서 또 처음 보는 단어를 발견해 추가로 찾게 된 레퍼런스 를 정리해 보자.

 

강의에서 처음 듣는 개념의 레퍼런스

(이거 왜 한개밖에 없지... 싶겠지만 대부분 다른분들이 올려주신 것들이라 다 옮겨놨다 -> 밑으로 내려 가기)

• React memo 를 이용해 컴포넌트 리렌더링 방지
• Stale 이란?

레퍼런스 안의 레퍼런스 (혹은 갑자기 떠올라서 찾은 것들)

• React 에서의 렌더링/리렌더링 및 렌더링 최적화
• React 의 함수형 컴포넌트의 Hooks 와 클래스형 컴포넌트의 life cycle hooks 비교하기
  • 현업에선 vue 의 life cycle hooks 사용중이라 hooks 가 신기했다! 물론 vue 3에선 setup 에서 hooks 처럼 사용 가능!
• NextJS 에서 styled component 사용 시 css 미적용 문제(SSG 이슈)
  • 강의와 1도 상관 없는...그치만 렌더링 공부하다 찾게 됨
• React-Query & Suspense in NextJS
• React-Query & Suspense 예시 (react-query data를 suspense 의 child props로 전달하면 안됨, 해당 컴포넌트에서 직접 query 해야함)
• lazy, suspense === React 의 코드스플리팅
• Closure & Garbage Collection
• Error Boundary 로 에러 처리 개선하기 (+ React-query)
• React Suspense
• React Error Boundaries
• Recoil 직접 구현하기
• React useRef 로 특정 DOM 선택하기
• React-Query, Suspense, Error-Boundary
• React Custom Hooks 만들기

 

강사님, 교육생 분들이 올려주심

• validation 을 위한 JOI API 
• 웹캐시 똑똑하게 다루기(TOSS tech)
• React 의 Error Boundary 를 이용해 Error를 선언적으로 처리하는 컴포넌트 만들기(카카오엔터)
• 우리(개발자)에게 당연하지만 사용자는 아닌 것들
• React Query 내부구현 (tkDODO)
• 순수 함수, 부작용 함수에 대해 (좋은 함수 만들기!)
• 카툰으로 보는 Flux 패턴 안내서

---

5. React 를 공부하게 된 계기

회사에선 VueJS 를 사용하고 있고, SSR(NextJS) 로 마이그레이션 계획이 있다. (에잉? 갑자기 vue 쓰다가 react?)

 

처음엔 VueJS의 SSR 프레임워크 NuxtJS 를 사용하려 했으나,

React 의 강한 생태계를 알게 되니 NextJS 를 사용하는 것이 낫겠다 싶었고,

팀내 FE 개발 스택을 ReactJS + NextJS 로 전환 하고자 결심이 들었다. (허락해 주신 팀장님 감사합니당 꾸벅 (__) )

 

VueJS 가 접근성이나 학습 난이도가 React에 비해 좋긴 하지만, 굳이 ReactJS 를 선택하게 된 계기라면..

• React 사용 개발자가 2배 이상 많은 현 시장 특성 상 언젠가 우리 팀에서 FE 개발자를 따로 뽑게 된다면 뽑을 수 있는 인력 pool 이 그만큼 많을 것이다.
• 커뮤니티가 커다래서 문제 해결하기 쉽다. 나의 질문은 대부분 이미 누군가 질문했었다.(꿀빨 수 있다.)
• 프레임워크의 업데이트가 빠르다.
  • VueJS 의 최신 업데이트를 보면 (suspense, teleport, setup 등등..) React 에서 영감을 받고 만든 것이 많다.
  • 이것은 그만큼 React의 개발 편의성 업데이트가 빠르다는 것이다. 개발 편의성이 높으면 결과적으로 빠른 서비스 업데이트가 가능해 져 좋은 유저 경험을 보다 빠르게 개선시킬 수 있다.
  • 프레임워크 업데이트에 대한 외부 라이브러리 업데이트 속도가 빠르다. VueJS 3로 업데이트 하려는 시도를 했었는데, modal 과 같은 VueJS 문법 버전에 의존성이 큰 라이브러리가 여럿 있었고, 해당 라이브러리들의 VueJS 3 버전 지원이 아직 나오지 않았다.(Vue 3 가 나온지도 몇 해가 돼 가는데..) 결국 내가 직접 만들어야 한다는 것인데, 기획이나 사업팀 요구사항을 적용하면서 VueJS 3 업데이트까지 하면서 라이브러리까지 Vue3 용으로 커스터마이징 하기엔 인력이 부족했다. (사실상 혼자 해야함..)

 

무엇보다 위 상황에서 원티드 프리온보딩 코스를 들었을 때, 'ReactJS 는 무료 학습도 시켜주고 자료도 이렇게나 많은데. 안 쓸 이유가 없잖아?' 라는 생각과 함께 react 로 hooking 됐던 것 같다.

---

마치며

만 2년차 개발자 임에도 불구하고, 지금까지 공부를 많이 했다고 생각하고 있었음에도 몰랐던 것이 훨씬 많다는 것을 알게 됐다.

 

물론 프론트엔드 개발자 커리어는 1년 이지만, 대학 4년 까지의 짬을 생각한다면 나의 현 상황이 너무나도 불만족스러웠다.

 

그리고, 회사 안에서 일만 해선 우물안 올챙이 밖에 안 된다는 생각이 들었다.

 

인프런과 같은 인터넷 강의도 좋지만, 현직 시니어분과 실시간으로 소통하는 강의는 학습의 스펙트럼을 더 넓힐 수 있는 경험이었던 것 같다.

 

학습 스펙트럼이 넓어졌다는 것은 아래와 같은 결과를 낫게 됐다...

공부할거 많은거 좋아요!!

근데 살려주세요!! 부채가 자꾸 날 때려요!!

(공부변태가 돼 가는 길인가... 오...오히려 좋아!!)

 

2월에 있을 프리온보딩 챌린지 (TypeScript) 와

https://www.wanted.co.kr/events/pre_challenge_fe_6

프리온보딩 프론트엔드 챌린지 2월 | 원티드

2~3월 간 진행 되는 프리온보딩 인턴십도 지원을 해 놓았다. (하하하핫!!!)

https://www.wanted.co.kr/events/pre_ob_open

프리온보딩 인턴십 알림 신청하고 오픈 소식을 받아보세요! | 원티드