내 인생의 전환점 : 리액트 10주 스터디 회고록

장장 3시간동안 썼던 내 블로그글이 다 날라가서 너무 슬픈 마음으로 다시 작성한다.😭

이 글은 광고성을 띄지않으며, 단순히 스터디 회고를 담은 글입니다.

다 끝난 지금, 이 스터디를 되돌아 보면

아직 상반기지만 지금도 당당히 말할 수 있다. 올해, 아니 인생에서 내가 제일 잘한 일은 이 리액트스터디를 들어 간 것이고 새로운사람들을 만나고, 그 사람들과 긍정적인 자극을 주고 받았다는 것이다.

이 스터디는 내 공부 태도, 그것을 더 넘어선 내 인생의 전환점이 되었다.

스터디를 진행하면서 어떻게 바뀌고 얻었는지를 정리하고자 글을 쓴다.

스터디를 하게 된 계기

22년 9월 부터 12월 까지 부트캠프를 진행하고 나서, 몇몇의 부트캠프 수료자가 그러하듯 무엇을 해야할 지 방황하게 되었다. 이력서를 작성해 채용시장에 뛰어들 용기도 없고 쌓아져있는 기술부채들을 보며, 어떻게 해야할지 몰라 그저 가뭄에 콩나는 듯 리액트 공부를 진행했었다.

왜 굳이 리액트였었나 생각해보면, 2차 프로젝트때 제대로 알고 써보지 못했던 것이 아쉬웠던 마음에 그랬던 것 같다. 그런 망망대해를 걷는 기분으로 1월을 지내고 2월을 맞이하니, 더이상 이렇게 지낼 수는 없으니 무엇이라고 다시 시작해 보자는 생각에 노마드코더에서 진행하는 리액트 10주 스터디를 참여하게 된다.

리액트 10 주 스터디는 React.js, Typescript, Next.js를 학습하고 챌린지를 진행하고, 스터디 활동은 디스코드로 진행하게 된다.

자세한 스터디내용은, 리액트 1기 스터디 스케쥴 이 링크를 참고하길바란다.

내가 스터디를 하는건지 챌린지가 스터디하는건지

정말 달라지려고 혼자서 고군분투하던 때 였다. 침대에서 눕기만하고 공부하지않는 내가 미웠고, 게임에 대한 미련을 버리지 못해서 하지는 않아도 켜놓는 나를 어떻게든 바꾸려고 노력했었다.

그러다보니깐 노마드코더에서 진행하는 챌린지라는 챌린지는 열심히 수행하면서 공부했었다.

사실, 지금의 나의 관점에서는 당시에 몰아치는 챌린지를 수행하던 것은 공부가 아니고 공부를 흉내내는 챌린지라도 하려고 몸부린 친거라고 본다.

그래도 열심히 살았었다. 강의내용과 강의에서 배운 새로운 지식들을 마크다운에 정리하고 실습 코드를 함께 커밋해서 스냅샷을 통해 복습하기 용이하게 하려했다.

당시 챌린지에 빠져 살며 공부한 기록들

React - React기초

: 엘리스코딩의 2차스터디에서 진행했던 강의였기때문에 복습으로 진행했다.

TypeScript

: 타입스크립트는 Playground로 진행했기 때문에 따로 강의내용과 추가 정보를 정리했었다.

React -React master class

: 강의 이름은 React master class 인데, 사실 내가 생각하기에는 React의 여러가지 라이브러리 맛보기. 이런 느낌이다. 그래도 이 강의를 통해 배운 것이 참 많다!

Node.js - wetube

: 리액트 10주 스터디의 마지막 커리큘럼이 Nexts.js 으로 풀스택을 구현해야하기 때문에 Node.js를 복습하고자 함께 진행했었다.

물론 열심히 살았던 흔적이지만, 위의 챌린지들을 진행하면서도 의구심을 계속 가졌었다. 챌린지를 참여하지만 스터디 활동에는 소극적이었기 때문에 더 그랬던것 같다.

“내가 지금 공부를 하는건가? 이 스터디에 들어온 이유는 뭘까?“

급기야 챌린지가 있는 평일에는 챌린지를 하기위해 움직이고, 챌린지가 없는 주말에는 침대에서 일어날 생각을 하지 못하는 첼린지를 위해 움직이는 챌린지 기계가 되고만 것이다.

챌린지 마감시간 오전 6시. 어떻게든 제출하기위해 새벽 5시 50분에 제출하는 챌린지 기계..

그래서 그런지 스터디 초기에 작성한 주간회고록들을 보면 의무감으로 쓰는 내용들이 많다.

1주차주간회고록 / 2주차주간회고록 / 3주차주간회고록 / 4주차주간회고록 / 5주차주간회고록

변화는 서서히

변화의 시작은 사람

노마드 스터디는 두가지 스터디로 나뉜다. 이 각각의 스터디가 공유하는 채팅 채널은 없었기 때문에 교류가 무척 없는 편이며, 개인적인 친분을 쌓기 위해서는 다소 노력이 필요하다.

1. 웹기초 스터디
2. 리액트 스터디 (내가 진행한 스터디!)

그런데 챌린지 기계는 스터디를 진행하다. 긍정적인 에너지 뿜고다니는 웹기초 스터디원 한 분을 알게된다.

무척 친해져보고 싶었다. 아, 그분은 알까? 이 글을 보면 아시겠네.. 응..영서님 사랑해용.

어쩌다 두 스터디가 함께 채팅으로 대화할수 있는 공간이 생겼던 틈에 눈여겨보고 플러팅을 열심히 했다. 그리고 조금 친해졌다!

스터디 디스코드에는 온라인 모각코를 진행할 수 있는 음성채널이 마련되어있는데, 온라인 모각코에는 별 관심이 없었지만, 이 분이 계셔서 들어가서 같이 모각코도 해보면서 누군가와 함께 공부하는 것에 맛들이기 시작했다.

NOFLIX

이 작은 프로젝트에서 얻은 것이 참 많다

소극적이게 참여했던 스터디를 정말 열정적으로 참여하게 된 계기는 이야기 해보고자 하는 이 프로젝트덕분이지 않을까?

리액트 10주 스터디는 졸업하기 위해서는 총 4개의 졸업작품을 만들어 기본요구사항을 만족시켜 제출해야한다.

그 중에, React master class라는 졸업작품, 넷플릭스 클론코딩을 진행하며 배우고 얻게된 이야기를 하고자한다.

1. 제작

프로젝트 기능들을 구현하면서, 계속 생각했었다..

“이렇게 구현하는 것이 맞을까? 다른 스터디원들은 이 기능은 어떻게 구현해냈을까?“

그러다 보니, 주마다 진행되는 주간회의시간에 졸업작품을 회고하는 발표도 자연스럽게 하게되었다.

물론 그 발표 주제도 “저는 이걸위해서 이렇게 구현했는데 맞을까요? 다른 분은 어떻게 하셨어요?”가 되어버렸다. 어짜피 회고를 발표하는 시간이라 주제에 대해서는 전혀 압박감은 없다!

당시 주간회고를 발표하며 작성한 노션

NOFLIX 졸업 작품

간단하게 정리하자면,

• 내가 누른 슬라이더가 어떤 리스트 타입의 슬라이더인지, 모달은 어떻게 알까?
• 리코일을 도입한 이유
• 검색페이지지 전용 모달 컴포넌트를 생성한 이유

2. 1차 리팩토링 (23.03.23)

챌린지용으로 졸업작품을 제출했다고 해서 끝은 아니라고 생각했다. 끝내 처리하지 못한 사항들과 의문이 생기는 것들을 다시 검토하고 수정하기를 시도했다.

리코일을 제거하고 원하는 대로 모달을 띄웠지만, 만들고나서 다음날 깨닫게 된다.

아 route path에 list Type이 없다면, 절대 이 방법으로는 사용자가 url로는 상세페이지를 볼 수 없겠구나.라는 것을 깨닫게 되고 회고록에 쓰게된다.

[노마드스터디] 주간회고록 7주차

리팩토링 하며 검토한 내용

• 사실 리코일은 필요가 없었다. : 리코일 제거
  • 슬라이드에서 props으로 모달에게 listType을 전달해주자
• 왜 나는 다른 스터디원과 달리 구현에 어려움이 있었을까?
  • route path에서의 listy type의 부재
  • 클릭한 경우에만 list type을 저장, 모달을 띄우는 조건은 클릭한 list type이 기본값이 아닐 때임.
• 기능을 추가해보자
  • 더 좋은 사용자 경험을 주기 위해 검색창에 debounce 기능을 추가했다.(사실 2차 프로젝트 진행할 때, 적용 못해본게 아쉬워서 해봤다!)
• 개선이 필요한 사항
  • route path 에 list type을 추가하여 클릭유무로 모달을 띄우는 것이 아닌, url로도 상세페이지를 접근할 수 있게함
  • 모달의 CSS 에러 제거

3. 2차 리팩토링 (23.05.07)

미루고 미루던 2차 리팩토링을 드디어 완료했다.

변명하자면 할 일이 너무 많았었고, 솔직하게는 우선순위를 낮게 잡아서 미루기만 했었다. 히히..

2차 리팩토링 후 배포한 페이지 / 해당 프로젝트의 깃허브 레포

오늘 이 코드들을 보며 리팩토링해나가면서 많은 것을 또 느낄 수 있었다.

1. 나는 약 한달동안 많은 것이 성장했다! (내 코드를 보면서 왜 코드를 이렇게 작성했지? 라는 생각을 많이했다.)
2. 이제는 기능 리팩토링이 아닌 관심사분리와 재사용하고있는 컴포넌트와 함수를 정리해보자! (아직도 힘든 관심사 분리는 이 코드를 정리해보면서도 많은 공부가 될 것이라고 예상된다. 그리고 현재 이 프로젝트는 재사용할 수 있는 수많은 컴포넌트와 함수가 존재한다. 적당한 하드코딩이 필요하다고는 하지만, 이 친구는 과하다 못해 넘친다.)

지금 원티드 프리온 보딩 인턴십을 진행하고 있기때문에 3차 리팩토링은 언제 할지 잘 모르겠지만, 아래의 항목을 진행 할 예정이다.

리팩토링 필요한 사항

• 관심사 분리
• 재사용할 수 있는 컴포넌트와 함수 고려하기
• 리드미 작성하기

4. 그리고..

남이 보면 보잘것없는 이 작은 프로젝트는 나에게 무척 큰 것들을 선물해 주었고, 아직도 주고 있다.

첫 번째 주간회고 발표 이후에 많은 분들이 나에게 칭찬과 덕담을 줬었는데, 지금 생각나는 말들은 ‘멋지다’, ‘좋은 개발자가 될 것이다.’, ‘발표하는 내 모습이 너무 행복해 보였다.’ 인것같다.

나는 부트캠프를 수료하고나서 내세울 정도로 지식을 쌓지 못했고, 진행했던 프로젝트 또한 무척 기본적인 기능을 구현했었던 터라 항상 자신감이 없었는데 덕담을 듣고 나서 조금 다르게 생각하게 되었다.

내가 정말 코드를 작성하고 남과 코드 이야기를 나누는 걸 좋아하는 사람일지 모른다고.

사람들에게 얻어가는 것들

글을 날려먹기전에는 정말 감동에 차서 이 챕터를 썼었는데, 지금은 어떻게 써야할지 너무 고민이다. 감사함을 항상 표현하고 있어도 또 어떻게 새롭게 전달할 수 있을까.

현실을 알게 해준

나에게 이력서는 엘리스 코딩에서 과제로 내어줬을때 작성한 이력서가 전부 였었다. 진행했던 프로젝트에서 팀원에게 업혀가기도하고 너무 기본적인 기능 구현만 해내었기 때문에 더 자신감이 없었고, 내새울 정도의 지식이 쌓이지 못했다라는 소극적인 태도로 이력서는 멀리 했었다.

정말 고맙게도 그렇게 이력서 오픈을 회피하던 나를 끄집어내어, 리액트의 스터디의 TA인 빡준님과 같은 친한 스터디원인 윤님이 이력서 첨삭을 진행해 따스한 조언과 많은 정보들을 전달해 주었다. 참고하라며 자신들의 이력서 까지 보여주셨었는데 정말로 감사했다.

이력서는 아직도 잘모르겠는 건 똑같다. 이번주 프리온 보딩 인턴십에서 자기소개글을 쓰는 것이 과제였는데, 정말 쓸것이 없고 어떤 것을 써야할 지 헤맸었다.

그래도 덕분에 프리온보딩 인턴십에 신청해서 참여할 수 있게되고, 이력서 고민을 할 수 있게 해준 빡준님과 윤님께 항상 감사함을 전한다. 푸하항

이력서 뿐만아니라 항상 많은 도움을 받고 있기에 두 분은 내 기억에 잊혀지지 않을 분들이다.

부지런한 나를 알게 해준

스터디 원들과 친해지고나서 아침에 일어나면 디스코드를 확인하게 된다.

아침마다 온라인 모각코 음성채널에 보면 항상 두어명의 사람들이 공부를 하고 있었는데, 그 중에 한 명이 영서님 이셨다! 영서님은 주간회고 발표를 듣고나서 나에게 ‘정말 멋있다. 너무 행복해 보였다.” 라고 말해준 장본인이다.

아침마다 온라인 모각코에 계시는 영서님 모습을 보며 문득 이런 생각이 들더랜다.

“영서님이 멋있다고 말한 나는 정말 멋있는 사람이라고 불리울 수 있을까?

저렇게 열심히 공부하며 살아가는 영서님이 말하는 멋진사람은 뭘까?

그런 멋진 사람이 되고싶다.”

라는 생각은 마음을 스며들고 나중에는 몸을 지배했다.

무슨 말이냐 하면, 20년 넘게 앓고있던 컴퓨터 게임 중독이 말끔히 사라졌고 주말이어도 공부를 하기위해 책상에 앉아 노트북을 키는 나로 변했다. 게임을 하려면 내가 어떤 부분이 부족한 것인지 상기하게 되고 머릿속엔 어떤 것을 공부해야할지, 기술부채들을 나열하고 있었다.

영서님과 나는 항상 대화를 하다보면, 서로 멋있다고 말하고 서로 본받고있다고 말한다. 이 도돌임표 대화는 절대 빈말이 아니고 진심이라는 것이 웃기지만 영광이다.누가 먼저 시작했을지는 몰라도, 서로에게 이렇게까지 긍정적인 자극을 줄 수 있는 존재가 있다는 것에 대해서 정말 감사하다.

오늘도 내일도~ 공부하기~ 재밌는 리액트~

스터디를 진행하며 만든 것들

정리해보니깐 리드미가 되어있는게 아무것도 없네?

나…리드미 작성하는 부지런함 길러야겠어. 시간내서 리드미 작성하기!

React.js

• Coin tracker : 배포페이지 / 깃허브 레포

  

• Todolist 배포페이지 / 깃허브 레포 상태관리 라이브러리앱 리코일은 연습하는 코드 챌린지 과제였었는데, 리코일에서의 selector기능이 너무 신기했었다.

  

• Noflix : 배포페이지 / 깃허브 레포 오우 이게 말도 많고 탈도 많았던 넷플릭스 클론코딩 프로젝트이다.

  • 리드미 작성완료!! 이 글을 보시는 분들은 열심히 작성한 리드미도 한 번 읽어보시죠~ => 리드미 보러가기

  

Next.js

mini twitter : 코드샌드박스

직접 백엔드 코드도 작성해 api를 만들어가면서 진행했던 리액트 10주 스터디 마지막 프로젝트이자 졸업작품이다.

포트폴리오에 추가할 것을 어떻게 구상해내지 라는 고민을 가지고있었는데 그 생각에 항상 따라오던 것이, 그럼 백엔드 부분은? 라는 것이었다. mini twitter 프로젝트를 진행하면서 그런 고민은 해결 할수 있는 희망이 보였다.

원하는대로 api를 구성하기도하고 상황에 따라 CSR과 SSR를 선택해서 데이터를 가져올 수 있다는 부분에서 Next.js 는 너무 매력적이고 재미있었다.

프로젝트에서 최종 목표는 기본적인 CRUD는 해보는 것이었다.

• 게시글은 CRD / 코멘트는 CRD / 회원정보 CRU 가 가능하다.
• 좋아요 버튼은 낙관적 업데이트로 구현 되어있다.

추후에 이 프로젝트에 이미지와 추가 기능을 넣어 고도화 시킬 예정이다. 배포까지! 목표!!

• 상세 이미지

메인페이지	마이페이지	회원정보수정

끝으로

10주간 길다면 길고 짧다면 짧은 스터디가 끝이났다. 아직도 여운은 다 가시지 않았고 아쉬움을 가지고 있기도하다.

10주 전의 나와 지금의 나는 너무 달라져 있기 때문에 매일이 행복하고 감사한다.

쑥스럽지만 10주간 챌린지를 한 번도 빠짐없이 진행하고 졸업하는 사람들을 뽑아 우수 졸업생이라는 타이틀을 주셨었다. 그 사이에 내가 떡하니 있는 걸 확인하니깐 내 자신이 너무 대견하더라.

나는 그저 취준생이라 시간이 많았기 때문에 가능했다고 말했지만, 사람들은 정말 성실하게 임했기 때문이라고 칭찬들 많이 해주셨었다.

부트캠프 수료하고나서의 나태함과 이전에 열심히 공부하지 않았던 자책감은 이렇게 조금씩 채워나가고 있다. 항상 성실하게 살고 싶던 내가 드디어 싹 하나 틔웠다는 것에 너무 행복하고 즐겁다.

스터디를 진행하면서 짧은시간에서도 성장함을 느꼈던 날 9주차회고록

스터디의 마지막 10주 회고록은 많은 분들께 감사함을 전달하는 글이 되었다. 물론 10주차에서도 나는 냅달 리액트 쿼리를 쓰기만했던 과거의 나를 반성하는 시간도 가지는건 잊지않았다.

대망의 10주차 회고록

이제는?

지금은 원티드 프리온보딩 인턴십에 참여하여 매주 팀원들과 동료학습을 진행하고있다.

이 학습을 통해서 다른사람의 코드를 읽어 많은 것을 배우기도하고, 팀원들과 소통하며 과제 기능의 베스트 프랙티스를 찾아가는 활동들이 너무 재미있다.

이것 또한 인턴십이 끝나면 회고글을 다뤄 볼 예정이다. 그 때쯤의 나는 지금보다 더욱 더 성장해 있겠지?

무척 기대된다.