각 경로마다 라우팅을 분리하면 좋을 것 같아서 체계적으로 라우팅을 분리하고자 합니다. 먼저 기존 ./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. 메인 파일 작성 여러 가지 적용 방법이 있겠지만, 공식문서를 따라가는 것이 좋다고 생각하여..
서버 사이드 렌더링 웹 사이트를 렌더링하기 위해서 두 가지 방식으로 웹 사이트를 표시해줄 수 있다. 이때, 클라이언트에서 렌더링 하느냐, 혹은 서버에서 렌더링하느냐의 차이가 발생한다. 클라이언트에서 렌더링 하는 방식을 클라이언트 사이드 렌더링(CSR)이라고 하며, 서버에서 렌더링 하는 방식을 서버 사이드 렌더링(SSR) 이라고 한다. 클라이언트 사이드 렌더링은 사용자가 원할 때마다 서버에 요청하여 데이터를 받아오는 등으로 사이트의 일부를 변경시키는 방식으로 사이트를 렌더링한다. 자바스크립트가 DOM을 통해서 HTML 을 수정하는 것 또한 CSR이다. 요즘은 React, Vue, Angular 등이 주된 기술로 자리잡았으며 React가 가장 각광받고 있다. 서버 사이드 렌더링은 서버에서 모든 것을 처리한 ..
라우트 라우트는 경로라는 뜻처럼, 브라우저가 우리의 웹 사이트를 사용할 때 원하는 정보를 주고받을 수 있도록 제약한 하나의 프로토콜이다. 메인 페이지를 접속하기 원한다면 localhost:3000/, 상점 페이지로 접속하려면 localhost:3000/shop 등을 입력하여 웹 사이트를 사용하는 것이다. 이때, 그 특정 사이트를 통해 정보를 주고받을 수 있도록 설정하는 것이 라우트이다. 이전 게시물에서 Cannot GET / 이라고 응답을 받은 것도 같은 이유이다. 메인 라우트에 접속하였는데, 브라우저의 요청에 서버가 답하지 않았기 때문이다. 요즘 우영우를 보지 않은 나에게 우영우 봤냐고 했을 때와 같은 상황이라고 생각하면 된다. 나는 응답할 내용이 머리에 없기 때문에 Cannot GET / 라고 하는 ..