Vue 하다가 React 하는 개발자 이야기 3

Vue 하다가 React 하는 개발자 이야기 3

1. 오늘은 동료 개발자분이 작업하던 도중에 SSR 관련 이슈를 만나셨다고 합니다. 현재 프로젝트가 Next.js 로 구성되어 있는데, 동적 라우팅이 되는 페이지에서 문제가 발생한다고 합니다. (문제가 정확히 기억이 안나네요)

2. 개인적으로 관리자 페이지를 작성하는데 Next.js 를 쓰게 된 것이 이해가 되지는 않았습니다. SSR이 필요하지도 않고, 오히려 추가적인 관리 포인트가 더 늘어나기 때문입니다. 코드 레벨에서는 물론이고 인프라 레벨에서도 관리할 것들이 더 늘어납니다.

3. 그래서 아직 프로젝트가 초기 단계이니, 일반 클라이언트 사이드 앱으로 전환 하는 것이 어떤지 제안했습니다. 프로젝트가 더 커지면 아마 그때는 CSR로 전환하기는 더 어려워질지도 모르기 때문입니다.

4. 동료분이 웹팩으로 프로젝트를 직접 구성하는 방법과, Create React App 으로 구성하는 방법이 있는데, 윕팩은 제로부터 시작한다면 큰 공수가 들기에 빠른 구성을 위해서 CRA를 택했습니다.

5. React Router를 추가로 붙여야 하지만, 큰 공수가 드는 작업은 아니기에 별 이슈 없이 CSR 전환을 마칠 수 있었습니다.

6. hooks를 사용하며 코드의 재사용성에 대한 논의도 이루어졌습니다. Hooks에서는 보통 자주 사용되는 패턴은 useXXX로 묶어서 View 단의 코드와 완전히 분리하여 재사용에 용이하도록 묶는다고 합니다.

7. 이 내용을 동료분과 논의하며 약간의 오해가 있었는데, 알고보니 서로의 표현 방식이 달라서 생겼던 오해였습니다. 알고보니 서로 같은 얘기를 하고 있더군요. 그래서 소통이 중요하다는 것을 느낍니다. 함께 작업하며 서로가 지향하는 컨벤션도 맞춰가며 작업할 수 있으니 말입니다.

8. 사실 이 방법에 대해서는 몇달 전에 사이드 프로젝트를 통해서 Vue.js의 Composition API를 경험하면서 유사한 패턴을 학습할 수 있었습니다. Hooks에서 영감을 받아서 만들어진 것이 Vue.js의 Composition API입니다.

9. 동료분이 이 방법에 대해서 이야기해주실 때 사실 저는 이런 기법을 알고 있었고, 그렇게 프로그램 구성을 하고자 생각하고 있었습니다. 아무튼 동료분이 친절하게 리마인드 시켜주신 덕에, 사소한 것부터 점검하면서 소통할 수 있어 유익한 시간이었습니다.

10. 내일은 동료분과 함께 페어 프로그래밍을 할 예정입니다. 아직은 React에 익숙하지 않은 사람이기에 함께 작업하며 좋은 시너지 효과가 날 것이라 생각됩니다. 오늘도 평화롭게 하루를 마칩니다.

(지금 글을 적으며 생각해보니 차후에 운영 중인 웹도 React로 전환 할 생각을 하고 있었는데, 그때를 대비해서 이렇게 프로젝트를 구성했던 것은 아닌가 생각이 드네요. 제 논리에 허점이 있었던 것을 느낍니다. 흠... 만일 그렇다면 지금 맞닥뜨린 문제를 차후에도 또 겪게 될만한 문제일텐데요. 차라리 그 이슈를 함께 살펴보고 나서 컨버팅을 했더라면 좋았을 것 같습니다.)