[생활코딩] WEB2 - Node.js (上)

0. 수강 준비

1) 수업 배경

* html을 수동으로 작성하는 데 지침.

* 방문자들이 자유롭게 의견을 남길 수 없음 (수정권한 일부 허용 불가)

* 구글이 크롬 v8을 통해 js 성능 개선시킴.

-> javascript 사용자들이 추가적인 언어 배우지 않고도 service side application(api)을 사용할 수 있도록 함

   즉, 웹브라우저 제어가 아닌 컴퓨터 자체 제어로 확장

2) 수업 목표

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

3) cmd 활용

 

cd : change directory (이 뒤에 경로 붙여넣어 이동)

 

 

 

 

 

node + 파일명 -> 실행값 보여줌

 

 

1. 동적 웹페이지 만들기

1) URL의 이해

http : hypertext transfer protocol

host(domain) : 인터넷에 연결되어 있는 특정한 컴퓨터를 가리키는 주소 ( = ip주소)

:3000 : port 번호 (한 대의 컴퓨터 안에 있는 여러 서버 중 하나)

        *보통 인터넷 주소에서는 안 보이는데, 인터넷 기본 포트인 80번이 생략된 것

path : 어떤 디렉토리의 어떤 파일인지

?query string : 웹 서버에게 읽고 싶은 정보를 알려주는 부분.

우리는 이 부분에 따라 적당한 정보를 사용자에게 보여줘야 한다.

     * ?(속성 이름)=(값)

 

2) URL을 통해 입력된 값 사용하기

수업 내용이 잘 이해가 안 갔다. 찬찬히 읽으면서 알아내기

각 변수에 묘듈을 요구해(require) 얻은 값을 대입함.

 

app에 createServer를 써서 새로 생성한 ip주소를 저장.

재료는 request(요청객체)와 response(응답객체).

변수 _url에 url을 저장.

* 변수_url (url 주소) ≠ 변수 url (모듈유형 url)

변수 queryData는 url의 _url값을 분석(parse)해서 그 중 query string을 저장함.

 

여기 있는 if문(favicon 요청) 무시

 

그리고 성공적(200)으로 id값을 반환하며 종료.

 

 

*parse하면 이렇게 분석해줌.

 

 

 

 

 

 

 

 

 

3) 동적인 웹페이지 만들기

일단 되는 게 외 돼는지만 알고 넘어가 준다.. ^^

 

 

 

queryData.id 값은 결국 각 페이지의 타이틀과 같은 값이므로 아예 var title로 지정해 줌

if 메인페이지에 들어오면 title = 'Welcome'

그게 아니면 template에 기본 내용과 ${title} 얹어서 보여 줌

 

-> 이렇게까지 하면 id값이랑 동일한 title과 heading 출력 가능

-> 한 페이지 안에서 사용자가 요청하는 정보를 고대로 보여줄 수 있으니 동적 페이지 맞음^^

 

 

 

 

 

 

 

 

 

 

 

 

4) 파일 읽어와 본문 구현

fs : file system 약자

fs.readFile : fs라는 모듈 안의 readFile 기능

 

fs.readingFile ~ : data 폴더 안에 있는, 타이틀 이름(queryData.id)의 파일에서 / utf8 형식으로 / 내용(description)을 읽어와라

+

그리고 template이라는 변수값 안에 ${title}과 ${description}을 고쳐넣어 재정의해라;

->

재정의 된 template 값을 응답값으로 내보내라;

 

 

 

 

 

2. Not found 오류 구현

: 존재하지 않는 정보(없는 query string 입력)에 대한 요청이 들어왔을 때 Not found 오류 메시지를 전송하는 방법

 

1) 사용자의 위치 파악

if 사용자가 root (url에 path 정보가 붙지 않은 상태)로 접근했는지 아닌지 확인

-> 즉 pathname이 '/'인지 확인

 

2) 맞다면 

  -> 다시 if queryData.id 값이 undefined로 나오는지 확인해서

      (첫화면에는 아직 아무 설정도 안 했으니까 undefined인 첫화면을 꾸며주려고)

  -> 맞으면 타이틀이랑 내용 넣어서 꾸며줌

  -> 아니면 querydataid=title 값 읽어서 각 카테에 해당하는 텍스트 보여줌

 

3) 아니라면

 -> 404 not found 를 출력

 

---

22.01.10 오늘의 실수

bitnami로 apache 켜고 -> cmd에서 js파일 켠 다음에 -> localhost로 접속한다

라는 이 단순한 3단계를 깜빡해서 왜 안 되는지 찾느라 시작부터 엄청 삽질했다 ㅠ

 

22.04.24 리뷰

파이썬에서 장고로 `` 안에 페이지 내용 적어 붙여준 거랑 본질적으로 같다.

이 때는 이해를 못 하고 튜토리얼에서 시키는 내용 따라하고 받아적는 걸로 벅찼었네.