intro
온라인 강의를 들으며 js로 풀스택을 경험해보는 챌린지를 시도했다. 중간중간 과제를 받으며 최종 웹사이트 완성까지 완주하여 해당 경험을 기록하는 게시글이다.
사용 기술
front-end: pug, webpack(scss, js)
back-end: node.js, express, mongoDB
구현내용
- github 로그인 구현
- 비디오/이미지 업로드
- 로그인/로그아웃 구현 - 코멘트 구현
- 비디오 검색기능 구현
회고록
본 글은 강의를 듣고, 챌린지(온라인 부트캠프)를 6주간 수행하면서 따라 치지 않고 스스로 작성해 클론 코딩을 완성시키고 나서의 회고록이다.
기간이 조금 지나서 흐릿하지만 최대한 적어보겠다.
youtube clone coding을 시도한 이유는 javascript로 백엔드까지 돌린다는 게 믿기지 않아서였다. javascript는 프론트에서만 사용해봤기 때문이었다. 그래서 javascript로 어떻게 백엔드를 돌린다는 거지? 궁금증이 생겨 수강 신청했다.
물론, 순수 javascript라고 하기엔 NodeJS를 사용하는 것이지만, 파생된 곳은 javascript이므로 틀린 말은 아니다.
Node.js는 자바스크립트 런타임으로 Node.js로 웹 서버를 만들 수 있다. Node.js 자체는 웹서버가 아니고, Express 같은 라이브러리를 이용해서 서버 개발이 가능하도록 해주는 환경이다.
express를 사용해 백엔드를 구축하고, 전반적인 프로세스에 대해 알게 되었다. req, res 있다는 걸 그때 처음 알았고, res.render()을 통해 Pug template을 프론트로 보내는 법도 배웠다.
html 파일을 sendFile을 통해 바로 렌더링 할 수 있다고 하지만, request를 통해 각종 변수를 전달하지 못한다. pug template을 사용하는 이유는 header, footer 등의 partial로 만들어 관리하고 파일에 첨부할 수 있기 때문이다.
데이터 베이스는 MongoDB를 사용했다.
MongoDB는 다목적용, 문서 기반의 데이터베이스이다. 사용하기 편리하고 javascript와 유사해서 초보자들도 쉽게 이해 가능하며 간단하게 작동할 수 있다. MognoDB는 JSON-like-document로 행으로 된 데이터를 저장할 필요가 없고, 데이터를 오브젝트로 생각한다. javascript를 사용하는 사람들에겐 좋은 거 같다. 더불어, document 내부를 검색, 삭제, 수정, 생성할 수 있어서 큰 이점이 있다.
MognoDB를 활용하여 로그인/로그아웃/검색/코멘트 생성 등을 구현했고, 자세한 내용은 블로그에서 확인할 수 있다. 생성하는 것은 생각보다 어렵지 않았다. model을 만들어 필요한 것들을 가져다주고 생성하면 끝이었고, file을 백엔드로 전송하는 게 더 어려웠다. multer을 사용해서 middleware를 통해 req.file로 받았다.
GitHub 로그인을 구현하는 것도 어려웠던 거 같다. GitHub의 공식 문서에 맞춰 사이트를 옮겨다니며 액세스 토큰을 발행하고 user의 정보를 가져온다. 구글 로그인이 더 복잡하다고 들었는데, 언젠가는 카카오나 구글도 시도해보고 싶다.
백엔드 부분을 완성하고 나서 프론트를 만졌다. 아직까지는 백엔드에서만 javascript가 돌아가고 있고, 프론트에서 javascript를 돌리기 위해 webpack을 사용했다.
백엔드에서 최신 javascript를 사용하기 위해 babel node를 추가적으로 설치했다. babel node는 최신 문법의 javascript를 node.js도 이해할 수 있는 옛 코드로 변환해준다.
webpack은 babel node가 하는 역할이랑 동일하다. 깔끔한 css/js를 쓰면 모든 브라우저에서 인식 가능한 오래된 기본 문법으로 바꿔준다. 그러나 강의에서는 webpack을 직접 사용하는 경우는 없을 거라고 말했다. 리액트를 배우거나 대부분의 프레임워크에서는 이미 설정되어 있어 건드릴 필요가 없다.
따라서 세련된 코드를 사용하고, 그걸 호환가능한 기본 문법으로 바꾸는 법을 배웠다. babel node는 설치하고 babel.config.json 파일을 만들어 복사-붙여넣기를 하면 끝났었는데 webpack은 작성해주어야 할 게 많아서 babel보다 어려웠다. 나중에 더 자세히 공부해보고 싶은 부분이다.
다음은 배포 파트이다. 전체 프로세스를 통틀어 제일 어려운 파트가 무엇이냐 물으면, 배포라고 답하겠다. 개발 환경에서는 나지 않던 오류가, 배포로 넘어오면 수십가지의 이슈로 돌아온다. 강의에서는 수월하게 넘어가지만 나는 강의에서 보지 못했던 오류도 보았다. 구글링을 해도 해결되는 게 없었고, 주의해야 할 점을 보며, 다시 체크했지만 오타나 틀린 부분도 없었다.
당시에는 프로젝트를 완성하고 제출해야하는데, 이걸 반쯤 포기했던 거 같다. 꽤 억울했다. 배포 오류를 해결하지 못해 제출하지 못하다니, 오기로 이것저것 건드렸다. 오전 3시까지 노력했고, 결론적으로 배포에 성공하여 제출했다.
문제가 된 것은 npm install이 안된 패키지가 있었다. 정확히는 개발 환경에서 사용 가능하지만 배포로 넘어오면서 module을 찾지 못해 생겨난 것이다. 이러니 내가 어떤 걸 해도 해결되지가 않지... 이미 json 파일에는 설치가 되어 있다고 적혀있고, 울며 겨자 먹기로 하나하나 설치해 deploy하니 성공한 것이다. 다음에는 배포 이슈를 정리해서 기록해놓아야겠다.
프로젝트를 진행하며 경험하고 어려웠던 점을 회고하면서 글을 마친다.
