[글또 10기 - 1] 백엔드 개발자가 처음해보는 리액트 프론트엔드 개발

프론트를 해보려는 이유

 나는 백엔드 개발자로 프론트에 대한 기초가 없다. 사실 대학교에서 배웠을 테지만, 기억이 하나도 나지 않는다. 그러므로, 프론트엔드 0년차다. 내가 입사하기 전 회사의 어드민 개발은 백엔드 개발자 접근하기 쉬운 뷰(Vue)로 구축했다. 그래서 프론트엔드 개발을 뷰로 시작했다. 

 

 처음 입사했을 때가 생각난다. 경력직으로 입사한 나는 입사한지 일주일만에 첫 프로젝트를 받았다. 주차장관리시스템에 복잡한 수식이 있는 관리 메뉴 하나를 만드는 것이었다. 설계 후 서버 API들은 코프링(Kotlin, Spring)으로 어떻게 며칠만에 만들었는데, 프론트가 문제였다. 매일 회사에 남아 뷰를 공부했다. 물론 주말에도 공부 했지만, 뷰로 첫 페이지를 만드는데 일주일 정도가 걸렸다. 기획서에 나와있는 페이지만 20장인데, 한 페이지가 일주일..? 개발 기한이 두달이었기 때문에, 진행이 불가능하다고 판단했다. TL(Tech Leader)에게 말했고, 시니어 한명을 붙여줬다. 총 3명이서 기간내에 끝냈다. 

 

 왜 뷰가 어려웠을까 5년이 지난 지금 생각해보니, 우리 회사만의 프레임워크가 탄생했기 때문이지 않나 싶다. 뷰를 처음 접하는 사람은 당연히 뷰 생태계의 커뮤니티, 공식문서, 블로그를 참고할 것이다. 이후 학습했던 내용과 기존 코드를 비교하면서 개발을 해나갈텐데, 모든 것이 우리 회사만의 프레임워크로 되어있었다. 아무리 경력자가 들어와서 옆에 앉혀놓고 가르치는게 아니라면, 개발이 불가능하다. 물론, 지금은 간단한 페이지를 개발하는데 반나절이면 만든다. 어떤 프로젝트에 어느 부분에 어떤 컴포넌트가 쓰였는지 모두 알고 있기 때문에 가져다 붙이면 완성이다. 이것은 회사를 오래다녀야 할 수 있다.

 

 지금은 더 복잡해진 것이 새로운 CTO가 올 때마다, 팀이 분리되고, 합쳐지면서 도메인에 따라 여러 프로젝트들이 우리 팀으로 들어오거나, 다른 팀으로 이동됐다. 여기에 프론트엔드 그룹이 생기면서 새로운 프로젝트는 뷰에서 리액트(React)로 바뀌었다. 그래서 프로젝트별로 리액트, 뷰, ts, js가 파편화 되었다. 리액트로 개발된 페이지는 프론트엔드를 할당받지 못하면 개발이 불가능해졌고, v뷰 또한 어디는 ts 어디는 js를 사용중이라 프로젝트를 넘나드는게 쉽지 않다. 관리하는 프로젝트가 14개이고, 기존 모놀리식 레거시 사이트를 MSA로 분리하면서 더 많은 프로젝트가 생길것이다. 같은 팀 내에 기술의 파편화가 생산성 저하에 주요 원인이다. 프론트 어드민에서 생산성이 너무 떨어지는 이 상황을 어떻게 해야할지 고민이 있다.

 

※ 새로 알게된 사실, 프론트 개발자들에게 왜 vue를 사용하지 않는지 물어본적이 있다. 프론트에서 리액트는 우리나라에서 백엔드의 스프링 만큼의 점유율을 갖고 있다. 

 

 

 

 

뭘 만들어볼까? 얻고 싶은건?

 먼저, 만들고 싶은 건 공부용으로 올리고 있는 github 번역용 블로그의 개편이다. 지킬(Jekyll)로 만들어져 있는데, 공부하려는 각 기술 공식문서의 메뉴(스프링, 그레이들 등)가 달라서 지킬 템플릿에 억지로 끼워 맞추고 있다. 전부 어딘가 만들어져 있는 것을 가져다 붙이면서 유지보수 하고 있기 때문에, 기존 프로젝트의 유지보수 정도가 아니라 처음부터 구축하면서 기본적인 프론트엔드 지식을 습득해서 지금 조직이 겪는 문제의 해결책이 있을지 알고 싶다.

 

 

 

 

 

리액프 프레임워크? next.js가 뭔데?

 next.js가 대세라는 말을 들었다. 리액트가 자바스크립트(javascript) 프레임워크인데, 리액트 프레임워크인 next.js를 사용한다는게 백엔드 개발자인 나는 무슨 말인지 이해가 되지 않았다. 그럼 next.js의 장점이 뭐에요? 기존 클라이언트사이드렌더링(CSR)은 검색엔진 최적화(SEO)를 방해해서 구글 검색이 안 될 수도 있고, 클라이언트에서 실행되기 때문에 속도가 느리다. 그래서 next.js로 서버사이드렌더링(SSR)을 사용하는게 대세라고 한다.

 

 

 

 

일단 서버부터 실행해보자

 

Getting Started: Installation | Next.js

 

installation 문서를 따라하면, 금방 서버를 실행해 볼 수 있다.

 

 

 

시작이 반이다. 시작했다. 반했다!