728x90 🧠 지식창고/기능84 크롬 비밀번호 자동완성 비활성화 프로젝트 테스트 중에 자꾸 상관없는 input 태그에 크롬에서 저장한 아이디와 비밀번호가 입력되어 alert가 띄워지는 오류가 발생했다. 사용자가 등록 폼에서 input 부분을 채우면 정규식 검사를 통해 경고창이 띄워지는 부분인데 페이지 진입 시 자동으로 input이 채워지면서 inputHandler가 동작했다. console.log(formInfo);를 찍으면 아무것도 없다고 나오고, inputHandler에서 e.target.value를 찍어보면 값이 있고... 정작 Input에는 값이 안보이고 한참 애를 먹다가 크롬 비밀번호 자동 완성 때문이라는 사실을 알아챘다. 원인 : input에 type="password"인 경우에 종종 발생함 해결 방법 : 기존 input 위에 훼이크 마냥 input을 하나.. 2022. 12. 13. Pagination 만들기 (라이브러리 X) 오늘은 Pagination(페이지 네이션) 기능을 만들어 보았다. 라이브러리 대신 부트스트랩으로 CSS 입혔고, 기능은 JS 사용해서 만들었다. (라이브러리를 사용하지 않은 이유 : 블로그를 찾아보던 중 react-js-pagination이라는 라이브러리를 테스트해보았는 데 CSS가 안 먹히거나 먹혀도 기능이 동작을 안 하는 경우가 생겨서 그냥 만들어 보았다.) react-js-pagination Simple, easy to use component for pagination. Compatible with bootstrap paginator stylesheets. Latest version: 3.0.3, last published: 3 years ago. Start using react-js-pagina.. 2022. 11. 9. 반응형 사이드바 구현하기 구현하게 된 계기 관리자 리뉴얼 프로젝트를 진행하기에 앞서 반응형 CSS를 공부해보고 싶었고 미리 틀 잡아두면 좋을 것 같아서 구현하게 되었다. 출처 및 선택한 이유 React - Sidebar/Model Preview : 사이트 방문 : https://sidebar-modal-withreact.netlify.app/ 소개 : 목록을 볼 수 있는 SIdeBar와 Modal을 볼수있는 APP입니다. useContext를 활용하여 여러 component에서 사용할 수 있는 Provider생성하여 만들어 proglish.tistory.com 부트스트랩 사이트, 다른 블로그들도 많이 둘러보았는 데 JS 없이 CSS에 translate 속성만을 가지고 반응형을 구현하신 부분이 좋아서 위 블로그를 참고해서 구현하였.. 2022. 11. 7. [React] IntersectionObserver를 사용하여 스크롤 애니메이션 구현하기 [JS] IntersectionObserver 사용해보기 코딩 애플 영상은 짧지만 임팩트 있게 머리에 콕콕 박아줘서 너무 좋은 것 같다. IntersectionObserver 기능으로 스크롤 애니메이션을 쉽게 만들 수 있다고 해서 따라 해 보았다. (반응형 웹사이트 구 eundol1113.tistory.com 앞 글에서 정리했던 JS에 IntersectionObserver 기능을 React에 적용 해보았다. React에 Intersection Observer API가 있다는 데 봐도 어떻게 사용하는 건지 잘 모르겠어서 JS와 useRef를 섞어서 구현해보았다. const introRef = useRef(null); const guideRef = useRef(null); useEffect(() => { l.. 2022. 11. 4. [JS] IntersectionObserver 사용해보기 코딩 애플 영상은 짧지만 임팩트 있게 머리에 콕콕 박아줘서 너무 좋은 것 같다. IntersectionObserver 기능으로 스크롤 애니메이션을 쉽게 만들 수 있다고 해서 따라 해 보았다. (반응형 웹사이트 구현할 때 참고하면 좋을 것 같다. 영상에서는 내년쯤 scroll timeline 기능이 새로 출시된다는 데 추후 공부해보면 좋을 것 같다.) 🛠️코드🛠️ new InterectionObserver를 사용해보겠습니다. 이걸로 뭘 할 수 있냐구요? scroll animation을 쉽게 구현 할 수 있습니다. 엄청나죠? 이거 싫으면 내년쯤 나오는 CSS에 scroll timeline 속성을 사용하면 좋다고 한다. + 위 예제는 JS 버전이라서 React에서는 어떻게 사용할 수 있을까 찾아보니 Inter.. 2022. 11. 4. [React] 날짜, 시간 선택 달력 만들기 (ver.시행착오) 첫 회사 입사 후 새로운 프로젝트도 진행하고 있지만 기존에 사용 중이던 프로젝트를 유지/보수하는 일도 하면서 나름대로 HTML/JS/CSS 부분에 수정사항은 큰 어려움 없이 진행하고 있다고 생각했는 데 라이브러리를 적용하려고 하니 너무 어려워서😢 많은 시행착오를 경험했고 내 방식대로 정리해보려고 한다. ❓요청사항 : 현재 예약하기 페이지에 예약 정보 폼은 아래와 같이 Calendar 라이브러리, Select/Option으로 이루어져 있다. 사용자들이 이용하기 편한 방식으로 개편하기 위해 아래와 같은 UI와 기능으로 수정하면 좋을 것 같다는 요청이었다. 🤔 수정사항 기존에 사용 중인 datePicker(Calendar 라이브러리)을 활용하거나 다른 Calendar 라이브러리를 활용하여 날짜 선택 부분 UI.. 2022. 10. 13. [React] 버튼 눌러서 프린트 출력하기 [JS] window.print()를 사용하여 프린트 영역 출력하기 자바스크립트 프린트 지정 영역 출력하기 window.print() 사용 웹페이지를 하다보면 사용자로 하여금 출력물을 프린트할 수 있도록 하면 좋다. 자바스크립트에서는 프린터로 출력하는 함수인 window. eundol1113.tistory.com 이전에 정리해둔 게시물을 참고해서 Next.js(React)에서 기능을 구현해보니 몇 가지 문제점이 발생하였다. 1) window.print()만 사용하는 경우 잘 동작하지만, window.onbeforePrint(), window.onafterPrint()를 사용하면 출력 버튼이 한 번만 동작한다. (다시 눌러도 동작은 안 함) 2) 1번에서 발생한 문제 때문인 지 몰라도 원하는 영역 선택이 .. 2022. 9. 14. [JS] window.print()를 사용하여 프린트 영역 출력하기 자바스크립트 프린트 지정 영역 출력하기 window.print() 사용 웹페이지를 하다보면 사용자로 하여금 출력물을 프린트할 수 있도록 하면 좋다. 자바스크립트에서는 프린터로 출력하는 함수인 window.print() 함수를 제공한다. 단 웹페이지 전체가 프린트 영역이 lngnat.tistory.com JS에서는 프린터를 출력하는 함수인 window.print() 함수를 제공한다. 단, 웹페이지 전체가 프린트 영역이기 때문에 프린터 출력 영역을 지정해주는 것이 좋다. 1) window.print() 사용하기 : window.print() 함수를 사용하면 아래 사진과 같이 전체 페이지를 출력하게 된다. Document 직접 출력하기 출력되는 부분 두번째 문단 출력 위 경우에는 필요없는 부분까지 출력될 수 .. 2022. 9. 8. [Editor] summernote로 에디터 구현하기 [Editor] Quill 에디터 적용하기 [React] Next.js에서 Quill 에디터 사용하기 이 글에는 Next.js에서 react-quill의 사용 없이 Quill 에디터를 사용하기 위한 코드를 제공합니다. 코드의 부족한 점과 문의 사항은 댓글 주시면 답변 및 수정하 eundol1113.tistory.com 이전에 구현해봤던 Qull 에디터는 이미지 사이즈 변경하는 기능을 구현하지 못해서 새로운 라이브러리를 찾던 중 summernote 라이브러리를 발견했다!! Quill 라이브러리와 비교했을 때 더 좋다고 생각했던 부분은 1) 코드가 더 간결하고 알아보기 쉽다. 2) 부트스트랩과 jQuery를 기반으로 하고 있어서 (내 입장에서는) 이해하기 쉬웠다. 3) 원하는 대로 커스텀 하기 좋다. 공식문.. 2022. 7. 25. 이전 1 2 3 4 5 6 ··· 10 다음 728x90
