220329
👩🏻💻 Learn
이번주는 라이브러리를 가져와서 적용하는 중이다. 직접 코딩하는 것도 중요하지만 좋은 라이브러리를 골라 사용할 줄 아는 것도 중요한 능력이다.
많이 쓰이는 UI 라이브러리
-
안트 디자인
https://ant.design/ -
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로 넘겨준 값을 게시판 조회 페이지에서도 불러올 수 있도록 했다.
- useState를 이용하여 주소 라이브러리에서 원하는 값을 저장
// BoardWrite Container const handleComplete = (address: any) => { setPostcode(address.zonecode); // 우편번호 저장 setAddress(address.address); // 주소 저장 setIsOpen(false); };
- 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} />
- 게시판 상세보기에도 주소 데이터를 넘겨줌
// BoardDetail Presenter <S.Address> {props.data?.fetchBoard?.boardAddress.address} </S.Address>
+) 수정사항
defaultValue 로 주소값을 주면 수정 시 값이 남아있지 않는다... defaultValue 말고 value 로 줘야함!
📝 Review
토요일에 하루종일 아르바이트를 했더니 시간이 절대적으로 부족한 걸 느꼈다. 제대로 쉬는 날이 없으니까 체력이 딸리는게 느껴진다. 토요일에 밥 먹고 블로깅하고 나니 너무 피곤해서 기절하고... 평소에 하지 못한 개인적인 볼일(병원같은...)을 일요일에 처리하고 나니 하루가 금방 갔다... 그래도 뒤쳐지지 않으려고 열심히 했는데 개인 프로젝트가 조금씩 밀렸다. 아르바이트 그만두는 걸 진지하게 생각해봐야할 것 같다... 개인 프로젝트 할 땐 어찌저찌 커버한다해도 팀프로젝트가 시작하면 병행이 어려울수도...
휘몰아쳤던 1,2주차와는 다르게 이번주는 라이브러리랑 모듈 하면서 조금 쉬어가는 느낌이다. 오늘 주소 불러오는 거 성공해서 넘넘 행복했다...
🔥 Will
- TIL 거르지 말고 작성하기
- 알고리즘 시간엔 알고리즘만 하기
- 무조건 1시 전에 잠들기
Author And Source
이 문제에 관하여(220329), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@imnamesol/220329저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)