Omuk

각 경로마다 라우팅을 분리하면 좋을 것 같아서 체계적으로 라우팅을 분리하고자 합니다. 먼저 기존 ./routes/index.js 의 내용을 바꿉니다. import express from "express"; const router = express.Router(); router.get("/", (req, res) => { res.render("home"); }); export default router; 이후에 메인 파일에서 아래와 같이 작성합니다. import indexRouter from "./routes/index.js"; ... app.use("/", indexRouter); 이제 /의 경로는 모두 index.js 파일에 있는 경로를 따르게 됩니다. 다음에는 HTML 기본 구조를 작성하겠습니다.

데이터 베이스 서버의 데이터를 저장하기 위해서 데이터 베이스를 연결하여 관리하도록 합니다. 데이터베이스 중에서 일단 관계형 데이터 베이스를 사용할 예정이라서 RDBMS 툴을 사용하도록 하겠습니다. RDBMS 에는 MySQL, MsSQL, Oracle, PostgreSQL, MariaDB 등이 있지만, MySQL과 PostgreSQL이 가장 사용자가 많습니다. 둘 중 어떤 것을 고를지 고민이 됐었는데, Stackoverflow survey 2022에서 Loved vs Dreaded 중 1등, want에서도 1등이었기 때문에 PostgreSQL을 공부하도록 하겠습니다. 데이터베이스 적용 1. 설치 npm i pg 2. 메인 파일 작성 여러 가지 적용 방법이 있겠지만, 공식문서를 따라가는 것이 좋다고 생각하여..

모니터링 npm i nodemon -d nodemon은 node + monitor로 노드에서의 변화를 감지하여 디렉터리 내에서 수정이 발생하면 자동으로 노드 어플리케이션을 재시작해준다. 실무가 아닌 개발 환경에서만 사용할 것이기 때문에 -d 옵션으로 devDependencies로 설치해준다. package.json 파일에서 scripts 프로퍼티의 객체안에 "start": "nodemon [메인 js 파일]" 을 추가한 다음 터미널에서 npm start를 입력하여 실행할 수 있다. 쓰다보면 ctrl + c로 서버를 닫고 다시 npm start로 여는 것보다 자동으로 재시작해주기 때문에 상당히 편리하다. 로그 언제 어디서든 기록을 남기는 것이 좋다. 콘솔에 어떤 요청이 들어왔으며, 그에 대한 HTTP 코드..

서버 사이드 렌더링 웹 사이트를 렌더링하기 위해서 두 가지 방식으로 웹 사이트를 표시해줄 수 있다. 이때, 클라이언트에서 렌더링 하느냐, 혹은 서버에서 렌더링하느냐의 차이가 발생한다. 클라이언트에서 렌더링 하는 방식을 클라이언트 사이드 렌더링(CSR)이라고 하며, 서버에서 렌더링 하는 방식을 서버 사이드 렌더링(SSR) 이라고 한다. 클라이언트 사이드 렌더링은 사용자가 원할 때마다 서버에 요청하여 데이터를 받아오는 등으로 사이트의 일부를 변경시키는 방식으로 사이트를 렌더링한다. 자바스크립트가 DOM을 통해서 HTML 을 수정하는 것 또한 CSR이다. 요즘은 React, Vue, Angular 등이 주된 기술로 자리잡았으며 React가 가장 각광받고 있다. 서버 사이드 렌더링은 서버에서 모든 것을 처리한 ..