2024/프로젝트11 [food-app] React Query를 사용해 Infinite scroll 구현하기 React Query의 Infinite scroll: 무한 스크롤을 지원하고, 화면 스크롤을 통해 추가 데이터를 자동으로 로드할 수 있는 강력한 기능 제공• data: Infinite Query 결과 데이터• data.pages: 가져온 페이지들의 배열• data.pageParams: 페이지를 가져오기 위한 페이지 매개 변수. 배열의 형태.• fetchNextPage, fetchPreviousPage: 다음 페이지 및 이전 페이지의 데이터를 가져오는 함수• getNextPageParam, getPreviousPageParam: 다음 및 이전 페이지에 대한 매개 변수를 생성하는 함수• hasNextPage, hasPreviousPage: 다음 페이지 및 이전 페이지가 있는지 여부를 나타내는 불리언 값• i.. 2024. 10. 20. [food-app] next.js에서 getStaticProps 사용 하다가 마주친 에러 에러 발생 상황data.json파일을 직접 import하는 방법 대신 서버에 요청해서 받아오려고 코드를 수정했다. next.js에서 getStaticProps를 사용해서 데이터를 받아오기 위해 아래와 같이 코드를 작성했다.export async function getStaticProps() { const stores = await fetch( ${process.env.NEXT_PUBLIC_API_URL}/api/store ).then((res) => res); return { props: { stores }, revalidate: 60 * 60, };}에러 원인데이터를 받아서 json으로 바꿔주는 작업을 하지 않아서 데이터를 인식할 수 없었던 것이었다. 그래서 json으로 바꿔주는.. 2024. 10. 7. [My Little Rosemary] vanilla-extract 기본 세팅하기 설치하기vanilla-extract 설치하기npm install @vanilla-extract/css 통합 플러그인 설치하기npm install --save-dev @vanilla-extract/next-plugin 플러그인 설정next.config.jsconst { createVanillaExtractPlugin} = require('@vanilla-extract/next-plugin');const withVanillaExtract = createVanillaExtractPlugin();/** @type {import('next').NextConfig} */const nextConfig = {};module.exports = withVanillaExtract(nextConfig); 참고한 페이지 ht.. 2024. 7. 28. [My Little Rosemary] Next.js에서 어떤 도구로 스타일링 해야 될까? 프로젝트를 시작해서 기본적인 레이아웃을 잡으면서 고민이 시작되었다. 원래 react에서 사용했던 건 Styled Components였는데 이번 프로젝트에서 사용하려고 하니 생각해봐야 하는 부분이 있었다. 생각보다 번들 크기가 커진다는 것, 그리고 SSR방식이기 때문에 반짝임 현상이 발생하는 것 등등이었다. 그래서 이 부분에 대해 정리가 필요하겠다는 생각이 들었고 사용해봤거나 사용할 수 있는 것들을 모아서 비교해보기로 했다. 1. CSS Moduleshttps://nextjs.org/docs/app/building-your-application/styling/css-modulesCSS Modules는 CSS를 모듈화하여 작성할 수 있게 해주는 기술이다. CSS 파일에서 클래스나 ID를 정의할 때, 전역으로.. 2024. 7. 17. [My Little Rosemary] 프로젝트의 시작은 역시 기획이지 INTRO 예전에 동생과 순천을 놀러갔다가 충동적으로 로즈마리를 샀다.전에 2번정도 죽였던 전적이 있어서 고민했지만 그 여행의 분위기와 감성이 날 충동구매 하도록 만들었다.구매를 2022년에 했는데 놀랍게도 아직 잘 살아 있다. 하지만 내 욕심만큼 거대한 화분에 분갈이 해준 거 치고는 너무 못자란다는 생각이 들었고 최대한 잘 관리해서 성장하게 만들고 싶었다.그래서 관리를 잘 할 수 있는 대쉬보드를 만들기로 했다. 일단 최소한으로 기능정의, 디자인, 기능구현 후 업데이트를 지속적으로 할 예정이다.왜냐면 로즈마리는 생각보다 여름 날씨를 좋아하지 않아서.. 관리가 필요하다...(근데 여름 날씨 좋아하는 식물.. 진짜 드문거 같긴 한데...) 기능정의GPS 기반 날씨 데이터를 가져와서 식물에게 적합한 온도와 습.. 2024. 6. 11. [Wiki Page] typescript에서 만난 오류 디버깅 이 오류는 id 값을 잘못 설정하면서 시작되었다. 맨 처음에 id값이 있어야 하는데 그렇다면 현재 시간으로 설정해야지 하는 안일한 마음이었다. id에 요구되는건 중복이 되지 않는 거였는데 그러면서 동시에 리스트가 시간순으로 정렬되어야 하니 두 가지 기능을 하나로 개발해보겠다는 생각이었다. 처음에 id값을 자바스크립트 내장 함수인 newData로 받았다. 이렇게 받은 id값의 타입을 number로 설정하고 이 값으로 주소에 넣어서 라우터 값을 설정했다. 여기에서 주소로 보내면서는 문제가 생기지 않았다. 근데 이제 다시 이 값을 가져올 때 어느새 타입이 string으로 변해 있었다. 이걸 찾기 위해 왜 자꾸 오류가 나는지 엄청나게 헤맸다. 내가 안바꿨는데 왜 자꾸 타입이 일치하지 않는다는 거지? 나는 분명 .. 2024. 4. 7. [WriteMate] 디스코드 봇 명령어 설정하기 INTRO 이제 본격적으로 명령어를 설정해 보려고 하는데 그 전에 해야 할 일이 있다. 바로 어떤 명령어가 필요한지 정리하는 것이다. 기능 요구사항을 정리하고 추상화 해서 명세를 간략하게 적어보려고 한다. 따로 양식을 가져온 건 아니고 작은 프로젝트 단위여서 간단하게 생각을 정리하는 용도로 작성하려고 한다. 필요한 기능 시나리오 블로그 스터디 4명이 디스코드 서버에서 블로그 글 업로드 채널을 개설하고 봇 사용, 한달동안 진행하는 스터디이고 매주 글 1개 이상 작성하는데 월요일부터 일요일 자정까지 적어도 1개의 글을 작성해야 하고 작성하지 못하면 벌금, 벌금은 연속으로 작성하지 못하면 2배씩 증가, 월요일 아침에 저번주 결과에 대해 알림, 유저가 글 등록하면 실시간으로 알림이 오고 새 글 링크가 같이 올라.. 2024. 3. 23. [Mudig] 불필요한 리렌더링 방지로 성능 최적화 하는 방법 IntroReact 애플리케이션의 성능을 최적화하는 데 중요한 포인트로 리렌더링이 과도하게 발생하면, 앱의 반응성이 저하될 수 있다는 것을 고려하는 것이다. 실제로 리렌더링에 대한 부분에 리팩토링을 진행하면서 Light House 검사를 통해 성능이 개선되는 것을 확인했다. 함수 컴포넌트와 클래스 컴포넌트 모두 불필요한 리렌더링을 방지할 수 있는 방법이 있으며, 각각의 접근 방식이 조금 다르다. 프로젝트에서는 함수형 컴포넌트로 구현했지만 공부하는 의미로 함수 컴포넌트와 클래스 컴포넌트 각각을 정리해 보았다. 함수 컴포넌트의 불필요한 리렌더링 방지React.memo: 컴포넌트를 감싸주면, props의 변화가 없다면 리렌더링을 방지하여 성능을 최적화할 수 있다.const MyComponent = React... 2024. 3. 19. 이전 1 2 다음
