Git Product home page Git Product logo

pre-onboarding-paywork's Introduction


paywork logo

서버와 통신하는 투두 리스트 앱

프리온보딩 코스 Paywork 기업 과제

View Web Demo

📋 과제 요구사항 보기

서버

  • 서버 URL이 있다는 가정으로 진행해주세요

  • Base URL (해당 서버 주소는 작동하지 않는 서버입니다)

    http://dummy-server.io/

유의 사항

  • ts+react 웹 사이트 혹은 react-native 앱 개발 (react-native도 ts 가능)
  • function 단위로 주석 설명
  • 디자인 등 따로 설명이 없는 부분은 본인의 재량에 맡깁니다
  • redux + redux-saga 사용
    • react-native, redux 모두 처음 시도하여 어려움이 있는 경우, Async storage를 사용 가능하나 감점 있음

요구사항

  1. POST 생성

    • URL

      ../todo
    • request

      {
        "content": "string"
      }
    • response (200)

      {
        "msg": "string"
      }
  2. GET 리스트 불러오기

    • URL

      ../todo
    • request

      {}
    • response (200)

      {
        "count": 2, //integer
        "todoList": [
          {
            "id": "string",
            "content": "string",
            "isCheck": true, //boolean
            "createdAt": "2021-05-26T11:51:05.097Z"
          },
          {
            "id": "string",
            "content": "string",
            "isCheck": false, //boolean
            "createdAt": "2021-05-26T16:15:25.729Z"
          }
        ]
      }
  3. POST 수정

    • URL

      ../todo/:id
    • request

      {
        "content": "string"
      }
    • response (200)

      {
        "msg": "string",
        "content": "string"
      }
  4. POST 체크

    • URL

      ../todo/:id
    • request

      {
        "isCheck": true //boolean
      }
    • response (200)

      {
        "msg": "string"
      }
  5. POST 삭제

    • URL

      ../todo/:id
    • request

      {}
    • response (200)

      {
        "msg": "string"
      }

About The Project

project screenshot

Todo 목록 조회

fetch todo list

Todo 생성

add todo

Todo 수정 완료/취소

edit todo

Todo 체크

toggle todo

Todo 삭제

delete todo

Built With

  • React Native (expo)
  • TypeScript
  • Redux
  • Redux-Saga
  • axios

Getting Started

Prerequisites

Installation

To install packages:

yarn install

To serve the app:

yarn run android

Features

  • My JSON Server로 mock 서버 구성
  • Todo REST API 구현
    • Todo 생성
      POST /todo
      
    • Todo 목록 조회
      GET /todo
      
    • Todo 수정(체크)
      PATCH /todo/:id
      
    • Todo 삭제
      DELETE /todo/:id
      
  • redux로 전역 상태 관리
  • redux saga 미들웨어로 mock 서버와 비동기 작업 처리

Additional Features

  • 데모 확인을 쉽게 하기 위해 웹 배포

pre-onboarding-paywork's People

Contributors

yisu-kim avatar

Watchers

James Cloos avatar  avatar

pre-onboarding-paywork's Issues

버튼별 아이콘 적용

What to do

  • 할 일 생성 버튼
  • 할 일 시작 안 함 버튼
  • 할 일 체크 버튼
  • 할 일 수정 완료 버튼
  • 할 일 수정 취소 버튼
  • 할 일 삭제 버튼

redux 활용

What to do

  • action 타입, action creator 정의
  • reducer 구현
  • store 생성

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.