[프리온보딩코스] 4주차 - 과제7

🙋‍♀️잠깐만요!

왜 과제5 글이 없냐면.. 순서를 착각해서 잘못 썼기 때문에..!😭😭😭😭

일단 지금을 기준으로 (=수정된 이후)

5번째 과제 : 개인 - 한글 자음 카운트
6번째 과제 : 팀플 - 정렬과제
7번째 과제 : 개인 - 투두리스트

입니당.. 5번째 과제 얘기도 추후 올릴 예정..!

 

(5번째 과제 추가하고 갑니다🥰 바로 보기)

 

✍알게된 것과 느낀점

• 컴포넌트 설계 헷갈리지 말자
• 편리한 antd
• filter 메서드
• typescript와 친해지고 싶다

 

🔥그래서 해보는 정리

1. 컴포넌트 설계 헷갈리지 말자

• components 폴더 안에는 재사용할 컴포넌트를 주로 모아야 한다. (레이아웃 기반x)
• routes.js에서 import 하는 컴포넌트는 웬만하면 components 안에 있으면 안됨
• 데이터가 다르고 UI가 같으면 항상! 재활용 할 생각을 해야 함

이런거!!

 

 

2. 편리한 antd

Ant Design : 중국에서 만든 웹/앱 디자인 개발을 위한 프레임워크 (ant.design의 docs 보러가기)

 

사용하기

$ npm install antd

import { DatePicker } from 'antd';

ReactDOM.render(<DatePicker />, mountNode);

 

이번에 사용한 것

• Modal (https://ant.design/components/modal/)
• DatePicker (https://ant.design/components/date-picker/)

 

개인적으로 DatePicker에서 아쉬웠던(어려웠던) 부분은 날짜를 선택했을 때 input부분을 내 마음대로 변경하지 못한 것..ㅠㅠ

해보려했는데 결국 몰라서 못했다.. 지원하지 않는건지 (근데 안해줄리가 없다고 생각중)

사용해본 소감은 엄청 편하다! 디자인똥손.. 이제 울지않아도 괜찮아

그리고 이런 아이콘도 지원해주니 필요할 때 활용해보자! (https://ant.design/components/icon/)

 

 

3. filter 메서드

arr.filter(callback(element[, index[, array]])[, thisArg])

filter()는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새 배열로 반환한다.

 

    const removeTodo = (id: number) => {
        setTodoState((prevState) =>
            prevState.filter((todo: Itodo) => todo.id !== id)
        );
    };

그래서 선택한 아이템을 삭제할 때에는 선택한 해당 id와 일치하지 않는 것들만 반환하면 된다.

(예 : 1, 2, 3, 4, 5 중에서 2를 삭제하고 싶으면 1, 3, 4, 5만 리턴)

 

 

4. typescript와 친해지고 싶다

처음 봤을 때 : 🤔?

타입스크립트 쓰면서 오류가 굉장히! 많았고, 뭔가 vscode에서 tsconfig.json이랑 eslintrc랑 계속 오류난다고 떠서... 괴로웠다.

코드샌드박스에서는 잘 되는데...ㅠㅠ 일단 절대경로가 잘 안된건 우선 급한대로 상대경로로 import 했다.

 

그래도 이번 과제의 가장 좋았던 점은 다른 사람의 코드를 많이 볼 수 있었던 것! 그리고 타입스크립트 하나도 모르는데 그냥 나한테 다 짜라고했으면 상상만으로도 끔찍한데, 기본코드가 주어진 상태에서 시작해서 조금 더 수월했던 것 같다. 이게 무슨 말인지 해석해서 변형하거나 확장하면 되니까..! 

 

평소대로 짰더니 오류가 엄청 나는걸 보면 타입스크립트로 꼼꼼하게 검사했을 때 문제가 되는 코딩 습관을 갖고 있었다는거니까 얼른... 타입스크립트에 적응하는 수 밖에😂

 

 

👀참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter() - JavaScript | MDN