코딩기록

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

어제 만든 캠핑리스트 캠핑장 입지 구분을 아이콘으로 넣고 싶었다.참고로 활용 메뉴얼 보면 데이터 설명 나와있음.      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 = ['강남구','강동구','강북구','강서구','관악구','광진구','구로구','금천구','노원구','도봉구','동대문구','동작구','마포구','서대문구','서초구','성동구','성북구','송파구','양천구','영등포구','용산구'..

패러렐 라우트(Parallel Route) Parellel은 병렬이라는 의미를 가지고 있음. 즉, Parallel Route는 병렬 라우트로 해석할 수 있고, 병렬 라우팅을 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링 할 수 있음. 병렬 라우팅을 이용하면 경로가 독립적으로 스트리밍될 때, 각 경로에 대해 독립적인 오류 및 로드 상태를 정의할 수 있음. ✔️ 구현하고자 하는 것 트위터 로그인 화면에서 로그인을 누르면 i/flow/login/page.tsx가 모달 형식으로 띄워지는 화면 📌 기존 모달과의 차이점 기존 모달과의 차이점은 주소가 바뀌냐 안 바뀌느냐이 차이다. 패러렐 라우트는 동시에 띄워진 페이지의 주소가 각각 다르고, 기존 모달은 주소 변경 없이 모달이 동작한다..

import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; nextui에서 가져온 코드이고 설치도 잘 되어있는데 자꾸 형식 선언을 찾을 수 없다는 오류가 나와서 문제를 계속 찾았다. 어이없게 vscode 껐다 키니 해결... https://nextui.org/ NextUI - Beautiful, fast and modern React UI Library Beautiful, fast and modern React UI Library nextui.org

https://vercel.com/ Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel Vercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized Web. vercel.com 사전작업: 깃허브에 프로젝트 올리기 packga.json script에 build, start 추가 → push 코드 보기 "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, vercel..

📂폴더구조 더보기 💡 layout, not-found는 전 페이지에 공통적으로 적용되는 것이기 때문에 app 폴더 안에 위치해야함 각 폴더마다 적용되는 layout을 따로 만들 수 있음. 라우터 폴더를 따로 생성하고 싶으면 (괄호) 안으로 더보기 💡 metadata를 각 페이지마다 다르게 적용 가능함. https://nomadcoders.co/nextjs-for-beginners NextJS 14 시작하기 – 노마드 코더 Nomad Coders NextJS 14 For Beginners nomadcoders.co