(이 글은 이전 블로그에서 백업한 글을 불러서 가공한 글입니다. 원글의 작성 시기는 대략 2020년 6월쯤이고, 이 프로젝트를 진행한 시기는 2020년 5~6월 약 한 달간입니다.)
MERN stack 게시판 연습 프로젝트의 시작
이 프로젝트의 시작 계기는 react 연습이었습니다. JS ES6 문법공부까지 마치고 electron 앱 만들기 프로젝트를 진행하고 나서 비록 초보 수준이지만 js에 대해 어느 정도 자신감이 붙었고 이제 react를 공부해야겠다는 생각을 가지고 velopert 등 유명한 무료 강의들을 찾아서 공부를 진행했습니다. 한 이틀 정도 그렇게 react를 공부하고 나니 진도는 나가는데 머릿속에 남는 것이 없이 붕 뜨는 기분이 들어서 가볍게 게시판 프로젝트를 해야겠다는 생각을 했습니다. 비록 작은 프로젝트더라도 내 힘으로 하나 완성하고 나면 많은 것이 숙달되는 느낌을 받기 때문입니다. 그런데 이것을 서버에 연동해서 하고 싶었습니다. 그래서 같은 js로 해결할 수 있는 node.js를 사용하자고 생각했고, node.js와 잘 어울리는 데이터베이스가 뭐가 있는지 구글링 하면서 찾아본 결과 mongoDB에 대한 강력 추천글이 많이 있어서 mongoDB를 데이터베이스로 선택했습니다. 이렇게 해서 MERN stack이 뭔지도 몰랐지만 본의 아니게 MERN stack 게시판 프로젝트를 시작하게 됩니다.
사용기술: HTML, CSS, SASS, Javscript ES6+, Ajax, React, Redux, Babel, Webpack, Node.js, Express, Mongoose, MongoDB
바닥부터 환경 세팅을 하다.
저는 이상하게도 뭐든지 외부 소스의 도움 없이 혼자 만들고 싶어 하는 경향이 있습니다. 그래서인지 이번 프로젝트에서는 CRA(create-react-app)를 이용하지 않고 바닥부터 내 힘으로 환경설정을 하고 싶었고 실제로 그렇게 했습니다. babel과 webpack 그리고 필요한 모듈들에 대해 정보를 모았고 나름대로 정보를 수집했다고 판단한 뒤로는 하나씩 모듈을 설치하면서 세팅을 했습니다. react와 redux관련 필요한 모듈들을 설치하였고, babel, webpack의 필요한 플러그인들을 설치하였습니다. 그리고 서버 쪽에서 사용할 express와 mongoose 그리고 관련 모듈들을 설치했습니다.
첫 번째 좌절 - 테스트 코드
프로젝트를 시작할 때 누군가에게 TDD라는 용어를 들었고, 그 개념에 대해 찾아봤습니다. 처음에는 명쾌하게 와 닿지 않았지만 하루정도 검색을 하고 찾아보니 어떤 개념인지 대략 감이 왔고 테스트 코드를 어떻게 작성할지에 대해서도 초보 수준이지만 그 당시에는 나름대로 구상을 했습니다. 그래서 jest와 react-testing-library의 예시 코드에 대해 유튜브 영상을 몇 개 찾아보고 연습하였고 이 프로젝트에서 TDD를 적용하려고 했습니다.
처음에는 회원가입 폼부터 만들고 있었는데 당시 테스트 코드로 렌더링 테스트를 TDD로 진행해서 했습니다. 그러고 나서 비동기 처리 코드와 redux 상태 관리에 대한 테스트를 진행하려고 하는데서 상당한 어려움과 막막함을 느꼈습니다.
자기 합리화일지도 모르지만 프로젝트를 시작할 당시 저는 react, redux, express, mongoDB 이 모든 기술이 생처음이었고 테스트 코드를 짤 당시에는 redux의 패턴 자체도 제대로 모르던 상태였습니다. 결국 redux에 대해 제대로 된 패턴을 잡는 것도 벅차다는 사실을 깨달았고 TDD와 테스트 코드는 이번 프로젝트에서는 욕심이라고 판단하여 테스트 코드를 일주일 만에 제거하게 됩니다. 당시에 정말 너무 분하고 아쉬웠지만 역량을 더키우고 오자고 다음을 기약하기로 합니다.
묵묵히 진도를 나가다.
세팅을 하는 것과 테스트코드를 만드는 것에 열흘 정도의 시간을 보내고 나니 이 프로젝트에 너무 시간이 끌리고 있다는 생각을 하게 됩니다. '시작부터 부족한 게 이렇게나 많이 발견되는데 프로젝트 끝날 때까지 얼마나 많은 부족함이 발견될까?'라는 생각에 우선은 이 프로젝트를 최대한 빨리 끝내고 앞으로 해야겠다고 느낀 공부들을 빨리 시작해야겠다는 생각을 하게 됩니다. 그렇게 묵묵히 진도를 나가면서 회원가입, 로그인, 세션, 비밀번호 재설정, 메일 발송, 내 정보 관리 등등을 만들고 게시글의 CRUD를 구현하기 위해 글 편집기를 찾아보게 됩니다. 그렇게 위지윅 에디터라는 존재를 알게 되고 여기서 또 한번 어려움을 겪습니다.
오픈소스의 커스터마이징이 어렵다는 것을 깨닫다. - 위지윅에디터
적용하려고 시도한 위지윅 에디터는 draft.js와 CKEditor입니다. 이 중 draft.js는 커스터마이징에서 어려움을 느껴서 금방 흥미를 잃고 적용하기 쉬운 다른 에디터를 찾았고 그렇게 찾은 것이 CKEditor입니다. 그런데 이 CKEditor를 기본 설정으로 적용하는 것은 몇 분이 채 걸리지 않았지만 그 이후 플러그인 설정이나 IE 크로스 브라우징 이슈에는 상당히 애를 먹었습니다. 이때 많이 느꼈던 건 '인터넷에서 보면 남들은 소스코드 복붙 하는 것을 아래로 취급하는 것 같은데 나는 왜 남의 코드를 가져다 쓰는 데에 조차도 어려움을 느낄까?' 하는 좌절감이었습니다. 오픈소스 API는 내부구조를 까 보기 전에는 어떻게 동작하는지 잘 모르기 때문에 커스터마이징에 굉장한 어려움을 느끼게 되는데 이것을 돌파할 역량은 무엇일까? 하는 생각이 들었습니다. 내린 답은 막연한 얘기인데 역량을 키워 소스코드를 까 보는 데에 대한 담력을 지니자는 것이었습니다.
성능을 신경 써보게 되다. - 계층형 무한 대댓글 구현
계층형 무한 대댓글 구현을 자료구조니 알고리즘을 아무것도 신경 안 쓰고 그냥 뇌가 생각하는 대로 로직을 막 작성했습니다. 정말 당시에는 기능 구현에만 급급했던 것이었습니다. 그러나 인터넷으로 조언을 구했을 때, 계층형 무한 대댓글 구현을 위해 자료구조를 뭘 썼냐는 질문에도 대답을 못했고, 순회 알고리즘을 적용하라는 조언을 받았습니다. 이때 웹 개발에서 자료구조, 알고리즘이 정말로 쓰인다는 것을 깨달았고 트리 자료구조와 순회 알고리즘을 공부하여 코드를 완전히 새로 바꿨습니다. 그 결과 실행시간이 3배 단축되었고, 에러나 버그도 없어서 매우 만족하는 성과를 거뒀습니다.
배포
예전에 웹 개발을 공부해야겠다고 마음먹기 전에 html과 rails만 가지고 간단한 웹페이지를 하나 만들어 heroku에 배포한 적 경험이 있어서 그 경험을 되살려 배포를 하는 데에는 어려움을 겪지 않았습니다. 사실 AWS를 공부해서 AWS를 사용할 계획이 있었지만, 이미 이 프로젝트를 하면서 너무 많은 기술들을 새로 접했고 그것들을 제대로 소화하고 다음 단계로 나아가고 싶은 마음이 앞섰기 때문에, 지금은 어서 빨리 프로젝트를 끝내고 AWS 사용은 다음으로 미루기로 합니다.
주요 경험 & 성과
- MERN Stack을 이용한 웹 개발 경험
- MERN Stack 개발환경 세팅
- Ajax와 상태 관리 등 비동기 코드를 Promise와 async/await을 이용해 다룸
- redux 상태 관리에 대한 이해
- react 생명주기 함수에 대한 이해
- react-router와 SPA에 대한 이해
- SASS를 적용하여 유지보수를 강화한 CSS 코드 작성
- 오픈소스 API CKEditor 적용
- 트리 자료구조와 순회 알고리즘을 적용한 계층형 무한 대댓글 기능 구현
- 세션에 대한 이해와 적용
- 웹사이트 배포와 커스텀 도메인 등록
- git/github를 통한 버전 관리와 백업 경험
그리고...
- 프로젝트를 진행하면서 앞으로 공부해야겠다고 느끼고 계획한 수많은 투두 리스트...
향후 과제
우선 클린 코드에 관련하여...
정말 기능 구현에 급급했던 프로젝트였습니다. 소스코드가 너무 부끄럽기 그지없었습니다. 뒤늦게 나름의 리팩터링 방법 들을 찾아서 진행했고, 특히 명명규칙을 많이 수정하게 되었습니다. 그래도 아직 부족한 게 많다고 생각하고 앞으로도 클린 코드에 대해 더 관심을 가지고 공부를 해야겠다는 생각을 했습니다.
프로젝트 중에 렌더링 최적화 부분을 검색하면서 react hooks라는 존재를 알게 되었고, 유지보수성과 가독성이 좋아서 최근에 많이 사용된다는 것을 알았습니다. 그래서 hooks에 대해 공부를 할 계획입니다. 또한 리액트 컴포넌트와 상태 관리의 설계를 어떻게 하는 것이 좋을지 그 방법론에 대한 고민과 공부를 할 것이고, 렌더링 최적화에 대해서도 어떻게 패턴을 잡는 것이 효율적인지 더 공부를 해봐야겠습니다. 그리고 중간에 포기했던 테스트 코드 작성법에 대해서도 공부를 해보고 TDD 방법론에 대해서도 공부를 해볼 계획입니다.
최근댓글