분류 전체보기90 [Storybook] React(Vite) + tailwind + ui shadcn + storybook + typescript 연결하기 최근에 알게 된 ui shadcn을 사용해 보았는데, 너무 좋아서 계속해서 사용하고 있다.ui를 작은 모듈로 쪼개서 만들어놓은 ui라이브러리이다.components/ui에 자동으로 만들어져서 들어가진다.이미지를 보면 button, input처럼 작은 atomic 단위로 쪼개져있는 것을 볼 수가 있다. 이거 정말 편하다.페이지에 여러 디자인 컴포넌트를 만들어 놓고 협업하는 과정에서 다른 팀원에게 디자인 변경 방식을 계속해서 설명하는 것, 디자인을 확인하기 위해 매번 찾아것 등 비효율적이기에 누구나 보고싶을때 편하게 볼수 있는 ui컴포넌트 개발을 위한 도구인 storybook 라이브러리 를 사용해보려고 한다 설치 방법은 여기 사이트를 참고하였다! [참고자료]Part 4. Turborepo + Shadcn-.. 2024. 7. 10. [Next.js App라우터] Poketmon cards & create card 주제 선정 처음에 포폴을 어떤것을 만들지 엄청 고민이였다 ㅠㅠ그러다가 우연히 포켓몬 카드를 디자인 하는 영상을 보고 이걸로 만들어 보자라는 생각을 했고,거기에 다른 기능을 추가해서 작업하면 재미있을꺼 같았다. [디자인 참고] https://pokemon-cards-inky.vercel.app/ 그리하여!!포켓몬 카드 리스트를 보여주고, 카드타이틀, 내용, 이미지를 넣어서 다운로드 받아보는 사이트를작업하기로 주제는 정하였다 사용기술 Skill: next.js(App router) | TypeScriptStyling Tools : tailwind css | scss module | ui shadcn Library : axios | react-query | intersection-observer | .. 2024. 6. 27. [변수,함수] 네이밍 멘토링을 받을때 지적을 많이 받았다 ㅜㅜ 그래서 예전에 비해서는 좋아 졌다고 이야기를 해주셨지만.뭔가 찜찜함이 있어서 오늘 확실하게 하고, 이 글을 정리하게 되면 나만의 변수 컨벤션을 만들어 볼 생각이다! 회사마다 컨벤션이 있다는 이야기를 들어서 그때 들어가서 해도 늦지 않을꺼라 생각했지만.이번에 포트폴리오 준비 과정에서 변수명도 잘 짓고 싶고, 마지막 프로젝트에 다른 프로젝트에서 겪으며 배운 모든 것을 쏟아 보고 싶어서, 이렇게 정리를 해봐야 겠다는 결심을 한것도 있다 내가 작성한 글을 무조건 이렇게 해야한다는 건 아닙니다. 이렇게 많이들 사용한다라는 정보를 가지고 온 것이라 적절히 참고로 사용하면 좋을 꺼 같습니다. ◼ 변수명의 길이는 어느정도?변수명의 길이는 정해진 규칙이 없지만, 가독성과 이.. 2024. 6. 21. [React Query] useMutation ◼ useMutation mutation은 사이드 이펙트를 가진 함수를 의미합니다. DB에 새로운 값을 추가, 삭제, 수정하는 작업도 사이드 이펙트에 해당됩니다. 이는 이러한 작업이 애플리케이션의 상태나 UI에 직접적인 영향을 미치지 않는다는 의미입니다. 즉, DB의 값이 변한다고 해서 자동으로 렌더링이 일어나는 것은 아닙니다. 이런 사이드 이펙트를 관리하기 위해 `useMutation` 훅을 사용하며, 주로 CRUD(CUD) 작업에 사용됩니다. useQuery는 데이터를 가져오는 데 사용되며, 컴포넌트가 마운트 되었을 시 자동으로 실행되거 가져옵니다.반면. useMutation은 데이터 수정, 삭제 등 요청을 할때 사용되며, 특정 이벤트 실행할때 mutate() 콜백함수를 통해 트리거 하여 useMut.. 2024. 6. 19. [React Query] invalidateQueries ◼ InvalidataQueries useMutation을 이용해서 실제 DB에 값을 전달을 하였지만, 화면은 실시간으로 랜더링이 되지 않습니다.그래서 같이 사용해야 하는 함수가 InvalidataQueries함수 입니다.앞서 설명한 것 처럼 ReactQuery는 캐시(임시저장소)가 있으며, 그 관리를 스스로 합니다.useMutation를 사용해서 DB에 데이터를 업데이트를 하였지만, Reat Query는 그 사실을 알지 못합니다.그렇기 때문에 변경 되어서 다시 데이터를 가지고 올수 있도록 실행 시키는 함수입니다.이 함수를 사용하면, 업로드를 하였을때 Reat Query가 인지하여, refetch를 하도록 설정할 수 있습니다. 실행 단계 Mutation 실행: useMutation 훅을 사용하여 데이터를.. 2024. 6. 19. [React Query] IsError, IsPending, retry ◼ IsError, IsPending, retry const { data, // 값 isPending, // 로딩중 isError, // 에러남} = useQuery({ queryKey: ['k'], // ['key이름'] queryFn: getApi, // api 호출 retry:0 // 0번 호출});if (isPending) return '로딩 중입니다...';if (isError) return '에러가 발생했습니다.';retry:0 // 에러가 나면 기본 3번 더 시도를 한다. 0이면 더이상 호출하지 않는다는 의미 2024. 6. 19. [React Query] React Query ◼ React Query React Query는 클라이언트 측에서 서버 상태 관리를 간편하고 효율적으로 도와주는 라이브러리입니다. 캐싱, 동기화, 백그라운드 업데이트 등을 자동으로 처리해주기 때문에 클라이언트와 서버 간의 데이터 전달과 관리가 편해집니다. 서버 상태 데이터는 비동기적으로 받아와야 하며, 로딩 중에는 로딩 화면을 보여주고, 에러 발생 시 이를 처리하고 사용자에게 안내해야 합니다. 또한, 서버 상태 데이터는 가능한 최신 상태를 유지해야 하며, 이는 사이트의 성격에 따라 주기적으로 업데이트될 필요가 있습니다. 이러한 특성 때문에 서버 상태 데이터를 관리하는 것은 복잡합니다. 기존의 Redux 같은 라이브러리에서는 이러한 관리를 쉽게 할 수 없었지만, 리액트 쿼리를 사용하면 각각 따로 처리해야 .. 2024. 6. 18. [Next.js] You are attempting to export "metadata" from a component marked with "use client".... page 라우터를 app라우터로 변경하는 과정에서, creatContext를 사용하여 만든 Provider component를 사용하려면 csr방식으로 변경을 해야했습니다..그래서 "use client"를 작성하여 변경했더니.. metadata를 export 를 할수 없다고 에러가 났었습니다.ㅠㅠ [에러] [원인]AuthProvide의 파일 안에 hook(useState, useEffect등등)을 사용해야하기에.. csr방식으로 변경해야했다,많은 타사에서 "use client"라는 지시어를 포함하지 않고 있기 때문에, 서버 컴포넌트에서는 사용하기가 어럽다고 한다. 해결하려면 자체 클라이언트 구성 요소에서 클라이언트 전용 기능을 사용하는 타사 구성 요소를 래핑하면 됩니다.이렇게 공식문서에 설명이.. 2024. 5. 25. [Next.js] Error: Unexpected token 'I', "Internal S"... is not valid JSON 처음 보는 에러인데 수업 보고, 따라하고 하고있는데 에러가 났다. [문제]// app/movie/[id]/page.tsximport { Suspense } from 'react';import MovieInfo from '../../../components/movie_info';import MovieVideo from '../../../components/movie_video';export default async function MovieDetail({ params: { id } }: { params: { id: string } }) { return ( movie info );}// component/movie/MovieInfo.tsximp.. 2024. 5. 25. [Next.js][redirect 에러] 리디렉션한 횟수가 너무 많습니다. [문제]로그인을 유무에 따라 로그인, 회원가입 페이지의 제한을 두기위해 redirect 작업을 하고 있는데, 리디렉션한 횟수가 너무 많다고 에러가 떴다 ㅠㅠ [에러가 난 이유]찾아보니 에러나 난 이유는 무한루프에 빠져서 생긴 에러라고 한다 ㅠㅠconsole.log로 보니.. 많이 나온다.. [에러의 원인]http://localhost:3000/signin 쿠기가 없어서 로그인 페이지로 이동했는데, 로그인 상태를 확인하는 과정에서 이미 /signin에 있지만 또 /signin로 보내고 를 반복하다 보니.. 에러가 났다. export async function getServerSideProps(context: GetServerSidePropsContext) { const { req } = con.. 2024. 5. 18. 이전 1 2 3 4 ··· 9 다음
