문제 발생 React에서 googleapis 라이브러리를 사용해보려고 했더니 다음과 같은 에러가 발생했다. 원인은 간단했다. googleapis가 Node.js에서만 동작하는 라이브러리기 때문이다. 해결 방법 해당 라이브러리는 Nodejs (express, nestjs 등)에서만 동작하는 라이브러리다. 사용하지 말자.
버전 정보 react: ^18.2.0 react-scripts: ^4.0.2 (5버전은 에러가 너무 많이 나서 다운그레이드) google-spreadsheet: ^3.3.0 구글 스프레드 시트 API 구글 스프레드 시트 API를 이용하여 받아온 데이터를 React에서 처리하려고 한다. API를 이용하면 자바스크립트나 파이썬등에서 코드를 통해 시트 내용을 조회, 생성, 수정, 삭제를 할 수 있다. 이 작업은 주로 정적인 사이트에 사용하면 좋을 것 같다. 그리고 개발 코드를 직접 다룰 수는 없고, 구글 스프레드 시트에 익숙한 사람들. 즉 기획자분들과의 협업에도 도움이 될 것 같다. 예를 들어, 기획자 분들이 스프레드 시트에 작업을 하면 그 작업 내용을 DB에 넣는 경우가 있는데, 스프레드 시트 값이 자주 업..
getStaticProps에 대해 익숙하지 않다면, 아래 글을 먼저 보는 것을 추천 드립니다. [Next.JS] SSG - getStaticProps getStaticProps SSG(Static Site Generator)는 페이지를 호출할 때마다 서버에서 pre-render하는 SSR와 달리 빌드시점에 pre-rendering을 한다. // posts는 빌드 시점에 getStaticProps()에 의해 채워진다. function Blog({ posts } soojae.tistory.com getStaticPaths 동적 경로를 사용하는 페이지에서 getStaticPaths라는 함수를 사용할 때 Next.js는 getStaticPaths에 지정된 모든 경로를 정적으로 미리 렌더링한다. paths pat..
getStaticProps SSG(Static Site Generator)는 페이지를 호출할 때마다 서버에서 pre-render하는 SSR와 달리 빌드시점에 pre-rendering을 한다. // posts는 빌드 시점에 getStaticProps()에 의해 채워진다. function Blog({ posts }) { return ( {posts.map((post) => ( {post.title} ))} ) } // 이 함수는 Server Side에서 빌드 타임에 호출된다. // Client Side에서는 호출되지 않으므로 직접 데이터베이스 쿼리를 수행할 수도 있다. export async function getStaticProps() { const res = await fetch('https://.../..
getInitialProps, getServerSideProps, getStaticProps 전부 Server Side Rendering(SSR)을 위해 필요한 함수들이다. SSR은 서버에서 미리 데이터를 채운 페이지를 브라우저에 보여준다. 이는 특히 SEO 구현에 유용하다. 이번 시간은 getInitalProp와 getServerSideProps에 대해 알아보자. 각각의 렌더링 유형은 props를 페이지 컴포넌트로 전달된다. 초기 HTML가 내려왔을 때, 클라이언트 측에서 이 props 데이터를 확인 할 수 있다. 이는 페이지에서 적절한 hydrate를 위함이다. 그러므로 클라이언트에서 사용하면 안되는 민감한 정보(secret key등)를 props로 전달하면 안 된다. getInitialProps 사..
※ 이전 게시물과 이어집니다. 아직 keycloakify 설치, 세팅하기 전이라면 다음 포스팅을 확인해 주세요. [Keycloak] keycloakify로 테마 커스텀 - 초기 설정 버전 정보 keycloak: v20.0.3 keycloakify: v6 로그인 테마 커스텀 사실 keycloak의 테마는 이쁘지 않다... 이를 극복하기위해 직접 freeMaker(https://freemarker.apache.org/) 즉, .ftl 확장자 파일을 수정해야 한다. freeMa soojae.tistory.com 버전 정보 keycloak: v20.0.3 keycloakify: v6 화면 작업 방식 화면 작업 방식은 2가지로 보면 된다. keycloak에서 기본으로 사용하는 login.ftl, register...
