백엔드 개발자가 회사에서 리액트 세미나를 진행하기까지

리알못의 리액트 탐방기

백엔드 개발자가 리액트 세미나를?

2020년 11월 한 달 동안 총 4주에 걸쳐 회사에서 리액트 세미나를 진행했다. 1년 동안 내가 리액트를 공부하며 배웠던 것들을 정리해 알려주는 시간을 가졌다. 리액트 세미나를 열었다고 하니 프론트엔드 개발자처럼 들릴 수 있지만, 회사에서 나의 포지션은 백엔드 개발자다. 백엔드 개발자가 어떻게 리액트 세미나를 열 수 있었을까?

리액트와의 첫 만남

내가 처음 리액트를 접한 것은 2020년 2월이다. 어느 날 팀장님께서 신규 프로젝트 하나가 있는데 혼자 맡아서 진행할 수 있겠냐고 하셨다. 백엔드 시스템과 관리자 대시보드를 개발해야 했다. 이때까지만 하더라도 프론트엔드 개발에는 큰 자신이 없었기에 '대시보드를 혼자 잘 꾸며나갈 수 있을까?' 하는 걱정에 조금 망설여졌다. 그러나, 새로운 것을 하고 싶었던 나에게 이 기회는 단비와 같았기에 맡아서 진행했다.

프로젝트를 맡고 나서 곧바로 기술 스택을 선정했다. 서버단은 스프링 부트와 JPA를 사용하기로 했다. 서버 쪽 기술 스택은 별다른 고민 없이 바로 선정할 수 있었다. 그러나 문제는 프론트엔드였다. 나는 이제까지 바닐라 자바스크립트와 JQuery를 이용해 프론트엔드 개발을 해왔다. 프론트엔드를 잘 모르지만 내가 써오던 이 기술들이 레거시가 되어 간다는 것은 익히 들어서 알고 있었다. 마음속으로는 최신 기술 스택인 리액트, 뷰를 선정해 프로젝트를 진행하고 싶었지만 처음 사용하는 기술 스택으로 프로젝트 완료 기한을 맞출 수 있을지 확신이 들지 않았다. 그러나, 나는 평생 새로운 것을 받아들이고 사용해야 하는 개발자가 아닌가. 고민 끝에 리액트를 프론트엔드 기술 스택으로 선정하고 개발에 착수했다.

리액트 시작하기

제일 먼저 리액트 강의를 찾아 들었다. 노마드코더의 리액트 무료 강의를 이틀에 걸쳐 수강했다. 그리고 바로 프로젝트 개발을 시작했다. 처음 사용한 기술이기에 크고 작은 문제들이 나타났지만, 어찌어찌 해결해가며 다행히 프로젝트를 잘 마무리 할 수 있었다. 이전까지 막연하기만 하던 리액트를 직접 부딪히며 배워보니 생각보다 어렵지 않았으며 오히려 이전의 개발보다 훨씬 생산성이 올라갔다는 것을 느꼈다. props로 내려준 값들이 알아서(?) view에 반영되고, 컴포넌트화된 view들을 손쉽게 재사용할 수 있는 것이 가장 인상 깊게 다가왔다.

더 깊이 알아보기

리액트를 사용해보니 더 자세히 알고 싶어졌다. 특히, 검색해보면 리액트를 개발할 때 리덕스라는 녀석도 같이 쓰는 것 같은데 이때 내가 만든 앱은 리덕스를 사용하고 있지 않았다. (useState로 떡칠해놨다...) 내가 정말 리액트를 잘 사용하고 있는지 의문이 들었다. 또한, View단 테스트 코드를 작성하지 못했던 것도 아쉬웠다. 프론트엔드 개발을 더 잘하고 싶다! 라는 생각을 하고 있을 때 개발자 아샬님이 리액트 강의를 오픈한다는 소식을 듣게 되었다. 바로 코드숨이었다.

꽤 비싼 가격이었지만 두 눈 질끈 감고 결재했다. 리액트를 더 잘 다루고 싶었고 프론트엔드 개발을 더 잘하고 싶었다. 궁극적으로 더 나은 개발자가 되고 싶었다. 교육은 굉장히 만족스러웠다. 매일매일 진행되는 과제와 코드리뷰에 지칠 때도 있었지만 프론트엔드 개발의 묘미를 하나씩 알아가는 기분이라 행복했다. 그리고 이즈음 회사에서 또 새로운 프로젝트를 맡아 진행할 기회가 생겼다. 회사에서 시범적으로 개발해보는 서비스라 상용화되는 것은 아니지만 대시보드보다 더욱 다양하게 인터렉티브한 동작을 해야 하는 프론트엔드 개발이었다. 코드숨에서 매주 배우는 것을 거의 실시간으로 회사 프로젝트에 반영할 수 있었고 배움의 기쁨은 두 배가 되었다. 이 기간에는 집에서도, 회사에서도 즐겁게 코딩을 한 것 같다.

첫 프로젝트 개선하기

코드숨 교육을 끝마치고 제일 먼저 한 것은 올해 초 진행한 첫 프로젝트를 개선하는 작업이었다. 뷰와 로직이 복잡하게 얽혀있던 프로젝트를 Flux Architecture로 재개편했다. 개편하며 자동화 단위 테스트 코드도 작성하였다. 지금 와서 돌이켜보면 배운 내용을 바로바로 실무에 적용하려고 노력한 것이 실력을 향상하는데 큰 도움이 된 것 같다. 올해 초에는 프론트엔드 개발이라고 하면 덜컥 걱정부터 하던 나였는데, 지금은 프론트엔드 개발이 굉장히 흥미롭고 재밌게 느껴지는 것을 보면 많이 성장했단 생각이 든다.

리액트에 타입스크립트까지

프론트엔드 개발에 흥미를 붙이고 있을 때쯤 우아한형제들에서 우아한테크러닝 3기 'React&TypeScript' 교육을 진행한다는 소식을 들었다. 곧바로 신청은 했지만 큰 기대는 하지 않았다. 이전에 몇 번 신청했지만 선정된 적이 없었고, 경쟁률이 치열하다는 것을 알고 있었기 때문이다. 그런데, 며칠 지나자 교육 참가자로 선정되었다는 메일을 받았다. 선정된 이유는 시국이 시국인 만큼 교육을 원격으로 진행하게 되었고 참가자 제한이 사라져 신청자 모두 교육을 받을 수 있게 되었기 때문이라고 했다. (웃어야 할지 울어야 할지...) 정말 기쁘고 감사한 마음으로 교육에 참여했다. 이전에 접하지 못한 타입스크립트, Mobx, Redux-Saga 등 여러 도구를 배울 수 있었다. 특히 리액트와 리덕스를 실제로 구현해 보는 것은 큰 도움이 되었고 사내 세미나를 진행할 때 잘 써먹었다.

교육에 참여한 뒤에 또또 새로운 프로젝트를 맡게 되었는데, 이번에는 TypeScript로 프로젝트를 진행했다. 우아한테크러닝 교육을 받았을뿐더러 회사에서도 TypeScript를 사용하고자 하는 움직임이 보여 재빨리 TypeScript를 기술 스택으로 선정했다. JavaScript와는 또 다른 매력을 느끼며 흥미롭게 코딩하고 있다.

리액트 사내 세미나 진행

2020년 2월부터 시작해, 한 해 동안 리액트 기반 프론트엔드 개발 환경에 대해서 열심히 학습했다. 또한 리액트를 활용하여 총 세 번의 프로젝트를 맡아 진행했다. 리액트의 '리'도 몰랐던 내가 지금은 자연스럽게 TDD로 리액트 컴포넌트를 작성하며 Redux와 Redux Thunk를 활용해 뷰와 로직을 분리한다. 이러한 노력 덕분인지 백엔드 개발자임에도 불구하고 사내 '디자인 시스템' 구축 프로젝트에 참여할 수 있었다. 디자인 시스템 프로젝트에 참여하며 사내 프론트엔드 개발자분들과 함께 작업하게 되었는데 내가 배운 것들을 공유하면 더 나은 결과물이 나올 수 있을 것 같았다. 그뿐만 아니라 사내 프론트엔드 개발 환경도 개선되고 이는 곧 더 나은 생산성으로 돌아오리라 생각했다. 그래서 한 달 동안 사내 세미나를 열었다.

4주 커리큘럼

세미나는 4주간 다음의 커리큘럼으로 진행했다.

1주 차: 리액트 살펴보기

  • 동일한 앱을 바닐라 자바스크립트 버전, 리액트 버전으로 개발한 코드를 살펴보며 리액트란 무엇인지 알아보았다. 또한, 리액트의 가벼운 버전을 직접 구현하며 VDOM과 리액트 작동방식에 대해 알아보았다.

2주 차: 리덕스 살펴보기

  • 1주 차에서 개발한 리액트 버전의 앱에 어떤 문제가 있는지 살펴보며 Flux Architecture의 탄생 배경과 필요성 그리고 장점에 대해 알아보았다. 상태 관리 라이브러리 중 하나인 리덕스를 소개했다. 리덕스의 가벼운 버전을 직접 구현하며 그 특징을 알아보았다.

3주 차: 비동기 다루기

  • 리덕스 환경에서 비동기를 다루기 위해 어떻게 해야 하는지 알아보았고 이 과정에서 Immutable과 순수함수에 대한 내용을 소개했다. 로깅을 찍는 리덕스 커스텀 미들웨어를 직접 구현하며 리덕스 미들웨어의 구조를 알아보았다. 2주 차 때 구현한 리덕스에 미들웨어를 추가하는 'applyMiddleware' 인터페이스를 구현해보며 리덕스 미들웨어 작동방식에 대해 알아보았다.

4주 차: 테스트와 친구들

  • 내가 회사에서 맡아 개발한 프로젝트의 커버리지를 자랑(90% Coverage Flex 💪)하며 테스트 코드의 장점과 커버리지를 유지할 수 있었던 방법을 소개했다. 그 방법은 TDD(Test Driven Development)다. Jest와 React Testing Library를 활용하여 TDD로 개발해 나가는 과정을 라이브 코딩으로 소개했다.
  • 내가 진행한 회사 프로젝트 코드를 함께 보며 리액트와 리덕스 외에 'React Router', 'Emotion', 'styled-components' 등의 도구를 소개했다.

세미나 진행 후기

커리큘럼을 직접 짜고 강의를 진행하는 것은 쉬운 일이 아니었다. 특히나 어떤 예제의 앱을 구현해 나가며 강의를 이끌어야 하는지부터 고민이었다. 이사 때문에 은행에 자주 갔었는데, 여기서 착안해 간단한 은행 시뮬레이션 앱을 예제로 선정했다. 예제 앱을 개발하고 발표 자료를 만들고 발표 연습을 하다 보니 한 회차에 이틀 정도 준비 기간이 필요했다. 가끔 너무 피곤할 때는 퇴근하고 바로 침대에 누워 잠자고 싶었지만, 시간을 내어 세미나에 참석해주시는 분들을 생각해 쉬고 싶은 마음을 참으며 발표 준비를 해나갔다. 다행히 많은 분이 세미나를 좋아해 주셨다. 특히, 참석한 분들이 "좋았다", "고맙다" 등의 피드백을 해줄 때면 힘이 났고 이 힘으로 끝까지 잘 마무리 할 수 있었다.

"남에게 가르칠수록 모르는 것을 배운다"라는 말을 자주 들었는데 이 말이 너무나도 와닿았던 4주였다. 발표를 준비하면서 안다고 생각했었는데 실제론 모르고 있었거나 사실과 다르게 알고 있던 부분들을 바로잡을 수 있었다. 1년 동안 공부한 것을 4주로 압축해보니 개인적으로도 큰 도움이 되었고 자연스레 회고 글로 이어졌다.

앞으로의 여정

1년의 노력이 없었다면 세미나를 진행할 기회 뿐만 아니라 용기조차 생기지 않았을 것이다. 노력의 결실을 몸소 체험했기에 계속해서 배울 기회를 찾을 것이다. 더 나아가 "백엔드 개발자", "프론트엔드 개발자" 등과 같이 기술로써 나를 한정 짓는 명칭이 아닌 개발자로서 나를 잘 나타낼 수 있는 이름을 찾을 것이다. 그리고 배우면 가르칠 기회를 찾아 나설 것이다. 2020년의 끝이 보이기 시작하는데, 새로운 배움을 찾아 2021년을 맞이해야겠다.