46일차 TIL : 프로그래머스 / todolist

변시윤·2022년 12월 15일
0

내일배움캠프 4기

목록 보기
48/131
post-custom-banner

학습내용

프로그래머스
문자열 내 마음대로 정렬하기

todolist 보완
redux - create 구현


프로그래머스

문자열 내 마음대로 정렬하기

풀이

const solution = (strings, n) => {
  strings.sort((a, b) => {
    if (a[n] > b[n]) return 1;
    else if (a[n] < b[n]) return -1;
    else if (a > b) return 1;
    else if (a < b) return -1;
  });
  return strings;
};

처음에는 a[n]b[n]만을 비교했었는데 테스트1만 통과하고 2는 통과하지 못했다. 테스트2에서는 a[n]b[n]의 문자가 동일하기 때문이다. 이처럼 동일한 문자일 경우를 대비해서 단어 자체를 비교하기 위한 a,b 비교도 같이 들어가야 한다.



todolist

진행현황

redux 모듈에서 create 생성 후 컴포넌트와 연결해서 addTodo 기능 구현

  const addBtn = () => {
    if (!date || !todo) {
      return alert("빠진 내용이 없나 확인해보세요.");
    } else {
      setDate("");
      setTodo("");
      dispatch(
        addTodo({
          id: uuid(),
          date,
          todo,
          isDone: false,
        })
      );
    }
  };

addTodo에 저장해줄 데이터를 담아서 dispatch를 실행 후, 기존의 setState 작업을 리듀서에서 실행해주는 방식이다.

인풋박스는 상태가 변할 때마다 일일이 저장하는 게 아니기 때문에 Local State로 관리하고, 최종적으로 추가하는 값만 Global state에서 관리했다.

원래는 onChange가 아닌 useRef 방식을 사용했었는데 그렇게 하니까 setState가 불가능해져서 기존의 방식을 사용했다. 물론 안되는 게 아니라 내가 못하는 걸거다ㅎㅎ 해결하고 싶었지만 시간이 없는 관계로 일단 onChange로 쇼부보기로...

에러

인풋박스가 빈칸일 때 alert 반환 후 빈 리스트 추가
기존에는 if문으로 dispatchsetState 작업을 먼저 해준 뒤 else문으로 alert을 띄우는 방식이었는데 둘의 순서를 바꿔서 해결

특정 투두리스트의 id값 미반환

      {list.map((item, i) => {
        if (!item.isDone) {
          return (
            <List
              key={i}
              onClick={() => {
                navigate("/" + i);
              }}
            >
              <Date>{item.date}</Date>
              {item.todo}
              <ButtonArea>
                <Button>{item.isDone ? "cancel" : "done"}</Button>
                <Button
                  id={item.id}
                  onClick={delBtn}
                >
                  delete
                </Button>
              </ButtonArea>
            </List>
          );
        }
      })}

{item.id}id를 받아올 시 조건문을 충족하는 모든 리스트의 id를 가져온다. 왜냐하면 map 메서드 때문에 모든 item을 반환하고 있기 때문이다.

이런 경우는 리스트만을 반환하는 컴포넌트를 따로 제작한 후 거기에서 해당하는 id만을 가져오면 된다.

라고 팀원분께서 알려주셨는데 설명을 들었을 땐 이해가 됐는데 직접 해보니까 또 아리송하다.... 오늘 안에 완성하고 싶었는데 시간이 늦은 관계로 내일 다시 물어보는 걸로...^^

내일 할 일

  • UPDATE/DELETE 구현하기
  • 인풋에 텍스트가 있는 상태에서 상세페이지 이동시 인풋값 초기화 하기
profile
개그우먼(개발을 그은성으로 하는 우먼)
post-custom-banner

0개의 댓글