태그보기
사진보기
제목보기
태그검색
Search
Next.js는 일반적인 React 라이브러리의 누락된 부분을 채워 능숙한 전체 스택 프레임워크로 만드는 인기 있는 React 프레임워크입니다. 이 게시물에서는 서버 측 렌더링(SSR) Next.js 예제를 사용하고 버튼 클릭으로 Google Cloud Run에 배포합니다.
Next.js는 무엇입니까?
Next.js는 개발자가 전체 스택 프레임워크로 웹사이트를 쉽게 만들 수 있도록 하는 매우 인기 있는 React 라이브러리 위에 구축된 프레임워크입니다. "프로덕션을 위한 React 프레임워크"라고 하며 훌륭한 개발자 경험을 가지고 있습니다.
Next.js는 Typescript 지원을 제공합니다. SSG(Static Site Generation) 또는 SSR(Server Side Rendering) 중에서 선택하는 옵션 은 SEO 친화적이며 기본적으로 뛰어난 이미지 최적화를 제공합니다.
이러한 기능으로 인해 프런트엔드 개발 커뮤니티에서 가장 사랑받는 React 프레임워크 중 하나로 눈에 띕니다.
SSR의 장점
SSR(서버 측 렌더링)의 주요 이점은 각 페이지에 정적 URL이 있고 콘텐츠가 서버에서 미리 생성되기 때문에 SEO 친화적이라는 것입니다.
서버 측 렌더링은 애플리케이션의 데이터가 자주 변경되거나 권한이나 로그인한 사용자에 따라 동적으로 생성되는 경우 매우 유용합니다.
서버 측 렌더링의 또 다른 중요한 이점은 HTML이 각 요청에 대해 렌더링되기 때문에 콘텐츠가 항상 동적이라는 것입니다.
이 튜토리얼에서는 이것을 염두에 두는 것이 중요합니다. 왜냐하면 우리는 Next.js(모의 API가 있음)의 전체 스택 예제를 호스팅하고 API의 응답이 프런트엔드에서 렌더링되기 때문입니다.
그러면 API 또는 기타 웹 애플리케이션을 호스팅할 수 있는 최상의 옵션 중 하나인 Google Cloud Run으로 이동합니다.
How to deploy Next.js on Google Cloud Run 정리
Next.js 앱을 배포하려고 조사하던 중 https://blog.logrocket.com/how-to-deploy-next-js-on-google-cloud-run/를 보면서 전제조건에 도커와 도커 컴포즈에 대한 실무 지식을 알고 있어야 한다기에 추천하는 글을 읽어보면서 번역하고 정리합니다.
지난 5년 간 Docker와 Node.js는 매우 인기있었습니다. 이 단계별 가이드에서 함께 사용해서 개발자 경험을 개선하는 방법을 알아봅니다.
이 튜토리얼에서 docker build를 효율적으로 사용하고 Docker compose를 활용하여 원활한 로컬 개발 환경을 구현하는 방법을 자세히 설명합니다.
전제 조건
1.
Node.js 및 npm의 기본 사항에 익숙해야 합니다. 우리는 최신 LTS 버전인 Node 14를 사용할 것입니다.
2.
Express.js 프레임워크의 기본 사항을 알고 있어야 합니다.
3.
Docker에 대한 작업 지식이 있어야 합니다.
이 튜토리얼은 셸이 있는 Linux 또는 macOS와 같은 Unix 계열 시스템 에서 실행되는 명령을 사용합니다 . 이것은 우리가 앱 설정에 직접 뛰어드는 압축된 게시물이 될 것이므로, 그렇게 생각한다면 Docker 및 Node에 대해 읽어볼 수 있습니다.
Express 생성기로 새 Express.js 프로젝트 만들기
Use Node.js with Docker and Docker Compose to improve DX 정리
현재 sqlite로 DB가 되어 있습니다. 배포를 목적으로 하니 DB를 postgres로 바꾸려고 합니다.
왜 postgres? https://techblog.woowahan.com/6550/
twitter 같은 글 작성 기능을 만듭니다. 추가/삭제만 지원하겠습니다. insert, select에 특화된 postgres를 택했습니다.
password, port를 기억합시다.
기존 strapi v4 프로젝트 config/database.js
참고) strapi v3
settings에 client와 filename이 있었는데,
Strapi v4에서는 client이 남아있고, connection 내에 filename이 생겨있습니다.
database.js 파일 내의 코드를 아래와 같이 변경합니다.
Strapi v4에서 postgres 연결하기 (mac m1) OS 계정 authentication issue
2022/03/27
icoa
2022/03/26 16:35
strapi
issue
Goal
이 글에서 우리는 form 기능을 가진 스타텁 사이트를 만들 겁니다. 새로운 집을 찾는 걸 돕는 부동산 사이트이고, strapi 백엔드, react 프론트엔드로 사용할 겁니다.
또한, 우리는 매월 자사 제품에 대한 이메일을 받는 것을 원하는 유저들의 뉴스레터 폼을 준비할 것입니다.
유저는 회원가입 후 회원가입이 성공했다는 확인 메일을 받을 것입니다.
An Introduction to Strapi
Strapi는 백엔드 API 서비스에 맞게 커스터마이즈 및 유연성을 제공할 수 있도록 자체 호스팅되는 오픈 소스 헤드리스 CMS 솔루션입니다.
Strapi의 장점 중 하나는 프런트엔드에서 마이크로 서비스로 사용할 수 있는 엔드포인트를 공개하기 위한 API의 scaffolding이 쉽다는 것입니다. Strapi는 RESTful API와 GraphQL API를 모두 지원합니다.
Scaffolding이란?
MVC 모델 기반 앱을 만드려 할 때 생산하는 복잡하고 많은 양의 코드를 앱이 제공하는 템플릿 기반으로 MVC에 관한 코드를 자동으로 생성해주는 기능입니다.
Prerequisites
이 기사를 계속 쓰기 전에 먼저 알아두셔야 합니다.
•
React: 이 문서는 React에 대한 소개가 아니라 백엔드 서비스에 Strapi를 사용하는 방법에 대해 설명합니다. Head over to React’s official documentation to get started with React.
How to build a Marketing Site with React and Strapi
2022/03/24
icoa
2022/03/24 07:02
소개
당신이 게이머이자 열렬한 프로그래머라면. 올바른 위치에 왔습니다. 우리는 인기있는 게임 통계 사이트 https://eune.op.gg/ 의 1$ 버전을 재현하려고 노력할 것 입니다.
그 과정에서 이 기사에서는 Strapi를 사용하여 사용자 지정 API 엔드포인트를 생성하는 방법을 배우게 됩니다. 끝점의 경우 외부 데이터를 가져올 수 있도록 사용자 지정 작업도 정의됩니다. 또한 GraphQL 플러그인을 활성화하고 사용자 지정 API 엔드포인트가 사용자 지정 스키마 및 해석기를 사용하여 GraphQL을 통해 쿼리할 수 있도록 합니다.
Graphql이란 무엇입니까?
공식 GraphQL 페이지 에 명시된 바와 같이 API용 쿼리 언어에 불과합니다. GraphQL을 사용 하면 클라이언트(프론트엔드 페이지) 가 API에서 필요한 데이터만 검색하고 그 이상은 검색할 수 없으므로 복잡한 애플리케이션을 구동하는 더 빠르고 확장 가능한 방법이 됩니다.
Facebook에서 처음 개발했으며 2015년에 오픈 소스가 되었습니다.
전제 조건
1.
yarn/npm - vlatest
2.
스트래피 - vlatest
3.
NextJs - vlatest
앱 빌드를 시작하기 전에 이미 Riot Games 계정이 있는지 확인하세요. 그렇지 않은 경우 쉽게 만들거나 소셜 로그인 버튼을 사용할 수 있습니다. 대시보드 페이지 에서 API 키를 생성하려면 계정이 필요합니다 .
키를 생성한 후에 .env는 코드 내에서 공개적으로 노출되지 않도록 파일에 저장하고 비밀로 유지하십시오.
앱 빌드
[strapi] custom-routes-for-external-data-with-graph-ql
icoa
2022/03/13 15:27