티스토리 뷰

안녕하세요



이번 강좌에서는 지난시간에 이어서 서버 응답에 관련된 부분을 진행하도록 하겠습니다!




[목차]


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








다음시간에는 아주 간단한 채팅창을 구현하고 서버와 실시간 통신하는 방법에 대해 알아보도록 하겠습니다





감사합니다!



댓글
  • 프로필사진 BlogIcon taehee.kim.dev 안녕하세요, 덕분에 정말 잘 공부하고 있습니다.
    질문이 있어서요.

    app.use('/css', express.static('./static/css'))
    app.use('/js', express.static('./static/js'))

    를 굳이 추가해주는 이유가 무엇인가요?
    외부 클라이언트가 서버의 디렉토리에 접근한다면 매우 위험하지 않나요?
    감사합니다.
    2019.08.12 13:41 신고
  • 프로필사진 BlogIcon 이근둥 자바스크립트나 CSS, 이미지 등의 파일은 웹페이지 접속 시 제공해야 하기 때문에 접근이 가능하도록 설정을 해야합니다.

    다만 정적 폴더를 설정한 디렉토리에 민감한 자료가 있다면 위험할 수 있습니다. 결론적으로 디렉토리의 용도에 맞게 사용하시면 됩니다. (필요한 웹 리소스만 존재하도록)
    2019.08.13 13:04 신고
  • 프로필사진 Inst 안녕하세요! 너무 감사합니다. 근데
    fs.readFile('./static/index.html', function(err, data) 이대로 실행하면 err가 나서
    fs.readFile('./static/js/index.html', function(err, data) 이렇게 실행하야 맞는거죠?
    2019.10.26 13:31
  • 프로필사진 BlogIcon 이근둥 파일 경로에 따라 다릅니다. 경로에 맞게 작성하시면 됩니다 2019.10.26 14:12 신고
  • 프로필사진 jhcplace@daum.net 원래 '반갑습니다!'라고 나와야 되는데, '諛섍컩�듬땲��.'라고 나와요. 어떻게 하면 될까요? 2019.12.08 16:59
  • 프로필사진 BlogIcon 이근둥 파일의 인코딩을 확인해주세요! 2019.12.13 18:50 신고
  • 프로필사진 ella 잘 보고 갑니다!! 2020.07.14 10:27
  • 프로필사진 BlogIcon 이근둥 댓글 감사합니다~ 2020.07.20 10:36 신고
  • 프로필사진 mazetap 안녕하세요. 공부하는데 정말 많은 도움 되었습니다~
    하나 궁금한게 있는데 방을 여러개 만들어서 채팅을 하게 하려면
    어떤식으로 해야하나요? 힌트라도 주시면 감사하겟습니다!~~
    2020.09.27 02:16
  • 프로필사진 BlogIcon 이근둥 socket.io 공식 문서를 확인해보시면 독립된 방을 만들고 해당 방에서만 데이터를 주고받을 수 있는 자료가 있습니다. 해당 자료 확인해보시면 좋을 것 같습니다! 2020.10.18 22:50 신고
  • 프로필사진 Gogh app.get('/',function(request, response){
    fs.readFile('./static/index.html',function(err,data){
    if(err){
    response.send('에러');
    }else{
    response.writeHead(200,{'Content-Type':'text/html'});
    response.write(data);
    response.end();
    };
    });
    });
    이 부분에서 request가 찾을수없다고 나오네요 어떤식으로 해나요?
    힌트라도 주시면 감사하겟습니다!
    2020.12.05 17:43
댓글쓰기 폼