Section 29: Deploying JavaScript Applications - From Development To Production

 

 

 

 

 

웹사이트의 다양한 유형

다양한 웹사이트/웹 애플리케이션을 구축할 수 있습니다.

구체적으로 구분되는 세 가지 주요 유형이 있습니다.

• (HTML + CSS + JS만 있는) 정적 웹사이트
• 단일 페이지 애플리케이션 (SPA, HTML + CSS + JS는 단 하나의 HTML 페이지만 제공되고 클라이언트 측 JS는 페이지를 동적으로 다시 렌더링하는 데 사용됩니다)
• 동적으로/서버 측에서 렌더링된 웹 애플리케이션. HTML 페이지가 서버에서 동적으로 생성되는 웹사이트(예: EJS와 같은 템플릿 엔진을 통해 만들어지는 웹사이트).

이 링크에서 더 자세한 비교를 볼 수 있습니다.  https://academind.com/learn/web-dev/dynamic-vs-static-vs-spa/

이러한 웹 사이트를 배포할 때 서버 측 코드가 없는 사이트(예: 정적 웹 사이트와 SPA)에는 정적 호스트(예: AWS S3, Firebase 호스팅)만 필수적이라는 점을 이해하는 것이 중요합니다.

HTML이 서버에서 동적으로 생성되는 페이지에는 서버 측 코드를 실행할 수 있는 호스트가 필요합니다(즉 NodeJS, PHP 등 사용되는 모든 언어를 지원하는 서버).

 

1. Dynamic Pages

HTML pages are created dynamically, on the server - with the help of a server-side programming language and typically also a "templating engine"

#2. Single Page Applications

The server returns one single, pre-generated HTML page which in turn contains JavaScript code that changes the page dynamically in the browser (this approach is known as a "Single Page Application" or "SPA")

#3. Static Pages

HTML pages were pre-generated and are stored as such on the server - typically, those pages are not hand-written but also generated automatically (but before they're uploaded) with the help of a static site generator

 

 

 

HTML로 스크립트 임포트 자동 주입하기

이전 강의에서는 생성된 JavaScript 파일을 임포트하기 위해 HTML 파일을 수동으로 조정했습니다.

대부분의 프로젝트에서는 이렇게 해도 괜찮습니다 - 몇 분마다 새 버전의 스크립트를 푸시하지는 않을 테니까요.

그러나 Webpack용 특수 플러그인을 사용하여 이 과정을 자동화할 수도 있습니다. HtmlWebpackPlugin.

이 링크에서 사용 방법에 대한 자세한 문서를 찾을 수 있습니다.  https://github.com/jantimon/html-webpack-plugin

 

 

 

 

Sources

https://academind.com/tutorials/dynamic-vs-static-vs-spa

Dynamic vs SPA vs Static Websites

https://firebase.google.com/

Firebase

https://www.heroku.com/

Cloud Application Platform | Heroku