코딩연습장

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..

import React, { useEffect, useState } from "react";import { getUserData, updateUserData } from "../apis/authApi";import { useLogin, useLogout, useUpdateUserInfo, useUserInfo } from "../zustand/useAuthStore";import { useNavigate } from "react-router-dom";import defaultProfile from "../asset/defaultProfile.png";import useInput from "../hooks/useInput";const Profile = () => { const navigate = us..

1. 프로젝트 생성yarn create vite 2. 라이브러리 설치yarn add tailwindcss postcss autoprefixer json-server axios @tanstack/react-query zustand immer @supabase/supabase-js react-router-dom 3. tailwind 세팅파일 생성 및 세팅npx tailwindcss init -p// src/index.css@tailwind base;@tailwind components;@tailwind utilities;//tailwind.config.js/** @type {import('tailwindcss').Config} */export default { content: ["./index.html..

캐시 데이터에 대한 Life Cycle상태설명fresh데이터를 새로 패칭할 필요가 없는 상태, staleTime이 지나지 않은 상태로, 캐시 데이터를 그대로 사용할 수 있다.stale데이터를 새로 패칭해야하는 상태, staleTime이 지난 후로, 새로운 데이터를 가져오기 위해 쿼리가 실행된다.active현재 컴포넌트에서 사용중인 쿼리 상태, 컴포넌트가 마운트되어 쿼리를 사용하고 있을 때를 의미한다.inactive더이상 사용되지 않는 쿼리 상태, 컴포넌트가 언마운트되거나 쿼리가 더 이상 필요하지 않을 때를 말한다.deleted캐시에서 제거된 쿼리 상태, gcTime이 지나면 쿼리가 캐시에서 삭제되어 이 상태가 된다.fetching데이터를 서버에서 가져오고 있는 상태, 이 상태에서는 isFetching이 ..