본캠프

첫 본캠프의 팀 프로젝트는 멤버 소개 페이지 만들기였다. 첫날에는 팀원 소개 및 팀 과제관련 노션을 작성하고 와이어프레임까지 완료하는 것이 목표였다.우리조의 경우, 모두 MBTI 'I'들이 모였고 지금이 크리스마스 시즌이기 때문에 "크리스마스 I들"이라는 팀명을 정하게

멤버 소개 페이지 만들기 1. WBS 및 개발 플로우 오늘은 멤버 소개 페이지를 만드는 프로젝트를 본격적으로 시작했다. 어제는 디자인적인 부분에 치우져진 감이 있어서 오전 회의부터 본격적으로 개발관련하여 업무를 나누었고 나의 경우는 메인 페이지 및 클릭 시 메시지 출력 기능을 구현하는 것을 맡게 되었다. 또한 어제 아쉬웠던 점 중에 하나인 개발 플...

1. 문자열 내 p와 y의 개수 1단계 : 문자 자르기 2단계 : 자른 문자 배열에 넣기 - 제대로 넣었나 확인하기 3단계 : 제출한 답 2. 음양 더하기

짝수와 홀수 평균 구하기

1. TMDB API 연동 및 데이터 가져오기 1-1. 프로젝트 파일 구조 설정 튜터님의 조언에 따라 src파일안에 자바스크립트 파일을 넣고 가져올 js 파일을 ``와 같이 script 태그에 type이 module 임을 명시하였다. > Module이란? 코드를 해

제출 링크 : 영화 검색 사이트 1. 북마크 기능 구현 KPT 회고 Keep - 현재 만족하고 있는 부분 Problem - 불편하게 느끼는 부분 Try - Problem에 대한 해결책, 당장 실행 가능한 것

단축평가는 논리 연산자를 사용하여 조건문을 처리할 때, 전체 표현식을 평가하지 않고 최소한의 평가로 결과를 도출하는 방식을 말한다. 앞의 값이 truthy, falsy(falsy한 값 : false, 0, "", null, undefined, NaN)한지에 따라 뒤의

전반적인 레이아웃은 시멘틱 태그를 활용하여 hearder태그 와 main태그로 나누었고 section 태그로 input-container와 메달 순위를 표시하는 table-box 그리고 아무 데이터도 없을 경우의 no-data로 세부분을 나누어서 구성을 하였다.오류 :

1. 정렬 옵션 추가 트러블 슈팅 - 라디오버튼 ||| |:-:|:-:| |금은동순 정렬: defaultChecked으로 설정하여 계속 선택되어져 있다.|총메달순 정렬: 클릭하면 정렬이 총메달순으로 제대로 변경이 되지만 라디오버튼이 계속 금은동순 정렬에 선택이 되어져있다. | 일단 스타일이 변경이 안되기 때문에 `u

프로젝트 링크(준비중): "올림픽 메달 트래커"로 이동하기 프로젝트 과정 및 트러블슈팅 1. 개인 프로젝트 : Olympic Medal Tracker - (1)레이아웃, CRD(Update빼고)기능, 입력 처리의 적정성 검증 "usestate' is not def

1. 문제 fork한 곳에 push를 시도하였으나 The requested URL returned error: 403이라는 오류가 발생하여 push를 하지 못했다. 2. 시도 및 해결 2-1 브랜치 생성(오류와 전혀 상관없음) 권한문제인 느낌이었지만 전에 협업을 하다가 실수로 팀원들의 자료를 날릴 뻔한 경험이 있어서 혹시 몰라 test용으로 브랜치를 생...

1. 프로젝트 셋업 및 기본 컴포넌트 구성 1-1. 프로젝트 구조 1-2. 페이지 구성 및 컴포넌트 구성 |||| |:-:|:-:|:-:|

1. UI 변경 ||| |:-:|:-:| |Dex.jsx|Home.jsx 및 디테일 페이지| 2. react-toastify 적용 Installation 둘 중에 하나를 선택하여 설치하면 된다. react-toastify 적용하기 toastStyle={}로 스타일도 커스텀할 수 있다. 적용한 모습 |!

1. vercel 배포 1-1. 배포방법 https://vercel.com/ 가입 및 깃허브 연동하여 레포지토리 선택 ||| |:-:|:-:| |좌측 상단에 계정정보->Add GitHub Account를 클릭|원하는 레포지토리를 선택하여 import| 배포할 pro

프로젝트 링크(성공❤️): "포켓몬 덱스"로 이동하기 프로젝트 과정 및 트러블슈팅 🚀 TIL 및 트러블 슈팅 1. prop-drilling으로-구현하기 : 트러블슈팅(Array().fill().map() 체이닝) 2. [react-toastify 적용, sty

첫 개인프로젝트였던 영화 검색 사이트 때 튜터님의 피드백으로 Commit message 규칙을 지키는 것이 좋다고 하셨고 나름대로 규칙을 따르려고 했으나 찾아보는 곳마다 다양한 규칙이 있었다. 어느 곳에서는 "style: css 변경" 이었다가 다른 곳을 보니 "s

한 줄 정리 : 취미 공유 뉴스 피드 사이트 만들기포함할 내용:오늘의 취미활동을 자랑하거나 취미에 관한 정보 공유카테고리 별 포스팅 분류, 좋아요 별 포스팅 정렬사진 업로드와 글 작성이 가능한 피드로그인 여부에 따른 달라지는 페이지Home 모든 게시물 조회내가 좋아요한

로그아웃이 제대로 안됨에러를 확인하는 코드 추가하여 원인을 알게 됨에러 : AuthSessionMissingError: Auth session missing 3\. 로컬스토리지에 있던 것을 삭제하니 문제가 해결이됨

프로필 이미지를 표시하는 코드에서 user.my_profile_image_url을 읽으려 할 때 다음과 같은 오류가 발생했다.오류 메시지를 보면 user가 null인 상태에서 my_profile_image_url 속성을 읽으려고 해서 발생한 문제다.user 상태를 nu

개인프로젝트를 진행하던 도중에 로그인을 하지 않은 유저가 MBTI 테스트 버튼을 클릭하면, ProtectedRoutes에 의해 로그인 페이지로 이동하게 된다. 그런데 이때 알림창이 두 번 뜨는 오류가 발생했다.위의 코드가 문제가 발생한 코드이다. 나는 명확한 확인을 위

글리치에서 json-server를 배포하는 과정에서 오류가 발생했다. 배포 후 실제 API를 호출했을 때, 예상한 대로의 응답을 받지 못하고 있었다. 그러나 개발자 도구의 네트워크 탭에서는 HTTP 상태 코드가 200으로 정상적으로 응답을 받았기 때문에, 서버에서 데이

context API에서 zustand로 리팩토링한 후로 프로필에서 새로고침만 하면 데이터를 불러오지 못하는 문제가 발생했다. 기존에는 Context API를 사용했을 때 이런 문제가 없었지만, Zustand로 상태 관리를 변경한 뒤 새로고침을 하면 프로필 정보가 사라

INF∞ : MBTI 성격 유형 테스트 💬 프로젝트 소개 작업기간: 2025. 02. 20 ~ 2025. 02. 25 ⚙️ 기술 스택: 구현한 기능 ⚙ 프로젝트 화면 및 구조 1. 화면 1-1. Home 1-2. Dex 1-3. Detail 2. 구조

프론트엔드: React (Vite), Zustand (상태 관리), TanStack Query (데이터 패칭)백엔드: Supabase (인증, 데이터베이스, 스토리지)외부 API: KAKAOMAP API한 줄 소개: 사용자가 직접 물품을 등록하고, 지도에서 거래 물품을

문제발생 팀프로젝트 중에 handleProfileUpdate 함수를 React Query의 useMutation 훅을 활용하여 리팩토링하는 과정에서 닉네임 중복 검사 단계에서 오류가 발생하였다. 닉네임이 이미 존재하는 경우 중복 검사에서 걸러져야 하나, 계속해서 프로필

Next.js는 React를 기반으로 한 웹 애플리케이션 프레임워크이다. 공식문서에서는 Next.js를 "웹을 위한 React 프레임워크"라고 소개한다. Next.js는 고성능, SEO 최적화, 개발자 생산성 향상 등 다양한 기능을 기본 제공하여 빠르고 효율적인 웹사이

제네릭(Generic)은 타입을 마치 함수의 매개변수처럼 사용하는 기능이다. 이를 통해 코드의 재사용성을 높이고, 타입의 안정성을 유지할 수 있다.일반적으로 타입을 지정하면 특정 타입의 값만 받을 수 있지만, 제네릭을 사용하면 다양한 타입을 처리할 수 있는 유연한 코드

MPA부터 SSR까지 정리 1. 전통적인 프론트엔드 배포 방식: MPA MPA(Multi Page Application)는 전통적인 서버 사이드 렌더링 방식이다. 각 URL마다 별도의 HTML 파일이 존재(예를 들어, /about은 about.html이고, /profile은 profile.html이다) 페이지 이동 시 및 렌더...

Suspense, Loading UI, Streaming SSR Suspense는 비동기 데이터 로딩 중에 대체 UI를 제공하는 React의 기능이다. Next.js에서는 Suspense를 사용해 컴포넌트가 준비될 때까지 로딩 스피너나 플레이스홀더를 표시할 수 있다. 예를 들어, 아래 코드는 Suspense를 사용하여 데이터가 로딩되는 동안 L...

Next.js 캐싱 오늘은 Next.js에서 캐싱이 동작하는 원리에 대해 학습한 내용을 정리한다. Next.js는 다양한 영역에서 캐싱을 활용하여 성능을 최적화한다. 여기서는 Next.js의 핵심 캐싱 전략과 주요 메서드를 예시와 함께 살펴본다. 1. Next.js의 핵심 캐싱 전략 Next.js는 전체 페이지 캐싱(Full Route Ca...

챔피언 로테이션 정보와 챔피언 목록을 가져와서 매칭하는 기능을 구현하던 중 처음에는 순차적으로 비동기 요청을 처리했다. 즉, fetch("/api/rotation")으로 로테이션 정보를 먼저 가져오고, 그 다음에 fetchChampionList()로 챔피언 목록을 가져

처음에는 개발 모드에서 Warning: Extra attributes from the server: cz-shortcut-listen 경고가 발생했다. 이 문제는 suppressHydrationWarning={true}를 사용하여 경고를 무시하려고 했다. 하지만 이 방

빌드 시 두 가지 에러가 발생했다.위에 보이는 에러는 Supabase 클라이언트를 초기화하는 데 필요한 프로젝트 URL과 API 키가 누락되었음을 나타낸다.이 에러는 Supabase 클라이언트를 SSR 중에 잘못 초기화하여 발생한 문제이다. 실제로 문제의 핵심은 두 번