to do 앱 만들기 후기

1. 최종 완성 모습

2. 어려웠던 점

2-1. json server와 연결하기 위한 수정

데이터를 state에만 관리 했는데 json server를 사용해 목업서버에 데이터를 저장하게 수정을 하게 되었다.

근데 패치를 리덕스의 과정 중 어디에 넣어야할지 잘 모르겠어서 어려웠다.

 

해결방안

fetch 함수-> 응답 -> 데이터 가공 -> dispatch-> action-> reducer  순으로 작성했다.

좀 더 알아 보니깐 일반적으로 미들웨어, redux-thunk를 사용해서 비동기 작업을 하는 것 같다.. 나중에 시간되면 다시 수정해야할 것 같다ㅜ

2-2. josn server의 patch

ptach 메서드로 데이터를 보내니깐 응답이 `{}`으로 왔다.

 

해결방안 

바디에 데이터를 잘 못 보내서 발생한 문제였다. 전체 데이터를 보내는 것이 아니라,  수정할 부분만 보내면 수정한 전체 데이터가 응답으로 오는 것이 였다. 

  function check(data) {
  // 파라미터로 바꿀 데이터의 id
    fetch(`http://localhost:3001/todo/` + data.id, {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
      // 수정할 부분만 보내주기
      body: JSON.stringify({"done": !data.done}),
    })
    .then((res) => {
      return res.json()
    })
    .then(data => {
      dispatch(toDo(data))
    })
    .catch((error) => {
      console.error('Error', error);
    });
  }

2-3. 엔터 입력으로 서버에 데이터 전송하기

할 일 내용을 엔터로 입력하면, 줄바꿈(`\n`)이 같이 서버에 전달 되었다.

그리고 입력창에도 줄바꿈이 보이고 나서 모달 창이 닫혔다.

 

해결방안

`onKeyDown` 사용해서 이벤트의 기본 동작을 막아 주었다. 

처음에는 `onKeyUp`에 추가해봤는데 아무 효과 없었다. 아마 `onKeyUp`은 이미 입력이 된 상태라서 그런것 같다.

          <textarea
            placeholder="할 일을 입력 후, Enter를 눌러주세요"
            onChange={(e) => setInput(e.target.value)}
            onKeyUp={(e) => e.code === 'Enter' && add()}
            onKeyDown={e => e.code === 'Enter' && e.preventDefault()}
            value={input}
          ></textarea>

`onChange`: 입력 요소의 value 속성값이 변경된 후에 호출
`onKeyUp`: 이벤트 핸들러는 키를 떼는 순간 호출 (텍스트의 길이를 제한)
`onKeyDown`: 이벤트 핸들러는 키를 누르는 순간 호출 (특정 키 입력을 막기)

2-4. 메뉴 모달 고정하기

메뉴를 오른쪽에 위치 시키고 싶은데 생각대로 움직이지 않았다.

 

해결방안

부모요소를 기준으로 `position: absolute` 사용하고 싶으면 부모 요소에 `relative`를 정의해줘야한다.

 

마치며..

생각보다 css가 어려웠다.. ㅜ 애니메이션도 하나도 못 넣은 부분이 많이 아쉽다.

그래도 시간안에 완성했다는데 의의를 두기로 했다.

기능 추가하고 싶고 코드도 너무 더러워서 정리하고 싶은데 프로젝트가 시작해서 가능할 지 모르겠다.

기능 추가는 못하더라도 미들웨어 공부해서 패치부분은 수정해봐야겠다. 너무 컴포넌트안에서 패치했더니 너무 지저분해 보인다. 

 

이전 블로그 중간 후기

To Do List 만들기