Torch for new way

마지막으로 서비스 단에서 가독성이 더 좋고, 코드를 조금 더 재활용할 수 있도록 디자인 패턴을 적용해보자. 1. Strategy (전략 패턴) 전략 패턴은 중간에 추상화된 인터페이스를 하나 만들고, 필요에 따라 적절한 클래스에 속하는 인스턴스를 껴서 사용하는 방식이다. 덕 타이핑이라는 용어가 있는데, "만약 어떤 동물이 오리처럼 꽥꽥거리고, 뒤뚱거리면서 걷고, 수영하고 등등 오리가 하는걸 다 한다면 난 그걸 오리라고 취급하겠다" 라는 뜻에서 용어를 그렇게 정했다고 한다. 상황에 완전히 들어맞지는 않지만 나는 이 패턴을 이해하는데 도움이 되었다. 코드에 대입하자면 몇가지 함수가 정의된 인터페이스가 있고 (class와 비슷하다고 보면 된다.), 다른 클래스가 이 인터페이스에 정의된 함수를 다 가지고 있다면,..

이어서 실제로 oauth login을 구현하는 코드를 짜보자. 1. 코드 작성 controller, service단을 주로 보게 될텐데, 내가 처음 카카오 api를 이용해 oauth login을 구현할 땐 다음과 같았다. 1-1. controller import { Controller, Get, Query, Res } from "@nestjs/common"; import { LoginService } from "./login.service"; import { ConfigService } from "@nestjs/config"; @Controller("login") export class LoginController { constructor( private readonly loginService: Logi..

어플리케이션에 oauth 기능을 구현해보았는데, 구현을 하다보니 oauth login 기능을 제공하는 여러 개의 제3자 앱이 제공해주는 기능, 각각의 코드 흐름들이 대부분 비슷했고, 마침 그 때 디자인 패턴을 조금 공부하고 있어 상황에 적합한 디자인 패턴을 적용해 oauth login 기능을 코드를 어느 정도 효율적으로 짜서 구현할 수 있었다. oauth login은 제3자앱에서 인증을 거쳐 개인 정보를 전달받는 기능이다. 사용자는 보안적으로 신뢰가 보장된 한정된 주체에게만 개인 정보를 공개, 저장할 수 있고, 어플리케이션은 사용자의 정보를 굳이 자신들이 따로 저장하지 않음으로써 보안에 대한 부담을 덜 수 있다. 1. OAuth login 메커니즘 Oauth login의 진행은 다음과 같다. 주의해야할 ..

이제 게시판 관련된 기능들을 구현해보자. 게시판에 꼭 필요한 페이지는 글 리스트, 글 보기, 글 쓰기, 글 수정 페이지 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)이 ..

1. Intro 지난 글에 이어서 JWT (JSON Web Token)에 대해 알아보자. 지금까지 배운 로그인 방식에는 세션과 쿠키가 있다. 서버는 부담을 줄이기 위해 세션 정보를 쿠키에 담아 브라우저에 전달하고, 브라우저는 이 쿠키를 요청마다 제시함으로써 허용된 사용자라는 것을 증명한다. 그런데 문제는 여기서 쿠키가 조작이 가능하다는 것이다. 이걸 아무나 위조해서 들고다니는 것을 막기 위해 전 글에서 배운 해시가 사용된다. 구체적으로 어떤 식으로 그 일이 일어나는지 직접 코드를 작성하며 알아보자. 2. JWT (JSON Web Token) 2.1 header, payload encoding 이름에서도 대강 짐작할 수 있는 것 처럼 웹에서 사용하는 토큰인데, JSON 형태이다. 이를 메소드를 통해 문자열..

1. Intro 우리가 어떤 웹 페이지에 정보를 입력할 때, 비밀번호 등의 민감한 정보는 아무나 볼 수 없도록 암호화해 저장할 필요가 있다. 이런 암호화 방식에는 단방향 암호화, 양방향 암호화가 있는데 보통은 단방향 암호화 방식을 많이 사용한다. 단방향 암호화는 복호화할 수 없는 암호화 방식을 의미하는데, 이는 한 번 암호화하면 다시 원래 문자열을 찾을 수 없다는 것을 의미한다. 그래서 요즘엔 비밀번호를 잊어버려서 찾으려하면 비밀번호를 알려주지 않고 새로운 비밀번호를 설정하는 식으로 이를 해결하는 것이다. 이런 단방향 암호화는 주로 해시 기법을 사용한다. 해시 기법이란, 주어진 문자열을 다른 문자열로 바꾸는 방식이다. 오늘은 이 해시 기법을 사용하는 방식에 대해 알아볼텐데, 그 전에 알아야할 배경지식을 ..

1. intro 이번에는 MySQL 접속을 배워보자. 클라이언트가 서버에 요청을 전달하고 서버가 반응을 주는 것처럼 데이터를 DB에서 가져오기 위해서는 서버가 데이터베이스에 요청을, DB가 응답을 줘야한다. 통신 방식에는 TCP와 UDP 2가지 방식이 있는데, 우선 TCP에 대해서만 알아볼 것이다. (서버와 클라이언트의 통신방식인 http도 TCP기반이다.) 우선 최초로 서버와 DB가 연결될 때, TCP 요청과 TCP 응답이 순차적으로 일어난다. 이 2가지 작업을 묶어서 handshake 작업이라고 하는데, 이걸 진행한 후 데이터를 양방향으로 주고 받을 수 있게 된다. (handshake가 최초로 1번 실행된 후, 종료될 때까지 connection 상태가 유지된다.) 이런 양방향의 데이터 전송을 소켓 통..

지금까지 js에서 listen 메소드를 사용해 서버를 구동할 때 전부 데이터를 메모리에 저장했다. 그렇기 때문에 서버를 한 번 끄면 저장한 모든 데이터들이 날아가버렸다. 실제 서버에서는 정보를 저장하기 위해 DB, 데이터베이스를 이용한다. 이 데이터를 관리하는 프로그램이 있는데, 이들을 통틀어 database manage system (DBMS) 라고 칭한다. 여기서는 dbms중 하나인 mysql을 셋업, 사용하는 법을 알아보자. 1. 설치 MySQL도 라이브러리이므로 npm으로 받을 수 있다. 우선 패키지를 설치하기 전에 다음 두 줄을 순차적으로 입력해 패키지 리스트를 최신화해준다. sudo apt upgrade sudo apt update (뭘 설치하든 안되면 일단 이거부터 해보면 된다.) sudo ..

nunjucks는 html을 더 효율적으로 다룰 수 있도록 하는 스킬을 몇 가지 가지고 있는데, 이에 대해 조금 공부를 하고 넘어가면 유용할 것이다. 1. intro / setup 우선 server.js, main.html을 작성해 메인 페이지를 만들어주자. /* server.js */ const express = require('express') const app = express() const nunjucks = require('nunjucks') app.set('view engine', 'html') nunjucks.configure('views', {express:app} ) // 메인 app.get('/', (req, res) => { res.render('main.html') }) // 서버 ..

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