오픈그래프에 고통받던 하루.. 굳이 배포를 안해도 로컬환경에서 테스트할 수 있는 방법을 알게 되었습니다.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 ..

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

이전글: 프론트엔드 아키텍쳐를 알아보자 (1) MVC, MVVM, Flu프론트엔드 아키텍쳐 1. Redux여러 컴포넌트가 공유하는 상태를 관리하기 위한 라이브러리.*Flux 패턴을 이용한 대표적인 구현체이다. *recap: flux패턴은 데이터의 흐름이 한 방향으로만 흘러가도록 하는 아키텍쳐이다.View를 각각의 MVC 컴포넌트 관점으로 보는 것이 아니라 하나의 큰 View로 본다. 1. 사용자가 View에서 이벤트 발생 -> Action 객체가 생성됨2. Dispatch 메소드를 통해 이 Action이 Store로 전달3. Middleware가 있는 경우, Action 처리4. Reducer는 현재 상태와 Action을 받아 새로운 상태를 반환5. Store는 이 새로운 상태를 저장6. 상태가 변경되면..

아키텍처가 뭔데요Software architecture is the structure of structures of an information system consisting of entities and their externally visible properties, and the relationships among themDr. Jean-Claude Franchitti from New York University여러 정의가 있지만,  더 효율적인 코드를 작성하기 위한 구조.라고 생각하면 될 것 같다. 1. MVC 아키텍처 (Model-View-Controller)클래식 오브 클래식.백엔드와 프론트엔드가 구분되지 않던 시절, 어플리케이션을 모델-뷰-컨트롤러로 분리하는 아키텍쳐이다. Model데이터를 주..

세 줄 요약1. Promise는 비동기 동작을 관리하기 위해 설계되었으며, 콜백 함수로 이루어져 있다.2. Promise의 상태는 pending, fulfilled, rejected로 나뉜다. (상태에 따른 콜백이 finally, then, catch)3. 비동기 함수의 처리를 쉽게 하기 위해 async/await 키워드를 사용한다. overall비동기 함수 (Producer = Executor)결과를 생성하는 함수로, Promise 내부에서 실행된다. 결과를 콜백의 Input에 넣는다.caller성공 콜백, 실패 콜백 (Consumer = Executee)Promise의 결과를 받아 처리하는 함수(then, catch).calleePromise의 역할비동기 작업의 결과(성공/실패)를 관리하며, Prod..

Top-level awaitjs ES2022(ES13)부터 도입된 기능으로, 모듈 스코프에서 직접 await 키워드를 사용할 수 있게 해준다.이전에는 async 키워드가 있는 스코프 내에서만 await를 통해 해당 스코프에서 비동기 동작이 완료되기까지 블로킹할 수 있었는데모듈단위에서 await를 통해 특정 비동기 함수의 동작이 완료되기까지 하위 모듈의 동작을 막을 수 있다. 1. 기존의 await 사용 제한과 Top-level await의 등장기존 await 키워드는 반드시 async 함수 내부에서만 사용할 수 있었다.따라서, await를 모듈의 최상위 레벨에서 사용하려면 async 함수를 감싸야 했다.// 기존 방식 (async 함수로 감싸야 함)async function main() { const ..