프로젝트18 [Bolg-App] Github Action으로 firebase 자동배포 설정하기 Firebase 호스팅을 GitHub Actions를 통해 CI/CD 파이프라인에 연결하여, main 브랜치에 커밋이 발생할 때 자동으로 배포되도록 설정하려고 한다. 1. GitHub Secrets 설정Firebase 배포를 위해서는 Firebase CLI 토큰이 필요한데 GitHub Secrets를 사용해 저장하면 된다. 1. 토큰 발급로컬 환경에서 Firebase CLI를 통해 디플로이용 토큰을 발급받는다.firebase login:ci 이 명령어를 실행하면 브라우저 창이 열리고 로그인 후, 콘솔에 토큰이 출력된다. 2. GitHub 프로젝트 설정 > Secrets 추가GitHub 레포지토리로 이동 후, Settings > Security > Secrets and variables > Actions.. 2024. 12. 10. [Food-App] Next.js recoil runtime error 빌드하면서 runtime error가 발생했다. 상태관리를 위해 recoil을 사용했는데 'ReactCurrentDispatcher'에서 문제가 발생했다고 했다. 그래서 다음과 같이 몇가지 조치들을 시도했다.React 버전 충돌: react와 react-dom 버전 때문인지 확인패키지 설치 문제: node_modules 삭제 후 재설치Webpack 설정 문제: Webpack 확인캐시 삭제: 캐시 삭제 후 재빌드1. React 및 React-DOM 버전 확인npm list react react-dom2. 의존성 재설치rm -rf node_modules package-lock.jsonnpm install3. Webpack 설정 확인(next.config.js가 정상인지 확인)npm install next@l.. 2024. 12. 3. [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. 이전 1 2 3 다음
