코딩기록

모달 창이 열렸을 때 뒤로닫기를 해도 모달창이 닫히게 하고 싶었다. 찾아보니 History.pushState를 많이 사용해서 사용하려 했는데 모달 쿼리를 추가하고 모달 닫기를 누를때 뒤로가기를 생성해서 간단하게 구현을 해보았다.  모달 코드src> hooks> useModal.tsimport { useRouter } from "next/router";import { useEffect, useState } from "react";export function useModal() { const [currentModal, setCurrentModal] = useState(null); const router = useRouter(); useEffect(() => { const { modal } = ro..

캠핑장 카드가 잘 나와서 검색 기능을 시작했다.  dropdown.tsx// 옵션 타입 정의interface IPropsSelect { isMain: boolean; onChangeSearch?: (region: string, subRegion: string | null) => void;}export default function DropDown({ isMain, onChangeSearch }: IPropsSelect) { // 광역시 const [selectedRegion, setSelectedRegion] = useState>(null); // 하위지역 const [subRegions, setSubRegions] = useState([]); // 광역시 선택시 하위지역 리셋 con..

페이지네이션을 만드려고 찾아보다가 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..

메모장 만들기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..

const [counter, setCounter] = useState(1); ... setCounter(counter + 1); const [counter, setCounter] = useState(1); // ... setCounter(prev => prev + 1); 위 아래 코드 모두 동일하게 작동되지만 아래 코드로 사용해야함 위 코드를 사용하면 상태가 예상과 다르게 업데이트 될 수 있으므로 이전 상태를 사용하는 게 좋음