ly-ra.log

최종 팀플 ID~어~?

Fri, 28 Mar 2025 03:39:53 GMT

[2025.03.28 금요일]

Personal Focus Pomodoro

💡 서비스 컨셉

목표:

단순한 타이머가 아니라

→ "내가 언제 집중을 잘하는 사람인지" → "어떤 시간대에 순공/업무 시간이 많은지" → "장기적으로 개선/멘토링 자료로 활용할 수 있는"

개인 분석용 타이머

🎯 사용자의 핵심 니즈

순수 업무 시간(순공) 체크
하루, 주, 월 단위 통계
시간대별 집중 패턴 분석
달력 기반 기록
목표 기반 작업 (단순히 시간만 채우지 않고, 무엇을 했는지도 기록)
결과 공유 (멘토에게, 팀원에게, 코치에게)

🚩 구성

기능	설명
타이머	업무 집중 타이머 (ex: 25/5, 커스텀 가능)
목표 입력	타이머 시작 시, 목표(할 일, 작업 내용) 기록
순공 시간 기록	중간에 멈춤, 완료 여부 기록 (순수 집중 시간)
달력 표시	하루 순공시간 기록, 목표, 성취 여부 표시
집중 시간 분석	"몇 시 ~ 몇 시" 구간에 집중 많이 했는지 시각화 (Bar or Heatmap)
통계	일별, 주별, 월별 총 순공 시간, 완료 목표 개수, 집중 시간대 분석
결과 공유	이미지, 링크, PDF로 오늘/이번 주 통계 공유
로컬 시간 기반	실제 환경의 Local Time 기록 (타임존 정확히 기록)
모바일 / 데스크탑	둘 다 대응 (Responsive)

🟣 사용자의 핵심 가치 체험

그냥 타이머 쓰는 게 아니라,

 → **내 집중 습관을 기록하고 분석**할 수 있다.

개선할 수 있다.

 → 아침형? 밤형? 내가 언제 잘하는지 알 수 있다.

멘토링에 활용 가능

 → 캡처해서 멘토, 팀원에게 "이번 주 이렇게 집중했어요" 제출 가능

스스로 동기부여

 → 오늘 하루 순공 4시간 했네? 내일도 해보자

1. 서비스 개요

FocusMate(Personal Focus Pomodoro)는 사용자의 집중 업무 시간을 기록하고, 이를 바탕으로 개인화된 집중 패턴 분석, 시간대별 통계, 목표 달성 기록을 제공하는 개인 생산성 향상 도구입니다.

단순한 업무 타이머를 넘어서, 언제, 어떻게 집중했는지를 체계적으로 기록하고 이를 통해 자기 분석, 멘토링, 업무 습관 개선에 활용할 수 있는 서비스입니다.

2. 서비스 개발 배경 및 목적

배경

재택근무, 자율학습, 프리랜서, 창작자, 수험생, 취준생 등 스스로 시간을 관리해야 하는 사람들이 늘어남.

기존 타이머 서비스는 단순히 시간을 기록할 뿐, 사용자가 집중 습관을 분석하거나 개선할 수 있는 피드백을 제공하지 않음.

목적

사용자가 실제 집중 습관을 파악할 수 있도록 도움
자신의 집중 패턴을 바탕으로 시간 관리 능력 향상
멘토링, 코칭, 자기 피드백에 활용할 수 있는 객관적 기록 제공

3. 주요 타겟 사용자

타겟	설명
취준생 / 수험생	공부시간, 순공시간 체크 및 기록
프리랜서 / 재택근무자	업무 집중, 업무 분석
개인 개발자 / 크리에이터	창작, 학습 집중 기록
멘토 / 코치	피드백 자료로 활용
자기계발 관심자	스스로 습관 개선 및 동기부여

4. 핵심 기능 (MVP)

기능	설명
🟣 목표 입력	타이머 시작 전 오늘의 목표 or 작업 내용을 기록
🟣 집중 타이머	순공 타이머 (Pomodoro or Custom 가능)
🟣 집중 시간 기록	종료 시 기록 → 목표 + 실제 순공 시간 저장
🟣 달력 기반 기록	달력에 하루 순공시간, 목표, 완료 여부 표시
🟣 시간대별 집중 분석	하루 내 집중이 잘된 시간대 시각화 (Bar or Heatmap)
🟣 주간 / 월간 통계	누적 순공 시간, 목표 완료 수, 집중 시간대 분석
🟣 결과 공유	PDF, 이미지, URL로 결과 내보내기
🟣 모바일 / 데스크탑 대응	Responsive UI/UX

5. 서비스 기대 효과

자기 인식 자신이 언제 집중을 잘 하는지 알게 됨
습관 개선 결과를 기반으로 학습 / 업무 습관 개선
멘토링 결과를 멘토, 팀원에게 제출 → 피드백
지속 동기 부여 시각화된 성과로 동기 강화

6. 페이지 및 기능 구조 (예시)

홈 오늘의 목표, 타이머 시작
타이머 진행 중, 일시정지, 종료
결과 기록 목표 + 순공시간 + 시간대 기록
달력 일별 기록 표시
통계 주간 / 월간 분석, 시간대별 분석
공유 결과 이미지 or PDF 다운로드

7. 서비스 흐름도 (간단 버전)

목표 입력 → 타이머 시작 → 타이머 종료 → 기록 저장 → 달력 표시 → 통계 분석 → 결과 공유

8. 기술 스택 (예정)

Frontend: Next.js 14, React, TailwindCSS
State: Zustand
Data: IndexedDB + Supabase (or 로컬 우선)
Chart: Chart.js
Deployment: Vercel

하이드레이션 불일치요?

Wed, 19 Mar 2025 01:47:29 GMT

[2025.03.19 수요일]

[Next.js 개인과제 - 트러블슈팅]

🚨 문제 발생

개인과제 도전기능중 다크모드 구현이 있었다. 찾아보다가 next-themes 라이브러리를 사용하여 구현하였다. 오~ 생각보다 쉽게 모드구현이 되서 라이브러리가 좋구만! 하고있었는데, 새로고침을 하고 나니까 화면 가능 에러가 표출!

Hydration failed 라고나오면서, 콘솔창에도 오류가 발생하였다.

이게 대체 무슨 오류이지? 에러 관련 하여 next.js 공식문서에서 제공하는 부분이 있어서 먼저 살펴보았다.

원인 추론

서버에서 렌더링한 HTML과 클라이언트에서 렌더링한 결과가 달라서 발생하는 "Hydration mismatch" 라고 한다.
콘솔창의 경고에서도 html과 RootLayout을 지목하고 있는데, 아마도 테마모드를 바꾸면서 html의 class 값이 next.js에서 미리 렌더링한 부분과 맞지 않아서 생기는 오류인것 같았다.

해결 과정

테마의 기본값 주기 ❌

테마의 기본값을 명시적으로 주어서 렌더링 시점의 테마와 이후의 테마를 같게 만들어 주면 되지 않을까? 생각을 하고 코드를 수정해 주었으나, 동일한 오류가 발생하였다.

suppressHydrationWarning 추가 ❌

이처럼 하이드레이션 불일치 오류를 표기하지 않도록 공식문서에서 제시한 대로suppressHydrationWarning={true} 속성을 주었지만, 여전히 오류 발생.

icon 대신 HTML로만 작성 ❌

구글링해보니 잘못된 html, 또는 icon등으로 인해서 발생한 경우도 있어서 icon을 지우고 html만 사용했을 경우에도 동일한 오류 발생.

mounted 값 설정해주기 ❌

문제를 해결하다보니 처음 마운트되었을 때는 모드변경이 전혀 되지 않다가, 다른 페이지로 이동한 후에 모드를 변경하면 변경이 된점.
새로고침을 한 이후에만 해당 오류가 발생한점.

위와같은 오류가 발생하는 환경을 확인할 수 있게 되었다. 그래서 마운트값을 적용해보기로 하였다.

해당 테마를 설정중인 컴포넌트에 아래와 같은 코드를 추가

 const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

이 경우에도 여전히 결과가 같았다. 강력새로고침, 캐시를 비우고 빌드.. 모두 오류가 표출되었다.

라이브러리를 버려야 하나? 좀더 방법을 찾아봐야하나?

결과

해결방안

새로고침시에만 오류 표출이되고 있어서, mounted 코드를 버릴수가 없었다. 그 상태에서 경고 무시를 하는 suppressHydrationWarning 속성도 추가해보았다. 혹시!? 하면서..여전히 동일한 오류가 발생하였다.
그리고 또 다른 방법이 있을까? 하고 구글링도 하고 다시 공식문서도 보았다. 공식문서 아래쪽에 suppressHydrationWarning 는 one level deep에서만 작동한다는 문구가 있어서 해당 속성의 위치를 바꿔 보았다.
테마프로바이더 컴포넌트 상단에 해당속성을 주었더니!! 됐다! 오류가 생성되지 않고 잘 작동되었다!!
그래서 html에 주었던 suppressHydrationWarning 속성을 지웠는데, 왜 안되죠?
결과적으로 내 코드는 html과 body에 각가 suppressHydrationWarning 속성을 주어서 해결이 되었다. 이게 맞는건가? 좀 찜찜한 해결이 되었다.


      
          

              {children}

느낀점

리액트만 할때는 서버렌더링을 접하지 않아서 이런오류를 마주칠 일이 없었다. 이론으로는 알고있었지만 차이를 체감하기는 어려웠는데 이번 오류로 인해서 SSR과 CSR의 차이를 체감한 좋은 기회가 되었다. 앞으로도 next.js를 사용하면서 종종 만나게 될 오류일 것 같다. 컬러모드 다크모드 같은 테마들이 여기저기 많이 사용되는데 이렇게 클라이언트 상태를 확인하는 경우는 서버렌더링과의 상호작용(?) 등도 고려해야 하겠구나도 느꼈다. 이게 서버와 클라이언트의 렌더링 차이구나~

이건 브라우저가 잘못한건가?

Fri, 14 Mar 2025 18:10:44 GMT

[2025.03.14 금요일]

[Next.js 개인과제 - 트러블슈팅]

API 요청시 지속적으로 발생하는 500번과, 400번

Next.js 개인과제를 진행하면서 필수구현 요소중 마지막 Route Handlers를 이용한 CSR 페이지를 구현중이었다. SSG, SSR, ISR 페이지들은 생각보다 어렵지않게 구현을 했어서, 이번에도 여럽지 않게 가겠지... 하고 지레 짐작을 한것이 화근이었다. 2개의 api를 같이 처리해 버려야지~하고 일단 코드부터 작성하고 제대로 확인을 하지 않았다. 그렇게 확인도 하지 않고 코드부터 냅다 작성한 후에 페이지를 띄워보니.. pending...화면이 나타나고 이제 자료값이 나오면되! 라고생각했는데 시간이 오래걸렸다..이상한데? 하는 순간 500번 등장.

원인 파악하기

2개의 api를 모두 한 로직에 사용했기 때문에 어떤게 문제인지 확인 하기 위해서 console.log도 확인해 보았다.

잘 받아오던 championList는 왜 403이 뜨는건지 모르겠지만, 지금 먼저 해결해야하는 건 rotation이었다.

주소와 API 키 다시 확인

400이면 Bad request인데 통신로직이다 보니 주소가 맞는지, 혹시 오타가 있는지 확인부터했다. 혹시나 못찾을 수도 있기 때문에 api를 제공하는 공식페이지로가서 주소를 복사 붙여넣기! ❌
내가 발급 받은 API키도 다시 복사해서 붙여넣기! ❌

환경변수가 잘 적용되는지 확인

Next.js에서 환경변수는 처음 사용하다 보니 혹시나 하는 마음에 환경변수가 잘 받아오고있는지도 console.log로 확인, 아주 잘 받아오고있었다.

Postman에서도 확인해보기

전날 튜터님이 이야기해주신 부분이 생각나서 Postman을 사용하여 직접 API 요청을 해봤지만 역시 같은 400번 에러가 발생했다. 왜 Unknown apikey인가요????

API KEY 재발급 받기

API Key를 재발급 받고 다시한번 Postman으로 요청을 시도해보았다. 어? 그래도 동일하게 400번 Unknown apikey가 확인되었다.

이상해서 숨겨진 key를 다시한번 확인해 보니 이전과 동일한 key였다.

재발급을 받고, 재발급성공했다고 메시지도 확인했는데!? API Key가 실제로는 재발급되지 않은것이다 😱 다시한번 재발급해서 갱신한 후에 Key를 확인해 보니 여전히 동일한 Key였다.

원인은 브라우저!?

순간 스쳐지나간 부분이 있었다. 오늘 내 브라우저 상태가 좋지 않았던 게 생각났다. 업데이트 이후 브라우저가 뭔가 불안정한 상태였기 때문이다. 설마 브라우저 문제가 아닐까 하는 마음으로 다른 브라우저에서 시도해보았다.

결과는 성공이었다.

이번에는 API 키가 제대로 재발급되었고 아까와는 다르게 재발급한 키 하단에 만료 일자와 시간까지 갱신된 것이 확인되었다. 재발급한 키를 사용하니 API 요청이 정상적으로 잘 작동했다.

이번 문제의 원인은 브라우저의 일시적인 오류나 캐싱 문제로 인해 API 키 재발급 과정이 정상적으로 이루어지지 않았던 것으로 보인다.

처음 시도하는 라우터 핸들러였기 때문에 처음엔 내가 뭔가 코드를 잘못 작성한 건 아닐까 걱정하며 강의 자료와 강의를 다시 살펴보기도 했지만, 알고 보니 브라우저의 사소한 문제가 원인이었다는 게 참 허탈하면서도 기억에 남는 트러블 슈팅 경험이 되었다.

그동안 나도 모르게 계속 한 종류의 브라우저만을 사용해 왔는데 이제는 다른 브라우저로도 크로스체크를 해봐야 겠다는 생각이 들었다.

TIL | 잊기 전에 다시한번! useQuery의 흐름

Thu, 13 Mar 2025 18:27:13 GMT

Next.js에서 TQ복습을 하다가 나온 내용이다. useQuery를 이해하는 중요한 내용이라서 다시한번 정리해본다.

예시 코드

"use client"

import { useQuery } from "@tanstack/react-query";
import React from "react";

const TodoListPage = () => {
    const { data: todos } = useQuery({
      queryKey: ["todos"],
      queryFn: () => fetch("http://localhost:4000/todos").then((res) => res.json()),
    });

      console.log(todos); // 주목

    return 
};

export default TodoListPage

여러 공식 문서들에 등장하는 예시인 투두리스트 만들기다. 위와 같이 useQuery의 가장 기본적인 사용방법이다. 그리고 나서 콘솔로그를 확인해 보면 아래와 같은 결과를 확인할 수 있다.

db.json에 이미 4개의 데이터가 기록되어 있기기에 4개의 값이 잘 나타나고 있다.

여기서 useQuery를 이해하기위해서 확인해야할 부분은 자료값 위의 undefined이다.

콘솔창에 보이는것처럼 처음부터 db의 자료값이 나타나는게 아니고 undefined 후에 자료가 나타난다.

useQuery는 서버에서 데이터를 가져오는 역할을 하는데, 처음부터 무조건적으로 db의 자료를 가져오는 것이 아니다.

캐시컨텍스트에 queryKey로 지정한 데이터가 있는지부터 확인한다. 새로고침하면 당연히 캐시컨텍스트에 데이터가 없다. 그래서 undefined가 먼저 나타나는 것이다.
캐시컨텍스트에 데이터가 없는 것을 확인했기에 queryFn이 실행되는 것이다.
db의 데이터를 캐시컨텍스트에 저장하고 리렌더링이 된다.
- 캐시컨텍스트의 값이 바꼇다는 것은 전역상태가 바꼈다는 것.
- 전역상태가 바꼈다는 것은 state가 바꼈다는 것.
- state가 바꼈다는 것은 리렌더링이 된다는 것.
리렌더링이 되었기 때문에 로직이을 다시 시작한다. 이번에는 캐시컨텍스트에 queryKey 저장된 데이터가 있기에 이 데이터들을 불러오는 것이다.

콘솔창에 출력되는 값들에 대해서는 그렇구나~ 하고 넘어갈때도 있지만, 이렇게 로직의 흐름을 보여주기 때문에 꼼꼼하게 확인하고 해석해볼 필요가 있다!

TIL | 난 FE니까 Next.js

Wed, 12 Mar 2025 16:57:18 GMT

[2025. 03. 12 수요일]

Next.js를 배우는 과정에서 알고있어야 할 개념들에 대해서 정리해본다.

1. 기존 리액트의 단점과 SPA, 코드 스플리팅

기존에 사용하던 리액트는 SPA(Single Page Application) 방식을 사용한다. 애플리케이션의 모든 뷰가 하나의 HTML 파일 내에서 JS로 관리되고, 클라이언트(브라우저)에서 동적으로 페이지(컴포넌트) 전환이 이루어진다.
JS의 비중이 크기 때문에 전체 애플리케이션 코드가 한꺼번에 로드될 경우 초기 로딩 속도가 느려질 수 있다. 또한 JS가 모두 로드되고 온전한 렌더링이된 후에 실행되기 때문에 초기에 사용자에게 빈 화면이 보여질 수도 있다.
클라이언트에서 렌더링되기 때문에, 검색 엔진 봇이 JS 실행 전에 빈 HTML만 보게 될 가능성이 있어 SEO 최적화에 불리하다.
위와 같은 사항들을 개선하기 위해 JS를 쪼개서 필요한 부분만 먼저 로드하는 코드 스플리팅이 필요 하다.
- React.lazy, next/dynamic

2. Hydration, TTV, TTI

Hydration 서버에서 렌더링된 정적 HTML을 클라이언트(브라우저)의 JS가 가져와서, 이벤트 핸들러를 붙이는 등의 작업을 수행해 페이지를 동적으로 만드는 과정.

수업에서는 북어포에 물을 적신다고 설명을 했다.
정적 HTML(TTV)에 JS(TTI)를 채워*, TTV와 TTI의 간극을 채우는 개념을 수(水)화라고 한다.
SSR로 빠르게 보여진 정적 콘텐츠를, 사용자가 상호작용할 수 있도록 전환하는 단계다.

TTV (Time to View)

사용자가 페이지를 요청한 후, 시각적으로 콘텐츠가 브라우저에 표시되기까지 걸리는 시간으로, 사용자가 콘텐츠를 인지할 수 있는 순간이다.

TTI (Time to Interaction)

페이지가 사용자가 인터렉션할수 있는 상태(클릭, 스크롤 등 사용자의 상호작용에 반응할 수 있는 상태)가 되기까지 걸리는 시간을 의미한다.

3. JS의 런타임 환경 2가지

1) 브라우저 환경 (Client-side)

사용자 디바이스(브라우저)에서 실행
DOM, 브라우저 API 등을 이용해 UI를 조작
사용자와의 직접 상호작용, 이벤트 처리, 동적 페이지 업데이트

2) Node.js 환경 (Server-side)

서버에서 실행되는 자바스크립트 런타임
파일 시스템, 네트워크 요청 등 서버 관련 작업에 적합
SSR, API 서버, 빌드 도구 등

Next.js는 이 두 환경을 모두 활용하여, 서버에서 초기 HTML을 렌더링하고 클라이언트에서 인터랙션을 관리합니다. 라고 한다. 두 가지 환경을 모두 활용하기 때문에 Next.js 공식문서에서 Web Server 프레임워크라고 소개하고 있다.

5. SSG, ISR, SSR, CSR의 차이점

SSG (Static Site Generation)

개념: 빌드 시 미리 HTML을 생성하여 정적 파일로 배포하는 방식.
장점: 빠른 로딩 속도, 낮은 서버 부하, 높은 보안성
적합한 경우: 콘텐츠 업데이트가 자주 일어나지 않는 페이지

ISR (Incremental Static Regeneration)

개념: SSG의 장점을 유지하면서, 특정 간격이나 조건에 따라 정적 페이지를 업데이트할 수 있는 방식.
장점: 정적 사이트의 빠른 로딩과 함께, 최신 데이터를 제공할 수 있음.
적합한 경우: 일부 페이지는 정적이지만, 주기적인 업데이트가 필요한 경우

SSR (Server-Side Rendering)

개념: 사용자의 요청마다 서버에서 HTML을 렌더링해 제공하는 방식.
장점: 항상 최신 데이터를 반영할 수 있고, SEO에 유리
단점: 서버 부하 증가, 응답 시간이 빌드된 정적 파일보다 느릴 수 있음

CSR (Client-Side Rendering)

개념: 브라우저에서 자바스크립트를 통해 동적으로 콘텐츠를 렌더링하는 방식.
장점: 풍부한 인터랙티브 기능과 동적 업데이트가 용이함
단점: 초기 로딩 시 빈 화면 또는 로딩 상태가 길어질 수 있으며, SEO 최적화가 어려울 수 있음

Next.js TIP

기본적으로 Server Component이며, 렌더링단위 역시 Component라는것을 인지하면 조금은 Next.js를 이해하는데 도움이 된다!!
Client와 Server는 상대적인 개념이라는 것도 유의하자!

TIL | SSR, CSR, SSG, ISR

Tue, 11 Mar 2025 14:55:06 GMT

[2025. 03. 11 화요일]

next.js를 배우면서 렌더링에 대해서만 한참을 배우고 구분했다.

SSR, CSR, SSG, ISR은 웹페이자 렌더링(HTML이 생성)되는 시점과 방식에 따라 구분된다.

뭐가 이렇게 많죠..?

SSR : Server-Side Rendering

클라이언트가 요청할 때마다 서버에서 데이터를 가져와 페이지의 HTML을 생성하여 응답하는 방식이다.
최신 데이터가 항상 보장되나, 매 요청마다 서버에서 데이터를 가져오기 때문에 서버부담이 크다.
검색 엔진이 완성된 HTML을 받아들이므로, 콘텐츠가 자주 변하는 SEO를 기대할 수 있다.

언제 사용하면 좋을까?

사용자 요청시 마다 최신 데이터를 렌더링하기 때문에 실시간 정보를 제공할 때 유리하다.
- 은행이나 금융 서비스의 대시보드처럼 로그인한 사용자에게 개인화된 정보를 제공해야할때.
- 뉴스처럼 매번 최신 기사를 보여줘야하는 사이트, 날씨 정보 등

예시 코드

export default async function SSRPage() {
    const res = await fetch('https://api.example.com/data', {
    cache: 'no-store',
    });
    const data = await res.json();

  return {data.message}
}

CSR : Client-Side Rendering)

페이지의 정적인 부분만 서버에서 HTML로 내보내고, 데이터는 브라우저에서 JS가 실행되면서 동적으로 페이지를 렌더링한다.
초기 HTML파일 크기가 작아서 초기 로디잉 빠르며, 이후 필요한 데이터만 가져오므로 효율적이다.
사용자와의 상호작용이 많은 애플리케이션에서 사용된다.
SEO최적화는 부족.

언제 사용하면 좋을까?

사용자와의 상호작용이 많은 애플리케이션
데이터카 클라이언트에서 API호출로 가져오는 경우
SEO가 크게 중요하지 않은 내부 애플리케이션, 관리자 도구
SPA처럼 페이지 이동없이 동적으로 콘텐츠를 변경하는 웹앱.

예시 코드

'use client';
import { useEffect, useState } from 'react';

export default function CSRPage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('https://api.example.com/data');
      const data = await res.json();
      setData(data);
    }

    fetchData();
  }, []);

  return {data ? data.message : 'Loading...'};
}

SSG : Static Site Generation

쓱

빌드시점에 미리 HTML파일을 생성하여 정적 파일로 배포하는 방식이다.
빠른 로딩 속도와 높은 성능이 중요한 정적웹사이트에서 사용.
단 콘텐츠 변경 빈도가 낮아야 한다.
SEO 효과가 좋다.

언제 사용하면 좋을까?

개인 블로그나 포트폴리오, 회사 소개 페이지 처럼 변경이 잦지 않은 사이트.
React나 Next.js 등의 공식문서 처럼 정적인 문서 페이지.

예시 코드

export default async function Page() {
  const res = await fetch('https://api.example.com/data', {
   cache: 'force-cache' 
   });
  const data = await res.json();

  return {data.message};
}

ISR : Incremental Static REgeneration(증분 정적 재생성)

SSG의 장점을 유지하면서, 일정 주기마다 또는 특정 조거에 따라 페이지를 재생성 하여 최신 콘텐츠를 반영하는 방식
SSG와 SSR의 중간 상태.

언제 사용하면 좋을까?

상품 상세 페이지 : 대부분 정적 페이지로 제공되지만, 가격이나 재고정보등은 주기적으로 업데이트되어야 할 때
특정 시점에 정보를 갱신해야하는 사이트 (주간랭킹, 일간랭킹 등)

예시 코드

const ONE_MINUTE_SECONDS = 60;

export default async function Page() {
  const res = await fetch('https://api.example.com/data', {
   next: { 
       revalidate: ONE_MINUTE_SECONDS, 
       } 
   });
  const data = await res.json();

  return {data.message};
}

정리

각 렌던링 방식은 프로젝트의 요구사항과 데이터 업데이트 빈도, SEO 필요성 등에 따라 선택하면 될것 같다.

렌더링 방식	데이터 최신성	성능	추천 사용 사례	SEO 필요성
SSR	높음	중간	자주 바뀌는 실시간 데이터	SEO 유리
CSR	중간	높음	사용자 상호작용이 많은 앱	x
SSG	낮음	매우 높음	거의 바뀌지 않는 마케팅 페이지	SEO 유리
ISR	중간	높음	블로그나 뉴스 사이트

TIL | 제네릭 타입

Mon, 10 Mar 2025 14:00:31 GMT

[2025. 03. 10. 월요일]

ts에서 타입을 변수처럼 사용하는 제네릭타입에 대해서 React에서 많이 사용하는 useState를 예시로 이해하기!!

useState로 이해해보기!

useState에 제네릭타입 사용방법
```
const [state, setState] = useState([])
```

useState는 (초기값)을 받아서 [state, setState]를 반환한다.

_초기값은 state에 할당_되고, setState함수는 (newState)를 받아서 _state에 newState를 재할당_한다.

useState훅이 내부적으로 아래와 같다고 예상을 하고 보면(실제 내부 로직 X)

const useState = (initialState: T): [T, (newState: T)=>void] => {
  let state = initialState // 초기값을 state에 할당

  const setStste = (newState: T) => {
      // 리렌더링
      state = [...state, newState]  // newState를 state에 재할당

      // 추가 로직들...

  }

  return [state, setState] // state배열을 반환
}

이 과정중에서 내부 로직을 보면 초기값의 타입과 내부 로직의 타입들이 일치해야 타입스크립트에서 오류없이 useState훅이 동작할 수있다.
타입스크립트에서 각 타입을 명시해야하는 곳들을 보면 여러곳이다. 매번 타입을 작성해주는 것도 번거롭지만, 처음에 로 타입을 명시 했다가 으로 바꾼다고 생각을 해보면 이과정이 더 번거롭게 된다. 타입이 명시될 위치에 라고 제네릭타입으로 적어주면 내부 로직 모든 곳에서 변수처럼 동일한 타입을 받을 수 있다.

제네릭타입 특징

로직 내부적으로 재사용가능하며 중복코드를 줄일 수있다.

아직 결정되지 않은 Type으로 어떤타입도 받을 수 있는 변수처럼 취급할 수 있기 때문에 유연하다.
함수가 호출될 때 타입이 결정되며 반환값도 인자타입과 동일하기 때문에 안정성도 있다.

제네릭타입을 사용한 유틸리티타입들도있다.

Pick : T에서 K를 선택해 타입을 구성.

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

type TodoPreview = Pick;

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
};

Omit : T에서 K를 제외하고 타입을 구성.

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

type TodoPreview = Omit;

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
};

Record : 특정 키 타입(K)과 값 타입(T)을 가지는 객체 타입을 구성.

type PageInfo = {
  title: string;
};

type Page = 'home' | 'about' | 'contact';

const pages: Record = {
  home: { title: "Home Page" },
  about: { title: "About Page" },
  contact: { title: "Contact Page" },
};

타입을 명시해줘야하는 타입스크립트를 배우면서 굳이 타입을 작성해 줘야 하나? 하는 의문도 많고 부담이 됐는데, 어려웠던 제네릭을 어느정도 이해하니 조금은 타입을 명시하는 이유를 알것같기도 하다.

낙관적업데이트, 내코드도 낙관적으로 봐줄순 없었니?

Tue, 04 Mar 2025 17:07:50 GMT

[2025.03.04 화요일]

[아웃소싱 프로젝트 - 트러블슈팅]

1. 문제 발생

찜은 되는데 해제는 못합니다...

TanStack Query 공식문서와 강의를 참고하며 찜하기(북마크) optimistic updates(낙관적 업데이트)로 리팩토링. 차근차근 따라가며 코드를 작성후 실행되는지 확인!! 오! 찜하기 기능은 정상 작동되었다.

자신감을 얻어서 찜해제 기능도 코드를 작성하고 실행되는지 확인!? 네트워크를 확인해 보니 400번에러 확인. 내탓, 내 코드가 문제라고 알려주고있다.

문제 코드

export const useRemoveWish = (productId) => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: ({ wishId }) => removeWish(wishId),
    onMutate: async ({ wishId }) => {
      // 기존 쿼리 취소
      await queryClient.cancelQueries([QUERY_KEYS.WISH.LIST, productId]);
      // 현재 상태 저장 (Snapshot)
      const prevWish = queryClient.getQueryData([
        QUERY_KEYS.WISH.LIST,
        productId,
      ]);
      // 취소 UI 즉시 반영
      queryClient.setQueryData([QUERY_KEYS.WISH.LIST, productId], (old) =>
        old.filter((wish) => wish.id !== wishId),
      );
      return { prevWish };
    },
    // 에러시 롤백
    onError: (err, wishId, context) => {
      queryClient.setQueryData(
        [QUERY_KEYS.WISH.LIST, productId],
        context.prevWish,
      );
    },
    onSettled: () => {
   queryClient.invalidateQueries([QUERY_KEYS.WISH.LIST, productId]);
    },
  });
};

2. 원인 추론

wishId가 undefined

addWish는 가능하지만 removeWish는 되지 않는다면, 인자값을 제대로 못받고있을 가능성이 높았다. 코드를 다시 한번 검토!

3. 해결 방안

인자 구조 확인 및 정확한 값 전달

addWish

mutationFn: ({ userId }) => addWish({ productId, userId }),

removeWish

mutationFn: ({ wishId }) => removeWish(wishId)

두 함수의 구조를 보았을때 코드의 문제는 찾을 수가 없었다.

addWish는 가능하다 removeWish가 실행되지 않아 두 함수 구조만 계속 확인하고 다시 작성하고 시도해 보고 했는데...

여러 방법을 시도해 보다가,removeWish의 혹시나 하여 객채구조를 풀어주었다.

mutationFn: (wishId) => removeWish(wishId)

정상적으로 찜해제가 가능해졌다!?? 왜지??

4. 해결 결과

코드를 작성할 당시에는 Optimistic Updates를 처음 시도하는 부분이라서, 그 부분에만 초점이 맞춰져 있었다.

실제 사용처를 확인해볼 생각을 못했던 것이다. 실제 함수가 사용되는 곳에서 보면

addWishMutation.mutate({ productId, userId: currentUser.id }) 객체 형태이고
removeWishMutation.mutate(wishToRemove.id) 단일값을 직접 전해주고 있었다.

느낀점

로직을 분리했기 때문에 연관된 모든 코드들을 확인해 보았어야 했다.

앞으로 로직을 분리해서 관리할텐데 시야가 좁아지지 않도록 관련된 부분은 모두 훑어보는 습관을 들여야겠다.

전에도 그랬지만 오류가 생기면 그 코드만 보게 된다. 그리고 시야가 좁아진다. 다른 사람의 코드를 볼때보다 시야가 확 좁아진다는 것이 느껴진다. 왜 그런걸까?

또한 나중에 확인해보니 add와 remove를 따로 두면서 중복 검사를 하지 않아 동일한 물품도 계속 북마크에 추가가 되었다. 코드를 작성하면서도 토글로 만들었어야 했는데.. 다른페이지에서 동일한 함수를 사용하는 분이 계셔서 일단은 진행해! 라고 했던 부분이 역시나~!! 앞으로 이런 on/off 만 있는 기능들은 모두 토글로 만들어 버릴테다!

이건 어쩔 수 없는 거였어요..

Mon, 24 Feb 2025 13:46:16 GMT

[25.02.24 월요일]

[MBTI 테스트 - 트러블슈팅]

1. 문제 발생

1) 유저 정보가 업데이트되지 않는 문제

유저 정보를 받아와 닉네임을 수정하는 로직을 확인하던 중, 닉네임 변경이 정상적으로 동작하지 않는 것을 발견.

2) `Router`가 작동하지 않는 문제

PrivateRouter 설정 후 정상 작동을 확인했으나, 코드 정리 과정에서 일부 파일을 layout 폴더로 이동.
이후 pathname을 읽어올 수 없다는 오류가 발생.

2. 원인 추론

1) 유저 정보 업데이트 문제

axios를 활용한 API 서버 통신 과정에서 발생한 문제일 가능성이 높음.
익숙하지 않은 로직이 포함되어 있어 놓친 부분이 있을 수 있다고 판단하여 전체 로직을 검토함.

2) `Router` 오류 발생 원인

파일 이동 과정에서 import 경로가 제대로 반영되지않았을 가능성이 있음.
BrowserRouter, Routes, Route 설정이 올바르게 유지되었는지 확인이 필요함.
Link, Navigate, useNavigate 등의 경로 설정이 제대로 반영되었는지도 점검해야 함.

3. 해결 방안

1) 유저 정보 업데이트 문제

로직을 다시 점검하고, 강의 시간에 배운 코드로 변경하여 테스트함. 그러나 여전히 업데이트가 되지 않음.
데이터 통신 과정에서 놓친 부분이 있을 것으로 판단하여, console.log를 이용해 요청 및 응답 데이터를 전반적으로 확인함.

2) `Router` 오류 해결

path 경로를 다시 확인하고, Link, Navigate, useNavigate 등의 경로 설정을 모두 점검함.
라우터 설정이 올바르게 동작하는지 확인하기 위해 기존의 코드와 비교 검토함.

4. 해결 결과

1) 유저 정보 업데이트 문제 해결

업데이트 로직에서 데이터를 받아오지 못하는 것을 확인함.
업데이트 버튼을 클릭한 직후 일시적으로 오류가 발생했다가 사라지는 현상을 발견함.
URL 뒤에 설정하지 않은 ? 문자가 붙어있는 것을 확인. 위 상황들을 토대로 업데이트 로직이 정상적으로 실행되지 않았음을 인지함.
업데이트 로직 시작 전 부터 전체적으로 재검토.
e.preventDefault() 오타가 있었던 것을 확인!
올바르게 수정한 후 테스트해보니 정상적으로 작동함.
"설마… 너 하나 때문이었니?" 😂

2) `Router` 문제 해결

원인을 찾지 못하여 구글링해보았으나 react-router-dom 버전 오류관련 내용이며 내가 사용하는 버전에 관해서는 찾아볼수 없었음.
다행히 GitHub에 정상 작동하는 코드를 푸시해둔 상태였기 때문에, 현재 작업 중인 폴더를 삭제하고 새롭게 clone하여 다시 확인함.
결과적으로 정상적으로 동작하는 것을 확인… "화난다" 😤

느낀 점

이번 프로젝트를 진행하면서, 몇몇 확장 프로그램 설치 문제로 인해 VSCode를 업데이트해야 했고, 이 과정에서 이전에는 마주치지 않았던 config 파일이나 eslint 설정 문제를 겪었다. 또한, Router처럼 리액트 내부 로직이 예상치 않게 꼬이는 경험을 하며 많은 어려움을 느꼈다.

최근 발생한 오류들을 되돌아보면, 로직 자체의 문제보다는 공백, 오타 같은 사소한 실수가 더 많았다. 그리고 오늘 Router 문제처럼 리액트 내부 로직이 꼬이는 상황에서는, 정상적으로 동작하는 코드가 있다면 망설이지 말고 빠르게 add → commit → push 하자!
역시 직접 겪어봐야 진짜 깨닫는다. 😅

서버 통신 개념은 처음엔 굉장히 어렵게 느껴졌지만, 개인 과제를 진행하면서 점차 이해되는 부분도 있고, 여전히 어려운 부분도 있다. 개인 과제가 끝나면 바로 팀 프로젝트가 시작되는데, 그때까지도 흐름이 어렵다고 느껴진다면 기초를 탄탄하게 다지기 위해 분반 변경 신청도 고려해볼 생각이다.

🔥 이제야 정상 작동되지만, 개발은 역시 쉽지 않다. 그래도 차근차근 쌓아가면 분명 더 나아질 거라 믿는다! 🚀

저도 Tailwind 써보고 싶습니다!

Thu, 20 Feb 2025 15:02:21 GMT

[25.02.20 목요일]
[MBTI 테스트 - 트러블슈팅]

리액트 심화주차 수강을 힘들게 마치고 개인과제를 셋팅하던 중에 문제가 발생!! 셋팅과정부터 문제가 발생하다니..🤦‍♀️

🚨 문제 발생

Tailwind CSS를 설정한 후 정상적으로 적용되었는지 확인하는 과정에서 unknown at rule @tailwind라는 경고 메시지를 확인했다. 이는 오류가 아닌 경고였기 때문에 혹시나 하는 마음에 Tailwind를 적용해 보았으나, 스타일이 정상적으로 반영되지 않았다.

팀원들에게 동일한 현상이 있었는지 확인하고, 구글링을 통해 unknown at rule @tailwind 문제를 해결했다. 해결 방법 중 하나로 PostCSS Language Support 익스텐션을 설치했으나

여전히 Tailwind가 적용되지 않았다.

1. 원인 추론

처음 사용하는 CSS 프레임워크이므로 설치 과정과 설정에서 오류가 발생했을 가능성이 높았다. 그래서 다시 한 번 설치 과정을 점검하고, 설정한 파일들에서 오타가 있는지 확인했다.

2. 해결 방안

package.json에 설치된 Tailwind CSS의 버전을 확인했다.
- 버전은 발제에서 제시한 버전과 같았다.
tailwind.config.js 파일과 postcss.config.js 파일의 설정을 점검했다.
main.jsx에서 index.css가 올바르게 import되었는지 확인했다.
- 모든 항목을 점검하고 다시 import까지 확인했으나 문제는 해결되지 않았다.

3. 결과

결국 강의에서 제공한 코드를 그대로 복사하여 붙여넣었더니 정상적으로 작동했다. "왜 갑자기 되는 거지?" 하고 깃(Git) 변경 사항을 확인해 보니, tailwind.config.js 파일에서 파일명 앞뒤의 공백 차이가 문제였다.

// 문제 발생 코드
content: [" ./src/**/*.{js, jsx,ts,tsx} "]

// 정상 작동 코드
content: ["./src/**/*.{js,jsx,ts,tsx}"]

문제 발생 코드	정상 작동 코드

🪄 공백을 제거한 후 Dev 서버를 다시 실행하니 매우 정상적으로 작동하는 것을 확인했다.

Config 파일 내 공백이 이렇게 큰 영향을 미칠 줄은 몰랐다! 튜터님들조차 새롭게 알게 된 사실이었다.

느낀 점

해당 부분은 Prettier에서도 자동으로 수정되지 않는 영역이었다. 파일을 점검하는 과정에서 나도 모르게 공백을 입력했을 가능성이 높았다.

Tailwind가 적용되지 않는 원인을 찾겠다고 여러 개의 config 파일을 열어둔 채 다른 작업을 진행하면서, 키보드를 실수로 눌러 의미 없는 글자가 입력되었고, 그로 인해 추가적인 오류 메시지를 마주치기도 했기 때문이다.

Config 파일을 수정하거나 확인할 때는 반드시 원본을 저장하거나, 가급적 건드리지 않는 것이 중요하다...! 😭

뉴스피드 프로젝트 KPT

Tue, 18 Feb 2025 12:02:09 GMT

[25.02.18 화요일]

1. Keep (잘했던 점 / 유지하고 싶은 것)

✅ 개인적인 성과

회원가입 자료를 받아서 Supabase에 기록
협업을 위한 공통 양식 제시
필수 구현 사항 완성

✅ 팀의 성과

유연하고 원활한 소통과 수용, 방향성&레퍼런스 제시 (비판, 비난 없이)
필수 구현 사항 완성
발표 준비부터 발표까지 완성도 높았음

2. Problem (개선이 필요하거나 아쉬웠던 점)

⚠️ 개인적인 아쉬움

확인이 필요한 부분은 시간이 소요되더라도 정확하게 진행해야 함
내가 맡은 부분을 명확하게 이해하지 못한 점이 아쉬움

⚠️ 팀 차원의 문제

팀 기획 단계에서 디테일을 신경 쓰지 못함 (첫 진행에 따른 시행착오)
스타일, 컴포넌트, 자료 조사 부족 → 레퍼런스 부족
GitHub 사용 시, 각자 맡은 1개의 브랜치만 사용하도록 개선 필요
여러 사람이 하나의 파일을 동시에 수정하는 문제 발생 방지

3. Try (앞으로 시도해보고 싶은 것)

🌟 새로운 도전

SNS 가입 기능 추가
회원가입 유효성 검사 강화
게시글 검색 기능
하드코딩 및 매직넘버 리팩토링
컴포넌트화 진행
댓글 개수 표시 기능
게시글에 이미지 추가
마크다운 작성 기능 추가 (GitHub처럼)
피드 읽기 시 발생하는 문제 해결
Supabase를 활용한 개인 프로젝트 진행
트러블슈팅 기록 남기기
관리자 페이지 제작

🌟 문제 해결 방안

Supabase 공식 문서 참고하며 실습 진행
React 마크다운 라이브러리 활용
사용자 개선을 위한 Validation 레퍼런스 확인 및 명확한 적용

4. 자유 메모

📌 프로젝트와 관련하여 추가로 남기고 싶은 생각

프로젝트 시작 시 초기 세팅 담당자 지정
90% 이상 완료 후 클론 받아 진행
플러그인 버전 맞추기, 환경 변수 설정, .gitignore, 개발 환경 버전 정리, Prettier 설정, ERD, 컨벤션 체크
Vercel 배포 제한(하루 100번) 관련 안내 필요
기획 단계에서 충분한 레퍼런스 조사 및 기록
Notion & GitHub의 Project, Milestone 기능 활용
기획 단계의 기록이 README 및 발표 자료로 활용 가능하여 후작업 절감
코드 유지보수성 및 재사용성 고려
하드코딩 및 매직넘버 최소화
재사용성이 높은 부분은 커스텀 훅 적극 활용
프론트엔드 개발자로서 서버 통신 고려
사용자 경험(UX)을 고려한 인터페이스 설계
주석 처리 공통화
특정 기호 사용 또는 주석 작성 기준 통일
CSS 스타일 가이드라인 마련
공통적으로 사용할 모드, 폰트 크기, 색상, 마진, 패딩 등 사전 정의
컴포넌트 담당자 지정
추가적으로 필요한 라이브러리 사전 조사 및 설치
버그 발생 가능성이 높은 부분에 대해 극단적 테스트 진행

[Team Project] 뉴스피드 제작기 day3

Fri, 14 Feb 2025 22:24:04 GMT

[25.02.14 금요일]

🤝 정말 협업

혼자서 사용하던 깃허브를 공통으로 사용하면서 브랜치전략에 대해서 체감하는 중.
협업 과정중의 pull, push, Conflict, rebase, merge 방법등을 실제 사용해보고 겪어보니 진짜협업이구나.
내가 제작하지도 않은 페이지가완성되고 있다.
나에게 코드리뷰와 merge권한이 생기다.
작업 과정중의 의사 소통.
공통셋팅 룰은 계속해서 새로새로 생긴다. 처음에 잘 정해두자.
supabase 그녀석!

🌿 첫 DB활용 프로젝트

팀플 같은 팀플을 처음하는 중인데, DB를 사용하라는 지령이 내려졌다.
수파베이스를 사용하여 DB기반으로 CRUD구성.
DB도 처음 사용해 보고, 셋팅하고, P.K와 F.K구분 잘해서 정의하기.
속성값 설정.
auth.users -> public.users 저장하기(트리거 활용)

트리거 함수(sql)

가장 큰 고비중 하나였던 트리거! 회원가입할때 기본 email, password는 auth 스키마의 users로 자동으로 저장되지만, public스키마에 설정한 우리의 커스텀 테이블과는 관계형으로 이용하기가 힘들다. 개인정보가 저장되는 부분이기 때문이다. 그래서 public 스키마에 users 테이블을 추가하여 auth.users의 값을 일부 넣어줘야 하는데 생각대로 되지 않아았다. 어제 만든 회원가입 페이지에서 테스트중인데 auth.users에만 값이 저장이 되고 public.users에는 저장이 되지 않아 한참을 찾았다. 강의 도중에 "트리거" 함수를 추가해야 한다고해서 찾아보았는데, ?? 내가 생각한 리액트 함수가 아닌 sql함수였던 것이다. 당황했다. 튜터님들도 구체적으로 알려주지 않고 찾아서 해보라고만 이야기해서.. 일단 진행..20분, 30분... 과제 진행 기간이 짧기 때문에 더이상은 고민하지 못하고 튜터님을 찾아가려했는데!! 다행히도 팀에 DB를 유경험자가 있어서 여기서 진행이 거의 막힐 상황이었는데 구세주 처럼 등장!! 생각보다는 수월하게 해결!

추가하는 트리거에 대해서만 참고용으로 기록

DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users;
DROP FUNCTION IF EXISTS public.handle_new_user;

CREATE FUNCTION public.handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
  INSERT INTO public.users(user_id, email, name, nickname, created_at)
  VALUES (
    NEW.id,
    NEW.email,
    COALESCE(NEW.raw_user_meta_data->>'name', 'default_name'), -- NULL 방지
    COALESCE(NEW.raw_user_meta_data->>'nickname', 'default_nickname'),
    NEW.created_at
  )
  ON CONFLICT (user_id) DO NOTHING;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

CREATE TRIGGER on_auth_user_created
AFTER INSERT ON auth.users
FOR EACH ROW
EXECUTE FUNCTION public.handle_new_user();

테스트해서 정상적으로 자료가 저장이 되는 것을 확인했다. 나중에 이걸 다시 사용하려고 할때 수정해서 사용해봐야지. 그리고 공식문서도 계속 읽어면서 앞으로의 코드를 짜야겠다. 공식문서를 참조하지 않으면 js에서 사용이 매우 힘들겠다 라고 느꼈다. 내일은 공식문서 확인하면서 코딩해보자!!

https://supabase.com/docs/reference/javascript/start?queryGroups=platform&platform=yarn

[Team Project] 뉴스피드 제작기 day2

Thu, 13 Feb 2025 19:16:07 GMT

[25.02.13 목요일]

이번 팀프로젝트의 주요 목적은 협업과 Git & GitHub 사용 방법에 익숙해지는 것이다. 어제 협업을 위한 여러 규칙들을 정했지만, 추가로 정해야 할 규칙들이 예상보다 많았다.

깃허브 컨벤션

항상 개인과제를 하면서 '나' 혼자 사용하던 레포지토리를 공동으로 사용하는 부분에서는 모두 익숙하지 않았다.

팀원들이 같이 코드를 작성하지만 누가 작성한 코드인지 특정하기 힘들게 하는 것이 목적! 그러기 위해 정할 룰이 생각보다도 많이 남아 있었다.

커밋 컨벤션

커밋 타입을 세부적으로 나누기보다는 비슷한 범주끼리 묶어서 혼란과 고민을 줄이는 방향으로 규칙을 정했다.
우리가 만든 규칙이 일반적으로 많이 사용되는 부분이 아닌것도 있다. 라는 튜터님의 피드백이 있었지만, 각자 사용하던 방식과 사용빈도가 달랐기 때문에 최대한 혼란과 고민을 줄이는 방향으로 정했다는 이유를 설명했다. 튜터님은 이에 대해서 그렇게 팀원들과 정했다면 그대로 진행하면 된다고 답변을 주셨다.

우리조의 커밋 컨벤션

커밋타입	설명	예시
feat	새로운 기능 추가 (변수, 함수 선언+호출)	feat: 회원가입 로직 추가
fix	버그수정	fix: 로그인 시 비밀번호 검증 오류 해결
docs	문서수정	docs: README에 프로젝트 개요 추가
style	UI(css등) 디자인 추가/수정	style: 버튼 추가
refactor	코드 리팩토링, 성능개선(기능변경없이 구조 개선)	refactor: 홈 화면 UI 로직 개선
test	테스트 관련 코드(누락된 테스트 추가, 리팩토링 테스트 등)	test: 유닛 테스트 추가
chore	빌드 업무, 패키지 매니저 설정, 기타 자잘한 수정	chore: package.json 버전 업그레이드
add	없던 파일을 생성함, 초기 세팅 (기능제외 rafce)	add: 컴포넌트.jsx 생성

브랜치 컨벤션

브랜치명 kebab-case로 작성

브랜치명	설명	예시
main	배포용 브랜치	main
dev	통합(개발)용 브랜치	develop
feature/	기능 개발 브랜치	feature/login
bugfix	버그 수정 브랜치	bugfix/nav-bar
chore/	문서, 설정파일 변경 브랜치	chore/update-readme
docs/	문서 작업 브랜치	docs/api-guide
refactor/	리팩토링 브랜치	refactor/homepage-ui

각종 코드 컨벤션

변수명, 함수명, 상수명, boolean
파일/폴더명
컴포넌트/styled-components
이벤트 핸들러 prefix
styled-components profix, 사용방식
주석 작성 방식

위내용들 처럼 여러가지 컨벤션을 정했더라도, 작업을 하다보니 여러가지 예외사항들이나 추가사항들이 생기게 되어 그때 그때 규칙을 추가 설정 하기도 하였다.

반복사용되는 issues등은 템플릿으로 등록하여 사용하기도 하였다.

급하다 급해

작업을 할수 있는 물리적인 기간이 많지않은데, 협업을 위해 생각보다 많은 것들을 정해야하고 시간소요도 많이 되다 보니 슬슬 다들 마음이 급해졌다.

어느정도 룰이 정해지고난 후 각자 담당한 페이지의 작업을 시작했다.

내가 담당한 login 페이지와 sign up 페이지는 다른 팀원과 작업 내용이 많이 겹쳐서 함께 작업하기로 했다.

회원가입을 통해 users DB로 로그인 여부를 확인하고 커뮤니티 활동 권한이 주어지기 때문에, 다른 팀원들의 페이지에도 영향을 미친다. 따라서 이 부분을 최우선으로 작업하여 전달하기로 했다.

기본 input과 button 구성을 먼저 만들어 팀원에게 전달하면, 팀원이 UI 스타일링을 맡고 나는 기본 로직의 틀을 구성했다.

데이터베이스 간의 속성값 정의가 아직 완료되지 않아서, 기본 로직의 틀과 Supabase 연동까지만 마무리하고 나머지 기능 구현은 내일 완성하기로 했다.

[Team Project] 뉴스피드 제작기 day1

Wed, 12 Feb 2025 18:19:47 GMT

[25.02.12 수요일]

BasS를 활용한 프론트엔드 개발 팀프로젝트

React와 Supabase를 활용한 CRUD 기능구현
github 협업

1. 주제 선정 및 아이디어 도출

King's Ear is (a.k.a KEI)👂👑 꿀팁, 질문, 코드리뷰, 잡담등 내배캠 대원들의 대나무숲 커뮤니티 🎋

처음에는 각자가 생각한 아이디어들을 자유롭게 기록한 후, 그 중 겹치는 부분들을 추려내어 공통된 기능과 아이디어를 뽑았다.

우리가 논의한 주제들 중에는 학습 질문, 꿀팁 모음, 목표 설정 공유, 콘텐츠 플랫폼 등이 있었다. 여러 아이디어들 중에서도 '임금님 귀는 당나귀 귀'와 '대나무숲' 커뮤니티 페이지 제작 아이디어가 흥미롭다고 판단되어 이를 기반으로 프로젝트를 진행하기로 결정! 비슷한 다른 커뮤니티 페이지들을 레퍼런스로 참고하여 필요한 기능들을 추출하고, 우리가 구현할 기능들을 세부적으로 계획했다.

2. 기능 구성과 역할 분담

필요한 페이지들을 우선적으로 나누고, 각 페이지에서 제공해야 할 주요 기능들을 나열하며 기획을 시작했다. 그중에서 회원가입에 필요한 정보를 제시하던중 평소 다른사이트 등에서 예상보다 많은 정보를 요구해서 왜 이렇게 많은 정보가 필요한지 의문이 들었으나, 우리가 직접 구현을 진행하려다보니 그 이유를 명확하게 알게 되었다. 특정 조건에 맞는 유저를 찾아야 할 경우, 유저가 제공한 정보와 데이터베이스에서 대조할 수 있는 정보가 많아야 하며, 이를 통해 정확한 유저 관리가 가능하다는 점을 이해하게 되었다.

또한, 뉴스피드 페이지가 커뮤니티와 소셜 기능을 중심으로 다루기 때문에, user DB를 제외하고도 생각보다 많은 DB가 필요하다는 것을 진행하며 알게 되었다.

3. 기획 페이지 작성 및 UI 설계

프로젝트 진행 초기에는 Notion을 활용하여 기획 페이지를 작성하고, 필요한 모든 기능과 내용을 정리했습니다. 이를 바탕으로 각자 파트를 나누어 Login전, 후를 기준으로 Figma로 UI 디자인을 구현했습니다. 처음 Figma를 사용해보는 팀원들도 있었지만, 서로 협력하며 배워가면서 즐겁게 진행할 수 있었습니다. 각자 한 페이지씩을 맡고, 피드백을 주고받으며 디자인을 완성해 나갔습니다.

"템플릿 퍼가요~~", "로고있으신분~~" 재밌는 과정이었다. UI디자인을 끝내고 나서도 무언가 하나씩 놓친부분들이 보여서 나중에 보완 작업을 진행했고, 은근히 세세한 부분들이 많아서 페이지 연동등에 혼동이 올 수도 있단 생각에 흐름도를 나중에 추가 하기도 했다.

4. 각자의 역할 분담과 진행 과정

이 외에도 팀으로 진행을 하다보니 생각보다 정해야하는 것들이 많았다. 깃허브, supabase 협력자등록, 기본 셋팅, 데이터베이스 셋팅, 코드컨벤션, 깃허브 룰 등...

초반에는 팀장이 진행을 해서 초대를 해야하는 초기 작업들이 많기는 했으나, 화면공유를 하면서 서로조율해가면서 진행하였다. 사공이 많으면 배가 산으로 간다고하는데 우리팀원들은 서로 의견을 내면 수용하고 이해하면서 절충안은 매너있게 잘 제시하기도 하고 좋은 분위기에서 진행되었다. BasS를 활용한 프로젝트가 처음이다 보니 업무 분담을 나눌지 명확한 기준을 제시할 정보가 없어서 페이지별로 역할분담을 나누기로 했다. 담당할 페이지는 다들 지원을 하지 않아서 원활한 진행과 형평성(?)을 고려하여 사다리타기로 정했다. 나는 로그인페이지와 기능을 담당하게 되었는데, 회원가입페이지와 기능을 담당한 팀원과 같이 진행하기로 하였다.

관계형 DB를 다뤄본 경험이 없어, DB 설계에 어려움이 있었지만 팀원들의 집단지성과 마지막 튜터님의 확인과정을 거쳐서 작업환경이 만들어졌다. 깃허브 초기 셋팅에 보완점이 확인되어 이부분은 다시한번 셋팅을하고 작업에 들어가야 한다.

느낀점

팀으로 진행한다는것이 혼자서 할때도 거치는 과정이긴 하지만 해야하고 정해야할 것들이 훨씬 많다는 것을 느꼈다. 이전 팀 프로젝트를 할 때도 느낀부분이긴 하나, 다른사람과 협력을 한다는 것은 생각보다 상대방과 많은 대화와 의견을 주고받아야 하는 부분이라 이번 팀프로젝트에서도 "소통"을 어떻게 하느냐에 따라 진척도가 많이 달라지겠다고 생각된다. 다행히 기획단계에서 우리팀은 우리 팀은 소통을 잘 하고 서로를 많이 배려하며, 기분나쁘지 않게 의견을 표현하고 수용하는점이 너무 좋았다. 평소에는 마이크활용을 잘 하지 않더라도, 소통이 중요한 이 시점에서 마이크를 켜고 목소리를 내는 것에 대한 용기에 정말 감사하다! 발표준비도 해야하기 때문에 제작기간이 빠듯하긴 하지만 시작이 느낌이 좋은팀이다.

TIL | Link 와 Navigate

Tue, 11 Feb 2025 14:32:36 GMT

[25.02.11 화요일]

개인과제 제출 마감기한이 지나고 해설 영상을 확인 하던중, 내가 정확하게 모르고 그냥 사용한 부분이 있음을 알게 되었다.

Link와 Navigate

코딩을 하면서 후반부에 의문이 생기긴 했지만, 일단 구현이 목적이었기 때문에 넘어갔던 부분이다.

리액트에서 사용하는 Link와 Navigate에 대해 다시 한 번 확인하고 넘어가도록 하자!

🔗 Link

React-Router-Dom 에서 제공하는 컴포넌트로, 설치가 필요하다.
Link 컴포넌트를 사용하여 사용자가 클릭하면 다른 페이지(컴포넌트)로 이동할 수 있게 해준다.
클릭만 하면 이동하기 때문에, 다른 연산과정 없이 페이지를 이동할 때 사용된다.
개발자 도구에서는 태그로 보인다.

페이지 이동시 전체 페이지를 새로고침하지 않고 필요한 부분만 리랜더링한다.

✅ 예: 페이지 이동

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    
      Home
      About
    
  );
}

📌와 의 차이점

✅

브라우저 주소를 이동시키고 페이지 자체를 새로고침한다.(전체 페이지를 리랜더링)
외부 페이지와 연결할 때 주로 사용.

✅

SPA구현시에 사용되며, React Router가 필요한 부분만 리랜더링한다.
프로젝트내에서 페이지(컴포넌트) 전환 시 주로 사용.

📍 useNavigate

React-Router-Dom 에서 제공하는 훅으로, 설치가 필요하다.
특정 로직을 처리한 후 자동으로 페이지를 이동시키거나, 사용자가 특정 행동을 했을 때 페이지를 변경하는 경우 사용한다.
- 조건이 필요한 곳에서 navigate 함수를 호출해서 페이지 이동.

✅ 예: 로그인 폼 제출시 특정 페이지로 이동

import { useNavigate } from 'react-router-dom';

function Login() {
  const navigate = useNavigate();

  function handleSubmit(event) {
    event.preventDefault();
    // 로그인 처리 후 대시보드 페이지로 이동
    navigate('/dashboard');
  }

  return (
    
      
      
      
    
  );
}

Link는 사용자가 클릭시 바로 페이지를 이동하는 로직구현에 사용.
useNavigate는 페이지 전환 시 처리해야하는 조건 로직이 있을 경우 사용.

TIL | vercel 배포 딸깍! 주의 사항!

Mon, 10 Feb 2025 15:40:21 GMT

[25.02.10 월요일]

개인프로젝트 6일차 배포!

튜터님이 정말 옵션 하나하나 설명하며 친절하고 상세하게 알려주셨는데... 마치 수업에 나온 코드를 그대로 따라 쳤는데도 제대로 구동이 안되는 것 처럼.. 뭔가 하나 부족한 상태가 되는 걸까??

vercel 배포 후 이미지가 사라졌다?

처음해보는 부족하지만 그래도 잘 구동되는 내 프로젝트를 배포했다. 두근두근~ 아뉘 근데..뭔가 미리보이는 배포상태가 쪼~ 끔 이상하다..?

메인페이지 로고가 어디갔지?? 메인페이지 뿐만이 아니었다. 내부의 다른 페이지도 로컬에서 직접 지정한 이미지파일들은 모두 배포하면 보이지 않았다. 엑박을 내 사이트에서 보게될줄이야..?

로컬에서 작업할 때는 문제가 없었는데요.

찾아보니 환경변수를 설정해주고, 파일경로를 절대경로로 지정을하고..여러방법이 있었으나.. 내상황과는 맞지 않는 부분이었다.

vite를 활용하여 프로젝트를 진행중이었기에 공식문서를 보니... https://ko.vitejs.dev/guide/assets.html

아..또, import였다. 이번 프로젝트를 진행하며 import 주의보가 열심히 울린다..ㅠ

✅ 이미지 파일 import, 파일 경로에는 {}묶어서 파일명만

// 파일 import
import pokemonlogo from "../assets/pokemonlogo.png";
.
.
.

이제 배포 후에도 정상적으로 이미지가 표출 된다!

404를 여기서 보게된다구요? 새로고침했을 뿐인데요????

네??

아뉘..이건 전혀 예상 밖입니다!? 로컬에서 작업할 때 처럼 습관적으로 새로고침을 하였는데 마주한 페이지가 Not_Found 🫠

뭐가 문제인지 정확히 모르겠지만, vercel공식문서에 있는 내용은 더 모르겠고.. 구글링을 토대로 시도!

최상위 디렉토리에 vercel.json 파일을 생성
아래 코드를 작성 해준다.

{
  "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}

깃헙에 push
재배포된 확인!

새로고침을 열심히 눌러도 404 Not_found는 마주치지 않은 것을 확인했다!

정말 이제 다 했구나~ 라고 생각했지만 끝까지 방심할 수 없다!! 배포 과정에서도 이런 난관이 생길 줄이야.. 나만 그런가 했으나 처음 배포를 진행하는 다른 팀원들도 비슷한 과정을 겪었다. 끝날 때까지 끝난 게 아닌 점!! 조금 일찍 과제를 마쳐서 풀어져 있었는데 다시 긴장했다!!

TIL | 버블버블~ e.stopPropagation() vs e.preventDefault()

Fri, 07 Feb 2025 18:21:56 GMT

[25.02.07 금요일]

개인과제 5일차.

기능 구현들은 다 완성을 하였다!! 세부사항들을 다듬고, 코드를 다시 확인하고 스타일정리를 하면서 예상하지 않은 부분이 발생!

🫧 버블버블?

ui요소를 클릭하면 다른페이지로 넘어가도록 구현을 한 기능 중에서 array.map()을 사용하여 그려주는 부분이 있어 그 묶음 들을 li태그로 묶어 줬는데, 시멘틱 요소를 고려하면

→ 로 구현해주는게 좋겠다는 조언으로 수정하였다.

리액트를 이용하여 구현을 하는 중이었기 때문에 로 변경해주었다. 기존에 있던 코드에서 태그명만 바꿔주었기 때문에 다른 문제는 생기지 않을 것이라 예상했으나, 버블링이 발생한것이다. 구조 자체가 버블링이 생길수 밖에 없는 구조이긴 하나, 이미 그 전에 이벤트 버블링을 방지용으로 event.stopPropagation()를 넣어준 상태였다. 🤔

이벤트 버블링 발생한 코드

const PokemonCard = ({ data }) => {
const dispatch = useDispatch();

const navigate = useNavigate();
const goToPokemonDetail = () => {
  navigate(`/dex/detail?id=${data.id}`);
};

const handleAddPokemon = (e) => {
  e.stopPropagation();
  dispatch(addMyPokemon(data));
};

return (

  
  {data.korean_name}
  no.{data.id.toString().padStart(3, "0")}
  + add

💡 코드를 뜯어보면 나온다!!

Link는 어딘가로 연결시켜주는 to 속성을 기본으로 가지고 있다. 그런데 기존의 코드에서 수정을 해주지 않아서 동일한 기능을 하는 클릭 이벤트 함수도 그대로 들어가 있다.

중복되는 2개의 기능은 필요 없으므로 click 이벤트를 삭제했다! 그래도 문제는 생긴다. 내가 넣어준 event.stopPropagation()은 캡처링/버블링 방지를 하는 것은 맞으나 Link가 가지고있는 기본 동작인 to 속성은 그대로 실행이 되기 때문이다. 이런 기본 동작을 방지하는 목적으로 사용할 때는 event prevnetDfault() 메서드를 사용해 줘야 한다!

✅ 수정한 코드

const PokemonCard = ({ data }) => {
  const dispatch = useDispatch();

  const handleAddPokemon = (e) => {
    e.preventDefault();
    dispatch(addMyPokemon(data));
  };

  return (

    
    {data.korean_name}
    no.{data.id.toString().padStart(3, "0")}
    + add

Link 자체에 페이지를 연결할수 있는 to 속성이 있으므로, ~~onClick={goToPokemonDetail}~~ 이벤트 삭제.
해당 이벤트가 삭제되어 ~~useNavigate~~ 도 필요가 없어졌으므로 삭제.
버튼 이벤트로 인해 전파되는 버블링은 Link의 기본 요소이기 때문에 event.stopPropagation() → e.preventDefault() 변경해 주었다.

원하는 대로 정상적으로 잘 작동된다!

각 이벤트 메소드의 차이점을 알았으니, 다음부터는 구분해서 사용할수 있겠지!!?

TIL | RTK refactoring

Thu, 06 Feb 2025 16:03:19 GMT

[25.02.06 목요일]

개인과제 4일차. 어제까지 Context API 리팩토링을 마무리하고, Redux-ToolKit을 활용한 리팩토링을 시작했다.

Context API를 사용하면서 어느정도 코드는 정리를 해둔 상태여서 바~로 진행하면 되는 사항이었는데, createSlice 파일을 만들고 침묵... 다시 rtk를 활용하라고 하면 할수는 있겠지만, 진행 과정을 기록해 둬야 나중에라도 다시 찾아보고 활용하지 않겠나?

RTK는

전역 상태관리 라이브러리인 Redux를 더 편하게 사용할 수 있게 만든 툴키트다.

내가 프로젝트를 진행하며 작업했던 과정을 기록해 둔다. yarn + vite를 기반으로 작업을 진행했다.

1. RTK 설치

yarn add react-redux @reduxjs/toolkit

2. redux 폴더 구조 생성

src/redux/ 폴더 안에 configureStore.js 파일과 <작업명>Slice.js 파일을 생성해준다.

3. createSlice 생성 후 export

pokemonSlice.js

props 지옥, props-drilling

Wed, 05 Feb 2025 18:30:05 GMT

[25.02.05 수요일] : 포켓몬dex - 트러블슈팅

개인과제 3일차!! 어제 2단 변신 중 베이스를 마무리 한 줄 알았는데...하나를 빼먹었네? 추가해야지~ 하고 시작했는데....

아니... 왜.. 안됨!? 아니... 왜 작동되던 녀석도 안됨!? 아니... 새로 구현한 녀석 너만 안되면 안 되니!? 아니이!!!!💢

1. 문제 발생

포켓몬 카드를 선택하면 상세페이지로 넘어가게 되는데, 상세페이지에서도 포켓몬을 내 포켓몬에 추가하거나 삭제하는 버튼을 넣어줬다.

Dex.jsx	Detail.jsx
여기서도 포켓몬 추가, 삭제가 가능하고!	여기서도 추가, 삭제가 가능하도록!

그.런.데. 버튼은 들어가 있지만 기능이 작동하지 않았다... Dex.jsx에 있던 버튼은 잘 작동하였으나, Detail.jsx에 있는 버튼이 정상작동하지 않았다. 그래서 조건, props 등을 확인하며 다시 수정!! 그래도 안되는데...난..무슨짓을 한 것인가?

2. 원인 추론

<나만의 포켓몬 - 카드>에 있는 버튼도, <포켓몬 목록 - 카드>에 있는 버튼도, <포켓몬 상세페이지>에 있는 버튼도 모두 1개의 버튼에서 추가(add)로직, 삭제(remove)로직을 조건에 맞춰서 사용하고 있는 중이다.

가장 유력한 원인은 props를 전달하고 전달하고 전달하고... 하다 보니 분명 어디선가 꼬인 것이고, 그러면서 로직에서 몇 가지 수정 사항도 있었다.

props를 계속 전달하다 보니 헷갈려서 로직에서도 뭔가를 착각한 것 같은 느낌이 강하게 들었다.

3. 해결방안

🪄 props 정리

지금 작업 중인 깃허브 브랜치 이름이 'props-drillig'이다. 분명 작업하다 어디선가 props를 잘못 전달하거나 못 받아온 것이다. 코드에디터에서만 확인을 하니 혼동이 생기고 정리가 안됐다. 그렇다면! 시각화!

각 페이지/컴포넌트 별로 필요한 props만 정리하고 나니 또 한 가지 원인이 보였다.

🪄 props 공통 부모를 찾아라!

작업할 때 내 로직은 모두 Dex.jsx 페이지에서부터 시작을 했다. 그렇다면 내려줄 수 있는 자식 컴포넌트는 까지 인 것이다. Detail.jsx는 Card컴포넌트를 누르면 보이는 화면이기 때문에 Dex의 하위 컴포넌트가 아닌 것이다. 즉, props를 전달할 수 없는 것이다.

그렇다면 props를 내려줄 수 있도록 Dex와 Detail의 공통 부모를 찾아 올라가자!! 그랬더니 Router.jsx가 나왔다. 여기서는 라우터 설정만 해주고 끝냈는데, 지금보 니 상태 관리부터 모든 로직이 여기서부터 시작을 했어야 했던 것이다.

과제 발제 페이지에서 추가 기능 구현 부분을 제대로 확인하지 않았던 결과🥲 props-drilling을 제대로 경험하고 말았다🫠

4. 결과

상위 컴포넌트에서부터 필요한 props를 정리해서 전달, 전달, 전달, 전달해 주니 정상적으로 잘 작동한다! 컴포넌트 관계와 props를 정리하고 나니 일부 수정했던 로직에서 필요한 부분도 다시 채워 넣었다. 정상적으로 잘 작동하는 것을 확인 한 후에, 바로 context API로 리팩토링진행!


import useEffect 하면 해결	import useState 하면 해결

와.. props 정리를 제대로 해두니 context API로 리팩토링할 땐 거의 10분 컷으로 해결... 극과 극, 천국과 지옥을 체험해버렸다. 😳

기록

다른 팀원은 context API 리팩토링하면서도 오류가 발생해서 시간이 오래 걸렸다고 했는데, props 정리를 잘 해둬서 금방 끝난 것인가? 너무 쉽게 마무리가 되어서 "이게 되네?", "이게 맞아?", "찜찜하네" 하면서 튜터님 확인 방문까지 했다. 물론 다른 부분들도 확인하고 질문도 하면서 겸사겸사 방문한 것이지만..

스탠다드반 수업에서 튜터님이 설명을 정말 잘 해주셔서, 실제 코딩을 진행할 때 그 부분만 다시 확인하고 작업할 수 있었다. 어제 특강도 있었고, 반복을 이만큼 하다 보니 그만큼 결과가 나온 것 같다고 생각한다.

“이거 쉬워요, 정말 쉬우니까 여기서 고생하지 말고 스무스하게 가세요~” 하는 튜터님의 무언의 메시지랄까... 튜터님들이 정말 많이 고민하고 애써주신다는 것이 느껴졌다.

TIL | 동적라우팅 - 패스파라미터 & 쿼리스트링

Tue, 04 Feb 2025 16:24:18 GMT

[25.02.04 화요일]

개인과제 2일차, 2단 변신 과정중 베이스 단계를 마무리 했다! 이 전 보다는 리액트에 조금 익숙해진 것 같은 느낌적인 느낌!?

쪼끔 친해졌다고 금방 또 사이 멀어질뻔 했다.

동적라우팅에 대해서 패스파라미터만 배운것 같은데... 쿼리스트링으로 구현하라는 미션이 주어졌다..🤔

📌 동적라우팅

Route를 설정할 때 URL의 전체 형태를 미리 정의하는 것이 아니라, 특정 규칙을 정의한 후 규칙에 부합하는 URL의 경우에는 해당 element를 보여주게 설정한다. 즉, 임의의 동적으로 변화하는 url이 뒤에 추가로 붙어도 라우팅 해준다는 것.

//Router.jsx- 동적라우팅

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

export default function Router() {
  return (
    
      
        } /> // 정적 라우팅
        } /> //동적 라우팅
      
    
  );
}

🔗 Path Parameter

경로/:문자열 형태로 path를 설정하면 URL에서 경로/ 뒤에 글자가 오면 이 Route로 연결해준다.

/detail/${data.id} 위 처럼 특정페이지 id(path parameter)값을 가져올때는

useParams hook을 이용한다

import { useParams } from 'react-router-dom';

const param = useParams();
const detailId = params.id;

//

🔗 Query String

쿼리는 질문이라는 뜻이다. 쿼리스트링은 URL에서 물음표 뒤 모든 문자열을 의미한다.

/products?sort=popular&color=red

쿼리스트링: key=value 형태의 문자열로 표현 (key=value 페어의 개수 제한은 없음) ? : 쿼리스트링의 시작 표시 (start of parameters) & : key=value 페어 구분 표시 (separator)

useSearchParams hook

const [searchParams, setSearchParams] = useSearchParams();

searchParams: URLSearchParams 객체 setSearchParams 함수: 인자로 객체 또는 문자열을 넣어서 호출하면 현재 URL의 쿼리 스트링을 변경하는 기능을 제공 (컴포넌트 안에서 쿼리 스트링을 변경하고자 할 때 사용)

searchParams에 정의된 메서드

1. 값을 읽어오는 메서드

searchParams.get(key) : 특정한 key의 value를 가져오는 메서드 원하는 쿼리 스트링의 key를 인자로 넣어서 메서드를 호출하면 해당 key에 부합하는 value가 리턴된다.
searchParams.getAll(key) : 특정한 key에 부합하는 value가 두 개 이상일 경우 get 메서드는 제일 먼저 나온 value만 리턴해준다. getAll 메서드는 해당 key에 해당하는 모든 value 값들을 배열의 형태로 리턴해준다.

2. 값을 변경하는 메서드 searchParams의 값을 변경하더라도 실제 URL의 쿼리 스트링은 변경되지 않는다. 실제 쿼리 스트링을 변경시키려면 setSearchParams 함수에 searchParams를 인자로 전달하면서 호출해야 한다.

searchParams.set(key, value) : 메서드를 호출하면서 인자로 전달한 key 값을 value로 설정하는 메서드 만약 동일한 key에 여러 value가 이미 존재하고 있었다면, set 메서드를 호출하면서 설정한 값 외에는 삭제된다.
searchParams.append(key, value) : 메서드를 호출하면서 인자로 전달한 key 값을 value로 추가하는 메서드 기존의 값들을 변경하거나 삭제하지 않고 추가하는 방식으로 동작한다.

또한 라우터에서 어떤방식으로 설정을 해주었느냐에 따라 파라미터는 잘 입력되었어도 라우팅 되지 않을 수있으니 꼭! 확인!!

// 단순 '/a/' url 뒤에 어느 값이 오든 특정 페이지 렌더링

// '/a/' url 뒤에 오는 값을 url 파라미터로 사용

```

참고 : [React] 쿼리 스트링(Query String)

ly-ra.log

최종 팀플 ID~어~?

Personal Focus Pomodoro

💡 서비스 컨셉

🎯 사용자의 핵심 니즈

🚩 구성

🟣 사용자의 핵심 가치 체험

1. 서비스 개요

2. 서비스 개발 배경 및 목적

배경

목적

3. 주요 타겟 사용자

4. 핵심 기능 (MVP)

5. 서비스 기대 효과

6. 페이지 및 기능 구조 (예시)

7. 서비스 흐름도 (간단 버전)

8. 기술 스택 (예정)

하이드레이션 불일치요?

🚨 문제 발생

원인 추론

해결 과정

테마의 기본값 주기 ❌

suppressHydrationWarning 추가 ❌

icon 대신 HTML로만 작성 ❌

mounted 값 설정해주기 ❌

결과

해결방안

느낀점

이건 브라우저가 잘못한건가?

API 요청시 지속적으로 발생하는 500번과, 400번

원인 파악하기

주소와 API 키 다시 확인

환경변수가 잘 적용되는지 확인

Postman에서도 확인해보기

API KEY 재발급 받기

원인은 브라우저!?

결과는 성공이었다.

TIL | 잊기 전에 다시한번! useQuery의 흐름

예시 코드

TIL | 난 FE니까 Next.js

1. 기존 리액트의 단점과 SPA, 코드 스플리팅

2. Hydration, TTV, TTI

3. JS의 런타임 환경 2가지

5. SSG, ISR, SSR, CSR의 차이점

TIL | SSR, CSR, SSG, ISR

SSR, CSR, SSG, ISR은 웹페이자 렌더링(HTML이 생성)되는 시점과 방식에 따라 구분된다.

SSR : Server-Side Rendering

언제 사용하면 좋을까?

예시 코드

CSR : Client-Side Rendering)

언제 사용하면 좋을까?

예시 코드

SSG : Static Site Generation

언제 사용하면 좋을까?

예시 코드

ISR : Incremental Static REgeneration(증분 정적 재생성)

언제 사용하면 좋을까?

예시 코드

정리

TIL | 제네릭 타입

useState로 이해해보기!

제네릭타입 특징

제네릭타입을 사용한 유틸리티타입들도있다.

낙관적업데이트, 내코드도 낙관적으로 봐줄순 없었니?

1. 문제 발생

찜은 되는데 해제는 못합니다...

문제 코드

2. 원인 추론

wishId가 undefined

3. 해결 방안

인자 구조 확인 및 정확한 값 전달

4. 해결 결과

느낀점

이건 어쩔 수 없는 거였어요..

1. 문제 발생

1) 유저 정보가 업데이트되지 않는 문제

2) Router가 작동하지 않는 문제

2. 원인 추론

1) 유저 정보 업데이트 문제

2) Router 오류 발생 원인

2) `Router`가 작동하지 않는 문제

2) `Router` 오류 발생 원인

2) `Router` 오류 해결

2) `Router` 문제 해결