웹 클라이언트 애플리케이션

from django.contrib import admin
from django.urls import path

from todoapplication import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('todo', views.TodoView.as_views()), # todo 요청은 todoapplication의 views.py 파일의 TodoView 클래스가 처리
]

  def delete(self, response):
        # 필요한 파라미터 읽기: userid, id, done
        request = json.loads(request.body)

        userid = request["userid"]
        id = request["id"]

        todo = Todo.objects.get(id=id)
        
        if todo.userid == userid:
            todo.delete()
            return JsonResponse({'result': True,
                                 'data': todoToDictionary(todo)},
                                 status = status.HTTP_200_OK)
        else:
            return JsonResponse({'result': False,
                                 'data': todoToDictionary(todo)},
                                 status = status.HTTP_200_OK)

import React from "react"

class ToDo extends React.Component{
    render() {
        return (
            <div className="ToDo">
                <input type="checkbox" id="todo0" name="todo0" value="todo0" />
                <label for="todo0">컴포넌트 만들기</label>
            </div>
        )
    }
}
export default ToDo;

import './App.css';

import React from 'react';
import ToDo from './ToDo';

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {item:{id:0, title:"안녕 react", done:true}}
  }
  render() {
  return (
    <div className="App">
      <ToDo item={this.state.item} />
    </div>
  );
}
}

export default App;

import React from "react"

class ToDo extends React.Component{
    constructor(props) {
        super(props)
        // 상위 컴포넌트로부터 넘겨받은 item 속성의 값을 item이라는 이름으로 저장
        this.state = {item:props.item}

    }

    render() {
        return (
            <div className="ToDo">
                <input type="checkbox" id={this.state.item.id} name={this.state.item.id} checked={this.state.item.id} />
                <label id={this.state.item.id}>{this.state.item.title}</label>
            </div>
        )
    }
}
export default ToDo;

import './App.css';

import React from 'react';
import ToDo from './ToDo';

class App extends React.Component {
  constructor(props){
    super(props)
    // 데이터 배열 생성
    this.state = {items:[{id:0, title:"안녕 react", done:true},
      {id:1, title:"커피", done:false}]
    }
  }
  render() {
    let todoItems = this.state.items.map((item, idx) => (
      <ToDo item={item} key={item.id} />
    ));
    return (
    <div className="App">
      {todoItems}
    </div>
    );
  }
}

export default App;

import React from "react"

import {
    ListItem,
    ListItemText,
    InputBase,
    Checkbox
} from '@material-ui/core'

class ToDo extends React.Component{
    constructor(props) {
        super(props)
        // 상위 컴포넌트로부터 넘겨받은 item 속성의 값을 item이라는 이름으로 저장
        this.state = {item:props.item}

    }

    render() {
        const item = this.state.item
        return (
            <ListItem>
                <CheckBox checked={item.done} />
                <ListItemText>
                    <InputBase 
                        inputProps={{"aria-label":"naked"}}
                        type="text"
                        id={item.id}
                        name={item.id}
                        value={item.title}
                        multiline={true}
                        fullWidth={true}
                    />
                </ListItemText>
            </ListItem>>
        )
    }
}
export default ToDo;

import React from "react";
import {TextField, Paper, Button, Grid} from "@material-ui/core"

class AddToDo extends React.Component{
    constructor(props) {
        super(props);
        this.state = {item:{title:""}}
    }
    render() {
        return (
            <Paper style={{margin:16, padding:16}}>
                <Grid container>
                    <Grid xs={11} md={11} item style={{paddingRight:16}}>
                        <TextField placeholder="타이틀입력" fullWidth />
                    </Grid>
                    <Grid xs={1} md={1} item>
                        <Button fullWidth color="secondary" variant="outlined">
                            +
                        </Button>
                    </Grid>
                </Grid>
            </Paper>
        )
    }

}

export default AddToDo;

import './App.css';

import React from 'react';
import ToDo from './ToDo';

import {
  Paper,
  List,
  Container
} from "@material-ui/core"

class App extends React.Component {
  constructor(props){
    super(props)
    // 데이터 배열 생성
    this.state = {items:[{id:0, title:"안녕 react", done:true},
      {id:1, title:"커피", done:false}]
    }
  }
  render() {
    let todoItems = this.state.items.length > 0 && (
      <Paper style = {{margin:16}}>
        <List>
          {this.state.items.map((item, idx) => (
            <ToDo item={item} />
          ))}
        </List>
      </Paper>
    );
    return (
    <div className="App">
      <Container maxWidth="md">
        <AddToDo />
        <div>{todoItems}</div>
      </Container>
    </div>
    );
  }
}

export default App;

import './App.css';

import React from 'react';
import ToDo from './ToDo';
import AddToDo from './AddToDo';

import {
  Paper,
  List,
  Container
} from "@material-ui/core"

class App extends React.Component {
  constructor(props){
    super(props)
    // 데이터 배열 생성
    this.state = {items:[{id:0, title:"안녕 react", done:true},
      {id:1, title:"커피", done:false}]
    }
  }
// 데이터 추가를 위한 함수: Item 1개를 넘겨받아서 items에 추가하는 함수
add = (item) => {
  // react의 state와 props는 불변의 객체
  // 수정 작업을 할 때는 다른 곳에 복사를 한 후 수정을 하고 다시 state나 props에 설정
  // 기존의 state에 있는 items를 thisItems에 복사
  const thisItems = this.state.items;

  // 새로운 item에 데이터를 추가 설정
  item.id = "ID-" + thisItems.length;
  item.done = false;

  // thisItems에 데이터를 추가
  thisItems.push(item)

  // state의 값을 thisItems로 변경
  this.setState({items:thisItems});
}

  render() {
    let todoItems = this.state.items.length > 0 && (
      <Paper style = {{margin:16}}>
        <List>
          {this.state.items.map((item, idx) => (
            <ToDo item={item} />
          ))}
        </List>
      </Paper>
    );
    return (
    <div className="App">
      <Container maxWidth="md">
        <AddToDo add={this.add} />
        <div>{todoItems}</div>
      </Container>
    </div>
    );
  }
}

export default App;

  constructor(props){
    super(props)
    // 데이터 배열 생성
    this.state = {items:[]}
  }

// 컴포넌트가 메모리에 로드가 되면 호출되는 메서드
componentDidMount() {
  const requestoptions = {
    method:"GET",
    headers: {"Content-Type":"application/json"}
  };
  fetch("http://localhost/todo", requestoptions)
  .then((response) => response.json())
  .then((response) => {
    this.setState({items:response.list})
  },
  (error) => {
    console.log(error)
  }
)
}