23일차 TIL (개인과제 - 팀 리뷰 / 수정사항 (디벨롭))

점심을 일찍 먹고 리뷰 시간을 가졌다.

css는 크게 신경 안쓰신 분이 대부분이셨고, 저랑 제로빈님만 꽤나 신경을 쓴 결과물이였다.

메인은 기능구현이고 메인에 어떻게 다가갔는지가 주된 관심사였다.

 

대부분 input에 입력한 두 값을 보내기 - 화면에 렌더링 - 삭제 기능까지는 수월하게 넘어왔는데,

버튼의 불리언 값에 의해 상태가 바뀌는(다시 돌아오게끔) 기능 구현에서 많은 고민들을 한거 같았다.

chat GPT를 능수능란하게 활용하셔서 이미 해결하신 분이 계셨다, 나와 한 분은 그 분에게 조언을 얻었다.

그래도 나는 곱씹다 보니 꽤나 이해가 가는거 같은데 한 분은 아직 어려워하셔서 어떻게든 도와드리고 싶었는데

일단 내거 먼저 더 만져보다가 다음 주에 한 번더 여쭤봐야겠다고 생각했다.

 

조장님은 선발대로 들어가셨는데 흥미있는 기능구현 과제들이 나와서 주위깊게 들어봤다.

기존 개인작업에 + loaclStorage 저장 - 수정 기능을 구현하는 거 였는데,

코드만큼 설명도 굉장히 길어져서 중간에 설명은 놓치기도해서 눈으로 계속 코드를 뜯어보았다.

 

나는 완료 - 취소 버튼을 toggle()에 넣어서 isDone의 상태에 따라 바뀌게 (클릭하면 true, 다시 클릭하면 false값으로)

구현해 놨다면,

조장님은 완료버튼 하나 취소 버튼 하나 하나 따로 두어서, 클릭할 때 마다 localStorage에 보내서 값들을 저장하게끔 하셨다.

// 처음 등록하기 버튼 클릭시 localStorage 저장

const clickAddButtonHandler = (event) =>{
    event.preventDefault();
    const newWorking = {
      id: working.length +1,
      work: title,
      content: content,
      isDone: false,
    }
    const updateWorking = [...working, newWorking];
    setworking(updateWorking);

//input 값들을 입력 후 등록하기 버튼을 누르면 localStorage 저장
    localStorage.setItem('todokey', JSON.stringify(updateWorking));
    setTitle('');
    setContent('');
  };

 

// 삭제 버튼 클릭시  그 배열을 다시 localStorage 저장

const clickDeleteButtonHandler = (id) => {
    const updateWokrings = working.filter((work) => work.id !== id);
    setworking(updateWokrings);
localStorage.setItem('todokey', JSON.stringify([...updateWokrings]));
  };

 

// 이후 완료 버튼 클릭시 그 배열을 다시 localStorage 저장
  const clickCompleteButtonHandler = (id) => {
    const updateWokrings = working.map((work) => {
      if(work.id === id) {
        return {...work, isDone: true};
      }
      return work;
    });
    setworking(updateWokrings);
    localStorage.setItem('todokey', JSON.stringify([...updateWokrings]));
  };
// 취소 버튼 클릭시 그 배열을 다시 localStorage - 다시 복귀
  const clickCancelButtonHandler = (id) => {
    const updateWokrings = working.map((work) => {
      if(work.id === id) {
        return {...work, isDone: false};
      }
      return work;
    });

    setworking(updateWokrings);
    localStorage.setItem('todokey', JSON.stringify([...updateWokrings]));
  };

 

다른건 크게 어려움이 없는데,

내가 구현에 토글 버튼에 맞게 넣어보고 수정 기능까지 추가해 볼 생각이다.

안되면 토글을 완료 - 취소 버튼으로 나눠야 하는데 그러면 시멘틱 하지않은 코드가 되지 않을까 라는 생각이 든다.

 

일단 localStorage 저장은 했으니 주말간 계속 해봐야겠다.