[Node.js 백엔드 기록] 3. html 이용해 form 데이터를 서버로 전달하기
[html 기본 구조]
html은 hypertext markup language이다.
hypertext는 링크를 통해 모든 문서가 연결되어 있는 구조로 일반적인 텍스트의 순차적인 구조를 뛰어넘는 비 순차적 접근법을 가진다. markup은 텍스트를 구조적으로 표현하는 방식이다. html은 정보를 구조적으로 표현하기 위해 tag 개념을 사용한다.
head tag <head> : 문서의 부가 정보를 담는 태그
body tag <body> : 문서의 컨텐츠를 담는 태그
Heading tag <h1> : h1 ~ h6가 존재하고, 숫자가 작을 수록 폰트 크기가 크다. 자동으로 줄 바꿈이 적용된다.
Paragraph tag <p> : 문단을 표현할 때 사용. 문단의 첫 줄 위에 줄 바꿈 적용 된다.
Line Break <br/> : html에서는 줄 바꿈이 적용되지 않는다. 문장 사이에 줄바꿈을 적용하기 위해 사용하기
Bold : <b> 단순 bold 처리, <strong> 중요한 text 표시 (웹 접근성, 음성 강조 등)
Italic : <i> 단순 bold 처리, <em> 중요한 text 표시 (웹 접근성, 음성 강조 등)
Underline : <u> 특정 문자에 언더라인 표시
Image <img> : html 문서에 이미지 삽입 가능,
src (이미지의 주소 정보), alt (이미지를 표시할 수 없을 때 사용 되는 대체 텍스트)
Link <a> : hypertext의 본질인 문서 간 연결을 생성. href : 링크의 주소
[path 모듈과 sendFile 함수를 이용해 html 파일 서버 전송]
path를 사용하는 이유 : 개발자가 경로 지정 시 잘못된 경로를 지정하는 실수를 예방하기 위함
1) express로 웹 서버를 구축하기
res.sendFile(경로 지정) : 웹페이지 디폴트 경로를 지정해주기, 절대 경로를 입력해줘야 한다.
/* index.js */
const express = require('express') // express 프레임워크 객체 생성
const app = express() // express 새 인스턴스 할당
const path = require('path');
app.get('/', function(req, res){
res.sendFile(html_path); // 뒤에서 html_path를 지정해줌
})
app.listen(3000, () => {console.log('Server listening on port 3000');});
2) 보내줄 html 웹페이지 생성
/*index.html*/
<!DOCTYPE html>
<html lang="ko">
<body>
<h2> hello world! </h2>
</body>
</html>
3) 'path'와 '__dirname' 변수를 사용하여 경로와 연결할 html 페이지 지정
path.resolve() : 경로를 설정해준다. 경로들을 조합하여 새로운 경로를 만들어준다.
__dirname : 현재 경로를 반환해준다.
const html_path = path.resolve(__dirname + '/index.html');
'Back-End > Node.js' 카테고리의 다른 글
| [Node.js 백엔드 기록] 4. method의 이해 & Path module (0) | 2023.07.20 |
|---|---|
| [Node.js 백엔드 기록] 2. Node.js 세팅, Express 설치, 기본 라우팅 (Localhost로) (0) | 2023.03.28 |
| [Node.js 백엔드 기록] 1. 웹서버 기본 지식 정리 (0) | 2023.03.26 |