-
Web 백엔드 (5) / HTML과 CSS 연결해주기Programming/Web Programming 2023. 5. 12. 07:01
HTML, CSS파일을 서버에서 불러와보자.
클래스 101 [유료강좌]
개발자 사관학교 - [웹 개발자 단과반 2교시] MySQL, Node.js 백엔드 속성 실무!
https://class101.net/ko/products/5fac071c1105fb001383cd2a
[웹 개발자 단과반 2교시] MySQL, Node.js 백엔드 속성 실무! | 개발자 사관학교
웹 개발자 단과반이 필요한 이유는 뭘까요? 📍 대체 뭐부터 개발해야 할지 모르겠어요. 원래 처음 개발을 배우면, 뭐부터 시작할지 모르기 때문에 막막합니다. 개발 방향성이 없으니 그걸 잡아
class101.net
CHAPTER 2: 본격! 백엔드 다루기, Node.js의 모든 것
[6. HTML, CSS 그림 파일 보여주기 (with 템플릿엔진 EJS)]
서버에서 만든 html과 css파일을 어떻게 node.js에 불러와줄 수 있을까?
app.js파일에 다음과 같이 작성해보자!
다음 세줄의 코드가 html와 css파일을 불러올 수 있도록 해준다.
구체적인 이해는 이후에 하나씩 해보면서 익힐 수 있다.
간단히 설명하자면,
app.set("view engine", ejs);
html과 css를 보여주는 엔진은 ejs템플릿을 사용하겠다는 의미이다.
app.set("view", "./views");
html 파일이 views폴더 안에 있다고 위치를 알려준다.
app.use(...)
middleware에서 정적인 파일들, css와 그림파일들의 주소를 알려준다.
파일이 저장되어 있는 public폴더의 위치를 상대적으로 찾을 수 있도록 express를 사용한다.
앞서 말했듯 ejs템플릿을 사용할 것이라고 코드에 작성해준다.
그리고 npm명령어를 통해 ejs템플릿도 다운받아주어야 한다.
npm install ejs
vscode내 터미널에서 위 명령어를 통해 다운 받아줄 수 있다.
위와 같은 화면이 나온다면 성공적으로 설치된것이다. ejs는 단순히 서버에서 그림파일을 어떻게 보여줘야할지 뿐만 아니라,
데이터도 함께 넘겨줄 수 있다.
실제 사용한 예제를 살펴보면서 천천히 이해해보자.
<html 파일 연결하기>
기본페이지 안에 res.render(); 코드를 작성한다.
res.render()은 그림파일(html 등등..)을 그려줄때 사용하는 함수이다.
반면 send는 데이터, 문자열 등을 보내줄때 사용하는 함수이다.
안에는 index라는 html 파일 이름을 써준다.
앞에 경로없이 바로 index를 써주어도 되는 이유는 앞서 설정해주었기 때문이다.
views가 ./views폴더 안을 바라보도록 설정했기 때문에 상위 경로를 써주지 않고도 index 파일을 바로 찾을 수 있다.
만약 views폴더 안에 admin 폴더 안에 index파일이 있다면,
res.render("admin/index"); 라고 작성해주어야 한다.
views 다음의 경로를 써주면 되는 것이다.
서버에서 html을 불러와주기 위해 index.html 파일 안을 채워준다.
간단하게 <h1>태그로 글씨가 나타나도록 했다.
파일을 잘 저장한 후에 서버를 실행시키고 주소에 접속해본다.
하지만 에러가 나타났다.
주의할 점은 ejs 템플릿을 이용했기 때문에 html파일이 아닌, ejs확장자로 바꿔주어야 한다.
화면에 html이 잘 연결되어 나타나는 것을 볼 수 있다.
viewengine을 ejs로 해주었기 때문에 확장자명을 바꿔줘야 한다는 점이 중요하다.
EJS 템플릿의 또 하나의 특징은 그림 파일과 함께 데이터를 넘겨줄 수 있다는 것이다.
앞서 index파일을 render해주는 부분에서 title이라는 key에 "EJS 메인 페이지" 라는 문자열을 적는다.
<h1>태그에 EJS 명령어를 입력해준다.
마치 html태그처럼 ejs도 <> 그리고 그 안에 %라는 심볼을 사용해 ejs 명령어임을 나타낸다.
다시 접속해보면 title로 넘겨준 값이 나타나는 것을 볼 수 있다.
<CSS 파일 연결하기>
css파일에 대한 설정은 여기에서 해주고 있다.
css파일과 그림파일들은 public이라는 폴더 담겨 있고 해당 폴더에서 꺼내 사용할 것이다 라는 의미이다.
(물론 이렇게 간단하지는 않겠지만! 가볍게 이해해본다면 이렇다.)
작업 폴더 안에 public폴더를 만들어주고 그 안에 main.css파일을 만든다.
그 다음에 프론트엔드에서 해주었던 것처럼 파일을 연결해준다.
설정해주었던 public폴더 이후 경로부터 작성해주면 된다.
css파일 내부에는 간단하게 모든 색상을 파란색으로 바꿔주도록 했다.
잘 저장해준 뒤에 다시 주소에 들어가면 스타일이 적용된 것을 볼 수 있다.
html과 css를 연결해보았다.
다음에는 mySQL을 공부해볼 시간이다!
오랜만에 html css 코드들을 보니 너무 반갑다.
얼른 백엔드 공부를 마쳐서 웹페이지를 만들 날을 기대해본다...
출처: 클래스101 / [웹 개발자 단과반 2교시] MySQL, Node.js 백엔드 속성 실무! - 개발자 사관학교
'Programming > Web Programming' 카테고리의 다른 글
Web 백엔드 (7) / Sequelize를 통해 MySQL을 Node.js와 연결하기 (0) 2023.05.13 Web 백엔드 (6) / 데이터베이스란? MySQL 설치 및 사용 (0) 2023.05.13 Web 백엔드 (4) / API 만들기 - GET과 POST 방식(+Postman) (0) 2023.05.12 Web 백엔드 (3) / express, middleware, supervisor 사용해보기 (0) 2023.05.12 Web 백엔드 (2) / node.js와 npm 설치하기, 기본 구조 설계하기 (0) 2023.05.10