Javascript 그리고 Typescript
0
패스트캠퍼스 강의를 정리한 내용입니다.
"김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential"
웹앱의 구성요소
HTML, CSS, JavaScript
CSR (Client Side Rendering)
- 브라우저에서 실행되는 JavaScript의 실행 결과로 UI를 주도적으로 만드는, 즉 HTML을 주도적으로 만들어서 UI를 표현하는 방법
- 브라우저는 자바스크립트에 대한 링크가 있는 빈 문서만 제공하고, 브라우저는 모든 자바스크립트가 다운되고 실행될 때까지 기다릴 필요 없이 서버에서 HTML 렌더링을 시작함
- SPA 형식의 프론트엔드 라이브러리(vuejs, react 등)는 CSR 방식으로 시작되었으며, 초기 렌더링 시간이나 메타 데이터 동적 생성의 한계 극복을 위해 SSR 프레임워크를 보유하고 있음
SSR (Server Side Rendering)
- 웹 서버에서 주도적으로 HTML을 만들고 브라우저에 전송하는 방법
- 서버에서 사용자에게 보여줄 페이지를 모두 구성해 보여주는 방식
- 요청할 때마다 서버에서 처리하여 새로고침으로 페이지 응답
- CSR보다 페이지 구성 속도는 느리지만 전체적으로 사용자에게 보여주는 컨텐츠 구성이 완료되는 시점은 빠름
CSR, SSR 참고: https://onlyfor-me-blog.tistory.com/387
SPA (Single Page Application)
- 최초에 페이지 전체를 불러오고 HTML에 번들링된 JS가 실행되며 페이지를 렌더링
- 클라이언트 요청에 따라 응답 데이터만 다시 특정 부분에 렌더링
- 장점
- 필요한 부분만 중복없이 요청하므로 퍼포먼스 상 이득
- 페이지 이동 자연스럽고 빠름 (UX)
- 개발 생산성 개선 (컴포넌트 별 개발)
- 다른 플랫폼과 공통으로 사용하는 Backend API 개발 병행 진행 가능
- 단점
- JS번들링 파일을 한번에 받기 때문에 초기 로딩 비용 있음
→ code spliting으로 최적화 가능 - 렌더링의 부하를 클라이언트가 담당하기에 구형 단말기/성능이 낮은 단말기에서의 초기 로딩 비용이 클 수 있음
- SEO의 한계 (pre-rendering, SSR)
- JS번들링 파일을 한번에 받기 때문에 초기 로딩 비용 있음
모던 Javascript와 개발 환경
nodejs
- 확장성이 있는 네트워크 어플리케이션 개발에 사용되는 소프트웨어 플랫폼
- 작성 언어로 자바스크립트를 활용
- 브라우저 없이 컴퓨터 시스템 (운영체제)에서 바로 실행 가능
// index.js
<script>
console.log('Hello World')
</script>
→ Terminal에서 node index.js 입력 시 console 출력 가능npm
- 자바스크립트 프로그래밍 언어를 위한 패키지 관리자
- 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자
Frontend Developer