이 글의 졸업작품 <a Little bit!>은 시각디자인과 졸업작품으로, 컴공 졸작으로 흔히들 진행하는 머신러닝, IOT 등 매우 공대스러운 주제와는 조금 결이 다르다. 인터랙션에 집중한 인터랙티브 웹 프로젝트였다.
🖥 작품 링크 : http://www.alittlebit.kr
미대 졸전에서 개발을 주력으로 하게 된 이유
원래 본전공 졸업프로젝트는 하반기에 있을 복전 졸작을 위한 아이디어 및 디자인을 목표로 작업해야겠다고 생각하고 있었다. 그리고 복수전공 졸업프로젝트에 올인할 생각이였다.
그러나 학기가 시작되고 보니 담당 교수님은 취준에 대한 엄청난 열정을 가지고 계셨고^^피할수도 없고 이러다간 얼레벌레 디자이너 취준생이 될까봐 교수님께 진로에 대해 솔직히 말씀드렸더니, 디자인 할 친구들이랑 같이 팀으로 작업하고 직접 구현까지 해서 포트폴리오로 쓰라는 조언을 받고 시각디자인 졸작도 어쩌다보니 팀을 꾸려 개발을 담당하게 되었다.
웹 개발 경험이라고는 방학 때 진행한 첫 사이드프로젝트 뿐이였고 정말 html,css,javascript만 알고있는 상태였는데 아무래도 디자인을 하는 친구들과 함께하다보니 아이디어의 재미와 비례하여 점점 구현 난이도가 높아져가는 것 같은 느낌에 정신이 아찔했다..
그치만 어쩌겠나 원래 졸작이 힘들건 누누히 들어서 예상했고, 어차피 이 일을 업으로 삼기 위해선 늘 부딪혀야 하는 과정이겠거니 생각하고 천천히 배워가며 만들어 보기로 마음 먹었고 결국 해냈다.
배워가는 과정에서 알게 되었던 지식들도 많아졌는데, 그래서 그런지 아쉬운 점도 많고, 뿌듯한 점도 많다. 그래도 아무것도 모르는 밑바닥부터 리액트에 대해 배워가며 이 작품을 만들어낸 과정에 대해 스스로 칭찬하며 배운점과 아쉬웠던 점을 기록해보고,아쉬웠던 점은 계속해서 발전시켜 나가보려 한다.
React를 쓰게 된 배경
위에도 말했다시피 따로 프레임워크를 사용해본 적이 없었다. 학과 수업만 열심히 들었지 제대로 된 프로젝트를 시작하게 된 게 고작 반년도 채 안되었던 시기였기 때문에, 써본 프레임워크는 백엔드의 python 장고 뿐이였고, html,css,js만 이용해서 화면 페이지를 구현해본 경험 뿐이였다.
그러나 우리 프로젝트는 아주 많은 인터랙션을 담아야 했고, 이 경우 js만으로 구현하면 DOM 조작이 어마무시하게 많고 반복되는 코드도 엄청 많아질 것 같았다.
마침 안그래도 이전부터 계속 react를 사용해보고 싶어했고, 니꼬쌤의 영화 웹사이트 만들기 강의와 hooks 강의로 얕은 지식만 가지고 있던 상태였던 나는 react의 useState나 그런 hook들을 사용해서 인터랙션을 구현하고, 반복적으로 사용되는 요소들은 컴포넌트로 구현하면 훨씬 더 깔끔하고 편리하게 구현할 수 있지 않을까 라는 생각으로 react를 쓰기로 마음먹었다.
node.js 도전
백엔드가 주력이 아니라 그냥 경험이 있는 장고를 쓸까 고민하다가 이전부터 눈여겨 보던 node.js의 특징들이 이 프로젝트 개발에 적합하다는 판단이 들어 도전하게 되었다.
일단 첫번째로, 우리 프로젝트는 서버단에서 처리해야 할 로직이 크게 복잡하지 않았다. 단순히 데이터를 db에 저장, db의 내용을 가져오는 것, 쿠키를 저장하고 가져오는 것, 방문자 수를 세는 것, db의 데이터 검색이 전부였기 때문에 단일 쓰레드 이벤트 루프,비동기 기반의 동작방식인 node.js가 오히려 더 쉽고 빠르게 구현할 수 있을 것 같다는 생각이 들었다.
또 인터넷에 react와 node.js express를 함께 사용해 프로젝트를 구현한 참고자료들이 많았기 때문에 처음으로 혼자 클라이언트단,서버단 연결부터 모든 것을 구현해야하는 나에게는 이 방식으로 하는게 좀 더 안전한 방향인 것 같다는 생각도 들었다.(이 과정에서 next.js를 이용할까 고민도 많이 하며 CSR,SSR 방식에 대한 차이도 공부할 수 있었다. 추후 정리해야지)
사소하지만 배운 것들
- 서버쪽 로직을 구현하고 클라이언트쪽 로직을 구현해 클라이언트쪽에서 서버쪽으로 데이터를 요청하고 받아와 처리하는 그 일련의 과정들. 막연하게 서버와의 통신..Axios..Ajax..비동기..이런 것에 대해 왠지 모를 두려움이 있었다. 그냥 어려워 보였달까..근데 막상 해보니 그리 어려운 개념이 아니였다! 물론 더 깊게 들어가면 어려울 수도 있겠지만, 괜히 지레 겁먹고 있지 말고 일단 부딪혀서 모르는 부분은 배워가면 되겠다는 마음가짐을 다시 한번 되새기게 되었다.
- React에서 권장하는 처리 방식들. 예를 들면 DOM 조작을 직접적으로 하는 것을 권장하지 않는다던가 그런 것들을 이런저런 오류와 부딪히면서 배울 수 있었다.
- 대표적인 3개의 hook인 useState, useRef, useEffect를 사용하는 법과 왜 사용하는지, 어떤 상황에서 사용하는지를 애매하게 이해한 상태였는데, 프로젝트를 통해 다시 제대로 이해한 것 같다.
- 라이브러리를 적극적으로 이용해 기능 구현하는 법
- github project를 이용해 진행 관리를 했다. 자주 쓰이는 것 같진 않지만 혼자 프로젝트를 할 때 유용한 것 같다! 원래는 메모장에다가 구현할 내용을 쭉 적고 하나씩 체크했는데, 그러다 보니 이슈가 추가적으로 생길 때 다시 추가하고 이런 게 조금 불편했다. 그러다가 우연히 github project를 알게 되었고, 이후부터는 깃헙에서 이슈로 등록하고, 이슈를 하나씩 체크하는 방식으로 진행하며 github 내에서 프로젝트를 진행했다. 옆에 reference 탭도 만들어서 미리 찾아둔 레퍼런스들도 한 곳에 모아두니 훨씬 편하게 작업할 수 있었다.
- 백엔드쪽 로직, 어렵지 않은 기능들이였지만 그래도 백엔드를 어떻게 구현하는지 확실히 직접 구현하다보니 그 방식을 이해했다.
- 구글링 능력 향상^^
- 쿠키,세션의 차이. 둘 중 어느것을 이용할까 고민하면서 리서치하면서 둘의 차이를 이해하게 되었다. 나중에 cs개념 정리하면서 같이 작성해놔야겠다.
아쉬운 점
한정적인 시간 않에 많은 페이지를 구현해야 했기 때문에 빠듯해서 코드 정리를 잘 하지 못한 것 같다. 처음 나의 포부는 반복되는 코드 사용률을 줄이고 더 깔끔한 코드를 짜고싶어서 React를 선택한 것이였는데, 맘처럼 잘 동작하지 않았다.
특히 테스트를 구현하는 과정에서 하나의 컴포넌트로 테스트를 구현할 수 있을 것 같았는데..잘 되지 않는 채로 대략 3주가 넘는 시간을 소모하면서 이대로는 안되겠다 싶어 일단 다음 단계의 구현을 진행하기 위해 반복적인 코드를 작성하게 되었다. 이 부분이 너무 아쉬워서 1차적으로 전시 오픈을 끝냈으니 작품이 잊혀지고 사용자가 빠져나갈때 쯤 부터 리팩토링을 시작하려고 한다.
또 같은 디자인의 버튼도 계속 똑같은 내용을 반복해서 css에 입력하다보니, 이럴 필요가 없는데?라는 생각이 들었다. 이 부분도 컴포넌트로 변경해서 구현을 다시 해보려 한다.
사실 초반에는 props도 어떻게 쓰는지 잘 모를정도로 지식이 부족해서..진행 과정에서 알게된 이런 지식들을 초반에 구현했던 부분에 반영해서 더 보완하고, 다음에는 redux도 도입해서 상태관리를 좀 더 철저히 해보고싶다.
추가적으로 배포 역시 급하게 진행하느라 세세한 부분을 신경 못썼는데, 배포 후에 생기는 오류들을 처리하다보니 로컬에서 처리하고 다시 반영하고 이런 부분들이 불편했다. 왜 배포과정을 자동화 하는지 알 것 같았다. 나중에 이 부분도 자동화 시켜서 개발 환경을 좀 더 발전시켜야겠다.
