Web2 Node.js 첫번째

Atom 혹은 VSC 를 사용해 HTML 과 CSS 로 홈페이지를 만들어 보았다.

(Web1 참고)

위에서 우리가 한 것은 프론트엔드의 범주이다?

 

하지만 우리가 수동으로 직접 HTML 으로 웹 페이지를 하나 하나 만들기 어렵고 귀찮다.

수정을 할 때 1억개의 페이지가 있는 웹사이트가 있다면 1억개의 페이지를 수정해야 한다.

이를 해결하기 위해 JavaScript 를 사용해 자동으로 페이지를 만들 수 있도록 했다. 

이렇게 나온 것이 Node.js 이다.

다른 설명으로 기존 JavaScript 는 "브라우저" 위에서 동작하고 Python 이나 Ruby 같은 언어는 "컴퓨터" 위에서 움직인다.

이때 OS 기능에 액세스 할 수 있는가 없는가가 중요하다. "OS의 기능"이란 예를 들어 파일의 읽고 쓰기, 네트워크 통신 등의 기능을 말한다. 컴퓨터 위에서 동작하는 어플리케이션은 이러한 기능을 다룰 수 있다.

하지만 브라우저 위에서 동작하는 프로그램은 OS 의 기능에 액세스하는건 위험성이 있다. 어떤 사이트에 액세스 했는데 마음대로 컴퓨터 파일을 읽고 삭제하면 문제가 발생하기 때문에다. 따라서 JavaScript 는 OS 기능에 액세스하지 않도록 되어있다.

하지만 그렇다면 불편한 점이 많아 한정적으로 OS 의 기능에 액세스하게 해주는 것이 Node.js 이다.

즉 Node.js 는 JavaScript 의 실행환경이다.

 

이전에는 미리 만들어진 것을 각각 펼쳐서 보여주는 것이었다. ( 1.html, 2.html, 3.html 보여주기~~ ) 

이제는 Node.js로 '요청'에 대해 '반응'하는 방식으로 정보를 제공한다.

따라서 생산과 갱신 및 삭제하는데 이전처럼 하나씩 수정할 필요가 없는 것이다.

 

세줄요약

JavaScript 를 이용해서 Node.js 를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만들 수 있다.

기존 브라우저에서 작동하는 JavaScript 를 Node.js 에서 실행해 OS에 접근 가능하도록 만들었다.

(블로그에서 글쓰기 > 띄우는 것처럼 자동으로 템플릿에 맞게 딱 짜여진 결과물이 나옴)

 

node 명령어

npm init : Package.json 생성

npm install : Package.json 을 기반으로 설정 가져오기

npm install LIBRARY : 원하는 LIBRARY설치

node app.js : app.js 파일을 실행

 

 

---

URL 이란?

Protocol : 통신 규칙, 사용자가 서버에 접속할 때 어떤 방식으로 통신할 지 말하는 것

Host(domain) : 특정한 인터넷에 연결되어있는 컴퓨터 주소

Port :  한 대의 컴퓨터 안에 여러 서버가 있을 수 있다. 이때 클라이언트가 접속할 때 port 에 해당하는 서버와 소통하게 됨

Path : 그 컴퓨터 안에 있는 어떤 디렉토리 안에 어떤 파일을 가리키는지 알려줌

Query String : url 을 통해 웹 서버에게 데이터를 전달할 수 있음 / 시작은 '?' 으로 값의 구분은 '=' 로 연결은 '&' 로 약속되어 있다

 

우리가 원래 "local:3000" 을 입력해서 페이지를 출력 했었다.

이번에는 "local:3000/?id=HTML" 를 처럼 id 값에 따라 우리에게 필요한 페이지를 출력할 수 있다.

즉 Query Sting 을 사용해 원하는 페이지를 가져올 수 있다.

---

Vue Router 를 이용해 페이지 이동 쉽게 관리

Vue.js 앱에서 클라이언트 사이드 라우팅을 구현하기 위한 공식 라이브러리이다. 여기서 클라이언트 사이드 라우팅이란 웹 애플리케이션의 라우팅을 클라이언트 측에서 처리해 브라우저 자체에서 페이지를 동적으로 로드하고 갱신한다.

쓰는 이유

1. 전체 페이지를 새로고침하지 않고도 변경된 콘텐츠만 업데이트할 수 있다. 

2. 페이지 간의 전환이 부드럽고 자연스럽게 이루어진다.

3. 매 페이지 이동시 서버에 요청을 보내야 했지만 초기 페이지 로드 이후 서버 요청 없이 로드 가능

4. SPA(Single Page Application) 구축 : 초기 로딩 시에 필요한 모든 정적자원을 브라우저에 로드, 필요한 데이터만 동적으로 로드해서 페이지 간의 전환을 단순화하고 빠르게 만든다.

https://bicute.tistory.com/180

---

Node.js URL 모듈 사용 설명

https://plan2018.tistory.com/919

이전에는 미리 만들어 둔 1.html, 2.html, 3.html 들을 각각 띄웠지만 이제

하나의 html 템플릿을 만들어 두고 원하는 이름대로 a.html, b.html ... 계속 만들 수 있다.

 

생활코딩 Web2_Node.js 11 강 까지

https://www.youtube.com/playlist?list=PLuHgQVnccGMA9QQX5wqj6ThK7t2tsGxjm 

WEB2 - Node.js