15_[항해99 4주차 미니프로젝트]_2021.10.11

오늘의 공부

 

axios 기본 사용 방법

// lib/axios.js

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:4000/',
  headers: {
    'content-type': 'application/json;charset=UTF-8',
    accept: 'application/json',
  },
});

export const apis = {
  getTest: () => instance.get('/posts'),
  addTest: (list) => instance.post('/posts',list),
};

import React from 'react';
import { apis } from './lib/axios';

function App() {

const Add = () => {
  const list = [
    {넣을 정보1},
    {넣을 정보2}
  ]
    apis
        .addTest(...list)
        .then((res) => {
       
        })
        .catch((err) => {
            console.error(err);
        });
}
const Get = () => {
  apis
      .getTest()
      .then((res) => {
          const data = res.data;
          console.log(data);
      })
      .catch((err) => {
          console.error(err);
      });
}

  return (
    <div className="App">
      <button onClick={Add}>추가</button>
      <button onClick={Get}>출력</button>
    </div>
  );
}

export default App;

이렇게하면 추가 버튼 눌렀을때 서버에 list의 내용물이 추가되고 출력버튼을 누르면 서버의 list 값이 전부 가져와진다.

다만 이걸 노드랑 어찌 작업할지는... 흠.. 백엔드 분들과 대화해야할듯.

오늘의 작업

프로젝트 와이어프레임 제작

역할 분담

로그인/회원가입페이지 기본 틀 뷰 제작

 

프론트엔드 깃허브 레포지토리

https://github.com/jjubbu/Calendar-Diary-Front

GitHub - jjubbu/Calendar-Diary-Front: 항해99 3기 4주차 미니프로젝트

 

 

..졸령