코딩연습장

{Object.entries(cham.info).map(([key, value]) => { return ; })}코드가 너무 길어져 직관성을 높이기위해 info관련 부분은 분리하였다.const ChampionInfo = ({ info: [key, value] }: Props) => { return ( {INFO_MATCHER[key]} );};export default ChampionInfo;이렇게 데이터를 뿌려주고있었는데 분리된 컴포넌트의 calc부분이 작동하지 않았다.이유가 뭘지 생각해봤는데 INFO_MATCHER[key]부분이 들어오기 전에 st..

const newItemsData = Object.entries(itemData.data) // eslint-disable-next-line @typescript-eslint/no-unused-vars .filter(([_, value]) => value.maps["11"] && value.gold.purchasable && (value.inStore ? value.inStore : true)) .reduce((acc: Record, [key, value]) => { acc[key] = value; return acc; }, {} as Record);롤 아이템 목록중 구매가능한 목록과 상점에 있는 아이템을 필터링하는 곳에서 문제가 있었다.ddragon에서 주..

// /stores/queryProvider.tsx"use client";import { isServer, QueryClient, QueryClientProvider } from "@tanstack/react-query";function makeQueryClient() { return new QueryClient({ defaultOptions: { queries: { staleTime: 60 * 1000, }, }, });}let browserQueryClient: QueryClient | undefined = undefined;function getQueryClient() { if (isServe..

Nextjs의 4가지 주요 렌더링 기법은 CSR(Client Side Rendering), SSG(Static SIte Generation), ISR(Incremental Static Regeneration), SSR(Server Side Rendering)이 있다.먼저 CSR부터 알아보자. CSRClient Side Rendering, 말 그대로 클라이언트 단에서 렌더링을 진행하는 것이다. 특징장점단점순수 리액트 사용했을 때(최초 로드 후)사용자와의 상호작용이 빠르고 부드러움첫 페이지 로딩시간이 길 수 있다.TTV(Time To View)브라우저에서 JS를 이용해 동적으로 페이지를 렌더링하는 방식 서버에게 추가 요청을 보내지 않아사용자 경험이 좋음JS가 로딩되고 실행될 때까지 페이지가 비어있어 SEO에..

Riders우리들의 자전거 여행을 공유해보세요!각자의 자전거 여행 경로를 피드로 남겨 공유하고, 사용자들과 공유할 수 있습니다.🔥배포 링크Riders - 내일배움캠프 6기 4조📦폴더 구조폴더구조📦Rider_project ┣ 📂public ┃ ┣ 📜airInjectorMarker.png ┃ ┣ 📜anAirInjector.png ┃ ┣ 📜bike.png ┃ ┣ 📜certificateMarker.png ┃ ┣ 📜CertificationCenter.png ┃ ┣ 📜CurrentLocation.png ┃ ┣ 📜cyclist.png ┃ ┣ 📜favicon.svg ┃ ┣ 📜finishImg.png ┃ ┣ 📜startImg.png ┃ ┣ 📜toilet.png ┃ ┣ 📜toiletMarker..

오늘은 많지는 않지만 여러가지를 작업했다.깃허브 병합과정에서 다른 사람에게 발생한 문제점을 해결하기도 하고, 생각하지 못한 부분에서의 예외처리를 작업했다.랜딩페이지 css작업도 하고 랜딩페이지 로직 분리도 하였다. 마이페이지는 아직 로직이나 컴포넌트 분리를 하지 못해 더러운 상태인데 이것도 꼭 분리를 진행하여 직관성을 높일 것이다. 버그가 자꾸 이상한곳에서 발생해서 조금 피곤하다.내일은 로직분리를 마무리하고 README를 작성할 예정이다.

1. 문제발생내 로컬환경에서는 마이페이지의 feed가 무한스크롤로 잘 불러와지나, 팀원의 로컬환경에서는 불러와지지 않는 문제2. 원인추론팀원과 나의 json-server 버전이 달라 페이징 데이터 페칭관련 사용법이 달랐음1.0.0버전으로 사용하면 페이지 관련 데이터도 사용이 가능하나, 팀원이 사용하는 0.17.4버전에서는 해당 데이터를 제공해주지 않았음 const getFeedsByPageNum = async ({ queryKey, pageParam = 1 }) => { const userId = localStorage.getItem("userId"); const [_, page] = queryKey; const pageToFetch = page ?? pageParam; const..

감사하게도 다른 내배캠 수강생분들께 여러 피드백을 받았었다.추가기능이나 UX관련 피드백이 대부분이어서 해당 부분을 해결하고 있었다.post요청이 끝날때까지 로딩을 보여주고 사용자가 결과페이지로 이동할 수 있게 해달라는 것 이었다.tanstack query 공식문서의 usMutation부분에서 isLoading을 반환해주는 것을 확인하고 해당 post요청의 반환에서 isLoading을 받아 사용해보았다.const { isLoading, mutate } = usePostMyTestMutation(targetQuestions.testTitle);당연히 되겠지 하고 실행해보았지만, isLoading은 실행 유무와 상관없이 false도 true도 아닌 undefined값이 출력되었다.도저히 이해가 안갔다. 공식문..

해당 개인프로젝트 이전 트러블슈팅 - uncontrolled inputimport axios from "axios";const userAccessToken = localStorage.getItem("accessToken");const authInstance = axios.create({ baseURL: "https://moneyfulpublicpolicy.co.kr",});export const handleSignup = async (userObj) => { const response = await authInstance.post("/register", userObj); return response.data;};export const handleLogin = async (userObj) ..

const Test = () => { const { testid } = useParams(); const targetQuestions = questions[testid]; const [answers, setAnswers] = useState(Array.from({ length: targetQuestions.length })); const navigate = useNavigate(); const { userId, nickname } = useUserInfo(); const handleAnswers = (idx, selected) => { setAnswers([...answers].with(idx, selected)); }; const getMBTIRe..