프로젝트8 [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] 프로젝트의 시작은 역시 기획이지 INTRO 예전에 동생과 순천을 놀러갔다가 충동적으로 로즈마리를 샀다.전에 2번정도 죽였던 전적이 있어서 고민했지만 그 여행의 분위기와 감성이 날 충동구매 하도록 만들었다.구매를 2022년에 했는데 놀랍게도 아직 잘 살아 있다. 하지만 내 욕심만큼 거대한 화분에 분갈이 해준 거 치고는 너무 못자란다는 생각이 들었고 최대한 잘 관리해서 성장하게 만들고 싶었다.그래서 관리를 잘 할 수 있는 대쉬보드를 만들기로 했다. 일단 최소한으로 기능정의, 디자인, 기능구현 후 업데이트를 지속적으로 할 예정이다.왜냐면 로즈마리는 생각보다 여름 날씨를 좋아하지 않아서.. 관리가 필요하다...(근데 여름 날씨 좋아하는 식물.. 진짜 드문거 같긴 한데...) 기능정의GPS 기반 날씨 데이터를 가져와서 식물에게 적합한 온도와 습.. 2024. 6. 11. [Mudig] 불필요한 리렌더링 방지로 성능 최적화 하는 방법 IntroReact 애플리케이션의 성능을 최적화하는 데 중요한 포인트로 리렌더링이 과도하게 발생하면, 앱의 반응성이 저하될 수 있다는 것을 고려하는 것이다. 실제로 리렌더링에 대한 부분에 리팩토링을 진행하면서 Light House 검사를 통해 성능이 개선되는 것을 확인했다. 함수 컴포넌트와 클래스 컴포넌트 모두 불필요한 리렌더링을 방지할 수 있는 방법이 있으며, 각각의 접근 방식이 조금 다르다. 프로젝트에서는 함수형 컴포넌트로 구현했지만 공부하는 의미로 함수 컴포넌트와 클래스 컴포넌트 각각을 정리해 보았다. 함수 컴포넌트의 불필요한 리렌더링 방지React.memo: 컴포넌트를 감싸주면, props의 변화가 없다면 리렌더링을 방지하여 성능을 최적화할 수 있다.const MyComponent = React... 2024. 3. 19. [Mudig] 리팩토링 중 마주친 Recoil Hook 무엇이 좋을까? 이 코드는 유저의 정보를 불러오고 갱신하기 위한 코드이다. const [userInfo, setUserInfo] = useRecoilState(userInfoAtom); 하지만 내가 보고있는 코드는 회원가입 유저의 데이터를 저장하는 페이지였다. 그래서 고민이 되었던 것은 유저의 정보를 저장한 것이 없는 신규 유저라면 불러올 정보가 없이 그냥 저장만 하면 되지 않을까 였다. 그리고 그렇게 떠올린 생각을 어떻게 코드에 적용시킬지 고민해보았다. useRecoilState, useRecoilValue, 그리고 useSetRecoilState는 Recoil 상태 관리 라이브러리에서 React 컴포넌트 내에서 상태를 사용하기 위한 훅(hooks)이고 이 페이지에서는 그 3가지를 다 사용하고 있었다. 그래서 이들 .. 2024. 3. 1. [개발] 초기 세팅과 컨벤션 설정 그리고 깃허브 Intro 프론트 개발자분들은 전에 멋쟁이사자처럼 프론트엔드 과정(이하 멋사)에서 한번씩 크고 작게 프로젝트를 함께 했다.함께 했던 경험과 각자 다른 프로젝트의 경험을 가지고 다시 만났을 때 우리는 초기 세팅과 컨벤션에 조금 더 디테일을 추가하는 것이 좋겠다는 결론을 내렸다. 처음에는 깃허브 사용해서 협업하는 것 자체가 의미있었다면 이제는 효율적이고 효과적인 방법에 대한 고민이 조금씩 생기는 것 같다.운 좋게도 우리가 경험한 멋사는 다양한 완성도 있는 프로젝트를 서로 공유하는 문화를 가진, 더 나은 방법에 대한 대화가 열려있는 커뮤니티였다. 초기 세팅에 대해 우리는 각자의 프로젝트에서 사용한 세팅값을 비교했고 좋았던 점과 개선할 점에 대해 편하게 대화할 수 있었다.컨벤션은 개발 기간이 길지 않기 때문에 .. 2023. 11. 23. [기획] 생성형 AI 프로젝트 INTRO프로젝트의 시작은 "재밌을거 같지 않아요?" 였다.GTP에게 질문할 생각만 했는데 그걸 사용해서 무언갈 만들어 낼 수 있다니 구미가 당기는 제안이었다. 하지만 아무것도 없었다.PM도 없었다..(뭐 사실 프로젝트라면 당연하긴 하지만)그러니 기획은 맨땅에 헤딩 하듯이 시작..! 그래도 주제가 흥미로워서 그런지 사람들은 어렵지 않게 모을 수 있었다.백엔드와 프론트가 함께 하면 따로 했을 때 느꼈던 아쉬움이 해결될 거라는 막연한 기대가 가득했다.그 와중에 디자이너도 있으면 대박이겠다는 소리에 디자이너도 모셔왔다. 다 같이 회의를 하기 위해 날짜를 잡고 보니 생각보다 어깨가 무거워졌다..ㅎ'오 프론트 4명에 백엔드 5명에 디자이너 2명이면 스타트업인데..?' 일단 가장 급했던 건 어떤 주제로 프로젝트를 .. 2023. 11. 17. 이전 1 다음
