[노트장] 적으며 정리해 보는 이론60 [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. [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. [유저기능] 쿠키(Cookie) ◼쿠키서버 응답(리스폰스)나, 클라이언트 코드에 따라 브라우저에 저장되는 작은 단위의 문자열 파일들을 말합니다.인증서로 사용하며 쿠키로 저장하며, 서버에서 정한 만료일이나 보알 설정 등 다양한 내용들이 쿠키에 들어있습니다. [출처] 코드잇 유저기능 쿠키 인증의 원리사용자 로그인 요청: 사용자가 브라우저를 통해 서버에 로그인 요청을 보냅니다. 이때 사용자는 아이디와 비밀번호를 입력합니다.서버 인증: 서버는 받은 자격 증명(아이디와 비밀번호)을 확인하고 사용자가 유효한 사용자임을 인증합니다.쿠키 생성: 서버는 사용자 인증이 성공하면 세션 ID와 같은 인증 토큰을 포함한 쿠키를 생성합니다.쿠키 전송: 서버는 Set-Cookie 헤더를 사용하여 이 쿠키를 클라이언트(브라우저)에 전송합니다.쿠키 저장: 브라우저는.. 2024. 5. 17. [Next.js] Environment Variables next.js 공식문서를 읽고 정리해 놓은 문서입니다.[참고] https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#loading-environment-variables ◼ 횐경변수 서버 환경 변수 사용 Next.js에서 서버 측에서 환경 변수를 사용할 때는 process.env를 사용하면 됩니다. NEXT_PUBLIC_ 접두사를 사용할 필요가 없습니다.// pages/api/hello.jsexport default function handler(req, res) { res.status(200).json({ message: process.env.SOME_SERVER_ENV_VAR });}서버 측.. 2024. 5. 15. 이전 1 2 3 4 ··· 6 다음
