코딩기록

페이지네이션을 만드려고 찾아보다가 react-paginate 라이브러리를 선택해서 만들었다.하지만,, 마음에 안든다..가운데 ...도 거슬리고 페이지가 5개씩만 나오게 하고 싶은데 찾아보니 안된다고 한다. 라이브러리 선택하는 것도 잘 해야한다더니 그 말이 맞음,, 다시 페이지네이션을 만들어보기로 한다.. export default function Pagination({ totalItems, itemCountPerPage, pageCount, onClick, currentPage,}: IPropsPage) { const totalPages = Math.ceil(totalItems / itemCountPerPage); // 총 페이지 개수 const [start, setStart] = useSt..

document.querySelector('.modal').addEventListener('scroll', function() { document.querySelectorAll('.video_wrap video').forEach(function(video) { const videoHeight = video.clientHeight; //비디오 높이 const videoTop = video.getBoundingClientRect().top - videoHeight; if (videoTop -(videoHeight + videoHeight / 2)) { // 여유사이즈 동영상 높이의 절반 video.play(..

어제 만든 캠핑리스트 캠핑장 입지 구분을 아이콘으로 넣고 싶었다.참고로 활용 메뉴얼 보면 데이터 설명 나와있음.      LocationICon.tsximport styled from "@emotion/styled";interface IPropsType { type: string;}const Icon = styled.i` display: inline-block; width: 3.2rem; height: 3.2rem; background-size: 100%; background-repeat: no-repeat; ${(props) => { switch (props.type) { case "산": return `background-image: url(/image/icon..

캠핑 사이트를 만드려고 공공데이터포털에서 캠핑 api를 신청했다.  인증키는 최상단에 .env파일을 만들어서 NEXT_PUBLIC_SERVICE_KEY  인증키를 넣어준다.next.js는 NEXT_PUBLIC  을 붙여줘야 함.리액트는 REACT_APP    나는 캠핑장 정보를 카드 형태의 리스트로 제공하고 싶었다.  interface ICampingList { facltNm: string; lineIntro?: string; addr1: string; firstImageUrl?: string; themaEnvrnCl?: string; tel: string; contentId: number;}interface IApiResponse { response: { body: { it..

interface Option { value: string; label: string;}const customSelect = (isMain: boolean): StylesConfig => ({ control: (base, state) => ({ ...base, width: isMain ? "26rem" : "20rem", borderRadius: "1rem", background: state.isDisabled ? "#f6f6f6" : "rgba(255, 255, 255, 0.3)", boxShadow: "none", borderWidth: ".2rem", borderStyle: "solid", borderColor: state.isDisabled ? "#..

나는 드롭다운으로 지역을 선택하는 것을 만들고 싶었다.셀렉트박스를 커스텀할 수 있는 방법을 찾아보다 리액트 셀렉트를 발견 대한민국 행정구역 파일도 찾으면 있을 거라 생각해서 json을 찾았다가 변수로 정의된 코드를 찾았음.export const AREA0 = ['전체', '서울', '인천', '대전', '광주', '대구', '울산', '부산', '경기', '강원', '충북', '충남', '전북', '전남', '경북', '경남', '제주'];export const AREA1 = ['강남구','강동구','강북구','강서구','관악구','광진구','구로구','금천구','노원구','도봉구','동대문구','동작구','마포구','서대문구','서초구','성동구','성북구','송파구','양천구','영등포구','용산구'..

기존 스와이퍼 설정const studentGroupSlide = new Swiper('.swiper-container', { slidesPerView: "auto", spaceBetween: 0, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }});  하지만 나는 슬라이드가 여러개고 같은 슬라이드라 설정을 여러번 해주고 싶지 않다..swiper-container 를 querySelectorAll로 선언해서 반복문으로 설정해봤지만 실패!방법을 찾다가 발견했다. 멀티 스와이퍼 설..

원래 chart.js 에서 함수를 직접 작성해가면서 기능을 추가했는데기존 네 영역에도 색을 주고호버하면 색을 또 주고클릭하면 또 주고..코드가 길어질 것 같아서 html 객체를 생성했다.  11번 탭탭탭 22번 탭탭탭 3번 탭탭탭 4번 탭탭탭 .background도 영역 나누기 .chart { position: relative; width: 700px;}.background { width: calc(100% - 47px); height: calc(100% - 61px); left: 27px; ..

데이터는 0 ~ 100으로 들어가지만 위아래 여백을 주고 싶어서 +- 10씩 해줬다.   const ctx = document.getElementById('myChart');const dataValues = [75, 25, 50, 0, 100];// 이미지 아이콘const imageUrls = [ './emoji_0.png', './emoji_25.png', './emoji_50.png', './emoji_75.png', './emoji_100.png',]const images = imageUrls.map(url => { const img = new Image(25, 25); img.src = url; return img;});..

td에 boder-bottom이 있는 상황에서tr을 호버했을 때 tr에 테두리를 주고 싶었다.어떻게 하나 찾아보니 역시 방법은 있다. outline   을 이용하면 된다.   See the Pen table tr hover border by _홍시 (@wlcbybsd-the-sasster) on CodePen.offset은 간격 조절하려고 넣어줬음.