728x90 개발일지64 React 카카오맵 API 사용해보기 그냥 카카오 맵 API를 사용해도 되지만 나는 모달로 만들어 사용하는 법을 선택했다. 라이브러리 없이 모달 창 만들기 https://hanbbistory.tistory.com/61 React 라이브러리 없이 모달창 만들기 모달창은 어떻게든 사용되기에 라이브러리 없이 만들어봤다. // 모달 버튼이 있는 페이지 // ModalTest.jsx import ModalPage from "./ModalPage"; import { useState } from "react"; export default function Mo.. hanbbistory.tistory.com 우선 카카오 API 키를 받아와야한다. https://apis.map.kakao.com/ 위 화면의 오른쪽 위에 App key 발급을 눌러주면 로그인 .. 2022. 9. 24. React 무한스크롤 만들어보기 개발공부를 하다보니 무한스크롤을 사용하는 웹사이트를 들어가면 기능이나 사용감을 생각해보게 된다. 데이터를 효율적으로 처리하는 방법 중 하나라고는 하지만 사용자 입장에서도 부드러운 사용감이 생기지 않나 싶다. 간단하게 패키지 하나를 설치하고 시작해보겠다. yarn add react-intersection-observer 이름 그대로 요소를 관찰해주는 친구다 (target element or element의 부모 or 뷰포트가 교차하는 부분 등 관찰) -- 글작성 페이지 생략 -- // 데이터가 있다고 가정했을때 // TestInfi.jsx import { useEffect, useState, useRef, useCallback } from "react"; import { useInView } from "r.. 2022. 9. 20. React 라이브러리 없이 모달창 만들기 모달창은 어떻게든 사용되기에 라이브러리 없이 만들어봤다. // 모달 버튼이 있는 페이지 // ModalTest.jsx import ModalPage from "./ModalPage"; import { useState } from "react"; export default function ModalTest() { // 모달을 보여줄지 말지 상태를 관리하는 state를 만들어준다. const [showModal, setShowModal] = useState(false); // 모달 버튼을 클릭하면 열리고 const openModal = () => { setShowModal(true); }; // 활성화된 모달창 밖을 클릭하면 닫힌다. const closeModal = () => { setShowModal(f.. 2022. 9. 17. React datepicker 사용하기/css react datepicker 사용하기 https://reactdatepicker.com/ React Datepicker crafted by HackerOne reactdatepicker.com package 설치 yarn add react-datepicker import DatePicker from "react-datepicker"; // 데이트픽커 import import "react-datepicker/dist/react-datepicker.css"; // 데이트픽커 기본 CSS import { ko } from 'date-fns/esm/locale'; // 한국어 변환 export default function DatePickerTest() { const [startDate, setStartDat.. 2022. 9. 15. 이전 1 ··· 8 9 10 11 12 13 14 ··· 16 다음 728x90
