Express에서 CSS와 자바 스크립트를로드하는 방법

1. 디렉토리 구성



Express에서 프로젝트를 만들면 디렉토리는 다음과 같이 구성됩니다.



자세한 내용은 앞으로 쓰겠습니다. css와 javascript를 템플릿 엔진에 적용하고 싶을 때는 다음과 같이 하십시오.

2. css 만들기



public 폴더 바로 아래의 stylesheets 폴더에 css 파일을 만듭니다.

3. javascript 작성



public 폴더 바로 아래의 javascripts 폴더에 js 파일을 만듭니다.
javascript의 경우는 API의 작성이거나 라우팅의 겸용이 있으므로,
그 점을 고려한 구현으로 해 주세요.

4. 적용



views 폴더에 작성한 (프로젝트 작성시는 1 파일만 작성되고 있다) 템플릿 엔진의 파일에 로드를 시켜 갑니다.

4-1. css의 경우



친숙하고 링크 태그를 사용합시다.
e.g.<link rel='stylesheet' href='/stylesheets/style.css' />public 폴더 바로 아래의 stylesheets 폴더의 style.css 파일이므로 좋습니까?

4-2. javascript의 경우



여기도 친숙하고 script 태그를 사용합시다.<script type="text/javascript" src='/javascripts/test.js'></script>이쪽도 문제 없네요?

5. 마지막으로



아직 끝나지 않습니다.
원시 HTML과 달리 태그로 로드하는 것만으로는 표시할 수 없습니다.
어떻게 하면 좋은지 말하면 디렉토리 구성에 있는 app.js 파일에 한 줄 씁니다.
app.js는 라우팅을 정의하기 때문에 전체 컨트롤러라고 생각하십시오.
그래서 다음을 추가합니다.app.use(express.static('public'));또는app.use(express.static(path.join(__dirname, 'public')));__dirname 는 현재 실행 중인 파일의 절대 경로가 들어 있습니다.
이것으로 표시를 할 수 있다고 생각합니다.

좋은 웹페이지 즐겨찾기