[리액트] 원티드 프리온보딩 챌린지

갖고 있던 나쁜 코드 습관을 고치고 더욱 강해지고자 🏋️‍♀️ 원티드 프리온보딩 챌린지에 참가하게 되었다.
참고로 프리온보딩 프론트엔드 코스와는 다른 코스이다. 더욱 자세한 정보를 원하신다면... 원티드에서 확인!

사전과제로 Todo App을 제작하고, 이를 개선하는 것이 챌린지 첫 과제이다. (+ 타입스크립트도 적용해야 한다.)
그리고, 첫 수업에서 배운 내용을 근거로 Todo App의 개선사항을 만들고, 개선 이유 등을 기록해야한다.

나는 개선해야 할 사항이 아주 뚜렷한 편이었다.
지금 확실히 눈에 띄는 게 두 가지 있는데, 계속 앱을 고치다가 다른 개선사항이 생기면 추가해야겠다 ㅎㅎ

---

-개선 사항

1. Todo를 삭제하거나 수정할 때, confirm 창이 존재하지 않음

강사님이 예시로 엇! 저희 집 고양이가 모르고 삭제 버튼을 눌렸어요! 혹은 수정 버튼을 눌렸는데 내용이 날라갔어요!! 같은 상황은 방지해야 한다고 하셨다.

저희 집 고양이가 그랬어요!

평소 타 웹사이트를 사용할 때, 당연시하고 넘겼던 부분이라 완전히 깜박하고 삭제 버튼 클릭 시 바로 글이 삭제되게 만들어뒀었다.. ㅎㅎ

- 전

바로 삭제되는 글..

- 후

 

- 코드

const removeTask = (index, taskId) => {
    if (window.confirm("삭제하시겠습니까?")) {
      const newTasks = [...tasks]; // 불변성 유지
      newTasks.splice(index, 1);
      setTasks(newTasks);
      deleteTodo(taskId);
    }
  };

window.confirm은 브라우저에 메시지와 확인, 취소 버튼으로 구성된 모달 창을 띄워준다. (위 예시 gif 참고)
alert는 자주 사용해봤지만, confirm은 제대로 사용해본 적이 없었다.
그만큼 삭제 기능처럼 확인 절차가 필요한 기능을 다뤄본 적이 없다는 말이겠지.. 반성하게 된다.

2. '단일 책임 원칙'을 따르지 않은 코드

단일 책임 원칙이란 하나의 모듈은 오직 하나의 액터에 대해서만 책임져야 한다.라는 뜻이며 단 한 가지 일만 해야 한다는 말이 아니다.
즉, 비슷한 로직을 가진 서로 다른 두 액터를 억지로 합칠 필요 없다는 뜻이다.
자세한 내용은 로버트 C. 마틴의 <클린 아키텍처>에서 확인해볼 수 있다.


Todo App에서 이메일과 비밀번호 Input에 입력값이 들어올 때의 onChange 역할을 해주는 함수를 만들었다.

-전

const [pw, setPw] = useState("");
const [isDisabled, setDisabled] = useState(true);

const changeInput = (e) => {
  const {
    target: { name, value },
  } = e;
  switch (name) {
    case "email":
      setEmail(value);
      break;
    case "password":
      setPw(value);
      break;

    default:
  }
};

email input이 변경 시(onChange) setEmail로 email state를 변경, password 경우에는 setPw로 state를 변경시키는 게 의도였다.

하지만, 이는 서로 다른 일을 하는 두 액터를 억지로 합치는 경우인 것이다!!
email이 변경되었을 때와 password가 변경 되었을 때 각각 하는 일이 있을 수 있다. (유효성 검사나 글자 수 제한 등)

굳이 합치기보다 단일 책임 원칙을 따르도록 바꾸어보자.

-후

  const onEmailChange = (e) => {
    setEmail(e.target.value);
  };
  const onPasswordChange = (e) => {
    setPw(e.target.value);
  };

        <input
          name="email"
          type="email"
          autoComplete="current-email"
          placeholder="이메일"
          onChange={onEmailChange}
          required
          className="input-account"
        />
        <input
          name="password"
          type="password"
          autoComplete="current-password"
          placeholder="비밀번호"
          onChange={onPasswordChange}
          required
          className="input-account"
        />

사실 타 강의를 수강하며 배운 방법을 프로젝트할 때마다 그대로 적용해서 계속 사용해왔다.
하지만, 이번 세션을 통해 강의를 수강할 때도 무작정 따라 하기보다 더 개선할 사항은 없을지, 충분히 clean한 설계 원칙을 가지고 있는지 등 항상 질문하며 답을 찾아가는 습관을 길러야겠다고 다짐했다.

+) 2번에서 작성된 코드는 사전 과제 피드백 시간에 지적받은 코드이다. 프론트엔드를 독학하며 아직 부족한 점이 많다고 느꼈다.
그리고, 이번 기회가 아니었다면 나쁜 습관을 계속 사용하며 지냈을 것이다. 피드백과 지적을 두려워하지말고, 더 나아가도록 노력해야겠다.
화이팅~! 🔥