220329

👩🏻‍💻 Learn

이번주는 라이브러리를 가져와서 적용하는 중이다. 직접 코딩하는 것도 중요하지만 좋은 라이브러리를 골라 사용할 줄 아는 것도 중요한 능력이다.

많이 쓰이는 UI 라이브러리

1. 안트 디자인
   https://ant.design/

2. Material UI
   https://v4.mui.com/

Husky

git hook, 즉 깃에 올리기 전에 파일을 낚아채 검사해주는 모듈이다. 허스키를 사용하는 이유는 협업을 할 때 코드가 서로 달라 소통에 혼선이 생기는 걸 방지하기 위함이다.

lint-staged

허스키의 짝꿍으로 git에 staged 된 파일만 lint 해준다. 실행 시 lint-staged 안에 미리 정의해 둔 규칙을 기준으로 작성한 코드가 eslint 규칙에 맞는지 검사한다.

yarn add husky@4 —dev 가장 안정적인 허스키 4 버전 설치
yarn add lint-staged —dev 검사 기준이 될 lint-staged 설치

// package.json 파일에 작성

"husky": {
    "hooks": {
      "pre-commit": "lint-staged" // 커밋 전에 허스키가 lint-staged를 기준으로 검사
    }
  },
  "lint-staged": { // 검사
	"**/*.{ts,tsx}": [ //모든 폴더 안에 있는 모든 타입스크립트 파일들에 대해 명령 실행
      "npx eslint '**/*.{ts,tsx}'"
    ]
  }

주소 라이브러리 사용하기

게시판에 주소 라이브러리를 모달과 함께 적용시켜서 불러온 데이터를 주소 입력창에 출력해냈다!!!
내가 사용한 건 useState를 통해 주소 라이브러리에 저장된 주소값을 변수에 저장해서 프레젠터 컴포넌트에 defaultValue를 통해서 출력! 그리고 props로 넘겨준 값을 게시판 조회 페이지에서도 불러올 수 있도록 했다.

1. useState를 이용하여 주소 라이브러리에서 원하는 값을 저장

// BoardWrite Container
const handleComplete = (address: any) => {
    setPostcode(address.zonecode); // 우편번호 저장
    setAddress(address.address); // 주소 저장
    setIsOpen(false);
  };

2. props를 통해 저장한 값을 받아와 defaultValue로 input 창에 출력

// BoardWrite Presenter
<S.PostBlank
  type="text"
  placeholder="07520"
  defaultValue={props.postcode}
/>
  <S.PostSearch onClick={props.showModal}>우편번호 검색</S.PostSearch>
{props.isOpen && ( // isOpen이 true 면 Modal 보여줌
  <Modal
    title="Basic Modal"
    visible={true}
    onOk={props.handleOk}
    onCancel={props.handleCancel}

  <DaumPostcode onComplete={props.handleComplete} />
    </Modal>
)}
<S.AddressBlank type="text" defaultValue={props.address} />

3. 게시판 상세보기에도 주소 데이터를 넘겨줌

// BoardDetail Presenter
<S.Address>
  {props.data?.fetchBoard?.boardAddress.address}
</S.Address>

+) 수정사항

defaultValue 로 주소값을 주면 수정 시 값이 남아있지 않는다... defaultValue 말고 value 로 줘야함!

📝 Review

토요일에 하루종일 아르바이트를 했더니 시간이 절대적으로 부족한 걸 느꼈다. 제대로 쉬는 날이 없으니까 체력이 딸리는게 느껴진다. 토요일에 밥 먹고 블로깅하고 나니 너무 피곤해서 기절하고... 평소에 하지 못한 개인적인 볼일(병원같은...)을 일요일에 처리하고 나니 하루가 금방 갔다... 그래도 뒤쳐지지 않으려고 열심히 했는데 개인 프로젝트가 조금씩 밀렸다. 아르바이트 그만두는 걸 진지하게 생각해봐야할 것 같다... 개인 프로젝트 할 땐 어찌저찌 커버한다해도 팀프로젝트가 시작하면 병행이 어려울수도...
휘몰아쳤던 1,2주차와는 다르게 이번주는 라이브러리랑 모듈 하면서 조금 쉬어가는 느낌이다. 오늘 주소 불러오는 거 성공해서 넘넘 행복했다...

🔥 Will

• TIL 거르지 말고 작성하기
• 알고리즘 시간엔 알고리즘만 하기
• 무조건 1시 전에 잠들기