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

로그인 앱 설계

 

server를 다루는 index.js 파일엔 인증처리를 하는 부분 말고 로그인한 유저의 프로필을 반환하는 API가 있다. 해당 API는 GET 방식을 사용하고 불러온 유저 아이디의 값을 통해 그에 맞는 데이터를 반환 해주는 역할을 한다.

 

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) => {
  if(!req.headers['token']) {
  	return res.status(403).send({
	  status: 'Error'
    });
  }
  
  axios.get('https://randomuser.me/api')
    .then(result => {
      const {userProfile} = result.data.results;
      const {name, picture, phone, email, country} = userProfile;
      
      res.status(200).send({
        status: 'OK',
        result: {
          name, picture, phone, email, country
        }
      })
    })
    .catch(e => {
      res.status(400).send({
        status: 'Error'
      });
    });
});

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

app.post('/api/authentication', (req, res) => {
  ...
});

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

 

/api/user/:id 에서 :id 부분에 입력 받은 아이디의 데이터를 가져온다. 해당 API로 진입 시 req(request)의 header에 토큰이 있는지 없는지를 체크하고 토큰 값이 존재하지 않는다면 403에러를 반환한다. 여기서 프로필은 무작위로 가상의 프로필을 제공해주는 API를 이용할 것이고, 서버에 요청을 보내는 것으로 axios 라이브러리를 사용한다. axios는 xmlHttpRequest나 fetch와 같은 기능을 하고 node.js 등의 서버 환경에서 편리한 기능을 가지고 사용할 수 있다. 이어서 axios로 받아온 API에서 사용할 데이터를 변수로 만들고 res(resopnse)로 상태값 성공(2xx)과 해당하는 데이터를 반환하고 이 과정에서 어떠한 이유로 전송이 되지 않으면 실패(4xx)를 반환한다.

 

 

 

 

https://bit.ly/37BpXiC

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

 

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

 

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