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

공식문서의 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 ..

로그인 구현 어케해요?에 대한 답을 정리해봤습니다.  1. JWT가 뭔디Json Web Token json 객체에 인증에 필요한 정보들을 담은 후 비밀키로 서명한 토큰이다.stateless 환경에서 사용자 데이터를 주고받을 수 있게 한다. (HTTP 프로토콜의 무상태성) 로그인 후 JWT를 헤더에 넣어서 보내야 하는데, 이는 매번 인증과정을 거쳐야 하는 HTTP의 특성때문이다.공식적으로 인증(Authentication), 권한허가(Authorization) 방식으로 사용된다.해커는 클라이언트-서버간 네트워크 트래픽을 가로채 JWT 토큰을 가져올 수 있는데, 이는 HTTPS를 사용함으로써 방지할 수 있다. cf. HTTP 프로토콜의 무상태성HTTP는 각 요청이 독립적으로 처리되기 때문에, 서버는 이전의 요..