코딩연습장

24.10.15 tailwind에서 제공하지 않는 style속성 사용하기

팀프로젝트에서 전체 페이지에 적용되는 사이드바에 이런식으로 텍스트를 새로로 작성하고 싶었다.모르니까 바로 검색을 해보았다.모두들 writing-mode: vertical-lr 을 사용하면 텍스트를 글자의 왼쪽에서 오른쪽 순서로 방향은 위에서 아래로 세로로 표현해준다는 것이다. 그런데 우리의 엄청난 tailwind는 해당 속성을 지원해주지 않고있다.그래서 텍스트 태그의 width를 폰트크기보다 아주 조금 크게하고, width를 넘어가는 텍스트를 아래로 보낼까 했지만이게 맞나? 싶었다.그래서 tailwind에서 제공해주지 않는 속성을 사용할 방법을 찾아보았다.뭐 어쩌구 저쩌구 뭐라뭐라 썼는데 결국 tailwind.config.js파일의 theme안에 추가를 하면 되는 것이다. theme: { exte..

24.10.14 supabase.insert, promise.all과 transaction

!!eduArray.length && eduArray.forEach(async (edu) => { const eduFormData = { post_id: postId, user_uuid: userId, ...edu }; const { data: eduPostDtat, error: eduPostError } = await browserClient .from('post_detail_education') .insert([eduFormData]); }); !!expArray.length && expArray.forEach(async (exp) => { ..

문제상황오늘 팀 프로젝트의 mockview와 state들을 만들면서 이러한 오류가 있었다.학력의 오른쪽 + 버튼을 누르면 아래 3가지 입력창이 계속 생기는 기능을 만들고 있었다.{eduArray.map((edu, idx) => { return ( handleEduArray(idx, 'graduated_at', e)} /> );})}이렇게 key에 crypto.randomUUID()를 넣어주어 유니크한 키 값을 가지도록 하였다.인풋값을 입력할때마다 focus가 풀렸다. 이유가 뭘까??발생 이유리액트 내부 리스트 매핑에서의 key는 결국 리액트가 해당 컴포넌트를 식별하기 위함이다.컴포넌트 또한 배열로 관리하여 key값으로 비교하게 되는데, 내가 작성..

ㅇ

리그오브레전드 정보 페이지 바로가기LIP는 무료로 로그인 없이 사용할 수 있는 리그오브레전드 정보 제공 서비스입니다.Next와 React, TypeScript를 사용하여 개발하였으며원하는 챔피언이나 아이템의 정보를 확인하고이상형월드컵을 통해 인기 챔피언을 알아볼 수 있습니다!목차리그오브레전드 정보 페이지 바로가기LIP 서비스는 이런걸 할 수 있어요!개인과제에서 이런걸 했어요LIP에선 이런 기술을 사용했어요LIP의 서비스 요청 흐름도피드백LIP 서비스는 이런걸 할 수 있어요!개인과제에서 이런걸 했어요NextJS를 사용하며 발생한 여러 문제들컴포넌트 분리 후 스타일이 적용되지 않는 문제 - 전상국useSuspenseQuery와 hydration 문제LIP에선 이런 기술을 사용했어요LIP의 서비스 요청 흐름도..

{ "todoList": [ { "id": "adsf", "title": "titleTest", "desc": "DescTest", "isCompleted": false, "createdAt": 123 }, { "id": "adsd", "title": "titleTest", "desc": "DescTest", "isCompleted": false, "createdAt": 123 } ]}json-server를 이용하여 간단한 투두리스트를 만들었다.내가 ..

1. 문제발생 tailwind와 인라인스타일로 지정한 스타일이 적용되지 않는 문제가 발생함  2. 원인추론2-1const ChampionSpell = ({ spell, idx }: Props) => { const desc = cleanDescription(spell.description); return ( {`${spell.name} - ${SPELL_ORDER[idx]}`} {desc} );};export default ChampionSpell; 분리된 컴포넌트에서 동적으로 데이터가 불러와지기 전에 스타일이 입혀져 생기는 문제라고 생각하였다...

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