조심해야 하는 삽질

가끔은 오랜 삽질은 오랜 삽질로 끝난다

웹서비스를 개발 중이다.

view는 React.js로 data flow design 은 Redux.js를 적용 중에 있다. 개인적으론 Redux를 처음 써 보는지라 기대하며 사용 중에 있지만, 익숙지 않은 부분이 있어 여기저기서 고생 중이다. 

Redux.js

Redux에서 HTML Form을 굉장히 편하게 쓸 수 있는 Redux Form이라는 라이브러리가 있다. 

Redux Form 두둥!

일일이 form 만들어 주고 각각의 이벤트를 직접 구현할 필요 없이 웬만한 기능은 다 built-in 되어 있어 편하다. 다만, react-router와 비슷하게 최근 들어 버전 업데이트가 크게 되어 (v5 -> v6) 기존에 v5로 공부했던 나는 v6 migration 작업을 하는데 애 먹었다. react-router 도 그렇고 큰 버전 업데이트마다 이전 버전 호환이 안 되는 문제가 있어 골칫거리다. 물론 업데이트가 되면서 분명 더 편해지는 점이 분명 있어 업데이트를 안 하고 마냥 old version을 유지하는 것도 답은 아니기 때문이다. (물론 js 커뮤니티에서는 여전히 old version을 고집하시는 경우도 있다.) 서비스가 이미 커진 거대한 서비스일수록, 이런 버전 업데이트에 대한 적용 결정은 생각보다 고민이 좀 될 것 같다. 배포가 된 코드가 여러 디버깅을 통해 잘 돌아가는데 업데이트를 해서 배포하면 솔직히 잠 못 잘 것 같다. (물론 테스트는 배포 이전에 충분히 해야겠지요!) 

react 전용으로 나온 semantic-ui-react를 사용하고 있다. 깔끔한 디자인으로 semantic-ui 가 최근 주변 많은 사람들에게 사용되고 있다. 

개인적으론 google 의 material-ui 의 깔끔함, 그리고 bootstrap과 같은 신뢰감이 동시에 보이는 것 같아서 매우 맘에 든다. 

문제는 react & redux와 함께 Semanti-UI를 사용하기엔 나름대로의 또 삽질이 좀 필요했다. 언제나 example code가 많이 없을 땐, 직접 공식 문서와 함께 부딪혀 보는 수밖에 없다. (나와 달리 고수일 수록 그냥 공식 문서에 의존해서 만든다고 합니다. ㅜㅜ) 

본론은 어제 그제, 아래와 같은 회원가입 컴포넌트를 만드는데 아주 긴 삽질을 했다는 것이다. 

위 내용은, email을 입력하지 않았거나, email을 정확한 포맷으로 입력하지 않았거나, 비밀번호를 입력하지 않았을 때, 아래에 경고 메시지를 띄워주는 redux form sync validation 작업이다. validate이라는 함수를 따로 만들어 주고 signup form 컴포넌트에 middleware와 같이 끼워서 사용해야 하는데, 정확히 어떻게 사용되는지를 몰라서 이틀간 많이 많이 많이 삽질을 했다. 

더 힘들었던 이유는 경고 메시지가 잘 나오다가 무얼 바꿨는지 갑자기 안 되는 것이다. console.log를 아무리 찍어봐도 내가 원하는 값들이 찍혀 나오지 않았다. 코드 스플릿을 괜히 했나 해서 다시 되돌려 하나의 js 파일에 몰아넣어보기도 했다. 전혀 상관이 없었다. 귀신이 곡할 노릇이었다. 너무 스트레스받아서 어제는 1시간을 채 못 잤다. 

부트캠프를 함께 수강했던 실력자 YG님을 오늘 오랜만에 만났다. 잠시 내 코드를 좀 봐달라고 애원했다. YG는 코드를 잘 살펴보더니 이것저것 콘솔을 찍어보기 시작했다. 2-30분을 잠시 콘솔을 찍어보며 살펴보더니, 역시 명석한 YG는 문제를 발견해 내었다. 

 

문제의 부분 validate key

위 표시된 validate이라는 object key 가 나는 임의로 내가 바꿔 사용해도 되는 줄 알고 ES6 shorthand로 그냥 validateSignup으로 사용해 버렸다. ES5의 validateSighup: validateSignup과 같은 코드다. 

그래서 안 되었던 거다. Redux Form 라이브러리에서 import 한 reduxForm() 함수는 임의의 validate함수를 key로 받는 게 아니라 무조건 정확히 오직 'validate'이라는 key 만으로 사용이 가능했던 것이다!! 

이 문제는 내가 하루를, 이틀을 더 쓴다 한들 찾아내기 어려운 문제였을 거란 생각에 공포스러워 몸이 떨렸다. 공식문서를 봐도 아래와 같이 나와있어 validate key를 바꿔서 넣어도 상관없는 것처럼 보였기 때문이다. (나만 그런가..)

YG에게 나의 이틀을 구해준 의미로 나중에 밥을 사기로 했다. 이틀 더 삽질한들, 나 스스로는 못 밝혀내는 문제일 가능성이 농후한 녀석이다. YG도 예전에 redux 사용할 때 고생했던 부분이라고 했다. 어제는 이 문제를 풀지 못해 얼마나 우울했던가. 잠을 못 자서 매우 피곤함에도 불구하고 굉장히 다행스러웠다. YG 만세. 

개인적으론 삽질을 하며 코딩 실력이 아-주 조금씩 조금씩 늘어나고 있다. 그런데 가끔은, 결코 오랜 시간을 쏟아서는, 너무 많은 시간을 버리면 안 되는 삽질의 종류가 있다. 이번 경우가 그러하다. 

아무리 생각해도 잘 모르겠는 코드에선 너무 많은 시간을 허비하지 말고 주변에 종종 물어보고 넘어가야겠다. 생각보다 금방 해결되는 문제들이 있기 때문이다. 물론, 종종 홀로 꽤 많은 시간을 투자해서(삽질해서) 알아내고 경험이 되는 경우가 있지만, 가끔은 결코 삽질한 시간 대비 얻어가는 게 많지 않을 때가 있다. 조심해야겠다.