TIL 열두걸음
⭐ 어제의 멘붕 기운이 오늘까지 이어졌나보다. 오늘도 git repository에 git add .
git commit -m
하려니까 충돌이 일어난다고 한다. 열심히 구글링하다가 index.lock 파일을 지우고 다시 add하고 commit하니까 드디어 되더라!!! 하지만 그전에 깃헙에 올라가지 말아야할 node_modules까지 올라가더라! 원격저장소와 로컬저장소에 저장된 node_modules를 제거하고자 한다면 요기(클릭)를 참고해보자
1) modal 창
기본적으로 브라우저 화면에서 등록버튼
이나 삭제버튼
을 누르게 되면 알림창이 뜨는데 그 알림창을 좀 더 세련되고 가시성을 높여줄 수 있다.
2) 기본 modal
- 소스코드를 ant design에서 받아와 modal창을 띄우면 위(☝)사진처럼 뜨지만 기본적인 창은 아래(👇) 사진과 같다.
- 한눈에 알아볼 수 있을만큼 모달 알림이 훨씬 가시성에 좋다.
- 위(☝)사진의 코드들을 직접 vscode에 적용해볼 수 있으며 비밀번호 입력 알림창 소스코드들을 가져와 실행시켜보면 아래 사진(👇)처럼 실행이 된다.
1) ant design에서 제공해주는 기본 소스코드들을 사용해보자
위(☝) 소스코드는 리팩토링전 코드이며 기본적으로 제공되는 코드들이다. vscode에서 한번 실행시켜보자.
- 주소 검색창에 서울을 입력하면 아래 사진(👇)처럼 목록들이 뜨게 되며 원하는 주소를 선택할 수 있게 된다.
- 하지만 앞서 제공된 기본 소스코드에선 문제점이 존재한다.
- 검색창에
서울
이란 단어를 지우지 않고 알림창을 끄고 다시우편번호 검색
을 클릭하게 되면 검색창에서울
이란 단어가 그대로 남아있다.
- 이전에 검색했던 단어가 검색창에 남아있는 문제를 아래(👇) 코드를 참고해서 해결해보자
- 기본적으로 제공된 소스코드이다(☝)
- 수정 후(👇)
- && 연산자를 이용해 isModalVisible값이 true이면 visible값을 항상 보여지게끔 입력
2) 리팩토링 후(👇)
중복되는
setIsModalVisible
을onToggleModal
메서드를 이용해서 전보다 더욱 간단하게 리팩토링 해 줄 수 있다.