패스트캠퍼스 챌린지 39일차

로그인 앱 설계

 

지난번까지 로그인 앱에 대한 폴더 구조를 알아봤다. 지금까지 했던 작업들과 다르게 로그인 앱 설계 부분에서는 node.js를 통한 서버 환경을 구현했다. server 폴더 하위에 index.js 파일에 서버를 구현하는 로직이 있다.

 

const path = require('path');
const express = require('express');
const morgan = require('morgan');
const { urlencoded, json } = require('body-parser');
const { v4 } = require('uuid');
const axios = require('axios');
const app = express();

app.use(express.static('dist'));
app.use(morgan('dev'));
app.use(urlencoded({ extended: false }))
app.use(json())

app.get('/api/user/:id', (req, res) => {
  ...
});

app.get('/api/user/:id/posts', (req, res) => {
  ...
});

app.post('/api/authentication', (req, res) => {
  if (Math.floor(Math.random() * 10) % 2 === 0) {
    res.status(200).send({
      status: 'OK',
      result: {
        id: Math.floor(Math.random()*10),
        token: v4(),
      }
    });
  } else {
    res.status(400).send({
      status: 'Error'
    });
  }
});

app.listen(8080, () => {
  console.log('ready to dumy signup server');
});

 

코드를 보면 상단엔 import 하는 부분이 모여있다. require를 통해서 여러가지 라이브러리를 사용할 수 있다. npm을 통해서 라이브러리를 다운 받은 파일도 마찬가지로 사용한다. 여기선 웹 서버를 사용할 것이기 때문에 node.js의 웹 프레임워크인 express.js를 사용한다. 서버처리가 필요한 작업들은 해당하는 파일에서 작업할 것이다. 클라이언트 사이드에서 / 를 통한 경로는 화면을 변경하는 라우팅 경로가 되는것이지만 서버에서는 데이터를 전달하거나 조건에 맞는 데이터를 가공하는 역할을 한다. 현재 작업에서는 로그인 작업이 필요하기 때문에 로그인 처리를 해주는 로직을 사용할 것이다.

 

로그인을 하는 전반적인 처리를 하기 위해서 우리는 HTTP 프로토콜을 사용할 것이다. HTTP의 특징으로는 1. 비동기 처리를 하고 2. 무상태(상태가 없어야 함)여아 하는 특징이 있기 때문에 로그인한 유저인지 아닌지 알기 위해서는 로직에서 토큰이라는 값이 필요하다. 따라서 서버에서 토근을 처리해주는 로직이 들어 갈 것이다.

 

 

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential