넘블에서 진행되는 챌린지를 했다.
내가 진행한 챌린지는 바닐라 자바스크립트만을 이용하여 만드는
간단한 싱글페이지 구현이었다.
가이드라인/요구사항/피그마제공/백엔드API 등등
필요한 소스들을 모두 제공해주어서 편하게 사용만 했다. ㅎㅎ
또한 디스코드를 통해 질문/답변 피드백을 바로바로 받을 수 있었다.
프로젝트 구조 📁
apis 폴더는 넘블에서 제공되는 백엔드API에 직접적으로 요청하고,
결과값을 가져오는 함수들이 있는 폴더이다.
controllers 폴더는
실제 사용자 요청에 대한 처리를 하는 함수들이 있는 폴더이다.
ex) Post(글)
PostController: 글과 관련된 핸들러 (CRUD)
ex) Comment(댓글)
CommentController: 댓글과 관련된 핸들러 (Create/Delete)
frontend 폴더는 프론트단(브라우저)에서 사용되는 sass/js 파일을 담은 폴더다.
해당 폴더는 webpack을 사용하여 압축해 배포하였다.
routers 폴더는 사용자의 요청 URL을 미리 그룹화해놓고,
해당 요청에 실행할 Controller를 알려주는 폴더이다.
나는 POST(글), COMMENT(댓글) 두개로 그룹화했다.
ex) Post(글)
/post/:id: 상세 글 페이지 요청에 대한 처리
/post/create: 글 생성 요청에 대한 처리
/post/delete: 글 삭제 요청에 대한 처리
ex) Comment(댓글)
/comment/create: 댓글 생성 요청에 대한 처리
/comment/delete: 댓글 삭제 요청에 대한 처리
utils 폴더는 서버단에서 사용되는 공용 및 외부 함수들이 있다.
views 폴더는 실제 사용자에게 응답할 HTML 코드가 있는 폴더이다.
PUG 뷰 엔진을 사용했기 때문에 PUG 파일이 있다.
server.js는 Express 프레임워크로 생성한 서버 관련 코드들이 있다.
기존에 Express/MongoDB/Heroku 등을 갖고 프로젝트를 만들었었는데,
다시 Express를 공부하게 된 계기가 되었다.
서버 구축은 유명한 프레임워크인 Express를 사용하였다.
최신 자바스크립트로 프로젝트를 진행하기 위해 BABEL을 사용하였고,
SASS를 이용해 스타일링하기 위해 webpack을 사용하였다.
원래 알림창(오류 시)을 express.flash를 사용하려고 했었는데,
로그인 기능이 없는데 세션을 굳이 사용해나 싶었다.
그래서 SweetAlert2 라이브러리를 사용하여 알림창 구현을 하였다.
무한 스크롤보다 lozad 라이브러리를 사용하여 lazy-loading을 구현해보았다.
배포는 넘블에서 지원하는 네이버클라우드를 사용하여 배포하였다.
제일 많이 헤맸던게 배포였던 것 같다. ㅎㅎ..
배포할 때 pm2라는 라이브러리를 알았는데, 신세계인거 같다.ㅋㅋ
더욱 더 편하게 서버를 관리할 수 있을 것 같다.
다른 분들의 코드를 보면서 SPA라는 개념을 내가 제대로 이해하지 못하고 프로젝트를 구축한 것 같다. 나 같은 경우에는 Express 뷰 엔진을 사용하였고, PUG를 사용하였다. 미리 베이스파일(PUG)을 만들어두고, Express 라우팅을 통해 각 URL 요청에 따라 베이스파일+라우팅에 따른 파일(PUG)을 사용자에게 응답했다.
그렇기 때문에 views라는 폴더가 생겼고, 그 안에 많은 뷰 템플릿들이 있었다.
좀 더 검색해보고, 고민했으면 더욱 SPA스럽게 만들 수 있지 않았을까하는 생각이 들었다. '기존에 했던 기술을 사용하면 되겠다'라는 안일한 생각으로 프로젝트를 진행한 것 같았다.🥲
