트렌드 테스트 프로젝트 - 3. react에서의 nodejs api 사용, axios

팀원이 잡아준 react 템플릿에 사용자 랭킹을 집어넣어보기로 했다

 

먼저 가짜 데이터를 mysql에 만들어서 저장했다

 

CREATE TABLE 'ranking' (
 'id' int PRIMARY KEY,
 'score' int,
 'created_at' datetime
);

 

아주 간단한 테이블!!

원래는 문제도 디비에 저장하기로했는데 바뀌는 데이터도 아니고 사진 처리가 까다로울 것 같아 문제는 프론트에서 처리하기로 해서 결국 디비에 저장할 것은 사용자들의 점수밖에 남지 않았다

 

node에서 get method는 이렇게 구현했다

이전에 작성했던 problem의 함수를 고치고 query를 조금 더 복잡하게 바꾼 것 밖에 바뀐게 없다

해당 날짜에 만들어진 데이터만 가져오고 싶은데 어떤 방법이 가장 효율적일지 모르겠다

일단 where 절에서 그냥 단순히 date_format을 비교만했는데 더 효율적인 방법이 있을까..?

 

var express = require('express');
var router = express.Router();
var db = require('./db');
 
/* GET ranks of today*/
router.get('/', function(req, res) {
    query = `select * 
    from ranking 
    where date_format(created_at,'%Y-%m-%d') = date_format(NOW(), '%Y-%m-%d') 
    order by score desc 
    limit 10;`;
    db.query(query, function (err, results, fields) {
        if(err) {
        console.log(err);
    }
    console.log(results);
    res.send(results);
    });
});
 
module.exports = router;

 

react에서 등수를 나타내는 부분은 아래와 같이 사용했다

 

import axios from 'axios';
 
const API = axios.create({
    baseURL: 'http://localhost:3000/',
    headers: {
        "Content-Type": "application/json",
    }
});
 
export default API;

How To Use Axios with React | DigitalOcean

이 링크를 보고 참조했는데 react에서 axios를 사용할 때 보기 아주 좋은 글인 것 같다

 

이렇게 하면 아직은 완전 별로인 등수가 나온다...

팀원이랑 상의해서 예쁘게 고쳐야지ㅎㅎ

검색으로 (rank, index)를 이용해서 react에서 array가 있을 때 index를 가져오는 방법이 있는 걸 알 수 있었다

자바스크립트 문법이 아직 익숙지않다ㅠㅠ