Express

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

라우트 라우트는 경로라는 뜻처럼, 브라우저가 우리의 웹 사이트를 사용할 때 원하는 정보를 주고받을 수 있도록 제약한 하나의 프로토콜이다. 메인 페이지를 접속하기 원한다면 localhost:3000/, 상점 페이지로 접속하려면 localhost:3000/shop 등을 입력하여 웹 사이트를 사용하는 것이다. 이때, 그 특정 사이트를 통해 정보를 주고받을 수 있도록 설정하는 것이 라우트이다. 이전 게시물에서 Cannot GET / 이라고 응답을 받은 것도 같은 이유이다. 메인 라우트에 접속하였는데, 브라우저의 요청에 서버가 답하지 않았기 때문이다. 요즘 우영우를 보지 않은 나에게 우영우 봤냐고 했을 때와 같은 상황이라고 생각하면 된다. 나는 응답할 내용이 머리에 없기 때문에 Cannot GET / 라고 하는 ..

Express 설치 익스프레스는 Node.js 런타임 환경에서 손쉽게 서버를 생성할 수 있게 하는 프레임 워크이다. 이 프레임 워크를 사용하여, 새롭게 토이프로젝트를 진행해보고자 한다. 먼저 VScode를 통해서 원하는 디렉토리를 열어준다. 나 같은 경우, 향후에 프론트엔드도 구성해볼 계획이라서 backend라고 폴더명을 지었다. 원하는 폴더에서 아래의 명령어를 통해서 초기화를 한다. npm init 명령어 입력시 이름과 버전, 설명 등을 작성하라고 하는데 나중에 작성해도 되니까 기본값으로 두었다. 그렇게 하면 본격적으로 package.json 파일이 생성된다. 미리 코드를 집어넣었는데, 초기화를 하면 위와 같이 파일이 생성된다. main 프로퍼티는 서버의 기둥이 되는 파일이며, type 프로퍼티에 mo..

connect-redis의 버전이 올라가면 아래의 코드를 사용할 수 없다. const expressSession = require("express-session"); const RedisStore = require("connect-redis")(expressSession); ... app.use( expressSession({ resave: false, saveUninitialized: false, secret: , store: new RedisStore({ url: , logErrors: true, }), }) ); 이제 RedisStore에 client가 반드시 주어져야 하기 때문이다. 그래서 RedisStore에 client를 전해주어야 한다. 그래서 코드를 아래와 같이 수정했다. const exp..