오늘 github actions로 Node.JS 프로젝트 CI 하는 법 정리해놓은 글을 찾으러 현재 이 블로그로 이사오기 전 블로그인 티스토리 블로그를 갔는데, 티스토리 프로젝트 회고글 조회수가 비교적 잘 나와서 저번 주말에 한 프로젝트 회고를 적어본다 (이 글 조회수도 잘 나왔으면...)
프로젝트 화면은
이렇다
보면 느꼈겠지만 프론트의 비중이 매우 적다고 할 수 있다 (디자인은 몰루)
백엔드
DB는 MySQL을 사용함
테이블이 한 개라 사실 MongoDB 써도 됬을 듯하긴한데, 일단 MySQL을 사용했고 배포는 AWS RDS로 했다
API 서버는 Nest.JS + EC2 를 사용함
CRUD API 서버였는데 Nest에서 generate resource <이름> 명령어로 템플릿만들고 MySQL하고 연동하는 법을 찾아봤는데, 나오는 글이 거의 다 MySQL + TypeORM 이었다 (원래 ORM 안쓰고 쿼리문 날려왔는데 ORM을 써봤다)
근데 진심 TypeORM 까지 쓰니까 정말 편했다
프론트
문제의 프론트다
페이지가 한 개라서 React, Vue를 쓰기에는 우도할계(소잡는 칼로 닭 잡는다는 뜻)일듯하여 그냥 html 하나 만들어서 바닐라 자바스크립트로 작성했다
그러다가 서버 EC2 BASE_URL은 코드에 나와있으면 안될듯하여 dotenv 모듈을 설치하기 위해 webpack cli로 webpack 위에 html과 자바스크립트 파일을 넣어줬다
그런데 리액트에 익숙해진 나머지 오랫만에 document.getElementBy 로 DOM 선택해오고 이런 게 너무 낯설게 느껴졌다
특히 React 에서는 API 호출해온 값을 useState로 상태관리하고 있는 값에 setState로 해서 넣어주면 화면 렌더링이 되는데, 바닐라 자바스크립트에서는 어떻게 해야하지 하면서 헤맸다 (벨로그의 다양한 바닐라로 상태 기반 렌더링 글을 보면서 공부해야겠다. + 바닐라 자스 공부해야겠다...)
배포는 원래 github pages로 깃허브 브랜치만 등록해서 간단하게 하려했으나 서버 API가 https 가 아닌 http라서 mixed content 에러를 피하기 위해 AWS S3로 배포했다
하나의 프로젝트파일에서 DB접근해서 풀스택이 가능하게 해주는 Next.JS가 새삼 대단하게 느껴지네
