개발 🐾

이전 상황 : Tanstack Query 적용 중 undefined 방지useEffect로 처리했던 이전 로직을 tanstack으로 관리하기 위해 커스텀 훅으로 뺐다.아래 로직은 formatted 로직을 제외한, supabase에서 데이터를 받아오는 부분만 커스텀으로 뺐을 때의 로직이다.'use client';import { Calendar, dateFnsLocalizer } from 'react-big-calendar';import { format, parse, startOfWeek, getDay } from 'date-fns';import { enUS } from 'date-fns/locale/en-US';import { ko } from 'date-fns/locale/ko';import { useS..

25.01.01 Today I Learned💡1. 인덱스 시그니처 VS Record2. 정규표현식인덱스 시그니처 VS Record 인덱스 시그니처아이템의 동적 숫자들을 key로 사용하기 위해 동적 타입을 따로 지정Item의 value에 접근할 때 key가 인식이 되지 않아 곤란한 상황export type Item = { name: string; plaintext: string; image: { full: string }; gold: { total: number }; stats: { FlatMovementSpeedMod: number };};// 동적 key (1001, 1002...)export type ItemResponse = { data: { [key: string]: Item };};..

25.03.13 Today I Learned💡1. ‘일치하는 오버로드가 없다’는 에러 (serverApi.ts)2. 객체 데이터를 배열로 변환3. Next의 Image 태그의 src 속성에 동적인 url4. 챔피언 목록 페이지 타입에러 '일치하는 오버로드가 없다' 는 에러(serverApi.ts) fetch()의 첫번째 인자는 문자열(url) 👉🏻 await로 promise 벗기기// roitDataURL.ts// 챔피언 목록 APIexport const CHAMPION_LIST_URL = async (): Promise => { const version = await getLatestVersion(); return `${RIOT_BASE_URL}/cdn/${version}/data/ko_KR/..

Next 14버전에서는fetch 옵션 기본값을 SSG 렌더링처럼 정적 데이터를 빌드하게 두었다.하지만 실제로 아무런 옵션을 적지 않았을 때, 예상치 않은 문제가 발생할 수 있다. 아래 로직은 fetch 옵션을 주지 않고 SSG 렌더링을 구현하였다.// SSG > page.tsximport { Post } from "@/types/type";import React from "react";const SSGPage = async () => { const response = await fetch("http://localhost:4000/posts", { cache: "force-cache", }); const data: Post[] = await response.json(); console.log(..

일반적인 비동기 함수 처리에서 API 요청을 하면 await가 있던 없던 모두 요청으로 받아들여진다.await가 없는 비동기 함수 요청 로직을 콘솔에 찍으면 Promise{} 으로 나오며객체 내부에는 'fulfilled'로 데이터 페칭이 진행된 것을 확인할 수 있다.혹시 몰라 데이터 링크 부분에 오타를 내어 일부러 오류를 내었더니 콘솔에 오류가 찍히며 잘 실행되었다. let query = supabase.from(HOTPLACE).select('*'); if (area) query.eq('area', area); console.log('query', query); const getHotplaces = async () => { // let query = await supabase.from(HOTP..

2025.02.16 (일) Works 1. 검색어 필터링   1-1. 엔터 검색   1-2. join 해서 데이터 가져오기   1-3. 검색 value 필터링2. 장소 필터링 (전체 / 국내 / 국외)   2-1. onClick 이벤트 주기   2-2. 필터링 함수 만들기   검색어 필터링 엔터 검색검색 함수 내부에 엔터로 검색하는 기능을 추가했다.검색 후에는 검색창이 빈 값으로 설정된다.// SearchInput.jsxconst handleSearch = e => { if (e.key === "Enter") return; setSearchInput("");};  join 해서 데이터 가져오기 & 검색 value 필터링검색이 되는 값들을글 제목, 닉네임, MBTI, 글 내용으로 정했다.따라서 네 개..

2025.02.15 (토) Works 1. HomeContext 전역관리2. Modal 관리    2-1. 선택 카드 state 관리    2-2. 닫기 버튼   HomeContext 전역관리 이전에는 HomeContext에서 posts의 값만 전역으로 관리, HomePostCard에서는 post의 값을 props로 받고 users와 comments를 state로 관리했다. 오늘은 게시글을 클릭하여 모달창을 띄우고자 했다.그러기 위해서 이제는 Home, HomePostCard, PostingModal를 함께 연결하여 관리해야 한다. 따라서 Context에서 posts, users, comments를 함께 묶어두었다. 아래는 supabase에서 Promise.all을 통해 posts, users, comm..

2025.02.14 (금) Works 1. DB 데이터 동기화 & Home 게시글 불러오기 (props 전달)2. 게시글 추가 버튼3. Layout 수정 및 페이지 연결(Link)  DB 데이터 동기화    📍작업 내용 1HomeContext 작성하여 App 최상위에 적용supabase에서 posts 테이블의 값을 가져옴posts 배열을 state로 관리함value로 posts 배열 내려줌HomePostCard 컴포넌트 분리users, comments 테이블의 값을 가져옴users, comments 배열을 state로 관리함card 상단 user profile 값을 출력함 (setUserProfile 함수)card 하단 comments 값을 출력함 (setComment 함수)posts, users, c..

2025.02.13 (목) Works 1. supabase 특강2. git conflict & issue 컨퍼런스3. Prettier 파일 관리4. Home 페이지 UI 구현5. supabase에서 데이터 가져오기  Home 페이지 UI 구현 간단히 만들어 본 Home UIindex.css에 body 스타일을 유지 중이라 헤더가 짧게 나온다.지금은 div로 주었지만 추후에 프로필 사진과 post 사진으로 대체할 예정이다.  Supabase DOM을 통해 화면 컴포넌트에 접근하고,React를 통해 상태 관리를 하고,Redux, Context를 통해 props를 전역적으로 관리하고,RRD를 통해 페이지를 이동하고,RTK를 통해 store를 생성하여 간편하게 데이터를 관리하였다. 이번 프로젝트에서는 이전 내용..

이전에 JS 문법으로 구조분해할당을 배웠다.[🍦] JS 문법 - Destructuring (구조 분해 할당) (클릭) 당시에는 단순한 예제로만 익혔는데 다양한 곳에서 많이 사용하고 있어서 점점 헷갈리던 와중에Context -> RTK 를 진행하며 실제 사용 예시와 함께 추가로 정리해보고자 한다. 기본적으로 구조분해할당은 (객체나 배열에서) 많은 값들 중 내가 필요한 값만 뽑아야 할 때 사용한다.  📍객체 사용객체 내의 key 값에 집중하기!다양한 key : value pair가 있는 객체에서 필요한 값의 key와 동일하게 변수를 지정한다.그 변수를 { } 내에 입력하여 "구조분해할당 입니다~" 라고 알려준다고 생각하면 쉽다 ! 예제1: "멋진셔츠"는 '상품명'이라는 변수에, 10000은 '가격'이라는..