코딩기록

어쩌구 저쩌구,... 알라딘 api를 연결하는데 오류가 나온다.' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.  열심히 검색을 해 본 결과 해결 방법으로는 1. 서버 만들어서 해결하기2. heroku 사용하기3. https://cors-anywhere.herokuapp.com   ..

부수효과란?앱이 제대로 동작하기 위해 실행되어야 하지만 현재의 컴포넌트 렌더링 과정에 직접적인 영향을 미치지는 않는 작업 sample1. useEffect() 사용 장소가 나열된 리스트를 사용자의 위치와 가까운 순으로 나열하고 싶다.  위치 코드는 있는 상태더보기function toRad(value) { return (value * Math.PI) / 180;}function calculateDistance(lat1, lng1, lat2, lng2) { const R = 6371; const dLat = toRad(lat2 - lat1); const dLon = toRad(lng2 - lng1); const l1 = toRad(lat1); const l2 = toRad(lat2); const..

모달 창이 열렸을 때 뒤로닫기를 해도 모달창이 닫히게 하고 싶었다. 찾아보니 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..