2020 08 07 2주차 자연어처리

실행 환경 (React.js, Django)

협업 툴(vscode Live Share 기능 사용)

웹 개발 초기단계 실행화면

프론트엔드

App.js 구성

index.html 부트스트랩 cdn 코드 추가

React

Tree

.
├── App.css
├── App.js
├── components
│   ├── Navbar.js
│   ├── PostEdit.js
│   ├── PostList.js
│   └── TagList.js
├── index.css
├── index.js

Axios

axios 라이브러리를 이용해 post, get요청을 수행

$ npm install axios

요청 방법

axios({
  baseURL: 'localhost:8000/',
  url: `api/diary/`,
  method: 'post',
  data: postData(객체)
}).then(
    // tag list를 리턴받음
)

postData

{
    "title": "제목",
    "content": "내용"
}

​

1. Click Event로 postData에 저장된 데이터를 params에 넣어 axios요청을 backend 서버에 보냄.
2. 장고 backend 서버에서 sqlite3 db에 데이터를 저장.
3. backend에서 db에 저장된 포스트 내용을 바탕으로 tag list를 작성하여 promise return으로 tag list를 돌려줌.
4. 요청의 결과로 받은 tag list를 웹 페이지에 태그로 보여줌.