ChangHoon's IT Blog
[Node.js] 실시간 채팅 서비스 3 - 정적 파일 본문
안녕하세요
이번 강좌에서는 서버 응답에 관련된 부분을 진행하도록 하겠습니다.
[목차]
1. 디렉토리 구조 잡기
2. HTML, CSS 예제 파일 생성
3. 서버 코드 수정
기존 파일에서 static 폴더를 생성합니다.
static 폴더 안에는 index.html 파일을 생성합니다.
그 후 css 폴더와 js 폴더도 함께 생성합니다.
css 폴더 안에는 index.css 파일도 하나 생성해 주시면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>채팅</title>
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<div id="main">
Node.js 테스트!~안녕하세요!!!
</div>
</body>
</html>
생성한 index.html 파일에는 위와 같이 작성해 줍니다.
#main {
margin: auto;
margin-top: 100px;
background-color: gray;
text-align: center;
width: 200px;
}
그리고 index.css 파일에는 위와 같이 작성해줍니다!
간단한 예제 파일을 생성했으니 서버 코드에서 수정하여 클라이언트(웹) 에서 볼 수 있도록 해봅시다.
먼저 fs 모듈을 추가로 require 해줍니다!
그리고 app 생성 이후 코드에
app.use('/css', express.static('./static/css'))
app.use('/js', express.static('./static/js'))
를 추가해줍니다!
위 코드는 정적파일을 제공하기 위해 미들웨어(Middleware)를 사용하는 코드입니다.
app.use()를 사용하여 원하는 미들웨어를 추가하여 조합할 수 있습니다!
기본적으로는 클라이언트가 http://서버주소/css 로 액세스 할 경우 액세스가 거부됩니다.
서버측에서는 아무런 작업을 하지않았기 때문이죠
app.use('/css', express.static('./static/css')) 를 추가해주면 실행되는 서버 코드 기준 디렉토리의 static 폴더 안의 css 폴더는
외부 클라이언트들이 /css 경로로 액세스할 수 있습니다!
fs 모듈은 Node.js 에서 기본적으로 제공하는 모듈로서 파일과 관련된 처리를 합니다!!
readFile() 함수는 지정된 파일을 읽어서 데이터를 가져옵니다!
만약 에러가 발생하면 err에 에러 내용을 담아오게 되죠
response(응답) 객체를 통해 읽어온 데이터를 전달해주어야합니다!
지난 시간에는 response.send() 로 보냈는데 오늘은 head, write 가 보이는 것을 알수 있습니다.
그 이유는 우리가 클라이언트로 보낼 내용은 index.html 의 내용이기 때문에
write 와 end를 통해 데이터를 보내고 완료됨을 알려줍니다.
write를 통해 응답할 경우 꼭! end를 사용해주어야합니다
저장 후 서버를 다시 시작해줍니다.
그리고 접속해봅시다!
Node.js 테스트!~ 안녕하세요!!!
라는 문구와 뒷배경이 회색으로 나온다면 정상적으로 출력되신 겁니다.
아까 css 폴더를 생성하고 js 폴더도 생성하였는데 js 폴더는 추후에 클라이언트 기능 구현할 때 자바스크립트 파일을 저장하는 용도로 사용할 예정입니다
'Node.js' 카테고리의 다른 글
| [Node.js] 실시간 채팅 서비스 4 - Socket.io 기초 (0) | 2019.11.06 |
|---|---|
| [Node.js] 실시간 채팅 서비스 2 - 서버 실행 (0) | 2019.11.06 |
| [Node.js] 실시간 채팅 서비스 1 - 준비단계 (0) | 2019.11.06 |
| [Node.js] Node.js 정의, 설치 및 개발환경 준비 (0) | 2019.11.06 |
