Git Product home page Git Product logo

todolist-react's Introduction

개인 토이 프로젝트 "오늘만 한다"

< 목차 >

# 개인 토이 프로젝트 팀 "오늘만 한다"소개

  • 팀원소개

# 개인 토이 프로젝트 소개

  • 개발 기간, 프로젝트 명&소개&목표

# 시작가이드

  • Installation

# 와이어프레임

  • 프로젝트 기능

    • 필수 요구 사항
    • 선택 사항
    • 파일 구조

프로젝트 팀 소개

팀원 소개

남해리
Enfj, Infp

@r03181231
FrontEnd

목표

- 포기하지 말자 !

- 피할 수 없으면 돌아가자 !

- 끝까지 완성하자 !


프로젝트 "오늘만 한다"

프로젝트 명 : 오늘만 한다 (Todo-List)

개발 기간 : 2024. 01.18 ~ 2024.01.22 (5일)

프로젝트 소개 : 미루지 않고 오늘 내에 끝낼 수 있는 일을 기록하는 Todo-List 입니다.

프로젝트 목표 : 딱 오늘만 할 수 있는 일을 기록하고 미루지 않게 끔하는 사이트입니다

🚦 Project Rules

개발 환경

  • editor : Visual Studio Code
  • environment : git, github
  • development : JavascriptES6, react18.2.0, CSS3, HTML5

Code Convention

  • JSX파일 이름 : 파스칼케이스

  • JSX파일 내 상위 함수의 변수 : 파스칼 케이스 (ex. export const Pascal = () => {} export Default)

  • 변수 : 카멜케이스

  • CSS파일 이름 : 카멜케이스

  • 클래스명 : 대쉬(-)

  • div id로 기능 구별 (ex. div id=”header” , div id=”search”)

  • branch 이름 : 타입_기능/#이슈번호 Feat_search/#1

  • issue 이름 : [타입] - 설명 [Feat] - search 기능 구현

개인 작업하기

  • 기능 개발을 위해 작성한 이슈 번호를 사용하여 branch를 생성합니다. (ex. (git branch 사용법 참고))

  • 작업 전에 develop branch를 반드시 pull하고 시작합니다. (git pull origin develop)

  • commit은 컨벤션을 지켜 메세지를 적습니다.

  • push은 해당 작업 branch에 합니다.

  • pull request도 컨벤션을 지켜 생성합니다.

  • 팀원들의 코드리뷰를 받았으면 merge 합니다.

  • 꼭! 브랜치를 헷갈리지 않도록 합시다. 이슈번호 확인!

Pull Request 하기

  • 본인이 작업하던 branch를 deve branch로 merge 합니다.
  • 절대 main으로 하지 않습니다!!
  • base는 develop , compare는 본인 작업 브랜치 입니다!!
  • PR제목은 [타입] - 설명으로 통일합니다.
  • Reviewers에는 상대방을 태그합니다.
  • Assignees에는 본인을 태그합니다.
  • Labels에는 해당 작업과 맞는 유형을 태그합니다.
  • 설명란에는 어떤 작업을 할 예정인지, 관련된 이슈번호가 있는지 참고한 내용이 있는지 등 필요한 내용을 적습니다.

PR 후 Merge 하기

  • pull request를 생성하면 슬랙에 리뷰를 요청합니다.
  • 팀원들은 내용을 확인하고 코드리뷰 comment를 자유롭게 작성합니다.
  • 모두의 comment를 받았으면 본인이 merge합니다.

Commit Convention

commit type

  • Feat : 기능 구현
  • Chore: 기능 변경 없는 코드 변경 사항
  • Del : 코드 삭제
  • Fix : 버그 수정
  • Docs : 문서 수정
  • Style : UI 추가 및 수정
  • Refactor: 코드 리팩토링
  • Test : 테스트 코드, 리팩토링 코드 추가
  • Setting: 프로젝트 세팅

commit message

  • 모든 커밋 메세지 뒤에는 이슈번호를 태깅합니다.
  • 커밋 메세지 영어로
  • 모든 커밋 메세지는 { [타입/#이슈번호] 메세지 } 로 작성합니다.
  • ex) [Feat/#1] add splash screen

시작 가이드

Installation

$ git clone https://github.com/r03181231/todoList-React.git
$ cd todoList-React
$ yarn install
$ yarn start

프로젝트 구성 및 기능


1. 필수 요구 사항

  • UI 구현하기

  • Todo 추가 하기

  • Todo 삭제 하기

  • Todo 완료 상태 변경하기 (완료 ↔ 진행중)

    • 제목과 내용을 입력하고, [추가하기] 버튼을 클릭하면 Working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 구성해주세요.

    • Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을 취소, isDone이 false 이면 라벨을 완료 로 조건부 렌더링 해주세요.

    • Todo의 상태가 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현합니다.

    • Layout의 최대 넓이는 1200px, 최소 넓이는 800px로 제한하고, 전체 화면의 가운데로 정렬해주세요.

    • 컴포넌트 구조는 자유롭게 구현해보세요.

      • 반복되는 컴포넌트를 찾아서, 직접 컴포넌트를 분리해보시고, 분리한 컴포넌트를 README에 작성합니다.

2. 선택 사항

  • todo수정 기능 (Update)
  • 추가 기능 form 유효성 검사
  • css - grid, flex
  • 현재 시간 추가
  • 버튼 및 todo영역 템플릿 만들기
  • 페이지 로드 및 todo 추가 후 제목에 포커스

2. 파일 구조

todolist-react's People

Contributors

haerhee avatar

Watchers

avatar

todolist-react's Issues

[Fix] - 치명적인 오류 발견

📕 Issue Feature
원래 잘 되다가 푸쉬하면서 코드가 밀려난 것 같아서 코드 분석

🧾Todo

  • 원래 잘 되다가 푸쉬하면서 코드가 밀려난 것 같아서 코드 분석
  • 작업사항

[Refactor] - 피드백 반영

📕 Issue Feature
전체적인 작업사항을 입력해주세요

🧾Todo

  • App.js는 리액트 컴포넌트니 다른 뷰와의 통일성을 위해 확장자를 jsx로 변경
  • App.jsx 유무 처리
  • 불필요한 빈 태그 처리
  • 주의!! uuid, shortid등을 사용
  • TodoForm에서 todoInputs => setTodoInputs의 함수형 업데이트를 이용
  • 유사한 형태의 UI를 공통화-> 템플릿
  • input에서 관리하는 여러 값을 객체 형태로 저장(공사)

리액트 입문주차 개인과제 리뷰 - 최원장 튜터

프로젝트 구조

image
이전에 리뷰해줬던 적이 있었죠. view와 각종 아이템을 분리하는 프로젝트 구조가 상당히 마음에 듭니다. App.js는 리액트 컴포넌트니 다른 뷰와의 통일성을 위해 확장자를 jsx로 변경해주셔도 좋을 것 같아요.

App.jsx의 역할이 뭘까요?

image
현재는, MainPage 컴포넌트를 호출하기만 하는데 뚜렷한 역할이 있는지 잘 모르겠어요. 불필요한 Depth가 들어간 것은 아닐까요?

불필요한 빈 태그, 그러나 좋은 구조

image
한 눈에 프로젝트가 어떤 모습으로 되어있는지 파악할 수 있어서 좋아요.

id 채번

image
id를 1부터 순차채번하게 되면, 중복의 우려가 있습니다. 주의!! uuid, shortid등을 사용하도록 합시다.

추가기능

image
기본 기능을 벗어나 원하는 추가기능을 기획하고 구현하는 부분은 정말로 칭찬받을만 합니다. 늘 이렇게 주어진 과제에서 일부 변경하여 더 많은 성취를 이루어나가시다 보면은 코드구현도가 상당히 올라갈거에요!!

TodoForm에서 정말로 todoInpus가 필요할까요?

image
setTodoInputs의 함수형 업데이트를 이용하면 굳이 todoInputs가 필요 없을 것 같은데 어떻게 생각하세요?

input에서 관리하는 여러 값을 객체 형태로 저장

image
정답처럼 여겨지는 패턴을 벗어나서 해리님만의 로직을 아주 잘 적용해주신 것 같아요. 그런데 이제, 여러 컴포넌트에서 id, title, comment, isDone, deadLine의 형태가 반복해서 쓰이고 있죠. 이런 경우 여러 군데에서 계속해서 추적하는 리소스가 필요해져요. 어떻게 하면 좋을까요? 고민해보세요 :)

다양한 hooks

image
기억하기로는 useRef 이외에도 useEffect도 사용하신 것으로 알고있어요. 높은 이해도를 바탕으로 과제의 기능을 효율적으로 작성해주셨습니다.

유사한 형태의 UI를 공통화

image
Working과 Done의 패턴이 반복되죠. 하나로 만들어서 재사용하는 것은 어떨지 제안합니다!

[Refactor] - 피드백 반영!

📕 Issue Feature
전체적인 작업사항을 입력해주세요

🧾Todo

  • 수정버튼 클릭, confirm시 true, false
//유효성
    const editSaveCheck = window.confirm("수정내용을 저장하시겠습니까?");
    if (
      editSaveCheck === true &&
      editValueTitle === title &&
      editValueComment === comment
    ) {
      alert("수정된 내용이 없습니다");
      return;
    }
    if (editSaveCheck === false) {
      alert("수정을 취소하셨습니다.");
      setIsEdit(false);
      return;
    }

    setTodoInputs((prevTodoInputs) => {
      alert("내용을 수정하셨습니다.");
      return prevTodoInputs.map((prevTodo) => {
        if (prevTodo.id === id) {
          return {
            ...prevTodo,
            title: editValueTitle, //새로 들어간 title값
            comment: editValueComment,
          };
        } else {
          return prevTodo;
        }
      });
    });
    setIsEdit(false);
  };
  // 수정 취소
  const onEditCancel = () => {
    alert("수정을 취소하셨습니다.");
    setIsEdit(false);
  };

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.