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
는 현재 실행 중인 파일의 절대 경로가 들어 있습니다.
이것으로 표시를 할 수 있다고 생각합니다.
Reference
이 문제에 관하여(Express에서 CSS와 자바 스크립트를로드하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/k-ushiyama/items/3b66fa261a592263a346
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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
는 현재 실행 중인 파일의 절대 경로가 들어 있습니다.
이것으로 표시를 할 수 있다고 생각합니다.
Reference
이 문제에 관하여(Express에서 CSS와 자바 스크립트를로드하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/k-ushiyama/items/3b66fa261a592263a346
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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
는 현재 실행 중인 파일의 절대 경로가 들어 있습니다.
이것으로 표시를 할 수 있다고 생각합니다.
Reference
이 문제에 관하여(Express에서 CSS와 자바 스크립트를로드하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/k-ushiyama/items/3b66fa261a592263a346
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Express에서 CSS와 자바 스크립트를로드하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/k-ushiyama/items/3b66fa261a592263a346텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)