[node.js] ejs와 미들웨어를 사용한 데이터 출력
![[node.js] ejs와 미들웨어를 사용한 데이터 출력](/assets/img/web/nodejs/logo.png){kind=logo}
ejs와 미들웨어를 사용해 데이터를 화면에 출력해봅니다.
- 1. index.js 생성
- 2. main.ejs 생성
- 3. index.js - get(‘/’) 작성
- 4. main.ejs 확인
- 5. change.ejs 결과
- 6. index.js - get(‘/change’) 작성
- 7. change.ejs 결과
- 8. gugu.ejs 생성
- 9. index.js - get(‘/gugu’) 작성
- 10. gugu.ejs 결과
앞서 node.js의 기초와 ejs를 사용한 화면 출력을 살펴보았습니다.
이제 단순히 고정된 화면만 출력하는 것이 아닌 데이터를 전송하고 화면에 전송 받은 데이터를 출력하는 작업과 미들 웨어를 통해 정적인 파일을 불러오는 작업을 수행합니다.
우선 npm init을 통해 프로젝트를 생성한 상태에서 express와 ejs 모듈을 설치한 뒤 시작합니다.
1. index.js 생성
위와 같은 index.js를 생성합니다.
express 모듈을 불러온 뒤 view engine을 ejs로 설정합니다.
express.static() 통해 프로젝트 폴더 내의 ‘public’ 폴더의 내용을 로드하도록 작성하고 로드해올 정적인 파일을 담아놓을 public 폴더를 생성합니다.
마지막으로 listen()을 작성합니다.
2. main.ejs 생성
위 그림과 같이 views 패키지를 생성하고 main.ejs를 생성합니다. main.ejs는 다른 ejs 파일로 넘어가기 위한 화면입니다. <a> 의 href 값을 위와 같이 지정하면 같은 views 패키지 내의 ejs 파일로 넘어가도록 할 수 있습니다.
3. index.js - get(‘/’) 작성
위의 그림과 같이 main.ejs를 get 방식으로 호출하는 코드를 작성합니다.
‘localhost:8080’으로 접근시 바로 main.ejs가 출력되도록 경로를 ‘/’로 지정합니다.
4. main.ejs 확인
브라우저에서 ‘localhost:8080’에 접속해 main.ejs가 정상적으로 출력되는 것을 확인할 수 있습니다.
5. change.ejs 결과
정적인 이미지 파일을 불러오기 위한 change.ejs를 생성합니다.
먼저 expres.static()으로 public 폴더의 값을 로딩해오도록 설정했기 때문에 프로젝트 패키지 내에 public 폴더를 생성한 뒤 img 폴더를 생성한 후 이미지를 저장한 뒤 코드를 작성합니다.
change.ejs의 경우 jQuery를 사용해 이미지의 변화를 확인하는 예제입니다. 위 그림과 같이 버튼을 클릭할 경우 이미지가 바뀌도록 코드를 작성합니다. 이 때 이미지의 경로는 public 폴더부터 시작해 ‘./img/이미지명’으로 지정합니다.
6. index.js - get(‘/change’) 작성
change.ejs를 get 방식으로 호출하는 코드를 작성합니다.
‘localhost:8080/change’으로 접근시 render()를 통해 change.ejs가 출력됩니다.
7. change.ejs 결과
브라우저에서 ‘localhost:8080/change’로 접근한 결과 정상적으로 이미지가 출력되는 것을 확인할 수 있습니다.
8. gugu.ejs 생성
마지막으로 index.js로부터 값을 받아와 화면에 출력하도록 하는 gugu.ejs를 생성합니다.
ejs는 ‘<% %>’를 통해 html 태그 내에서도 script를 작성할 수 있습니다. 위 그림을 살펴보면 <body>태그 내에 자바스크립트가 작성된 것을 알 수 있습니다. 이 때 ‘<%= arr[i] %>’를 살펴보면 gugu.ejs 내부에 선언된 값이 아니지만 작성되었습니다. 이는 서버로부터 넘어온 arr이라는 값을 사용하겠다는 표현입니다.
gugu.ejs를 정상적으로 화면에서 출력하기 위해서는 get 방식으로 호출할 때 arr값을 같이 전달해야 합니다.
9. index.js - get(‘/gugu’) 작성
gugu.ejs를 get 방식으로 호출하는 코드를 작성합니다.
‘localhost:8080/gugu’으로 접근시 render()를 통해 gugu.ejs가 출력됩니다.
이때 render()의 파라미터로 ‘gugu’만 작성된 것이 아닌 ‘{arr:[1, 2, 3, … , 8, 9]}’이 추가로 들어간 것을 확인할 수 있습니다. 이를 통해 브라우저에서 get으로 ‘/gugu’를 호출 시 gugu를 불러올 때 arr값을 전달된 채로 가져올 수 있게 됩니다.
10. gugu.ejs 결과
브라우저에서 ‘localhost:8080/gugu’로 접근한 결과는 위와 같습니다.
index에서 선언 및 할당하지 않았던 arr값이 정상적으로 사용되어 구구단이 출력되는 것을 확인할 수 있습니다.
