SSR SSR 배포 전략 with EC2, CloudFront, pm2, NGINX (2) Ubuntu에서 기존의 http의 80번 포트로 리다이렉트할 수 있지만, 추가적으로 도메인을 등록하고 HTTPS 설정 등을 위해 NGINX를 사용해볼 것이다. 도메인을 등록하기 위해 AWS Route 53을 검색하고 도메인 등록을 누른다. [새 도메인 DNS 관리]에서 AWS Route 53을 이용할 경우 호스팅 영역이 자동으로 생성된다고 설명하고 있다. 이후 도메인 등록까지 최대 3일이 걸... ec2cloudfrontawsSSRnext.jsNginxNginx (Next.js) 에러로그 : window is not defined 최근 합류한 팀에서 첫 업무로 리액트 프로젝트를 Next.js 프로젝트로 이식하는 작업을 맡게 되었다. 최대한 업무의 공수를 줄일 수 있는 마이그레이션(정작 시도를 해보면, 쉽지 않다는 것을 알 수 있다.)과 새롭게 프로젝트를 설치하고 시작하는 인스텔레이션 두 방향으로 고민을 했다. 잠깐의 고민 끝에 프로젝트의 구조가 간단하지 않아 구조를 파악할 수 있는 후자가 시간은 더 걸리겠지만, 사용하... 서버사이드랜더링SSRnext.js에러로그넥스트jsSSR Next.js _app.tsx에서 getInitialProps 커스텀하기 Next.js v9.3 이후로는 data fetching을 위해 사용하던 getInitialProps가 getStaticProps, getServerSideProps로 분리되었습니다. Next 공식 문서의 custom App에 대한 내용을 살펴보면 _app.tsx에서 getInitialProps를 사용할 시 Automatic Static Optimization의 기능이 사용불가능해지기 때문에... getInitialPropspre-rendernext.jsapp.tsxSSRSSR SSR 배포 전략 with EC2, CloudFront, pm2, NGINX (1) 이번에는 Next.js로 만든 프로젝트를 배포하기 위해 S3가 아닌 EC2를 사용하고 NGINX 리버스 프록시로 HTTPS 적용 등의 다양한 기능을 사용해보려 한다 👏. 1. EC2 인스턴스 생성 2. SSH 인스턴스 연결 EC2 배포는 가상 컴퓨팅 환경에서 서버를 가동시키는 것이므로 로컬에서 할 수 있는 거의 모든 일을 수행할 수 있다. 왜냐면 AWS의 컴퓨터 한 대(인스턴스)를 대여해서 ... ec2cloudfrontawsSSRnext.jsNginxNginx 기프티콘 거래 웹앱 with Cypress 구현해야 할 부분은 Api 함수 구현, 결과 타입 정의, 공통 리스트 카드 컴포넌트 그리고 카테고리 상세 페이지, 브랜드 상세페이지이다. 구현해야할 기능은 드래그 가능한 nav bar와 카테고리 데이터 받아와서 뿌려주는 그리드 카드 두 가지이다. 드래그 기능은 다음 4가지 마우스 이벤트로 구현할 수 있다. 페이지에서 대분류 리스트 데이터와 카테고리 상세 데이터를 SSR로 받아와 Navigat... 원티드cypress프리온보딩next.jsSSRWeCodeSSR React Dom이란? (+ hydrate를 써야 하는 이유!) If you use ES6 with npm, you can write import ReactDOM from 'react-dom'. If you use ES5 with npm, you can write var ReactDOM = require('react-dom'). ► 이 react-dom 패키지는 앱의 최상위 수준에서 사용할 수 있는 DOM 관련 메서드를 제공한다고 합니다. Render a... ReactDOMCSRnextjsSSRReactHydrateCSR [next js] Warning: Text content did not match. Server: "foo" Client: "foo" 매일같이 새로운 에러를 직면하는 나! 포스팅 할 글이 많아짐에 감사하다 ^__^ Next로 SSR을 하는 도중, 서버에서 던져준 내용이랑 클라이언트 내용이랑 달라서 뜬 경고이다. 처음 렌더링 될 때만 뜨고, 이후엔 이상없고 딱히 고치지 않아도 크리티컬하지 않은.. 에러지만 콘솔에 빨간색 뜨는거 보면 죽는 병에 걸렸기에 조금 낑낑댔다. 결론부터 말하자면, useEffect, useState 로... errornextjsSSRSSR NextJS 공식 문서 정리 (12버전 기준) 참고: 리액트의 useEffect 를 사용해서 NextJS에서도 CSR를 선택적으로 수행할 수 있다. HTML 이 각 페이지 요청에 대해서 서버에서 생성된다. getServerSideProps 를 사용해 SSR 를 선택적으로 적용할 수 있다. getStaticProps 를 사용해 페이지를 정적으로 생성할 수 있다. NextJS는 Origin Server, CDN, Edge에 배포할 수 있다.... CSRpre-rendering공식문서nextjsSSRssgCSR [TIL #32] Next.js (SSR) + react-responisve 에러 웹 개발을 하다보면 반응형 웹 처리를 항상 마주하게 된다. 처음 React를 공부할 땐 css media로 반응형 처리를 해주었었는데 아무래도 css에서 일일이 구현하다보니 불편해서 js에서 반응형 처리를 진행하는 를 사용하여 구현해왔다. 최근에 토이프로젝트를 진행하는데 이번에는 반응형이 아닌, 모바일 웹으로만 구현하고 싶어서 PC환경으로 접속시 모바일로 접속해달라는 위와 같은 화면을 띄우고... nextReact ResponsiveTILSSRReact Responsive [TIL]1201-Node.js(2) 웹 서비스 동작 방식 HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할 HTTP 요청은 사용자가 어떤사용자가, 어떤 데이터를 필요로 하는지 등을 담고 있다. HTTP 응답은 사용자가 요청한 데이터와, 어떤 데이터가 전송되는지 등을 담고 있다. 구글맵, 웹 채팅 등 사용자가 다양한 기능을 수행할 수 있음 웹 프레임워크 - HTTP 요청 처리 웹 프레임워크는 HTTP 요청을... CSR라우팅SSR엘리스SW엔지니어트랙웹TILexpress.jsCSR SSR 기초(A beginner’s guide to React Server-Side Rendering 번역) 모두들 잘 아시다시피, index.html 은 <div id="app"></div> 라고 쓰여진 빈칸만 가지고 있습니다. 따라서 우리가 개발자 도구에서 보고 있는 이 HTML 파일은 App 컴포넌트에 의해 클라이언트 사이드에서 만들어진 것임을 알 수 있습니다. 서버의 응답을 찾아보면(개발자 도구에서), 다음 사진과 같이 여전히<div id="app"></div> 라고 쓰여진 빈칸만 가지고 있... SSRSSR [CS] AJAX, SSR, CSR, CORS Day-28 Asynchronous JavaScript And XMLHttpRequest 약자로 JavaScript, DOM, Fetch, XMLHttpReqest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법입니다. AJAX의 가장 큰 특징은 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 페이지를 보여줍니다. fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이... CSRSSRcorsajaxFetchCSR 신규 프로젝트 준비 - 1. 셋업 해당 글의 주제 Laravel, Inertia를 활용한 React SSR 셋업 인증관련 구현에 많은 시간을 빼앗기고 싶지 않기때문에 Laravel Breeze의 인증 스캐폴딩을 활용하려 합니다. 프론트엔드는 Inertia with React로 구성하여 SSR CSR의 장점을 모두 포함하려 합니다. 또는 PHP와 (해당 글은 Docker를 활용했습니다.) 해당 프로젝트는 m1칩을 사용하는 Ma... 풀스택SSR프로젝트취미Inertia라라벨리액트Inertia [SSR][Next] SSR을 위한 Next.js(2) Next에서는 하나의 페이지가 하나의 리액트 컴포넌트이다. 페이지는 파일의 이름에 따라 경로와 연결된다. 만약 아래와 같은 Home이라는 페이지가 있다면 이 페이지의 경로는 localhost:3000/view/Home이 된다. 리액트에선 route를 따로 설정해줘야 했지만 Next에서는 경로 설정의 부분에서 자유로워졌다. 사전 렌더링 Next로 만들어진 애플리케이션을 빌드를 할 때, 페이지별... SSRnext.jsSSR [Next.js] Increamental Static Regeneration의 설계에서 발생한 오류와 해결 방법 SSG의 경우 (정확히 get Statii Paths의 반환값fallback:false일 때) 오류가 발생하여 곤란하기 때문에 비망록도 동시에 공유합니다 fetch의 URL이 절대 경로로 변하는 오류가 없습니다.client 측에서 사용할 때/appi/posts는 문제가 없지만 get Static Paths, get Static Propos 측에서 오류가 발생할 수 있습니다 getStaticP... Next.jsReactSSGSSRtech
SSR 배포 전략 with EC2, CloudFront, pm2, NGINX (2) Ubuntu에서 기존의 http의 80번 포트로 리다이렉트할 수 있지만, 추가적으로 도메인을 등록하고 HTTPS 설정 등을 위해 NGINX를 사용해볼 것이다. 도메인을 등록하기 위해 AWS Route 53을 검색하고 도메인 등록을 누른다. [새 도메인 DNS 관리]에서 AWS Route 53을 이용할 경우 호스팅 영역이 자동으로 생성된다고 설명하고 있다. 이후 도메인 등록까지 최대 3일이 걸... ec2cloudfrontawsSSRnext.jsNginxNginx (Next.js) 에러로그 : window is not defined 최근 합류한 팀에서 첫 업무로 리액트 프로젝트를 Next.js 프로젝트로 이식하는 작업을 맡게 되었다. 최대한 업무의 공수를 줄일 수 있는 마이그레이션(정작 시도를 해보면, 쉽지 않다는 것을 알 수 있다.)과 새롭게 프로젝트를 설치하고 시작하는 인스텔레이션 두 방향으로 고민을 했다. 잠깐의 고민 끝에 프로젝트의 구조가 간단하지 않아 구조를 파악할 수 있는 후자가 시간은 더 걸리겠지만, 사용하... 서버사이드랜더링SSRnext.js에러로그넥스트jsSSR Next.js _app.tsx에서 getInitialProps 커스텀하기 Next.js v9.3 이후로는 data fetching을 위해 사용하던 getInitialProps가 getStaticProps, getServerSideProps로 분리되었습니다. Next 공식 문서의 custom App에 대한 내용을 살펴보면 _app.tsx에서 getInitialProps를 사용할 시 Automatic Static Optimization의 기능이 사용불가능해지기 때문에... getInitialPropspre-rendernext.jsapp.tsxSSRSSR SSR 배포 전략 with EC2, CloudFront, pm2, NGINX (1) 이번에는 Next.js로 만든 프로젝트를 배포하기 위해 S3가 아닌 EC2를 사용하고 NGINX 리버스 프록시로 HTTPS 적용 등의 다양한 기능을 사용해보려 한다 👏. 1. EC2 인스턴스 생성 2. SSH 인스턴스 연결 EC2 배포는 가상 컴퓨팅 환경에서 서버를 가동시키는 것이므로 로컬에서 할 수 있는 거의 모든 일을 수행할 수 있다. 왜냐면 AWS의 컴퓨터 한 대(인스턴스)를 대여해서 ... ec2cloudfrontawsSSRnext.jsNginxNginx 기프티콘 거래 웹앱 with Cypress 구현해야 할 부분은 Api 함수 구현, 결과 타입 정의, 공통 리스트 카드 컴포넌트 그리고 카테고리 상세 페이지, 브랜드 상세페이지이다. 구현해야할 기능은 드래그 가능한 nav bar와 카테고리 데이터 받아와서 뿌려주는 그리드 카드 두 가지이다. 드래그 기능은 다음 4가지 마우스 이벤트로 구현할 수 있다. 페이지에서 대분류 리스트 데이터와 카테고리 상세 데이터를 SSR로 받아와 Navigat... 원티드cypress프리온보딩next.jsSSRWeCodeSSR React Dom이란? (+ hydrate를 써야 하는 이유!) If you use ES6 with npm, you can write import ReactDOM from 'react-dom'. If you use ES5 with npm, you can write var ReactDOM = require('react-dom'). ► 이 react-dom 패키지는 앱의 최상위 수준에서 사용할 수 있는 DOM 관련 메서드를 제공한다고 합니다. Render a... ReactDOMCSRnextjsSSRReactHydrateCSR [next js] Warning: Text content did not match. Server: "foo" Client: "foo" 매일같이 새로운 에러를 직면하는 나! 포스팅 할 글이 많아짐에 감사하다 ^__^ Next로 SSR을 하는 도중, 서버에서 던져준 내용이랑 클라이언트 내용이랑 달라서 뜬 경고이다. 처음 렌더링 될 때만 뜨고, 이후엔 이상없고 딱히 고치지 않아도 크리티컬하지 않은.. 에러지만 콘솔에 빨간색 뜨는거 보면 죽는 병에 걸렸기에 조금 낑낑댔다. 결론부터 말하자면, useEffect, useState 로... errornextjsSSRSSR NextJS 공식 문서 정리 (12버전 기준) 참고: 리액트의 useEffect 를 사용해서 NextJS에서도 CSR를 선택적으로 수행할 수 있다. HTML 이 각 페이지 요청에 대해서 서버에서 생성된다. getServerSideProps 를 사용해 SSR 를 선택적으로 적용할 수 있다. getStaticProps 를 사용해 페이지를 정적으로 생성할 수 있다. NextJS는 Origin Server, CDN, Edge에 배포할 수 있다.... CSRpre-rendering공식문서nextjsSSRssgCSR [TIL #32] Next.js (SSR) + react-responisve 에러 웹 개발을 하다보면 반응형 웹 처리를 항상 마주하게 된다. 처음 React를 공부할 땐 css media로 반응형 처리를 해주었었는데 아무래도 css에서 일일이 구현하다보니 불편해서 js에서 반응형 처리를 진행하는 를 사용하여 구현해왔다. 최근에 토이프로젝트를 진행하는데 이번에는 반응형이 아닌, 모바일 웹으로만 구현하고 싶어서 PC환경으로 접속시 모바일로 접속해달라는 위와 같은 화면을 띄우고... nextReact ResponsiveTILSSRReact Responsive [TIL]1201-Node.js(2) 웹 서비스 동작 방식 HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할 HTTP 요청은 사용자가 어떤사용자가, 어떤 데이터를 필요로 하는지 등을 담고 있다. HTTP 응답은 사용자가 요청한 데이터와, 어떤 데이터가 전송되는지 등을 담고 있다. 구글맵, 웹 채팅 등 사용자가 다양한 기능을 수행할 수 있음 웹 프레임워크 - HTTP 요청 처리 웹 프레임워크는 HTTP 요청을... CSR라우팅SSR엘리스SW엔지니어트랙웹TILexpress.jsCSR SSR 기초(A beginner’s guide to React Server-Side Rendering 번역) 모두들 잘 아시다시피, index.html 은 <div id="app"></div> 라고 쓰여진 빈칸만 가지고 있습니다. 따라서 우리가 개발자 도구에서 보고 있는 이 HTML 파일은 App 컴포넌트에 의해 클라이언트 사이드에서 만들어진 것임을 알 수 있습니다. 서버의 응답을 찾아보면(개발자 도구에서), 다음 사진과 같이 여전히<div id="app"></div> 라고 쓰여진 빈칸만 가지고 있... SSRSSR [CS] AJAX, SSR, CSR, CORS Day-28 Asynchronous JavaScript And XMLHttpRequest 약자로 JavaScript, DOM, Fetch, XMLHttpReqest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법입니다. AJAX의 가장 큰 특징은 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 페이지를 보여줍니다. fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이... CSRSSRcorsajaxFetchCSR 신규 프로젝트 준비 - 1. 셋업 해당 글의 주제 Laravel, Inertia를 활용한 React SSR 셋업 인증관련 구현에 많은 시간을 빼앗기고 싶지 않기때문에 Laravel Breeze의 인증 스캐폴딩을 활용하려 합니다. 프론트엔드는 Inertia with React로 구성하여 SSR CSR의 장점을 모두 포함하려 합니다. 또는 PHP와 (해당 글은 Docker를 활용했습니다.) 해당 프로젝트는 m1칩을 사용하는 Ma... 풀스택SSR프로젝트취미Inertia라라벨리액트Inertia [SSR][Next] SSR을 위한 Next.js(2) Next에서는 하나의 페이지가 하나의 리액트 컴포넌트이다. 페이지는 파일의 이름에 따라 경로와 연결된다. 만약 아래와 같은 Home이라는 페이지가 있다면 이 페이지의 경로는 localhost:3000/view/Home이 된다. 리액트에선 route를 따로 설정해줘야 했지만 Next에서는 경로 설정의 부분에서 자유로워졌다. 사전 렌더링 Next로 만들어진 애플리케이션을 빌드를 할 때, 페이지별... SSRnext.jsSSR [Next.js] Increamental Static Regeneration의 설계에서 발생한 오류와 해결 방법 SSG의 경우 (정확히 get Statii Paths의 반환값fallback:false일 때) 오류가 발생하여 곤란하기 때문에 비망록도 동시에 공유합니다 fetch의 URL이 절대 경로로 변하는 오류가 없습니다.client 측에서 사용할 때/appi/posts는 문제가 없지만 get Static Paths, get Static Propos 측에서 오류가 발생할 수 있습니다 getStaticP... Next.jsReactSSGSSRtech