오픈그래프에 고통받던 하루.. 굳이 배포를 안해도 로컬환경에서 테스트할 수 있는 방법을 알게 되었습니다.special thanks to 나의 영원한 사수님 알려주신건 NGROK을 이용한 방법이었으나 회원가입도 귀찮았던 저는 크롬 익스텐션을 사용하기로 했습니다. 오픈그래프는 배포된 환경에서만 적용이 가능하기에, 로컬호스트를 카카오톡에 아~무리 공유해도 읽어올 수 없는데요,임시로 배포해주는 크롬 익스텐션을 활용해서 테스트할 수 있었답니다.  1. og에 이미지 추가 openGraph: { title: 'title', description: 'og test', images: [ { url: `${ process.env.NODE_ENV === 'develo..

0. Redux란?js 애플리케이션의 상태 관리를 위한 라이브러리이며, 단방향 데이터 흐름을 통해 애플리케이션의 상태 변화를 예측 가능하게 만드는 패턴을 제공한다. React만으로 작은 애플리케이션을 구축할 때는 useState나 useReducer와 같은 내장 훅으로 충분할 수 있다.다만 애플리케이션 규모가 커지고 다양한 컴포넌트가 동일한 상태를 공유해야 할 때 복잡성이 증가한다.→ Redux는 상태 관리의 복잡성을 해결하는 효과적인 방법을 제공한다고 함! 1. 핵심 원리Single Source of Truth애플리케이션의 모든 상태는 하나의 스토어(store)에 있는 객체 트리에 저장된다.// 스토어는 다음과 같은 하나의 큰 상태 객체를 관리한다.{ theme: { color: 'black',..

공식문서의 dashboard app 예제를 따라하던 중, vercel 배포 단계에서 에러가 발생했다.건든게 없는데 에러가 나서 억울하긴 하다....... pnpm run build > @ build /path/to/project> next build ▲ Next.js 15.1.7 Creating an optimized production build ... ✓ Compiled successfully ✓ Linting and checking validity of types Collecting page data ...[Error: Cannot find module '/path/to/project/node_modules/.pnpm/bcrypt@5.1.1/node_modules/bcry..

Next.js에서 다국어 지원하기 (1) google spreadsheet 연동편3월에 쓰려고 했던 이 글,,,지금 만나러 갑니다   Next.js에서 Google 스프레드시트와 i18n-next를 활용하여 다국어 지원을 구현하는 방법을 처음부터 차근차근 설명해드립니다.  0. 프로젝트 생성 Gstdmoii.tistory.com 앱라우터에서 i18n 적용하기근데 이제 좀 많이 삽질한...  0. next-i18next는 페이지 라우터를 위한 것이전 프로젝트에서는 당연히~ next-i18next를 사용했기에 아무 의심 없이 설치했는데요, 대차게 시간을 버리고 맙니다.왜냐? next-i18next는 *앱라우터를 지원하지 않기 때문!*Next.js App Router with i18next (Tutorial)..

3월에 쓰려고 했던 이 글,,,지금 만나러 갑니다   Next.js에서 Google 스프레드시트와 i18n를 활용하여 다국어 지원을 구현하는 방법을 처음부터 차근차근 설명해드립니다.  0. 프로젝트 생성 Getting Started: Installation | Next.jsCreate a new Next.js application with the `create-next-app` CLI, and set up TypeScript, ESLint, and Module Path Aliases.nextjs.orgNext.js 공식문서를 보고 예시용 프로젝트를 만들어 줬습니다.npx create-next-app@latest What is your project named? my-appWould you like to ..