response.end(): 웹 서버가 웹 브라우저의 요청에 응답하는 명령 (괄호 안의 내용을 웹 브라우저에 전달)
명령 프롬프트 명령어
- 디렉터리 이동 $ cd <이동할 경로>
- URL 형식
1. 프로토콜: 사용자가 서버에 접속할 때 어떤 방식으로 통신할 것인지 나타냄
HTTP: 웹 브라우저와 웹 서버가 서로 데이터를 주고받기 위해 만든 통신 규칙
2. 호스트 (도메인 네임) : 인터넷에 접속된 각각의 컴퓨터를 의미. 특정한 인터넷에 연결된 컴퓨터를 가리키는 주소
3. 포트번호: 한 대의 컴퓨터 안에 여러 대의 서버가 있을 수 있음. 클라이언트가 접속했을 때 어떤 서버와 통신할지 모호함. 포트 번호를 명시해 해당 포트로 연결된 서버와 통신함
4. 경로: 해당 컴퓨터 안에 있는 어떤 디렉터리에서 어떤 파일을 불러올 것인지 가리킴
5. 쿼리스트링: 쿼리스트링을 사용하면 웹 서버에 데이터를 전달할 수 있음. 쿼리스트링은 물음표? 로 시작하고 값과 값 사이는 앰퍼샌드 기호&로 구분, 이름과 값은 등호로 구분
Express 라우팅 처리
라우팅: URL 및 특정한 HTTP 요청 메소드 (GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것
- 라우트 핸들러
· req: Request로 클라이언트의 요청 정보를 담고 있음
· res: Response로 클라이언트에게 응답하기 위한 정보를 담고 있음
· next: 다음 미들웨어 함수를 가리키는 오브젝트
응답 메소드
클라이언트로부터 요청이 오면 라우트에서는 다음 메소드 중 한 가지 방법으로 응답을 전송하고 요청(request)-응답(response) 주기를 종료할 수 있습니다.
※ 라우트 핸들러 함수로부터 다음 메소드 중 어느 하나도 호출되지 않는 경우, 클라이언트 요청은 정지된 채로 방치됩니다.
|
메소드
|
설명
|
|
|
res.download()
|
파일이 다운로드되도록 프롬프트합니다.
|
|
|
res.end()
|
응답 프로세스를 종료합니다.
|
|
|
res.json()
|
JSON 응답을 전송합니다.
|
|
|
res.jsonp()
|
JSONP 지원을 통해 JSON 응답을 전송합니다.
|
|
|
res.redirect()
|
요청의 겨올를 재지정합니다.(redirect)
|
|
|
res.render()
|
뷰(View) 템플릿을 렌더링합니다.
|
|
|
res.send()
|
다양한 유형의 응답을 전송합니다.
|
|
|
res.sendFile()
|
파일을 옥탯 스트림의 형태로 전송합니다.
|
|
|
res.sendStatus()
|
응답 상태 코드를 설정한 후 해당 코드를 문자열로 표현한 내용을 응답 본문(body)에 담아서 전송합니다.
|
|
app.use() 함수
app.use() 함수는 Express 앱에서 항상 실행하는 미들웨어의 역할을 합니다. app.get(), app.post() 등과 달리 요청 URL을 지정하지 않아도 app.use()를 사용할 수 있으며, 해당 경우에는 URL에 상관없이 앱이 요청을 수신할 때마다 매번 실행됩니다.
· app.use는 지정된 경로에 지정된 미들웨어 함수를 마운트하는데 사용합니다.
· 모든(또는 특정) 요청에 대한 공통 로직을 처리하기 위해 사용할 수 있습니다.
· 주로 애플리케이션에 대한 미들웨어를 설정하는데 사용됩니다. (모듈식 라우터, 에러 핸들링, 공통 미들웨어, .. 등)
# app.use() 기본 문법
app.use(path, callback)
· path: 미들웨어 함수가 호출되는 경로입니다. 경로, 경로패턴 또는 경로와 일치하는 정규식 패턴을 나타내는 문자열일 수 있습니다.
· callback: 미들웨어 함수 또는 미들웨어 함수의 시리즈/배열입니다.
# 모든 요청에 대한 핸들링 : 경로(path)를 지정하지 않는 경우 모든 요청에 대한 공통 핸들링을 지정할 수 있습니다.
app.use(function (req, res, next) {
console.log('Time:', Date.now());
next();
});
# 특정 요청에 대한 핸들링
app.use('/admin/:id', function(req, res, next) {
// 관리자 권한 체크
next();
}
const http = require('http'); // 1
http.createServer((request, response) => { // 2
response.statusCode = 200;
response.setHeader('Content-Type', 'text/plain');
response.end('Hello World');
}).listen(3000); // 3(1) http 모듈을 로딩하여 변수 http에 할당하였다.
- Node.js는 파일과 1대1 대응 관계를 가지는 module 단위로 각 기능을 분할한다.
- 하나의 모듈은 자신만의 독립적인 스코프를 가지므로 전역 변수의 중복 문제가 발생하지 않는다.
- 모듈은 module.exports 또는 exports 객체를 통해 정의하고 외부로 공개한다.
- 공개된 모듈은 require 함수를 사용하여 임포트한다.
- 위 예제에서 http는 기존 선언된 모듈이며 이를 require 함수로 import 한 것이다.
(2) http 모듈의 createServer([requestListener]) 메소드를 사용하여 HTTP 서버 객체를 생성한다.
- HTTP 서버 객체는 EventEmitter 클래스를 상속한 것으로 request Listener 함수
(request 이벤트가 발생하면 이를 처리하고 response를 반환)를 호출한다.
- request Listener 함수는 request와 response 객체를 전달받으며 HTTP 요청 이벤트마다 한 번씩 호출된다.
(3) createServer 메소드는 HTTP 서버 객체를 반환하고, 이 객체의 listen 메소드에 포트 번호 3000을 전달하여 서버를 실행한다.
● URL에서 쿼리스트링 추출
Node.js의 url 모듈 사용
var queryData = url.parse(__url, true).query;url 모듈에 들어있는 parse 기능 사용. → 쿼리스트링을 객체로 변환하여 리턴함.
괄호 안의 _url은 사용자가 웹 브라우저를 통해 요청한 URL을 나타내는 request.url 값을 가진 변수.
이 값을 분석해서 URL 중에서 쿼리 스트링 문자만 추출함
+ pathname: path에는 쿼리스트링이 포함되어 있고, pathname(경로이름)은 사용자가 입력한 URL에서 쿼리스트링을 제외한 경로이름만 나타냄.
var pathname = url.parse(_url, true).pathname;pathname 변수를 선언하고 여기에 사용자가 입력한 URL 정보 중 경로 이름만 추출해 저장.
이 값이 루트인지 ('/') 비교해서 if문 블록으로 옮긴 기존 코드를 실행할지, else 블록에 새롭게 작성한 코드를 실행할지 결정.
if (pathname ==='/'){
//루트라면 기존 코드를 실행
}else{
//루트가 아니라면 새로운 코드를 실행
}하지만 pathname은 쿼리스트링을 제외한 경로 이름을 가지므로 이것만으로는 사용자가 무엇을 요청했는지 알 수 없음.
예를 들어, 사용자가 '/?id=CSS'를 요청해도 pathname은 '/', 즉 홈을 가리키기 때문
● 요청 값에 따라 다르게 응답하기
response.end(fs.readFileSync(__dirname + _url));쿼리스트링에서 입력받은 id 값을 웹 페이지로 출력
response.end(queryData.id);
res.writeHead(상태코드, 헤더 정보) - 응답 헤더에 대한 정보를 기록하는 메서드
- 파일 목록 읽기
var fs = require('fs'); // file system 모듈 가져오기
fs.readdir('./data', function(err, filelist){
console.log(filelist);
});
// fs모듈의 readdir함수를 사용해
// 첫번째 인자로 파일 목록을 읽을 폴더를 가져오고
// 콜백함수의 두번째 인자로 폴더의 파일목록(filelist)을 가져옴[결과]
console.log(filelist) -> ['file1', 'file2', 'file3']
- readdir는 파일의 목록을 배열로 가져옴
- express 모듈
get(): 주소창에 입력 받았을 때 실행할 사항들을 나타내는 라우트 함수. 도메인 뒤에 붙은 주소가 해당 함수에 ㄷ들어가 있는 값과 일치하면 해당 함수에 들어가 있는 함수가 실행됨.
post(): get은 눈에 보이는 주소창에 눈에 보이는 주소를 쳐서 요청을 받아 처리하는 것
post는 눈에 보이지 않는 주소를 요청받아 처리해주는 것
document.querySelector(css): 주어진 CSS 선택자에 대응하는 요소 중 첫 번째 요소를 반환
ex )
