04. 실습 1 - 페이지와 연결 (get)

간단하게 html 파일을 하나 만들고 라이브 서버로 실행 하였다.

 

 

주소 값을 보면

 

127.0.0.1:5500/ex01.html

로컬 주소 : 포트번호 / 실행 파일 

이며 (5500은 vscode 라이브서버의 기본 포트 값)

 

node.js 를 서버로 사용하면 html 의 정보를  서버로 넘겨 줄 수 있다.

form 태그의 action 값은 우리가 정보를 보내줄 곳 또는 요청하는 곳 , 서버의 주소가 된다. 

 

 

서버를 키고 nodemon ex01.js

각각 1 2 3 값을 입력 후 제출을 누르게 되면 접속 확인 이라는 문구가 뜨게된다.

이전에는 우리가 직접 http://127.0.0.1:3000 이라고 주소창에 입력했었다면

 

이번엔 html 을 실행한 라이브서버인 

127.0.0.1:5500/ex01.html 에서 (일종의 클라이언트 에서) 제출 버튼을 눌러서

실행한 노드 서버인  http://127.0.0.1:3000  로 접속 (요청) 한 것을 알 수 있다.

 

이렇게만 보면 조금 감이 안오기 때문에 js 파일을 조금 더 건들여 보자.

 

 

 

 

사용자의 요청 에 따라서 서버가 응답을 해줘야 하는데  

우리는 어떤 response 도 하지 않은 상태이다. 

(아래 그림에서 Document 왼쪽에 원이 계속 도는 상태)

 

따라서 다음과 같이

 

response.end()  

 

응답 종료 를 하게 되면  빙글빙글 돌던 아이콘이 멈추고 바뀌게 된다.

 

 

또 주목할 점은 서버주소가 바뀌게 되는데 

우리가 설정한 서버로 이동하고 

?id=1&pw=2&nick=3 

? 뒤에 있는 값들이 우리가 설정한 

html 의 태그의 name 값과 사용자의 입력 값이 같이 전달되는것을 알 수 있다.

 

이를 get 방식이라고 부른다. (다른 방식으론 post 방식이 있다)

 

 

---

 

 

즉 주소에 들어있는 값을 이용한다면 우리가 사용자에게 받은 정보로 서버에서 다른 작업을 더 진행 할 수 있다.

 

url 모듈을 불러오고  

 

let query_data = m_url.parse(request.url, true).query

 

주소값을 해독 및 query_data 변수에 담는 다고 생각하면 된다. 

그리고 console.log 하게 되면 

 

 

 

객체 { }  형태로 key: value ==  name 값 : 입력값 

데이터를 터미널에서 확인 할 수 있다. 

 

그 아래 접속확인과 빈 객체 값은 Favicon 이라고 

홈페이지 상단에 보면 글쓰기 왼쪽에 아이콘 을 의미하며

 

기본적으로 이에 대한 정보를 요청하도록 되어있는데 설정한 값이 없어서 저렇게 보이는것으로 일단은 넘어가도록 하자.

 

---

 

이대로 끝내기 조금 아쉬워서 받은 정보를 한번 이용 해보도록 하자.

 

id pw nick 을 입력하고 제출하면  사용자가 입력한

 

id 님 환영합니다.

 

라는 문구가 홈페이지에 나오도록 해보겠다. 

 

 

무슨 뜻이냐면 클라이언트(html) 에게 받은 요청에 대해서 서버(nodejs)가 응답해준다는 것이다. 

 

 

 

18 줄의 코드 내용은  html 문서를 만들때 위에 있는 head 에 들어가는 기본적인 설정 같은 부분으로

일단은  고정값이라고 생각해도 좋다. 

 

19 줄 코드의 내용은 이제 html 의 간단한 구조이다.

html - body - h1 - 내용  - /h1 - /body - /html 

전체를 문자로 전달해야 되는데 

 

우리가 원하는 값 사용자가 입력한 id 만 바뀌게 하고싶으므로 이부분만 변수로 하기 위해서

` (백틱)  을 이용하여 진행 하였다. (잘 모르겠다면 구글에 'es6 백틱' 검색 ) 

 

 

작성한 파일을 저장하고

서버 켰는지 ( 터미널에서 nodemon ex01.js ) 확인 하고 

html 을 라이브서버로 실행해서

값을 적고 제출하면 

다음과 같이 내가 적은 id 값이 나오면서 환영합니다 까지

웹페이지에 표기가 된다. 

 

 

---

 

 

요약하자면 위와 같은 방법으로 사용자에게 받은 값을 서버에서 확인 하고 웹페이지에 표시 할 수 있었다.

 

하지만 get 방식은 주소창에 정보가 노출이 되어서 보안상 취약하며

 

이를 해결하기 위한 방법으로 post 방식이 있다. (get 방식보다 안전함)