내 인생의 첫 칭호 : 리액트 10주 스터디 회고

3번의 10주

23년 2월부터 시작으로 11월까지, 나는 노마드 코더 디스코드에서 리액트 스터디 1,2,3기를 하며 23년 전체를 보내왔다.

지금 되돌아보면 기수마다 나는 무언가를 배웠다는 것을 깨닫고 많은 것들과 사람들에게 감사함을 전달했다.
그만큼 10주차가 되고 스터디 회고록을 쓸때마다 벅차오르고 즐거웠다.

3기 10주차 회고록을 쓰고있는 지금은 조금 아리송하기도하다.

나는 리액트3기를 하면서 발전하고 성장한게 있는가?

물론, 이 시기에 처음으로 면접을 보게되고 나의 지식과 공부방법에 대해서 부끄러움을 많이 깨닫게 되기도하고, 컨퍼런스들을 다니고 새로운 사람들을 만나게 되는 새로운 경험을 많이하긴했다.

사실 리액트3기에는 네트워킹을 떠나서 새로운분들의 공부하는 모습들을 관찰하고싶어서 참여한 이유도 크다.

아쉬워 했던 것을 해보기

스터디가 시작되고나서, 이때까지 제일 아쉬웠던 것을 하나 해결했다.

내가 본 첫 면접에서 요즘 관심있는 기술이 무엇인가에 대한 질문에 서스펜스라 답한적이 있다.
그 꼬리질문으로 서스펜스를 사용해 본적있냐고 되물으셨었는데 리액트 쿼리 옵션을 켜서 만들었어서 조금 아쉬웠다고 대답했었다.

당시에 선언형으로 작성되는 코드가 너무 멋있어 보여서 그랬던 것 같다.

그런데 답변 자체가 마음에 들지않았어서 기억하고 있는것은 아니고, 내가 왜 아쉽다고 표현 했는지가 궁금했다.

그렇게 아쉬웠으면 정말 구현 하면 되지않나?

그렇게 스터디 첫 번째 졸업작품으로 리액트 쿼리를 사용하지않고 서스펜스를 구현 보기로한다.

깃 허브 레포지토리 - 라이브러리 없이 Suspense, Errorboundary, Cache 기능 만들기

리드미에 해당 코드에 대한 구현 내용이 기록되어있지만 사실 노션에 먼저 작성하고 주간회의에서 발표한 내용이다.

리액트 기초 파트에서 서스펜스에 대해서 발표한 것이라서, 스터디원들이 '나도 지금 서스펜스를 알아야할까?' 라는 생각을 하실까봐 “나는 리액트를 작년 12월에 시작한 것이다.”라고 몇번 이나 말하고 시작했던 것같다.

발표 이후에도 리액트를 지금 처음 배우는데, 서스펜스가 너무 좋아보이는데 어디서 어떻게 배울 수 있냐고 여쭤보시는 분들도 계셨어서 서스펜스가 중요한 것이 아니라고도 말씀드렸기도하다.

그래도 마지막인사에서 서스펜스에 대해서 발표해주셔서 감사하다고 해주셔서 너무 뿌듯했다. 서스펜스 개념에 대해서 설명하기 보다는 내가 서스펜스, 에러바운더리, 캐싱을 어떻게 구현했는지 대한 발표였는데도 도움되었다니, 그 하루는 정말 날아 갈 것 같았다.
(주변 사람들에게도 자랑도 많이 했다.히히.)

해당 코드 내용은 블로그글로 따로 다뤄야겠다.

지금 이 글에서 나의 서스펜스 구현 사항을 알고싶으면 리드미나 노션을 참고하면 될 것 같다.

생각의 전환

스터디내의 조장이었던 영서가 조원분들의 리액트 기초 졸업과제에 코드리뷰를 하나씩 작성하는 것을 보면서, 나의 리액트 2기 회고록이 떠올랐다.

나도 누군가에게 담님에게의 태영님이 되고 싶다고 생각해요.

..(중략)

저에게 달아주신 코드 리뷰를 보면서, 저도 조원분들 코드 리뷰를 달아보는 용기와 자신감을 얻었고, 위의 래한님께 말씀드렸던 것처럼 무언가에 대해서 지식 공유하는 걸 꺼렸던 제가, 뭐라도 공유하며 같이 발전했으면 하는 생각을 가지게 되었어요.

..(중략)

정말로 저도 먼 훗날, 누군가에게 담님에게의 태영 님 같은 사람이 되게 노력해 보겠습니다.

감사해요.

라는 내용이다.

아, 생각보다 이런 상황은 멀리있지 않겠구나 싶더라.

적어도 스터디의 4개의 졸업과제들은 코드리뷰를 작성해보자 라는 마음이 생겼다.

코드 리뷰

나도 팀프로젝트를 해보면서도 많이 주고받았기 때문에 현업에서 PR단위로 진행되는 코드리뷰가 과제 코드리뷰는 다르다는 것은 알고있다.

하지만, 내가 리액트2기에서 태영님에게 코드리뷰를 통해 코드를 통한 소통이라는 알게되고 누군가에게도 이 기쁨을 나눠보고 싶었다. (스터디 정식 활동이 아니다.)

그렇게 10주간 4개의 졸업 작품을 코드리뷰 해드린것들과 코드리뷰를 하면서 느꼈던 것들을 한데 모아본다.

리액트 시작하기

라우트 경로관리 및 타입단언과 타입선언 활용

우리 조 조장을 해준 영서에게 한 코드리뷰이다.
같은 요구사항을 다르게 구현한 분의 코드를 볼 때마다 재밌고 배우는 점이 많았다.
처음 볼 때 부터 영서에게 항상 배우고있다. 서로 좋은 자극을 주며 계속 성장하는 관계가 납골당 들어갈 때 까지 유지되면 좋겠다.

협업을 위한 폴더 및 파일 네이밍 방법과 useEffect의 의존성배열 등

코드리뷰를 하면서, 폴더, 파일, 식별자 네이밍의 중요성에 대해서 생각하지 못하고 오롯이 현재의 나만 생각하던 과거의 나가 떠올랐다.

현재의 내가 아닌, 미래의 나, 넘어서 팀원을 위한 코드를 작성하자.

리액트 마스터

반복되는 코드 개선 제안 및 useQuery와 react-router-dom 활용

이때, 어느 분에게 코드리뷰를 할지 정말 고민을 많이 했었다. 사실상 코드리뷰는 스터디 내에서 내가 원해서 진행하는 것이며 누군가는 내 코드리뷰가 지적으로 느껴질 수도 있기 때문이다.

그렇게 열정적이었던 조원 분께 코드리뷰를 해드렸었는데 내가 했던 고민과 같은 고민을 했었다고 말씀해주셨어서 신이나 이전에 내가 찾아봤던 레퍼런스도 공유하며 기뻐했었다.

이 코드리뷰 때 받는 것 뿐만아니라 나누는 것도 무척 행복하다는 것을 한 번 더 느낄 수 있었다.

이때, 공유해드렸던 키워드는 useQuery와 react-router-dom을 활용하여 loader를 구현하고, path parameter를 이용해 쿼리키와 api endpoint를 관리하는 방법이었다.

넥스트 시작하기

Next.js 에서의 a 태그와 Link 컴포넌트, Image 컴포넌트 활용

이때, 나는 app router로 과제를 구현했지만 코드리뷰는 page router를 하신분으로 해드렸다.

사실 코드리뷰 해드릴게 있을까 싶으면서 조원 분들의 코드를 구경다니다가 정말 궁금해서 코드리뷰를 작성했었다.

a태그와 Link컴포넌트를 시작으로 웹접근성에 대해서 이야기하게 되었다. 그러면서 Next.js의 Image 컴포넌트를 사용하지않으면 경고 문구가 뜰 텐데,왜 Image컴포넌트를 사용하지 않았는지 궁금해서 여쭤보게되었다.

Image 컴포넌트를 왜 사용하지 않았냐는 말은 Image컴포넌트를 사용하라는 의미와 일맥상통할 수 있다. 그렇기에 Next.js의 Image컴포넌트를 사용하여 무분별한 최적화하는 것이 정말 좋은 것인가?에 대해서 TA인 빡준님이 리뷰에 첨언 해주시기도 했다.

캐럿 마켓 : Next.js + prisma

Next.js의 middleware과 swr의 useSWR, useSWRMutation 활용

리액트 스터디에서 코드리뷰를 작성할때는 기본 두시간은 생각하고 작성한다. 이번 이 코드리뷰가 정말 오래 걸렸던 것같다.

그만큼 잘못된 내용을 공유하고 싶지도 않았고 내 경험을 공유하면서 상대방분과 소통하고 싶었다.

이 분이 현재 겪고 있는 에러들은 이전에 나또한 겪어봤고, 어떤 방식으로 해결 했는지를 방향으로 작성하고싶었다. 그런데 막상 작성하고나니, '이 해결방식이 최선일까?' 라는 생각이 많이 들었다.

물론 내 방식이 정답이 아니라는 말은 매번하지만 나한테서의 최선일까라는 생각을 많이 했던 리뷰다.

그래서 코드리뷰를 작성하면서 내 프로젝트도 같이 리팩토링 하기도 했다.

코드리뷰를 작성하면서 진행한 리팩토링 풀 리퀘스트 : Feature #17 middleware 설정 변경

---

코드리뷰가 적다고 하면 적을수도 있고, 많다고 하면 많을 수도 있다.

가끔 아무도 바라지않고, 아무도 시키지않았던 코드 리뷰를 하면서 “내 코드리뷰가 정말 리뷰이에게 도움이 될까?” 라는 생각을 많이 했다.

“나는 코드 리뷰를 하고 구현의도와 생각을 공유하는 것을 좋아하지만, 받는 분은 그저 지적이라고만 받아 들이면 어떡할까?” 라는 생각을 한적이 없다고 하면 거짓말이다.

나는 운좋게 좋은 코드리뷰를 받은 경험을 가졌고 운좋게 좋은 코드리뷰의 반응을 받는 경험할 수 있었다.

사실,

나는 개발공부 이야기나 노마드 리액트 스터디를 이야기할 때마다 2기 이야기를 많이 한다. 사람들이 “아, 또 태영이야?” 라고 말하는 그 이야기다.

사실, 태영님을 찬양하고자 말을 꺼낸 것은 아니었다. 내 기준에서는 ‘돈을 받지않고도 정성스러운 코드리뷰와 질문에 대한 답변, 오류를 같이 고민해주는 태도’ 라는 태도에 대해서 감탄한 것 뿐이다.

그래서 나는 2기때 태영님을 만나뵙게 된 것을 행운이라고 말한다. 2기부터 3기까지도 많은 분들이 비슷한 이야기를 많이 들었을 것이다. 진짜로 난 그냥 운이 좋았다.

2기때 1조 조활동 하던 사람들은 손가락으로 수를 세우면서 이름까지 언급할 수 있을정도로 적었다. 그런상황에서 값진 2기 조활동을 했었다고 말할 수 있는건 진짜 행운이었다.

그래서 나는 3기때, 나같이 3기를 해서 담 님을 만나서 행운이었다는 마음이 들었으면 좋겠다는 생각을 많이 했었다. 내가 받은 만큼 주고싶었다.

그런 마음으로 시작했던 것이 다섯 개의 코드리뷰가 모였다.

간접적으로 진짜 나를 만나 행운이라고 말해준 분들도 적지않다. 그만큼 내가 3기를 잘 달려왔다고도 혼자 으스댈 수 있지않을까 싶기도 하다. (아, 물론 내 생각이다 히히)

내가 코드리뷰를 하는 만큼 많은 분들이 서로 코드로 소통해보는 좋은 경험을 가져봤으면 했다.

받는 만큼 해보면서 공부하게되기도 하고 같은 것을 고민 했었다는걸 알게되면 더 친해지는 느낌도 많이 들기도 했기 때문이다.

그런 노력 덕인지 스터디 관리자분이 종강회때 하나의 상을 주셨다.

사실 남들이 이런 타이틀을 달아주는 것에 그렇게 의미부여를 크게 하지않았다.
그래도 나름 나에게 의미있는 첫 칭호가 달아준 기분이 물씬 들었다. 내 맘속에 나만의 칭호.

원티드프리온보딩 인턴십으로 동료학습을, 테오스프린트를 통해 팀원과의 코드리뷰의 좋은 점들을 알게되고나서 해왔던 활동들을 누군가는 알아줬다는 것에 조금 뿌듯하기도 하다.

물론, 그 사이에 도움 주셨던 분들이 많다.

굳이 스터디에서 계속해서 좋은 영향력을 끼치려고 노력했던 것은, 예전에 스터디원에게 해드렸던 말에 다 담겨있다.

1기와 2기를 통틀어서 리액트3기는 실력적인 관점에서는 나에게 그렇게 보람있게 보낸 10주는 아니다.

그만큼 성장도 하지않았던 것같다.

그래도 내가 받은 만큼 베풀 수 있는 시간이었던 것 같다.

코드리뷰 뿐만아니라 2조 쓰레드와 많은 모각코에서 내가 알고있는 지식이나 내가 경험했던 것들을 많이 뿜어냈다.
그 지식과 경험들이 작은 것이 딱히 중요하지 않았다. 뿜어내는게 더 크다 생각했기 때문이다.

언젠가는 더 많은 것을 뿜어내는 사람이면 좋겠다.