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 NextJS 공식 문서 정리 (12버전 기준) 참고: 리액트의 useEffect 를 사용해서 NextJS에서도 CSR를 선택적으로 수행할 수 있다. HTML 이 각 페이지 요청에 대해서 서버에서 생성된다. getServerSideProps 를 사용해 SSR 를 선택적으로 적용할 수 있다. getStaticProps 를 사용해 페이지를 정적으로 생성할 수 있다. NextJS는 Origin Server, CDN, Edge에 배포할 수 있다.... CSRpre-rendering공식문서nextjsSSRssgCSR [TIL]1201-Node.js(2) 웹 서비스 동작 방식 HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할 HTTP 요청은 사용자가 어떤사용자가, 어떤 데이터를 필요로 하는지 등을 담고 있다. HTTP 응답은 사용자가 요청한 데이터와, 어떤 데이터가 전송되는지 등을 담고 있다. 구글맵, 웹 채팅 등 사용자가 다양한 기능을 수행할 수 있음 웹 프레임워크 - HTTP 요청 처리 웹 프레임워크는 HTTP 요청을... CSR라우팅SSR엘리스SW엔지니어트랙웹TILexpress.jsCSR [CS] AJAX, SSR, CSR, CORS Day-28 Asynchronous JavaScript And XMLHttpRequest 약자로 JavaScript, DOM, Fetch, XMLHttpReqest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법입니다. AJAX의 가장 큰 특징은 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 페이지를 보여줍니다. fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이... CSRSSRcorsajaxFetchCSR [SSR][Next] SSR을 위한 Next.js(2) Next에서는 하나의 페이지가 하나의 리액트 컴포넌트이다. 페이지는 파일의 이름에 따라 경로와 연결된다. 만약 아래와 같은 Home이라는 페이지가 있다면 이 페이지의 경로는 localhost:3000/view/Home이 된다. 리액트에선 route를 따로 설정해줘야 했지만 Next에서는 경로 설정의 부분에서 자유로워졌다. 사전 렌더링 Next로 만들어진 애플리케이션을 빌드를 할 때, 페이지별... SSRnext.jsSSR Next.js로 창 해결 is not defined (의존 라이브러리 지원) 이번에 의존고 내pepjs에서 사용되기 때문에window is not defined 나왔다. 문제는 pepjs 내 사용window이라는 것이다. 이유는 window 클라이언트 처리에서만 사용할 수 있기 때문에Nextjs의 서버 측 처리에서 오류가 발생할 수 있습니다. React 구성 요소에서 사용한다면 다음 글의 방법을 통해 처리를 클라이언트 측에 한정하여 해결할 수 있습니다. 또 넥스트js... JavaScriptNext.jsReactSSRtech [인사이드 머신러닝] 단순회귀모델: 회귀선의 적합도 평가 yˉ 의 차이를 다음과 같이 쓸 수 있다. 즉, 총 편차(total deviation)는 회귀직선에 의해 설명되는 편차(explained deviation)과 회귀직선에 의해 설명되지 않는 편차(unexplained deviaion), 즉 residual로 나타낼 수 있다. 이 되어, 식 (2)의 총 편차의 제곱의 합은 다음과 같이 두 변동의 합으로 분해가 된다. \tag{4} \underb... 회귀모형통계분석SSTSimple Linear RegressionLinear Regression표준오차회귀분석딥러닝선형회귀회귀모델MSR결정계수SSRANOVAMSE머신러닝F검정F분포sse기계학습cleanskymachine learning분산분석Deep LearningANOVA
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 NextJS 공식 문서 정리 (12버전 기준) 참고: 리액트의 useEffect 를 사용해서 NextJS에서도 CSR를 선택적으로 수행할 수 있다. HTML 이 각 페이지 요청에 대해서 서버에서 생성된다. getServerSideProps 를 사용해 SSR 를 선택적으로 적용할 수 있다. getStaticProps 를 사용해 페이지를 정적으로 생성할 수 있다. NextJS는 Origin Server, CDN, Edge에 배포할 수 있다.... CSRpre-rendering공식문서nextjsSSRssgCSR [TIL]1201-Node.js(2) 웹 서비스 동작 방식 HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할 HTTP 요청은 사용자가 어떤사용자가, 어떤 데이터를 필요로 하는지 등을 담고 있다. HTTP 응답은 사용자가 요청한 데이터와, 어떤 데이터가 전송되는지 등을 담고 있다. 구글맵, 웹 채팅 등 사용자가 다양한 기능을 수행할 수 있음 웹 프레임워크 - HTTP 요청 처리 웹 프레임워크는 HTTP 요청을... CSR라우팅SSR엘리스SW엔지니어트랙웹TILexpress.jsCSR [CS] AJAX, SSR, CSR, CORS Day-28 Asynchronous JavaScript And XMLHttpRequest 약자로 JavaScript, DOM, Fetch, XMLHttpReqest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법입니다. AJAX의 가장 큰 특징은 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 페이지를 보여줍니다. fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이... CSRSSRcorsajaxFetchCSR [SSR][Next] SSR을 위한 Next.js(2) Next에서는 하나의 페이지가 하나의 리액트 컴포넌트이다. 페이지는 파일의 이름에 따라 경로와 연결된다. 만약 아래와 같은 Home이라는 페이지가 있다면 이 페이지의 경로는 localhost:3000/view/Home이 된다. 리액트에선 route를 따로 설정해줘야 했지만 Next에서는 경로 설정의 부분에서 자유로워졌다. 사전 렌더링 Next로 만들어진 애플리케이션을 빌드를 할 때, 페이지별... SSRnext.jsSSR Next.js로 창 해결 is not defined (의존 라이브러리 지원) 이번에 의존고 내pepjs에서 사용되기 때문에window is not defined 나왔다. 문제는 pepjs 내 사용window이라는 것이다. 이유는 window 클라이언트 처리에서만 사용할 수 있기 때문에Nextjs의 서버 측 처리에서 오류가 발생할 수 있습니다. React 구성 요소에서 사용한다면 다음 글의 방법을 통해 처리를 클라이언트 측에 한정하여 해결할 수 있습니다. 또 넥스트js... JavaScriptNext.jsReactSSRtech [인사이드 머신러닝] 단순회귀모델: 회귀선의 적합도 평가 yˉ 의 차이를 다음과 같이 쓸 수 있다. 즉, 총 편차(total deviation)는 회귀직선에 의해 설명되는 편차(explained deviation)과 회귀직선에 의해 설명되지 않는 편차(unexplained deviaion), 즉 residual로 나타낼 수 있다. 이 되어, 식 (2)의 총 편차의 제곱의 합은 다음과 같이 두 변동의 합으로 분해가 된다. \tag{4} \underb... 회귀모형통계분석SSTSimple Linear RegressionLinear Regression표준오차회귀분석딥러닝선형회귀회귀모델MSR결정계수SSRANOVAMSE머신러닝F검정F분포sse기계학습cleanskymachine learning분산분석Deep LearningANOVA