📚 [모던 자바스크립트 Deep Dive] 2장 자바스크립트란?
📝 2.1 자바스크립트의 탄생
웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어가 브렌던 아이크가 개발한 자바스크립트다.
📝 2.2 자바스크립트의 표준화
자바스크립트와 자바스크립트의 파생 버전인 JScript가 자사 브라우저의 시장 점유율을 높이기위해 경쟁을 함으로써 브라우저에 따라 웹제이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하였다.
이로인해 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트의 필요성이 대두되기 시작했고 표준화된 자바스크립트는 ECMAScript로 명명되었다.
ECMAScript 6(ECMAScript 2015, ES6)는 let/const 키워드, 화살표 함수, 클래스, 모듈 등과 같이 범용 프로그래밍 언어로서 갖춰야 할 기능들을 대거 도입하는 큰 변화가 있었다.
📝 2.3 자바스크립트 성장의 역사
초창기 자바스크립트 대부분의 로직은 주로 웹 서버에서 실행되었고, 브라우저는 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준이었다.
-
Ajax
- 자바스크립트를 이용해 서버와 브라우저가 비동기방식으로 데이터를 교환할 수 있는 기능인 Ajax가 XMLHttpRequest라는 이름으로 등장했다.
- 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식이 가능해졌다.
-
jQuery
- DOM(Document Object Model)을 더욱 쉽게 제어할 수 있게 되었고 크로스 브라우징 이슈도 어느 정도 해결되었다.
-
V8 자바스크립트 엔진
- 자바스크립트는 데스크톱 애플리케이션과 유사한 사용자 경험(UX; user exprience)을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 되었다.
- 과거 웹 서버에서 수행되던 역할들이 클라이언트(브라우저)로 이동하였다.
-
Node.js
- 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런티임 환경이다.
- 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청처리 성능이 좋다.
- 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용되는 범용 프로그래밍 언어가 되었다.
-
SPA 프레임워크
- 복잡해진 개발 과정을 수행할 수 있도록 CBD(Component based development) 방법론을 기반으로 하는 SPA(Single Page Application)가 대중화되면서 다양한 프레임워크/라이브러리가 나왔다.
📝 2.4 자바스크립트와 ECMAScript
ECMAScript는 자바스크립트의 표준 명세인 ECMA-262를 말하며 프로그래밍 언어의 타입, 값, 객체와 프로퍼티, 함수, 빌트인 객체 등 핵심 문법(core syntax)을 규정한다.
자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API, 즉 DOM, BOM, Canvas, XMLHtppRequest, Fetch 등을 아우르는 개념이다.
📝 2.5 자바스크립트의 특징
자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다.
자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리티어 언어(interpreter language)다.
명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.
클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어다.
📝 2.6 ES6 브라우저 지원 현황
인터넷 익스플로러를 제외한 모던 브라우저의 ES6 지원 비율은 96~99%로 거의 100%에 육박한다.
📕 Next.js
📝 Next.js
Next.js는 React 라이브러리의 프레임워크 이다.
Next.js를 사용하는 가장 큰 이유는 SSR(Server Side Rendering)을 지원하기 때문이다.
SSR(Server Side Rendering) : 서버쪽에서 자바스크립트가 실행되어 브라우저로는 완성된 HTML이 전송되기 때문에 자바스크립트를 실행할 수 없는 환경에서도 잘 작동된다.
📝 Next.js 설치
npx create-next-app@latest .
또는
npx create-next-app 프로젝트명@latest ⇒ 최신버전, . ⇒ 현재폴더
13버전 이전에는 pages router를 사용, 13버전부터는 app router가 도입됨
📝 Next.js 실행
npm run dev ⇒ 개발서버 실행하는 명령
터미널에서 실행하면 개발환경 주소가 나오며 해당 주소로 접속해 아래와 같은 화면이 나오게되면 성공!!
src/app/layout.js는 앱의 골격을 의미하며 html, body가 들어있다. (공통되는 부분은 여기에 작성)
body안에 작성되는 태그는 src/app/page.js에서 리턴한 값이며, layout.js의 body태그 안 {children}에 해당한다.
.next폴더는 개발/빌드 사용자들에게 서비스 되는 내용이 저장되는 폴더이다.
npm run build ⇒ 실서버를 위한 배포판을 만드는 명령
npm run start ⇒ 배포판을 서비스하기 위한 명령
📝 라우팅
예를들어 http://localhost:3000/create를 접속하게되면 src/app/create/page.js의 내용을 같은 선상의 layout.js의 {children}에 들어가게되고(같은 선상에 없다면 생략) 부모 폴더의 layout.js가 있다면 {children}에 포함시켜 만든 결과가 나오게 된다.
📝 다이나믹 라우팅
경로에 어떤 값이 들어올지 모를 때 사용한다. ex) id 값
http://localhost:3000/read/1 맨 뒤의 id 값은 동적으로 바뀌는 부분이다.
첫번째 경로 폴더를 만들고 그 아래 동적으로 바뀌는 부분은 대괄호([])를 하고 값을 부여하고 싶은 이름의 폴더를 만든다. 여기에서는 [id] 그리고 그 아래 page.js파일을 만든다.
props.params.id값으로 [id]라는 폴더명에 해당되는 값을 가져올 수 있다.
📝 Link
<a>를 <Link>로 바꾸기만해도 Single Page Application이 된다.
<Link>는 이미 방문했던 페이지를 다시 방문하려하면 서버에 통신하지 않음
📝 정적 자원 사용
이미지와 같은 정적인 컨텐츠를 사용하려면 public폴더에 넣으면 된다.
<img src="/이미지.png"></img> ⇒ public 밑에 있는 .png를 가리킨다.
📝 Server Component, Client Component
Next.js는 컴포넌트를 기본적으로 Server Component로 간주한다.
정보를 단순히 보여주는 것들은 Server Component
사용자와 상호작용하는 부분은 Client Component
Client Component
- Next.js는 Server Component이므로 최상단에
"use client"를 작성하면 Client Component로 만들어 둔다.- 단점
- 서버가 멀리 있는 경우 시간이 오래걸린다. (+ 상당한 비용 발생)
- js가 꺼져있으면 서버와 통신하는 부분은 실행되지 않는다.
- 보안적으로도 문제가 있다.
Server Component
- 한번 렌더링 되면 client에 단순하게 보내주는 역할만 하면 된다.
- fetch를 사용할 때 async/await를 사용한다.
- 서버쪽에서 fetch 메소드가 호출되고(실행될 때 까지 기다림) 끝나면 json으로 바꾸라는 명령이 실행되면서 topics 데이터를 가져와 동적으로 생성한 다음에 만들어진 결과를 서버쪽에(
.next폴더) 저장된다.- 최종적으로 정적인 내용만 client에 전송(js코드는 빼고)
- 장점
- 용량이 적어진다.
- api가 같은 서버에 있다면 속도가 빠르다.
- 서버쪽에서 렌더링을 끝내고 데이터를 보내기때문에 js가 꺼져있어도 실행된다. (서버쪽에서 동적으로 생성한 정적인 내용을 client에 전달했기 때문)
