0. 들어가며

이전 글에서 functional component와 useState()를 구현해보려 했으나, useState()는 구현하지 않았었다.

어느정도 Bingact를 구현하고 프로젝트 진행을 위해 나와 다른 팀원이 만든 Bingact를 합치고 code convention에 맞추어 가볍게 리팩토링했었다.

하지만 진행하면서 느꼈던 여러가지 문제점이 있었는데 결국 그것들과 새로이 마주한 문제로 인해 이번 프로젝트에서는 React를 사용하게 되었다.

그래서 이번 글에선 제작 중에 느꼈던 여러가지 문제점과 프로젝트의 진행방향에 대해 이야기 해보려고 한다.

1. 스타일링

사실 스타일을 할 수 있는 방법은 여러가지가 있었다. React에서도 css를 사용할 수 있었고 그밖에도 모듈, CSS in JS로 스타일링을 할 수 있다.

우리의 욕심은 여기서 시작된다. SCSS를 사용해도 되지만 이전 프로젝트에서 styled components의 글로벌 스타일과 테마, props가 주는 편안함을 깨달은 우리는 우리가 만든 Bingact에서도 적용이 되지 않을까라는 근거없는 확신을 가지고 스타일링을 시도해보았다.

쉽게 될거라는 생각과는 달리 정말 어림도 없었다는 표현이 맞을 것 같다.

랜덤 해쉬값으로 주어지는 className이 createElement()의 type으로 들어가 오류가 생기는 모습이다.
우리는 이걸보고 아 styled components의 랜덤 클래스 명이 이거구나! 이걸 element의 className으로 주면 되지 않을까라고 생각해서 직접 해결하는 방법을 선택했다.

$$typeof라는 property를 보고 달러 두개가 JS 객체의 특별한 문법일 것이라고 생각했다. 왜냐하면 이 element를 String()으로 감싸서 출력하면 object가 아닌 "sc-breuTD"가 출력되니까. 이 글을 나중에 찾아내기 전까진...역시 만든 사람은 다 이유가 있구나!

임시 react프로젝트에서 styled components로 만들어진 객체를 콘솔에 찍어보며 해결 방법을 찾기 시작했고 어떻게 어떻게 구성해서 스타일링을 하는 것은 성공했지만 props를 받아 스타일링을 하는 것은 실패하고 말았다.

프로젝트의 기간 내 완성과 하고싶은 것 사이에서 고민이 들던 찰나 여기서부터 균형이 조금씩 기울어지기 시작했다.

2. 성능

사실 구현하면서도 조금씩 느끼고 있었다. 초기 코드와 달리 내부에 fiber architecture가 추가되고 rendering작업이 추가되면서 미세하게 느리다는 피드백을 많이 받았다.

단순 카운트 앱을 만들어 개발자도구에서 가장 쉽게 확인할 수 있는 load타임을 보면 Bingact의 시간이 미세하게 느린것을 확인할 수 있었고 우리는 결정해야만 했다.
우리가 만들려고하는 서비스의 규모만큼을 구현했을 때 Bingact의 성능이 받쳐줄 것인가??
그래도 이 고민은 직접 해보지 않으면 모른다라는 의견이 힘을 얻어 뒤로 미뤄졌었다.

3. 라우팅

React로 CSR 웹을 구성했을 때 가장 편리한 것이 react-router를 사용한 라우팅이라고 생각한다. 분명 여러 개의 페이지로 나누어져 있는 것 같지만 리로딩 없이 빠르게 전환되는 화면(컴포넌트)은 처음 리액트를 경험했을 때부터 놀라운 경험으로 남아있으니까 말이다.

당연히 react-router라이브러리를 사용할 수는 없을 테고 서비스의 목표 사용자가 뚜렷하고 SEO를 신경쓸 필요가 없는 간단한 서비스였기 때문에 당연히 CSR로 제작하려고 했다.

따라서 무조건 single page routing을 구현해야만 했다.
처음엔 이 자료들(1, 2)을 참고해서 해보려고 했다. 하지만 저 자료를 찾은 것은 프로젝트 시작전 정보가 많이 없었을 때였고 지금의 우리는 Context API를 사용할 수 없었다. 가능한건 Vanila JS의 history API를 사용해 구현하는 것이었지만 history API를 공부해서 구현하는 시간이 너무 부족할 것 같다고 생각했다.

4. 그래서 앞으로 프로젝트는?

돌고돌아 결국 React + TypeScript를 사용해 구현하고 있다.
React는 CRA를 사용하지 않고 직접 Webpack + babel 설정을 통해 구현하고 있고,
TS는 수업때 짧게 공부했던 TS를 사용하는 이유를 직접 경험으로 느껴보고 싶어서 구글링을 통해 부족한 부분을 채워가며 사용하고 있다.

2번의 이유는 설명이 얼추 된다. React를 만든 사람들은 전세계에서 날고 기는 개발자들일테고 30만줄 이상의 코드로 이루어져 있다고 한다. 우리는 300줄 좀 넘는 코드로 따라가려했던 것이다.

그리고 2번의 이유를 제외하고는 그저 지쳐서 편안한 방법을 선택하려했던 명분에 불과할지도 모른다. 그래도 나는 React의 기초를 이해하고 따라해보려했던 시간과 남겨놓은 글들이 전혀 아깝지 않다. 뭐든 이해를 하는 제일 비싼 방법이 기초 개념부터 따라가며 공부하는 것이라고 생각했고 이 기회에 조금이라도 시도해 볼 수 있어서 좋았던 것 같다.

남은 것은 React로 전환했으니 프로젝트를 성공적으로 완성하는 것 뿐인 것 같다.
아쉽지만 Bingact는 나중에 더 공부해보는 것으로 하고 지금은 완성이 먼저다!