49일차 - 익스프레스JS로 웹사이트 연결해보기
익스프레스JS로 웹사이트 연결해보기
오늘은 여러 HTML파일이 연결되어있는 연습용 웹사이트를 익스프레스JS로 서버를 열어 구동해보았다.
이 과정에서 연습용 웹사이트를 직접 만들어 올리고 싶었으나 만들 수 있는 시간이 부족하여 강사가 만든 코드를 그대로 가져와서 백엔드부분만 공부해보았다. 그래서 계속 직접 만들어서 복습하는데 써보려고 한다.
위 이미지는 오늘 사용한 연습용 웹사이트의 메인페이지이다. CSS 스타일과 약간의 자바스크립트 코드까지 적용되어있는 웹사이트이다.
백엔드 코드 분석
프론트엔드 부분의 코드 분석은 모두 건너뛰고, 일부 필요한 프론트엔드 코드와 백엔드코드를 써보려고 한다.
백엔드 코드는 생각보다 단순하다. 물론, 아직 이 연습용 웹사이트에 적용할 백엔드 코드가 모두 마무리된 것이 아니어서 그렇다. 오늘은 요청을 받고 응답을 보내는 출입구만 구축해본 것이다.
우선, 웹사이트를 구성하는 각 파일들의 경로를 설정하기 위해 path 메서드를 사용하여 상수에 저장해주었고, 익스프레스JS를 사용하기에 express로 불러와서 익스프레스JS 함수를 실행하여 app 상수에 저장해주었다.
이후에는 대부분 각 HTML 파일들의 경로를 지정하는 코드이다. 우선 사용자가 각 HTML 파일을 눌러 접속을 할 때 오는 요청을 받기 위해 get 메서드를 사용하고 각 HTML 페이지의 이름을 슬래쉬(/)를 붙여 콜백함수의 첫 번째 매개변수로 입력했다. 여기서 기본값으로 접속했을 때 뜨는 메인페이지는 슬래쉬만 입력했다.
두 번째 매개변수로 함수를 넣었고, 함수 내에서 처음에 상수에 저장한 path 메서드에 join 메서드를 사용하여 인수로 현재 경로를 뜻하는 __dirname과 각 HTML 파일명을 적어주었다. 그 다음으로 해당 파일의 경로를 htmlFilePath 상수에 할당해주었다.
그리고 사용자에게 HTML 파일을 보내기 위해 익스프레스JS의 sendFile 메서드를 사용하여 해당 HTML 파일을 사용자에게 반환해주는 코드를 작성했다. 이 sendFile 메서드는 인자로 전달된 파일을 사용자에게 전송하는 역할을 한다.
마지막으로 포트번호 3000으로 서버를 열어주었다.
이렇게 하고 localhost:3000으로 접속하니 스타일이 제외된 순수 HTML 파일만 표출되었다.
그래서 나머지 스타일파일도 내일 수업을 진행하며 연결해보려고 한다.
