ChatGPT 최근 ChatGPT가 핫하다. 필자도 프로그래밍 관련 질문들은 구글링 하기 전에, 먼저 ChatGPT에게 물어본다. 놀라운 부분은 필자가 adopt라는 scope function이 kotlin에 있지 않냐고 물어봤더니, 없다고 하는 것에 그치지 않고, adopt의 늬앙스가 apply, also와 유사하여 사용자가 헷갈린 것이라 판단해, apply와 also에 대해 설명해 준다. 이 뛰어난 기능을 어딘가에 활용해볼까 고민하던 중, ChatGPT의 확장 프로그램을 구글 스프레드 시트에 설치하여 활용할 수 있다는 소식을 듣고, 구글 스프레드 시트로 작업한 i18n에 활용하기로 결정했다. 구글 스프레드 시트를 이용한 i18n 자동화 방법은 아래 게시물을 보는 것을 추천한다. 이런 게시물을 볼 때마..
문제 발생 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 사..
