Code Monkey home page Code Monkey logo

react-todo's Introduction

문제

Todo App을 구현하기 위해 <App />, <Form />, <Item />를 구현하세요. 모든 테스트를 통과해야 합니다.

조건

<App />

  • Todo App을 구현합니다.
  • 할 일이 없으면 "할 일 없음"이 화면에 보여집니다.
  • <Form />에서 입력한 할 일을 <Item />로 보여줍니다.
  • 최근에 추가한 할 일이 위에 보여집니다.

<Form />

  • 할 일을 입력할 수 있는 input과 추가 버튼이 있습니다.
  • input에 할 일을 입력하고 추가 버튼을 누르면 onAdd 함수가 호출됩니다.
    • onAdd 함수는 input에 입력한 값을 인자로 받습니다.
  • 추가 버튼을 누르면 input의 값이 초기화됩니다.
  • input에 입력한 값이 없다면 추가 버튼을 눌러도 onAdd 함수가 호출되지 않습니다.

<Item />

  • 할 일을 보여줍니다.
  • 체크 버튼을 누르면 onCompleteTodo 함수가 호출됩니다.
    • onCompleteTodo 함수는 할 일의 idcheck 상태를 인자로 받습니다.
  • 삭제 버튼을 누르면 onDeleteTodo 함수가 호출됩니다.
    • onDeleteTodo 함수는 할 일의 id를 인자로 받습니다.

준비

package 설치

$ npm install

ESLint & Prettier Extension 설치

  • VSCode를 사용하신다면 아래 확장 프로그램을 설치하세요.
  • ESLint Extension을 설치하세요.
  • Prettier Extension을 설치하세요.
  • .eslintrc.js 파일을 참고하여 설정을 변경하지 마세요.

실행

$ npm start

테스트

모든 테스트 케이스를 통과하면 됩니다.

$ npm test

주의 사항

  • PropTypes을 수정하지 마세요.
    • 만약 PropTypes이 잘못되었다고 생각되면 디스코드에 말씀해주세요.
  • 테스트 케이스를 수정하면 안됩니다.
    • 만약 테스트 케이스가 잘못되었다고 생각되면 디스코드에 말씀해주세요.
  • package.json에 있는 모듈은 삭제하면 안됩니다.
    • 만약 다른 모듈을 추가하고 싶다면 디스코드에 말씀해주세요.

제출

  1. 이름/닉네임으로 branch를 만들고 작업을 하세요.
  2. 작업이 끝나면 PR을 보내주세요.
  3. CI가 통과하면 완료입니다.

react-todo's People

Contributors

jeongnaehyeok avatar

react-todo's Issues

[Prettier/CRLF] CRLF 줄 시퀀스 이슈

현재 발생 이슈

Prettier 내 구문 끝 자락에 Delete 오류 발생

버그 발생 과정

npm run start 하였을 시 실행은 되나 Prettier 오류 발생

현 상황 및 요청상황

.eslintrc.js 파일 내 아래와 같이 예외 처리 하여 진행 중

 rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
...

prettier 변경 및 수정 요청

참고할만한 자료 및 레퍼런스

https://noogoonaa.tistory.com/62
https://firsteast.tistory.com/148

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.