Torch for new way

이제 게시판 관련된 기능들을 구현해보자. 게시판에 꼭 필요한 페이지는 글 리스트, 글 보기, 글 쓰기, 글 수정 페이지 4개 정도가 있는데, 각각의 라우터와 미들웨어를 작성해준다. 지난 번 user의 라우터를 분리한 것과 동일한 방법으로 작성해주면 된다. 1. 라우터, html 작성 /* front/routes/index.js */ const express = require('express') const router = express.Router() const userRouter = require('./user/index.js') const boardRouter = require('./board/index.js') // 추가 router.use('/user', userRouter) router.use('..

지금까지 만든 라우터들을 분리하고 로그인 여부에 따라 메인 화면이 달라지도록 코드를 살짝 정리해보자. 1. 라우터 분리 지금까지 만든 사용자 관련 라우터들을 server.js 에서 빼서 따로 모아두자. 이렇게 코드들을 모듈화해 분리해두면 나중에 서버를 관리하기 더 편해질 것이다. /* front/server.js */ const express = require('express') const nunjucks = require('nunjucks') const app = express() app.set('view engine', 'html') nunjucks.configure('views', {express:app}) app.get('/', (req, res) => { res.render('main.html'..

저번에 했던 회원 가입 기능에 이어 이젠 로그인 기능을 구현해보도록 하자. 1. 사용자가 입력한 아이디, 비밀번호를 프론트에서 백엔드 서버로 보낸다. 2. 백엔드 서버에서 받은 id, pw 를 DB로 보내 일치하는 데이터가 있는지 비교한다. 3.1 일치하는 데이터가 있다면 로그인에 성공한다 4. jwt를 생성, 쿠키화해서 브라우저에 준다. 3.2 일치하는 데이터가 없다면 에러 메시지를 출력한다. 1. intro 다음과 같이 login.html을 작성한다. /* front/views/login.html */ 2. 로그인 기능 구현 2.1 입력한 데이터를 프론트에서 백 엔드 서버로 제출 login.html에서 입력한 정보를 백 엔드 서버로 전송하는 script를 추가해준다. /* front/view/logi..

지금까지 배운 보안(jwt , 쿠키), 비동기 통신 (ajax), DB(mysql, pool) 을 활용해 간단한 회원가입과 로그인, 게시판 기능이 있는 웹 서버를 만들어보자. 1. 우선 DB에 게시글과 회원들의 정보 틀 (db, table)을 만들어 줄 것이고, 2. 사용자가 회원 가입을 하면 아이디가 중복되는지 등을 검사하고, 문제가 없을 경우, 사용자가 입력한 정보를 DB에 추가할 것이다. 3. 가입한 사용자가 로그인을 시도할 경우, 입력한 id, pw와 일치하는 db 내의 정보를 찾고 일치하는 정보가 있다면 로그인에 성공, 그렇지 않으면 실패하게 된다. 4. 로그인에 성공할 경우, jwt를 이용해 암호화를 거친 쿠키를 생성해 주고, 이 후 게시판에 관련된 웹 페이지를 만들어 줄 때 쿠키를 검증 한 ..

파일을 업로드 하는 방법에 대해 알아보자. 우선 하나의 파일을 올리는 것부터 시작해서 비동기적으로 업로드를 진행하는 방법, 파일 여러 개를 올리는 방법을 알아볼 것이다. 0. 배경지식 우선 알고 시작하면 좋은게 있다. 파일의 경로, 확장자 등에 대한 처리를 쉽게 해주는 방법인데, nodejs의 내장 라이브러리 중 path가 있다. 파일을 업로드 하기위해서는 우선 그 파일을 어디 올릴건지, 확장자가 뭔지, 파일명은 뭔지 등을 다 컴퓨터에 인식시켜줄 필요가 있고, 이 인식을 쉽게하도록 도와주는게 path 라이브러리이다. 몇 가지 사용 예시를 알아보자. path.dirname(filePath) : 디렉토리 추출 후 출력 console.log(path.dirname('/home/sila/work/sila.js'..

지금까지 배운 서버와 사용자간의 요청, 응답을 위해서는 한 페이지를 통째로 다시 불러와야 하는 불편함이 있었다. 이를 해결하기 위해 나온 것이 ajax (Asynchronous JavaScript And XML) 이다. ajax는 웹 페이지의 프론트와 백 엔드 요소를 분리한다. 이후 간단한 요청, 응답을 주고받을 일이 생기면 JS를 실행해 서버에 (주로 백 엔드를 담당하는) 요청을 보내고, 응답을 받아와 정해진 형식 (HTML, CSS 설정)대로 렌더링해준다. 이를 코드를 작성해 구현하는 방법은 여러가지가 있지만 여기서는 axios (외부 라이브러리)를 사용하는 방법만을 다룬다. 만약 프론트와 백 엔드를 담당하는 서버가 나뉘어져 있다면 CORS (Cross Origin Resource Sharing)이 ..

express를 이용해 session 기능을 이용하기 전에 라우터와 미들웨어에 대해 좀 더 알아보자. 1. 미들웨어, next express의 주요 기능 중 하나인 미들웨어는 요청과 응답의 중간에 있기 때문에 'middle'ware라고 부르며, 중간에서 요청과 응답을 조작해 이런 저런 기능을 조정해주는 역할을 한다. 지금까지 사용했던 것과 비슷하게 app.use와 함께 사용해주면 된다. 매개변수는 최대 4개를 가질 수 있는데, 4개를 다 사용하는 경우는 에러가 있을 때뿐이고, 보통은 3개 이하를 사용한다. next는 여러 개의 미들웨어를 순차적으로 실행시켜주는 역할을 한다. 예시를 보며 이해해보자. 다음과 같이 server.js 파일을 작성해보자. /* server.js */ // set up const..

쿠키에 이어 세션에 대해 알아보자. 세션은 무엇인가? 방문자의 요청에 따른 정보를 웹 서버가 세션 아이디 파일을 만들어 서버에 저장하는 것이다. 쿠키와 다른 점은 쿠키는 정보를 사용자의 브라우저에, 세션은 서버에 저장한다는 것. 쿠키와 세션은 각각의 장단점이 있기 때문에 보통은 이 둘을 적절하게 조합해서 사용한다. 세션이 작동하는 방식에 대해 간략하게 알아보자. 1. 사용자가 서버로 로그인을 요청 2. 요청에 담긴 id, pw 정보가 유효하면 세션이 서버의 메모리에 저장됨 3. 이 때 세션 식별키로 난수 SessionId를 생성 후, 이 SessionId를 쿠키에 담아 브라우저로 전송 4. 이후 브라우저는 모든 요청에 쿠키(SessionId)를 함께 전송한다. 5. 서버는 브라우저가 보낸 SessionI..

이어서 지난 번에 만들었던 로그인 기능까지 갖춘 웹 페이지 집합에 로그 아웃 기능과 프로필 페이지를 추가하는 것을 해보도록 하자. 메인 페이지에 이미 로그아웃과 프로필로 가는 anchor element를 만들어두었으니, 이제 여기에 연결시켜줄 웹 페이지와 uri를 만들어주면 된다. 1. 로그아웃 기능 구현 로그 아웃을 한다는 것은 우리가 만들어준 쿠키를 제거해준다는 것을 의미한다. 여기서는 로그아웃 시, 쿠키의 만료 시간을 0으로 만드는 방식을 사용할 것이다. 메인 페이지에서 로그 아웃 버튼을 누르면 > 지정된 uri로 이동하고 > 거기서 응답을 받고 (여기서 쿠키를 제거) > 메인페이지로 리다이렉트 되는 순으로 진행해보자. 메인 페이지 html에서 logout에 걸린 anchor를 다음과 같이 수정하자..

가끔 인터넷을 돌아다니다보면 쿠키를 삭제하라는 문구를 본 적이 있다. 브라우저는 데이터를 저장하는 기능도 가지고 있는데, 쿠키는 브라우저가 저장하는 데이터 중 하나다. 개발자도구 > 어플리케이션 > 스토리지 > Cookies 탭을 들어가보면 브라우저가 저장하고 있는 쿠키들과 그 property들을 볼 수 있다. 이런 데이터가 계속해서 쌓이기 때문에 브라우저를 오래 사용하다보면 용량이 늘어나게 된다. 그럼에도 이 쿠키라는게 왜 필요한가? 서버가 브라우저에서 요청을 받을 때, 한 컴퓨터를 여러 명이 사용하는 경우 누가 요청을 보내는지 알 수 없다. 그래서 사용자에 따라 다른 응답을 줄 수 있도록 변수를 추가해주는 것인데, 이 추가해주는 변수가 쿠키이다. 이제부터는 헤더에 쿠키를 집어넣는 방법을 알아보고 넣은..

지난 글을 마무리 했을 때의 js는 다음과 같은 상태였다. /* server.js */ const express = require('express') const app = express() const nunjucks = require('nunjucks') app.set('view engine', 'html') nunjucks.configure('views', {express:app}) app.use(express.urlencoded({extended:true})) const list = require('./boardData') const data = [...list.data] // list.data라는건 가져온 객체 list 안의 data (배열) // main app.get('/', (req, res)..

오늘은 지금까지 배운 nodejs의 내용을 이용해 간단한 글 작성, 수정, 삭제 기능을 가진 게시판 웹 사이트를 만들어보자. 메인 페이지, 글의 리스트 페이지, 글 쓰기, 삭제, 수정 순으로 기능을 구현해볼 것이다. 1. Set up express와 nunjucks를 먼저 설치하고 다음과 같이 js를 작성한다. /* server.js */ const express = require('express') const app = express() const nunjucks = require('nunjucks') app.set('view engine', 'html') nunjucks.configure('views', {express:app}) app.use(express.urlencoded({extended:tr..