[TIL] 2022년 01월-25일 TIL - Ant Disgin Modal, Husky

이번 시간에는 내가 만들 사이트에 조금 더 디자인화된 라이브러리를 사용할 수 있는 Ant Design을 배웠다. 이 분에서는 우리가 버튼을 누를때 뜨는 상태창을 디자인 할 수있는 모달을 사용할 수 있었다.

 

목표

• 알림창이 이전보다 예뻐졌어요 => Modal
• 주소 우편번호를 검색해보자 => React-Daum-Postcode
• setState에 이런 기능이? => prevState
• 코드를 깔끔하게! 중복은 사라지게!! => refectoring 
• 규칙을 지키지 않는다면 Github를 푸쉬할 수 없다 => Husky

우리가 간단히 모달을 직접 구현하는 것 보다 라이브러리를 사용해 간편하게 모달을 띄워줄 수 있는 라이브러리들이

존재한다. 그 중에서 Ant Design을 살펴보자.

Ant Design으로 적용할 수 있는 컴포넌트는 여러가지로 구성되어 있다. 클릭시 이벤트를 발생할 수 있는 버튼 컴포넌트와 아이콘 등등이 있다.

import { useState } from 'react';
import { Modal, Button, Space } from 'antd';

Ant Design을 사용하기 위해서는 라이브러리를 직접 불러와 줘야한다. 일단 우리는 Modal 기능을 구현해보자.

<Button type="primary" onClick={showModal}>
                모달 열기
 </Button>
    <Modal title="게시글 등록" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <p>게시글이 등록되었습니다.</p>
  </Modal>

우선 클릭시 이벤트가 발생하고 Modal 창이 열리는 기능을 구현해보았다.

React에서는 일반적으로 함수로 사용해 모달 기능을 구현하는 반면 Ant Design에 코드 하나만으로도 모달기능을 

구현해 줄 수 있다.

 

주소 기능 구현하기

우편번호 주소 검색창을 지원하는 라이브러리중 react-daum-postcode라는 라이브러리가 있다. 

이 라이브러리는 daum지도를 기반으로한 주소 검색 모달창을 지원해주는 기능이다.

import DaumPostCode from 'react-daum-postcode';

복잡한 코드 구성 필요없이 import 딱하나만으로도 주소 구현이 가능하다.

    const onCompleteDaumPostCode = (data: any) => {
        setAddress(data.address);
        setZonecode(data.zoneCode);
        setIsModalVisible(false);
        // console.log(data);
    };

 <button onClick={showModal}>우편번호 검색</button>
       {isModalVisible && (
             <Modal title="Basic Modal" visible={true} onOk={handleOk} onCancel={handleCancel}>
                   <DaumPostCode onComplete={onCompleteDaumPostCode} />
             </Modal>
        )}
 <p>{address}</p>

규칙 안지킨 사람 GitHub 푸쉬도 하지마!!! - Husky

Husky?? 가 뭔가요?

Husky는 프론트 개발 환경에서 git hook을 손쉽게 제어하도록 도와주는 매니저다. git hook은 말 그대로 

갈고리 같은 건데, git을 쓰다가 특정 이벤트(커밋, 푸쉬할때) 가 벌어졌을 때, 그 순간 '갈고리'를 넣어 

특정 스크립트가 실행되도록 도와주는 git hook이다.

 

참고:https://www.huskyhoochu.com/npm-husky-the-git-hook-manager/

 

즉, 여러 사람들이 모아 설정한 규칙을 위반한다면, 그 규칙에 한에서 저장소에 push를 금지시킬 수 있는 기능이다.

 "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{ts,tsx}": [
      "npx eslint '**/*.{ts.tsx}'"
    ]
  }

husky 규칙을 설정하기 위해서는 husky라이브러리를 다운받고 설정해야 한다. 그후 package.json에서 husky hook을 

설정후 lint-staged에서 규칙을 적용할 파일들을 설정하면 된다.

이렇게 규칙이 위반한 코드가 있다면 즉시 commit을 중단한다.