코딩기록

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

캠핑 사이트를 만드려고 공공데이터포털에서 캠핑 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 ? "#..

🙆🏻‍♀️사용 기술 - React - firebase - swiper - 전에 영화 페이지를 만들어 본 적이 있어서 나름 수월하게 따라 만들어볼 수 있었다. - 하지만 firebase를 쓰는 방법에 대해서 더 알고 싶었는데 로그인 로그아웃 기능만 해서 아쉬웠다. - 스와이퍼에 대한 버그가 있는데 찾는 중이다.

- 타입 스크립트는 타입을 정확히! 명시해주어야함. - string, number, boolean, null, undefined ...등 만약 이런 객체를 써야한다면? let data:Restaurant = { name: '식당', category: 'western', address: { city: 'incheon', detail: 'somewhere', zipCode: 123123 }, menu:[ { name: 'rose pasta', price:2000, category: 'pasta' }, { name: '갈릭', price:2000, category: '스테이크' } ] } Restaurant.ts 새 페이지로 만들어서 객체마다 타입을 명시해주고 address와 menu같은 경우엔 새로운 타입을..

메모장 만들기2 를 만들려다가 회고록을 쓴 김에 퉁치는 포스팅 프로젝트 링크: https://yyeojung.github.io/react_memo MEMO yyeojung.github.io ❤️ 개발 의도 자바스크립트와 리액트 강의를 들은 후 기술 습득을 위해 만들었습니다. 📅 개발 기간 총 4일(디자인 1일, 개발 3일) 🖥️ 사용 기술 Design tool: Figma Editor: VScode Lang: css, React.js, styled-component 배포: Github.io 🎨 디자인 간단한 메모 기능을 할 수 있는 메모장을 만들고 싶었고 그에 맞게 레트로라는 컨셉으로 배경화면까지 디자인하였습니다. 저는 주로 다크모드로만 사용을 하는터라 제가 만드는 프로젝트에도 다크모드 기능을 넣고 싶었..

모양은 이래저래 만들었는데 1. 다크모드 import BgLightMode from '../image/lightmode.png'; import BgDarkMode from '../image/darkmode.png'; import AddMemoLight from '../image/addMemo.png'; import AddMemoDark from '../image/addMemoDark.png'; import backLight from '../image/backLight.png' import backDark from '../image/backDark.png' export const lightTheme = { textColor: '#000', subTextColor: '#000', bgImg: `url(${B..

가계부 디자인을 끝낼즈음에 리액트 강의 받아쓰기만 한 내가 만들 수 있을지 의문이 들어,, 간단하게 연습해보려고 얼른 메모장 디자인을 만들어보았음. 물론 간단한 연습은 안되겠지. 난 아무것또 모르니까! ㅜㅜㅜㅜㅜㅜㅜㅜㅜ 😭 😭 😭 😭 😭 😭

import { RouterProvider, createBrowserRouter } from 'react-router-dom' import Layout from "./components/layout"; import Home from "./routes/home"; import Profile from "./routes/profile"; import Login from "./routes/Login"; import CreateAccount from './routes/CreateAccount'; import { createGlobalStyle, styled } from 'styled-components'; import reset from 'styled-reset'; import { useEffect, useSta..

1. 먼저 깃허브에서 new repository 생성 2. vscode 터미널에서 연동해주기 git init git remote add origin https://github.com/깃허브아이디/프로젝트명.git git remote -v git branch git push origin main 아래 코드는 깃허브가 잘 연결됐는지 확인하는 거라 생략 가능 git remote -v (깃허브 잘 연결됐나 확인) git branch(브랜치가 main인지 확인) 혹시나 push 하는 과정에서 오류가 뜬다면 git pull origin main --allow-unrelated-histories git push origin main 로 시도하기 3. gh-pages 설치 npm install gh-pages 4. p..