이머시브 코스의 마지막 Assessment 이다. 데이터베이스부터 시작해서 인증, 배포까지 계속해서 허덕이고 있었기 때문에 자신감이 많이 떨어져 있는 상태였다. 다시말해서 지난번 Assessment 이후로 계속해서 허덕이고 있덨다는 얘기다. 그렇기 때문에 걱정이 앞서서, 어떤 부분이 문제로 나올지 생각해보고 레퍼런스 코드를 따라쳐 봤다. 리액트가 나올 줄은 알았지만, 스프린트때는 사용해본적 없던 React-router-dom 모듈을 사용해야했다. 그리고 회원가입, 로그인 기능(인증)을 구현해야했다. 인증부분은 전날 레퍼런스코드를 보며 어느정도 테스트케이스를 통과할 정도는 이해를 했기 때문에 어렵지 않았다.
그럼에도 불구하고, 오랜 시간이 걸렸던 이유는 React-router-dom 사용방법을 알지 못해서, 액시오스(axios)모듈을 쓰지 않아서, 멀터(multer)모듀러을 사용하지 않아서 정도인 것 같다.
React-router-dom : SPA(Single Page Application)
전통적인 웹은 여러 페이지의 html로 이루어져 있으며, 클라이언트의 요청에 따른 페이지를 새롭게 로딩해주며 화면을 바꾼다. 하지만 웹이 발전함에 따라 여러 페이지로 이루어진 웹은 사용자가 사용하기에 속도가 충분히 빠르지 않았다. 이를 해결해주는 것이 리액트(React)같은 라이브러리, 좀 더 정확히 말해서 React-router-dom과 같은 써드파티 라이브러리이다. 하나의 페이지를 가지며, 요청하는 주소에 따라 각각에 맞는 Component를 페이지에 리로딩 하는 것이다. 이때 주소에 따라 클라이언트 사이드를 렌더링 하는것을 라우팅(Routing)이라고 한다. www.naver.com/signup 을 요청하면 회원가입 화면을, www.naver.com/login 을 요청하면 로그인 화면을 랜더링하는 것인데, 새로운 html파일을 불러와서 로딩하는 것이 아니라 페이지의 구성 요소만 바꾸는 것이다.
Client - App.js
import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import Login from './pages/Login';
import Signup from './pages/Signup';
import { Mypage } from './pages/Mypage';
class App extends React.Component {
state = {
isLogin: false
};
render() {
const { isLogin } = this.state;
return (
<div>
// 라우팅을 할 때 path를 지정하는데, 그 값에 따라서 아래 Login, Signup,Mypage중 하나라로 라우팅된다.
<Switch>
<Route path="/login" render={() => <Login isLogin={isLogin} />} />
<Route exact path="/signup" render={() => <Signup isLogin={isLogin} />} />
<Route exact path="/mypage" render={() => <Mypage isLogin={isLogin} />} />
<Route path="/" render={() => {
if (isLogin) {
return <Redirect to="/mypage" />;
}
return <Redirect to="/login" />;
}} />
</Switch>
</div>
);
}
}
export default App;
BrowserRouter
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
라우팅은 어떻게?
위의 소스들은 리액트를 이용하여 라우팅을 구현하기 위한 기초공사이고, 라우팅을 요청하는 부분은 다음과 같다.
Axios : React에서는 axios를 써야하는걸까?
Promise based HTTP client for the browser and node.js
- Make XMLHttpRequests from the browser
- Make http requests from node.js
- Supports the Promise API
- Intercept request and response
- Transform request and response data
- Cancel requests
- Automatic transforms for JSON data
- Client side support for protecting against XSRF
request모듈을 사용하려고 했을 때 모듈들을 찾을 수 없다는 에러 메시지가 떠서 yarn도 깔아보고, npm 도 깔아보고 레파지토리를 다시 클론하기도 했었는데 request 모듈을 가져오는 const request = require('request')부분을 지우고 나니 에러가 사라졌다. 서버에 http요청을 보내는 다른 방법을 찾던 도중 axios를 알게되서 적용했고, 문제는 사라졌다. React와 같은 프레임워크에서는 fetch나 request가 아닌 axios를 사용해야하는 이유는 뭘까?
multer : receive form(tag) data
form 태그의 submit event를 통해서 전달되는 데이터를 사용할 수 있게 해주는 모듈이다. http 요청을 처리할 때 express, body-parser 를 이용해 요청의 body부분에 접근할 수 있다. request.body를 이용해 요청 내용을 볼 수 있다. 일반적인 요청에 대해서는 적용되는 방법이지만, form 태그의 submit event 를 통해 넘어오는 데이터들에 대해서는 multer 모듈을 사용해야 body에 접근할 수 있다. 그렇지 않으면 빈 객체 {} 만 보인다.
// 설정
const express = require('express');
const bodyParser = require('body-parser');\
const multer = require('multer');
const upload = multer();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended : true }));
app.use(upload.array());
app.use(express.static('public'));
// request.body 사용하기
module.exports = {
signInController: (req, res) => {
// TODO : 로그인 및 인증 부여 로직 작성
const { email, password } = req.body;
console.log(1111111111111, req.body);
.....
};