안녕하세요
이번 강좌에서는 지난시간에 이어서 서버 응답에 관련된 부분을 진행하도록 하겠습니다!
[목차]
1. 디렉토리 구조 잡기
2. HTML, CSS 예제 파일 생성
3. 서버 코드 수정
기존 파일에서 static 폴더를 생성합니다!
static 폴더 안에는 index.html 파일을 생성해주시구요
css 폴더와 js 폴더도 생성해주세요!
css 폴더 안에는 index.css 파일도 하나 생성해주세요~
생성한 index.html 파일에는 위와 같이 작성해줍니다
(또는 아래에서 다운로드)
index.html
그리고 index.css 파일에는 위와 같이 작성해줍니다!
(또는 아래에서 다운로드)
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 경로로 액세스할 수 있습니다!
아래 js 부분도 동일합니다!
이제 마지막으로 fs 모듈을 사용하여 index.html 파일을 읽고 클라이언트로 읽은 내용을 전달해줘야 합니다!
app.get() 부분에 위와 같이 코드를 추가합니다.
fs 모듈은 Node.js 에서 기본적으로 제공하는 모듈입니다!
파일과 관련된 처리를 할 수 있죠.
readFile() 함수는 지정된 파일을 읽어서 데이터를 가져옵니다!
만약 에러가 발생하면 err에 에러 내용을 담아오게 되죠
response(응답) 객체를 통해 읽어온 데이터를 전달해주어야합니다!
지난시간에는 response.send() 로 그냥 보내버렸는데 오늘은
head, write 등 다른 코드가 보입니다.
우리가 클라이언트에게 보낼 내용은 index.html의 내용입니다.
HTML 파일이라는 것을 알려야하기 때문에 헤더에 해당 내용을 작성해서 보내줍니다.
(writeHead)
헤더를 작성했으면 이제 HTML 데이터를 보내줍니다.
(write)
모두 보냈으면 완료됬음을 알립니다.
(end)
write를 통해 응답할 경우 꼭! end를 사용해주어야합니다.
저장 후 서버를 다시 시작해줍니다.
그리고 접속해봅시다!
HTML가 잘 전달되었고 CSS도 정상적으로 액세스가 가능합니다!
이제 index.html과 index.css를 사용하여 채팅창처럼 구현 할 예정입니다.
아까 css 폴더를 생성하고 js 폴더도 생성하였는데 js 폴더는 추후에 클라이언트 기능 구현할 때 자바스크립트 파일을 저장하는 용도로 사용할 예정입니다!
오늘 진행한 소스코드 및 리소스
https://github.com/leegeunhyeok/node-chat/tree/chapter_3
다음시간에는 아주 간단한 채팅창을 구현하고 서버와 실시간 통신하는 방법에 대해 알아보도록 하겠습니다
감사합니다!
