5/15 TIL (개인과제 - 3일차)

개인과제를 시작한 지 3일이 지났는데 얼추 필수 기능 구현은 다 했나? 싶었는데, 중요한 걸 하나 빼먹었기 때문에
휴일인 오늘도 추적추적 내리는 빗소리와 함께 코딩을 했다.

(Working에 있는 카드랑 Done에 있는 카드랑 완료 버튼 위치가 왜 다름?..)
해당 투두리스트 항목이 Working에 있을 땐, 카드 좌측 상단에 있는 버튼을 "완료"로, Done에 있을 땐 "취소"로 바꿔줘야 한다.

근데 이건 생각보다 쉽게 코드를 작성할 수 있었다.

어차피 Working에 있을 땐 기존의 값인 "완료"로 돼있으니
따로 수정을 할 필요가 없었고, Done 부분만 토글 버튼을 수정해 주면 됐다

해당 버튼에 들어가 있는 완료를 아래와 같이 바꿔주면
item.status의 값에 따라 토글 버튼의 텍스트가 변경된다.

{item.status ? "취소" : "완료"};

해당 코드는 삼항연산자를 사용해서 item의 status 값이
true면 "취소", false면 "완료"로 출력된다.

최종 결과물

Working의 카드와 Done의 카드의 토글 버튼 위치가
다르길래 위치 수정 및 카드의 여백을 조정했다.

컴포넌트 분리도 한 번 해볼까 ??.. 생각하고 열심히 알아본 후, 바로 실천에 옮겼다. 그 전에 컴포넌트의 중요성 및 분리 기준을 한 번 알아봤다.

컴포넌트 분리의 중요성 및 장점

1. 단일 책임 원칙 (SRP) 구현: 각각의 컴포넌트는 하나의 명확한 역할을 수행할 수 있으며, 코드의 이해도와 유지보수를 향상시킨다.

2. 재사용성 향상: 공통 기능을 가진 컴포넌트를 분리하여 여러 페이지에서 재사용할 수 있다.

3. 가독성 증대: 코드를 작고 독립적인 컴포넌트로 나누어 코드의 가독성과 이해도를 높인다.

4. 테스트 용이성: 컴포넌트 단위 테스트를 쉽게 수행하여 코드의 안정성을 높일 수 있다.

5. 협업 개선: 개발자들이 각 컴포넌트에 집중하여 개발하면서 협업 효율성을 높일 수 있다.

컴포넌트 분리 기준

1. 단일 책임 원칙: 각 컴포넌트는 하나의 명확한 역할을 수행해야 한다.
2. 재사용 가능성: 비슷한 기능을 하는 부분은 독립된 컴포넌트로 분리하여 재사용성을 높인다.
3. 가독성: 코드를 작고 독립적인 컴포넌트로 나누어 가독성을 높인다.
4. 상태와 라이프사이클: 컴포넌트가 관리하는 상태와 라이프사이클 메서드를 고려하여 분리한다.
5. UI 요소: 서로 다른 UI 요소는 별도의 컴포넌트로 분리한다.

(출처: https://ctrlcccv.github.io/code/2024-03-05-component-split/)

근데 분리를 하면서 느낀 점이 있는데, 내가 코드를 짜면서 Article 부분에 몰아서 짠 느낌이 있는 거 같다.. 그래서 괜히 잘못 분리하고 지우고 하다가 코드 복구도 못 할 거 같아서 세세한 기능들 말고, 큰 틀로만 컴포넌트 폴더에 넣어봤다.

그치만.. 아마 컴포넌트 부분은 따로 못 건든 채로 과제를 제출하게 될 거 같은 느낌 ㅠㅠ

그래도 제출은 내일 오후 2시까지니깐 그 전까진 한 번 노력해 봐야지!..