7. HTML 태그 / CSS 속성

HTML 태그

HTML 을 작성함에 있어서, 자주 사용하는 태그를 더 학습하였다.

• <div></div> : Division 의 약자로, HTML에서 구분하고 싶은 부분에 div 태그로 감싸서 사용한다.
• <img src=''> : 이미지 경로를 src 부분에 입력하여 이미지를 불러온다.
• <p></p> : paragraph의 약자로, 문단을 만들 때 사용한다. 사용해보면 <br> 보다 줄 간격이 더 벌어져 있음을 확인할 수 있다.
• <table></table> : 표를 생성하는 태그로, 아래 <th></th> , <tr></tr> , <td></td> 태그들과 함께 사용한다.
  예시)

<table>
  <th> 열 </th> <!-- 열의 이름--->
  <tr> 행  <!-- 행의 이름--->
  <td> 데이터 </td> <!-- 데이터 값--->
  </tr>
</table>

열
데이터1
데이터2

table에는 text에 사용했던 css인 text-align 을 적용할 수 없기 때문에,
margin-left : auto ;
margin-right : auto ; 와 같이 작성하여 정렬한다.

a 태그도 text-align center가 적용되지 않기 때문에, div 태그로 감싸서 div에 css를 적용시킨다.

---

백엔드에 관하여

프론트엔드에 대한 기본적인 지식에 대해서 공부하였다.
이번에는 백엔드에 대하여 공부한다.

클라이언트-서버 구조에서 사실 서버 구조는 3가지로 구성된다.
웹 서버, 웹어플리케이션 서버, 데이터베이스 서버 이다.

클라이언트 <-> 웹 서버(WEB) <-> 웹 어플리케이션 서버(WAS) <-> 데이터베이스(DB)

이 3가지 서버에서 작업을 수행하는 것을 백엔드라고 부르는 것이다.

이 중에서 웹 서버는 데이터의 변동이 없는 정적 페이지를 처리하고,
웹 어플리케이션 서버와 데이터베이스 서버는 서로 소통하며 동적 페이지를 처리한다.

Node.js

자바스크립트를 활용하여 백엔드 프로그래밍을 하기 위하여 Node.js를 이용한다.
구글에서 간단하게 다운받고 설치할 수 있다.

Node.js 는 웹서버 / 웹어플리케이션 서버의 역할을 수행할 수 있고 데이터베이스 서버와 소통도 가능하다.

HTTP

Node.js 를 사용하기 전에, HTTP가 어떠한 형식으로 구성되어 있는지 살펴보자.
HTTP는 크게 보면 HEAD 부분과 BODY의 구조로 이루어져 있다.

HEAD :

• 통신 상태가 어떤지 알려준다. ex) 200 - 정상 , 404 - 클라이언트가 요청한 페이지를 서버에서 찾을 수 없음 , 500 서버의 오류

• 응답이 어떤 형태인지 알려준다. ex) 이 response는 html로 구성되었다.

Body :

• 사용자의 웹 페이지 화면에 보여질 데이터를 갖는다.

Node.js의 모듈로 웹서버 만들기

우선 확장자가 js인 server.js 파일을 생성하고, 다음과 같이 작성한다.

let http = require('http');  // http 프로토콜의 모듈 불러오기

// 요청이 왔을 때, 응답
function onRequest(request, response) { 
  response.writeHead(200, {'Content-Type' : 'text/html'}); // HTTP 프로토콜의 HEAD 속성
  response.write('Hello Node.js'); // Body 속성
  response.end(); // 응답 끝
}

// 서버 생성 및 8888 포트번호로 통신
http.createServer(onRequest).listen(8888); 

해당 js 파일을 실행하는 방법은 터미널에서 다음과 같이 입력한다.
node server.js

또한, 브라우저에서 localhost:포트명 을 입력하여 들어가보면,
Body에 작성했던 텍스트가 출력됨을 확인할 수 있다.

server.js 모듈화

우리가 Node.js 의 require() 을 불러와서 썼던 것처럼,
우리가 생성한 파일을 모듈화 시킬 수 있다.
server.js 파일을 모듈화 시켜보고 다른 파일에서 실행시켜 본다.

index.js 파일 생성 및 작성

    let server = require('./server.js')
    server.start()

server.js 파일 수정

function start(){
	function onRequest(request, response) { 
  		response.writeHead(200, {'Content-Type' : 'text/html'}); // HTTP 프로토콜의 HEAD 속성
  		response.write('Hello Node.js'); // Body 속성
  		response.end(); // 응답 끝
	}
}

exports.start = start

터미널에 node index.js 작동시켜보면, 정상적으로 작동함을 확인 가능하다.

URL(Uniform Resource Locator) 읽어내기

우리는 사용자가 어느 위치에 있는지에 따라, 다른 화면을 출력 해야한다.

server.js 파일에

let url = require('url')

을 추가하고, onRequest 함수에

let pathname = url.parse(request.url).pathname;
console.log(`pathname : ${pathname}`)

를 작성하면, 터미널에 pathname으로 "/" 가 출력됨을 확인 가능하다.
"/"는 가장 상위 페이지로, 우리가 홈페이지에 접속하면 가장 먼저 보여질 페이지로 보면 될 것 같다.
이제 웹페이지 주소에 localhost:8888/hello 라고 쳐보면 터미널에 pathname이 hello가 출력됨을 볼 수 있다.

따라서, 각 path마다 작동을 지정해주면
주소/이름 형식으로 각기 다른 페이지를 response해줄 수 있게 된다.

이제 router.js 파일을 생성하여, 사용자가 입력한 path 로 request가 흘러들어가게 하고,
handler.js 파일을 생성하여, 각 path에서의 동작을 구현해보겠다.

//router.js 
function route(pathname, handle, response){
  console.log(`pathname : ${pathname}`)
  console.log(handle[pathname])

  // 내가 알고있는 path이면, 해당 함수의 동작을 실행
  if ( typeof(handle[pathname]) == 'function'){
    handle[pathname](response); // handler.js의 main() or login() 함수이므로, 소괄호 사용.
  } else { // 내가 지정해놓은 path가 아니면 404 오류 발생시키기
    response.writeHead(404, {'Content-Type' : 'text/html'});
    response.write('404 not found.'); 
    response.end();
  }
}
exports.route = route;

//handler.js
function main(response){ // path에 "/" 이 입력되었을때, main함수 실행, 'Main Page' 출력
  response.writeHead(200, {'Content-Type' : 'text/html ;' });
  response.write('Main Page'); 
  response.end();
}

function login(response){ // path에 "/login" 이 입력되었을때, login함수 실행, 'Login page' 출력
  response.writeHead(200, {'Content-Type' : 'text/html'});
  response.write('Login Page');
  response.end();

}

let handle = {}; // key:value
handle['/'] = main;
handle['/login'] = login;

exports.handle = handle;

// server.js 의 onRequest에 다음 코드 추가
route(pathname, handle, response )

// index.js 에 다음 코드 추가
let router = require('./router.js')
let requestHandler = require('./requestHandler.js')

server.start(router.route, requestHandler.handle)

이렇게 4가지목적 ( 실제 실행 파일 / 서버 관리 / path 관리 / 각 path 에서의 동작 ) 으로 파일을 나누어서 웹페이지를 구성할 수 있었다.