더 알아보기166 [react-datepicker] 달력 구현 및 주말/양력 휴일/음력 휴일 비활성화 하기 Next.js에서 react-datepicker를 사용하여 달력을 구현했었고 [React] 달력 만들기(react-datePicker)_v2 [React] 달력 만들기(react-datePicker)_v1 - 참고 블로그 더보기 - 라이브러리 추천 React에서 활용 가능한 DatePicker Library 정리 datepicker library 사용 후기 velog.io - react-datePicker 커스텀 && , || : 네이버 블로그 eundol1113.tistory.com 추가로 주말/공휴일 때 날짜 선택 비활성화 하는 기능을 구현하였다. 원래도 기능 구현 끝나면 정리를 하는 편이지만 이번에는 React 버전 예제가 너무 없어서 더더욱 정리하게 되었다.. JS datepicker와 React.. 2023. 1. 20. 반응형 footer 하단 고정하기 반응형 footer를 content 높이 상관없이 항상 하단에 고정하는 기능을 구현했다. "footer 하단 고정"이라고 구글링 해보면 많은 예제가 나오긴 하는 데 다 footer 높이가 고정된 상태에서 하단에 고정시키는 기능이라서 다른 블로그 css 참고 + js를 첨가하여 기능을 구현했다. (아래 블로그에서 css 부분 참고함) footer 하단 고정 항상 html 작성할때마다 footer가 날 괴롭힌다. 이상하게 구글링을 할때마다 자료들이 2% 아니한 50% 이상 모자라다. 조금더 완벽하고 컴팩트한 방법이 있어 작성한다. 구글링으로 나오는 자료들은 velog.io 과정을 요약하자면 아래와 같다. 1. Header, Content, Footer UI를 만들어 준다. (Header는 고정적, Conte.. 2023. 1. 17. [Next.js] 주소 입력 → 위/경도 출력 → 지도 출력 (카카오 geocoder/지도 api) 구현하려고 한 기능은 사용자가 주소 입력 시 위/경도를 계산해서 지도에 출력하는 기능이었다. 구글링을 해봐도 카카오/구글 developer로 이동해서 Html/Js/Css로 나오고 React 관련되어서 나오길래 여러 블로그를 테스트 해보다가 Next.js에 적용했던 과정을 기록했다. Next.js..... kakao 지도 관련 글이 어떻게 이렇게 없지😢 1. 카카오 지도 Api Key 발급 받기 주소를 위/경도로 변환해주는 기능을 Geocoding, Geocoder라고 한다. 구글링할 때 카카오 geocoder라고 치면 나온다. 카카오지도 API 키 발급 받는 방법 1. 카카오 개발자 사이트에 접속 https://developers.kakao.com/ 카카오 개발 사이트에서 “시작하기” 혹은 “로그인” .. 2023. 1. 10. css 전역화 시키기 2️⃣ (ver. :root) 사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;) developer.mozilla.org css 전역화 시키기 1️⃣ (ver. ThemeProvider) [styled-components] ThemeProvider로 공통 스타일 속성 관리하기. 지난 사촌 누나에게 피아노 연습실 페이지 마련해주기 프로젝트를 수행하면서 가장 크게 느꼈던 점은 바로 css에서의 통일성이 없다 라 eundol1113.tistory.com 이 글이 왜 .. 2023. 1. 6. css 전역화 시키기 1️⃣ (ver. ThemeProvider) [styled-components] ThemeProvider로 공통 스타일 속성 관리하기. 지난 사촌 누나에게 피아노 연습실 페이지 마련해주기 프로젝트를 수행하면서 가장 크게 느꼈던 점은 바로 css에서의 통일성이 없다 라는 것이었다. 약 15개의 컴포넌트와 12개의 섹션과 3개의 페 wonit.tistory.com 프로젝트 중간 리팩토링 과정에서 css 전역화를 하고 싶어졌다. 현재 CSS 관련해서는. css, styled-component, props로 넘기는 3가지 방식을 사용하고 있었기 때문에 첫 번째 시도에는 아래와 같은 방식으로 3가지 파트에서 전역화 시키려고 했었다. . css → className화 styled-component → ThemeProvider props → Object 상태에.. 2023. 1. 6. 크롬 비밀번호 자동완성 비활성화 프로젝트 테스트 중에 자꾸 상관없는 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. 이전 1 2 3 4 5 6 7 ··· 19 다음 728x90
