다른 페이지로 이동할 때 Link 태그를 사용한다이때 Link 태그의 state에 전달할 값을 넘기면, useLocation을 사용해 값을 가져올 수 있다let { state } = useLocation(); 실제로는 이렇게 사용했다 const location = useLocation();const { place_name: shop_name, road_address_name } = location.state;
vite.config에서 alias 를 사용해서 찾을 경로와 바꿀 경로를 연결 해주면 된다import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import path from 'path';export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, 'src'), 'components': path.resolve(__dirname, 'src/components'), 'assets': path.resolve(__dirname, 'src/assets'), // 추가적인 경..
useParamsurl 경로에서 동적 세그먼트를 가져오는데 사용된다url 경로 매개변수인 userId를 추출하여 UserProfile 컴포넌트에서 사용할 수 있다import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';function UserProfile() { const { userId } = useParams(); return User ID: {userId};}function App() { return ( } /> );}export default App; url이 /user/123 인 경우, useParams는 {userId: '123'} 을 반환한다 ..
반복문을 사용하는 것보다 내장 메소드를 사용하는 것이 더 빠르다function solution(s) { let cnt = 0 // 변환 횟수 let zero = 0 //제거한 0 개수 while(s!=='1'){ let current = s.split('').filter(t => t==='0').length // 0의 개수 zero+=current s=s.replaceAll('0', '') // 0제거 let length = s.length // 0을 제거한 길이 s = length.toString(2) // 현재 길이를 2진 변환 cnt+=1 } return [cnt, zero];}
1. 이번주 과제이번 주는 저번에 했던 프로젝트에 Tanstack query를 적용하는 프로젝트를 진행했다일주일밖에 안 됐는데 고칠 점들이 눈에 보였다코드 보자마자 "왜 이렇게 짰지" 그래서 하루는 리팩토링하고 UI 짰고, 다음날부터 기능 구현을 시작했다"서버 상태 관리"라는 말 자체가 이해가 안 됐는데, 서버(외부)에서 가져오는 데이터를 서버 상태라고 하는 것이었다 (state 설정 필요없이 바로 쓰면됨) 아항 ㅇㅋㅇㅋ이제 tanstack query 감잡았으 개선 가보자고그러고 update 부분에 수정/삭제에서 약간 막혔는데, querykey를 아이템별로 개별 id를 줘야 다른 상태로 인식하는 것을 배웠다!보통 현업에서도 전체아이템에서 개별 아이템은 해당 id 값으로 개별 Key를 설정한다고 한다 j..
vercel에서 배포 후, 특정 링크로 이동하거나 새로고침을 할 때 404 Not Found가 뜨는 경우가 있다 vercel은 기본적으로 index.html 파일을 루트 디렉토리에서 찾는다이때, vercel이 번들링 프로세스를 시작지점을 찾는데 어려움을 겪을 때 발생한다 루트 디렉토리에 vercel.json 파일을 만들고, 아래 코드를 작성한다 이미 깃허브에서 배포한 경우, 파일을 만들고 푸시하면 적용된다! 1. routes 설정첫번째 방법은 먼저 filesystem의 경로를 확인하고,실제로 존재하는 파일들을 우선적으로 제공하고, 이외에 다른 모든 경로는 index.html로 리디렉션 하는 것이다{ "routes": [{ "handle": "filesystem" }, { "src": "/.*", ..