왜 이걸 하고 있나?
별 수 있나 월급쟁이가 사장이 시키면 해야지..
현 상황
현재 서비스는 앵귤러로 한번 외도했다가 지금은 Nodejs 기반에 ejs 템플릿으로 구동되고 있다. 뭐 나름 괜찮게 돌아가고 있고 내가 합류해서 서비스의 뷰를 좀 볼만하게 만들어놨고 전담 퍼블리셔가 합류하여 한번 더 업그레이드 되고 있다. 하지만 해외진출과 그리고 개발자를 영입해야하는 입장에 있어서 현 개발스택은 솔직히 매력적이지 않은 환경이다. (요즘은 사람 구하는 것이 일이다.) 그래서 일단 국내에서 서비스가 도는 동안 해외 서비스 준비와 같은 핑계로 서비스 자체를 개편하고 있다.
적용하고 있는 기술
NEXT.js 에 react.js 를 가지고 만들고 있다. 시장에서 가장 주목받는 스택이기도 하고 사람 찾기도 구하기도 그리고 나도 가장 깊게 만져본 SPA 관련 내용이다. 스타일은 styled-components 를 가지고 바꾸고 있지만.. 불행히고 레거시 서비스의 경우는 (추후에 한번 더 언급하겠지만) 부트스트랩과 jQuery 가 뒤섞여있는 상황이다.
추가로 언급한 기술스택에 redux와 redux-thunk 를 가지고 상태관리를 하게 하고 있으며 처음에 클래스형 컴포넌트 기반으로 작업하다가 이건 왠지 좀 아닌 거 같아서 함수형 컴포넌트로 싹 뜯어 고치고 다시 작업중이다. 그와 더불어 당연히 react hooks 를 기반으로 코드를 작성하고 있다.
가장 중점적으로 보는 것
내가 다니는 회사의 서비스는 성격이 페이스북과 비슷하다. 즉, 로그인 하지 않으면 그닥 볼만한 것이 많이 없다. 가장 중요한 상태관리가 바로 로그인에 관련된 상태이다. 물론 로그인도 단순히 로그인, 로그아웃만 있는 것이 아니고 중간 단계정도 되는 이메일 인증을 거치지 않은 상태도 있다. 거기에 로그인 되지 않았을 때 볼 수 있는 페이지와 로그인 하고 들어오는 페이지의 레이아웃이 완전 다르고 계정의 상태에 따라 또 레이아웃이 달라지고 있는 특징이 있다.
시작은 2020년 1월부터 시작되었다.
애먹고 있는, 혹은 애먹었던 점
- redux와 nextjs 를 엮는 방법
- 상태에 따른 큰 틀의 레이아웃 분기
- getInitialProps
- 레거시 서비스에 깔려있는 jQuery 로 짜여진 기능과 애니메이션 등을 바닐라JS 와 CSS 애니메이션으로 모두 바꿔야 하는 것.
- react Hooks
redux와 nextjs 를 엮는 방법
사실 이 문제는 이제 해결이 되었다. 따지고 보면 세팅에 해당되는 문제이다보니 고생은 많이 했지만 한번 해결하면 별로 손댈 일이 없다. 이 이슈로 인해 사놓은 리액트 관련 인강을 엄청 본 것 같았다. 책도 엄청봤다. HOC나 그런 개념이 전무한 상태에서 connect 함수니 useSelector 로 엮고 하는 그런 개념이 받아들이기 참 어려웠다. (그래서 부지런히 공부를..) 그런 상황인데 인강이나 책을 봐도 어느 부분은 connect 함수로 설명하다가 어느 부분은 useSelector로 넘어가고 좀 뒤죽박죽인 경우가 생겨서 이해하는데 꽤나 시간이 걸렸다. 더 큰 문제는 보통의 예제들이 대부분 CRA 같은 리액트 기반의 작업을 할 때 위주로 되어 있는데 NEXTjs 가 끼어들면 얘기가 또 달라진다.
아무튼 이때 고생을 많이 해서 그런지 오히려 미들웨어를 도입할 때는 쉽게 해결되었다.
상태에 따른 큰 틀의 레이아웃 분기
이 역시도 꽤나 까다로웠다. NEXTjs 가 끼어들면 document.js 와 app.js 라는 녀석이 등장한다. (둘 다 pages/ 바로 밑에 언더바를 앞에 붙이고 있다. 여기서 언더바를 넣으면 이탤릭이 되어서 생략) 어떻게든 이 녀석들에게서 부터 상태에 따른 레이아웃 분기를 해야하는데 이때도 엄청 고생했다. 아마 보통회사 같았으면 짤렸을지 모른다. 결국 해결하긴 했는데 까먹기 전에 한번 더 살펴봐야 한다.
왜 이것때문에 고생을 하게 되었냐 하면 로그인 전과 후에 따라 보여주는 화면이 천차만별이고 심지어 계정의 권한에 따라서 또 다른 레이아웃을 로딩해야한다. 그리고 404페이지의 경우도 또 레이아웃이 완전히 다르고 로그인 전의 홍보페이지나 이벤트 페이지도 또 다르다. (죽여라..)
getInitialProps
사실 이건 포기했다. 초기에 로딩할 때 한번 쓰고 그 후의 페이지들에선 안쓴다. 뭘하는 녀석인지는 알겠는데 내가 어떻게 써야할지 잘 모르겠다.
레거시 코드 이식하기
이건 별도의 포스트를 작성할 예정인데 jQuery 가 얼마나 속편하게 쓸 수 있었는지, 그래서 바닐라JS를 게을리한 죄를 혹독하게 받게 되었다. 전담 퍼블리셔가 디자이너 출신이다 보니 온갖 애니메이션과 효과를 넣어놓았는데 상황에 따라 다 완전히 이식하지 못하는 것도 있다.
react Hooks
처음에 개념이 생소하지만 배우고 나면 이만큼 편한 게 없더라. 다만 useEffect 를 사용하는 도중 페이지를 벗어날 때(즉, unmount 할 때) 뒷처리를 하는 개념을 슬쩍 듣고 지나갔다가 개발단계에서 엄청난 에러를 내뿜는 것을 보고 다시 책을 열심히 봤던 기억이 있다.
향후 남은 과제
우리 서비스는 화면에 뭔가를 그리는 것이 많다. 그리고 그것들을 드래그하고 비디오처럼 재생하고 멈추고 앞으로 뒤로 가고 그러는 내용이 많다.(죽여라..) 역시나 다 jQuery 기반의 이벤트로 작성되어 있는데 이걸 다 옮겨야 한다. 그리고 현재 인증과 관련된 토큰을 localStorage에 저정하고 있는데 (만료는 24시간) 이걸 쿠키로 옮기는 작업을 해야한다. 근데 쿠키는 오래되긴 했지만 그래서 그런지 사용법이 localStorage 만큼 깔끔하지 못하다.
더 기억이 가물가물 해지기 전에 케이스별 포스팅을 다시 남기도록 하겠다.
