React Native 안에서 axios 를 사용해서 정보를 업로드(post)하고, 가져오는(get) 방식을 직접 내 눈으로 확인하고 싶어서 간단한 서버를 만들어보기로 했다. 처음에는 어떻게 구현하는 건지 몰랐기에 엄청나게 복잡할 것으로 예상되기도 했었고, 혼자 공부하는 만큼 조언을 구하기 위해 카카오톡 오픈채팅방을 활용하여 업계 선배들에게 물어본 결과 직접 만들어보는 것이 도움이 될 거라고 하셨다.
서버를 만드는 데에 목적은 다음과 같다.
- 취업 후 백엔드 개발자와의 원활한 소통
- RESTful API 설계 보완
구축은 가장 먼저 npm init 과 express 설치를 통해 package.json을 생성하고, VSCode 상에서 폴더를 불러와서 index.js 로 구현한다.
package.json 생성
//1. package.json 생성
npm init //or yarn init
//2. express 설치
npm install express --save
Express 불러오기
node_modules에서 express 파일을 불러오고, express()의 반환값을 라우팅을 위한 router로 지정해준다.
//node_modules 의 express 파일 가져온다
const express = require('express');
//express 함수의 반환값을 router로 지정.
const router = express();
BodyParser 세팅
API 개념을 처음 접했을 때 파싱에 대해 이해를 하느라 꽤 오래 걸렸던 것이 기억난다. 간단히 말하자면, 데이터를 원하는 형태로 가공하는 과정을 parsing이라 하며, 이 과정을 수행하는 모듈 또는 메소드를 parser라고 한다.
필요한 상황에서 그에 맞는 파싱이 필요한데 express 문서에 따르면 미들웨어가 없는 상태에서 req.body에 접근하는 경우에는 디폴트로 undefined가 설정된 상태이기 때문에 우리가 가공하려는 방향성에 맞게 추가 세팅을 해주어야 한다. 이러한 express를 통한 API 요청에서 받은 body값을 파싱하는 역할을 수행하는 것이 바로 bodyParser라는 미들웨어이다.
router.use(express.json());
router.use(express.urlencoded({ extended: true }));
// false : 기본 내장된 queryString 사용
// true : 추가 설치가 필요한 qs 라이브러리 사용
임의 데이터 세팅
주고 받을 데이터 형태는 다음과 같이 설정했다.
const users = [
{ id: 1, name: '0biglife_01' },
{ id: 2, name: '0biglife_02' },
{ id: 3, name: '0biglife_03' },
];
라우팅 처리 및 서버 오픈
get , post 방식에서의 path 지정과 서버 오픈에 대한 코드. 데이터를 잘 받아오는지, 회원가입시 입력된 텍스트를 n 번째 id로 잘 post 해주는지를 위해 간단하게 설정했다. 추후에는 데이터 테이블이 복잡해지면서 더 복잡해질 것 같당
//라우팅 처리
//GET METHOD
router.get('/', (req, res) => {
res.send('Server for API TEST!');
});
router.get('/api/users', (req, res) => {
res.json({ ok: true, users: users });
});
//param 사이에는 '&' 입력.!
router.get('/api/users/user', (req, res) => {
const user_id = req.query.user_id;
const user = users.filter(data => data.id == user_id);
res.json({ ok: false, user: user });
});
// : <- type 모두 가능하단 뜻
router.get('/api/users/:user_id', (req, res) => {
const user_id = req.params.user_id;
const user = users.filter(data => data.id == user_id);
res.json({ ok: true, user: user });
});
//POST METHOD
router.post("/api/users/add", (req, res) => {
const user = {
id: users.length + 1,
name: req.body.name,
};
users.push(user);
res.json({ ok: true, users: user });
})
//3000포트로 서버 오픈 // router.listen(포트번호, 콜백함수)
router.listen(3000, () => console.log('0BigLife Server :)'));
전체코드
//node_modules 의 express 파일 가져온다
const express = require('express');
//express 함수의 반환값을 router로 지정.
const router = express();
// http://localhost:3000/
router.use(express.json());
router.use(express.urlencoded({ extended: true }));
const users = [
{ id: 1, name: '0biglife_01' },
{ id: 2, name: '0biglife_02' },
{ id: 3, name: '0biglife_03' },
];
//라우팅 처리
router.get('/', (req, res) => {
res.send('Server for API TEST!');
});
router.get('/api/users', (req, res) => {
res.json({ ok: true, users: users });
});
//param 사이에는 '&' 입력.!
router.get('/api/users/user', (req, res) => {
const user_id = req.query.user_id;
const user = users.filter(data => data.id == user_id);
res.json({ ok: false, user: user });
});
// : <- 이거는 type 모두 가능하단 뜻
router.get('/api/users/:user_id', (req, res) => {
const user_id = req.params.user_id;
const user = users.filter(data => data.id == user_id);
res.json({ ok: true, user: user });
});
//POST 방식!! 드디어..
router.post("/api/users/add", (req, res) => {
const user = {
id: users.length + 1,
name: req.body.name,
};
users.push(user);
res.json({ ok: true, users: user });
})
//3000포트로 서버 오픈 // router.listen(포트번호, 콜백함수)
router.listen(3000, () => console.log('0BigLife Server :)'));마지막으로, 터미널 창에 node index.js 를 입력하면 log가 출력되면서 서버가 구축된다.
아래 영상에서의 로직은 : 회원가입시 유저가 텍스트를 입력하고 버튼을 누르게 되면 서버로 post 요청을 한다. 홈뷰에서 프로필뷰로 들어가데 되면 화면이 생성되었을 시(useEffect) 유저가 입력했던 정보를 불러와 화면에 뿌려준 상태이다.
