1. url이 바뀌면 메뉴 버튼 닫기
리액트의 기본 훅을 사용하여, 간단하게 해결했다. 링크로 대체했다!
2. 머테리얼ui의 Date Time Picker와 Moment.js
이후에도 프로젝트에서 moment.js를 활발하게 사용하고 있었고, 필요할 때마다 검색 해보던 중 이런 링크를 발견하게 되었다. 개발 중단이라니??..
https://medium.com/@yeon22/library-moment-js-%EA%B0%9C%EB%B0%9C-%EC%A4%91%EB%8B%A8-ec64e6709261
(Library) Moment.js 개발 중단
Moment.js 라이브러리(이하 Moment)가 사실상 개발 중단을 선언했습니다. 그 이유와 대안을 문서에 잘 정리해 두어서 간단하게 정리하여 알려드리려 합니다.
medium.com
확인을 위해 npm에 들어갔고, 마지막 릴리즈가 10달 전인것을 확인했다... 이때까지 시간 라이브러리에 대해서는 moment.js 추천이 압도적이고 쉽고 편해서 계속 사용해왔는데, 어느정도 개발을 끝내놓고, 리팩토링 때, 시간 라이브러리 교체에 대해 진지하게 고민을 해봐야될 것 같다.
3. 같은 함수 내에서 SetState 2번 이상 사용해야 될때엔?
아래의 링크로 대체하도록 하겠다.
같은 함수 내에서 SetState 2번 이상 사용해야 될때엔?
이 때까지 함수 안에서 setState를 두 번이나 쓴 적이 없어서, 따로 처리를 해주지 않으면 안된다는 것을 모르고 지내왔다. 참고링크는 아래를 보면 된다. https://kmhan.tistory.com/314 { // this.setState를..
cheri.tistory.com
4. alert와 confirm 라이브러리
정말 빈번하게 사용하고 있는 alert와 confirm. 기본 디자인을 보고 있자니... 🤯결국 찾아나섰다. 라이브러리가 어마무시하게 많..다. 어느정도 추려내기 위해 npm에 있는 것만 리스트업 해보고자 한다.
- bootbox : https://www.npmjs.com/package/bootbox 부트스트랩과 제이쿼리를 설치해야...
- alertifyjs : https://www.npmjs.com/package/alertifyjs 기본 스타일이 필요한다면 추천.
- tooltipster : https://www.npmjs.com/package/tooltipster 제이쿼리를 설치해야되지만, 자유도가 높아보인다.
- sweetalert2 : https://www.npmjs.com/package/sweetalert2 주간 다운로드 30만.. 예쁘고, 사용법이 간단하다.
- react-toastify : https://www.npmjs.com/package/react-toastify 이미 사용해봤고, 좋았지만, 기능이 더 필요했다.
그 외 여러개를 찾아보았지만 디자인이 우리 팀에서 생각했던 것과 일치했고, 간단하게 사용할 수 있고, 무엇보다도 docs의 최신화와 업데이트가 잘 되어있다는 점에서 sweetalert2 사용하기로 했다.
docs도 잘 되어있어서, 너무 간단하게 sweetalert2를 뚝딱 적용해버렸다.
이 뒤에가 문제인데, 사용할 때마다 swal을 적용하는 것은 효율이 좋지 않은 것 같아서 모듈화를 진행하였다. 인자에 후처리 함수를 받아와서 처리하고자 하는데, 후처리 함수가 서버에 요청을 보내야 되는 함수라면, 요청실패시에는 어떻게 렌더링을 해주어야 할까? 고민이다.
지금의 내가 할 수 있는 방법은 미들웨어 (redux-chunk) 쪽에서 통신결과에 따라 swal창을 렌더링 시키는 것이다. 다른 방법이 있거나 찾으면 적용해봐야지
5. 클릭하면 type이 file인 input이 실행되게 하기
내가 원하는건 위의 사진과 같이 저 빨간 밑줄 친 부분을 클릭하면 <input type="file"/>을 선택하게끔 동작하는 것이다. 기존 <input type="file"/>은 display:none으로 안보이게 처리하고, 클릭하여 이미지를 추가해주세요가 들어가있는 div를 클릭하면 <input type="file/>이 실행되게 처리했고, 그 파일의 객체를 가져오는것은 input에 ref를 달아서 가져오기로 했다.
근데 여기서 문제! 저기 있는 input을 map을 돌리면서 여러개를 양산해 낼때가 문제다. 아래의 사진처럼 말이다. ref는 dom노드나 엘리먼트에 접근하기 위해서 사용하는건데 ref가 들어간 요소를 map을 돌리면 되겠는가... 그렇다. 내가 그렇게 오류를 범했다. 😥
다른 방법을 생각해내야 했다. 그래서 css적으로 기존 ref를 몽땅 지우고, 저기있는 div 안에 <input type="file"/>을 두고, input이 div의 width와 height를 꽉차게하고, opacity:0 이고, z-index:99 로 하면 사용자 눈에는 div가 보이겠지만, 정작 클릭하는건 <input type="file"/>이 된다. 그리고 성공!!!!!! 오류가 해결이 되었다. 🤗🤗🤗
'🙋♀️ 회고 > 항해99 2기' 카테고리의 다른 글
| [WIL] 항해 99 12주차 회고록 (0) | 2021.08.23 |
|---|---|
| [WIL] 항해 99 11주차 회고록 (0) | 2021.08.19 |
| [WIL] 항해 99 9주차 회고록 (0) | 2021.08.02 |
| [WIL] 항해 99 8주차 회고록 (0) | 2021.07.27 |
| [WIL] 항해 99 7주차 회고록 (2) | 2021.07.19 |
