프로그래밍 공부 일기

2020년 6월 17일 Progate Lv.122
　Node.jsⅠ
웹 앱을 만드는 데 사용되는 Node.js를 배웠습니다. JavaScript를 서버 측에서 움직이는 구조이다.
이번은 Node.js의 프레임워크인 Express를 다룬다. Node.js에는 편리한 기능을 사용할 수 있도록 정리한 패키지가 있으며, Express는 그 패키지 중 하나이다.

npm

패키지를 준비하기 위해 사용하는 시스템이다. Express를 npm에서 설치하려면 npm install 명령을 사용하십시오.

터미널 (입력하면 Enter를 눌러 실행)

$ npm install express

　설치한 Express를 이용하기 위해서는 패키지의 로드와 사용할 준비가 필요. 아래의 문장은 정형문으로서 기억해 OK

app.js

const express=require('express'); //expressの読み込み
const app=exprss(); //expressを使用するための準備

서버 시작 (listen 메서드)

서버를 시작하면 서버가 요청을 받고 응답을 반환할 수 있다.
listen 메소드를 준비해 app.js 파일을 실행하면 서버를 기동할 수 있다. 파일을 실행하기 위해서는, node ファイル名로 한다.

app.js

//localhost:3000でアクセス可能なサーバーを起動
app.listen(3000);

터미널 (app.js 실행)

$ node app.js

라우팅

URL에 대응하는 처리를 실행하는 것.

app.js

app.get('/top', ()=>{ //URL「/top」にアクセスしたとき
  //トップ画面を表示
});

req와 res

라우팅 처리에서는 req (요청), res (응답)의 두 가지 인수를받을 수 있습니다.
라우팅 처리에서 res.render 라고 쓰는 것으로 지정한 뷰 파일을 브라우저에 표시할 수 있다.
→ 브라우저에 표시하는 외형 부분에는 EJS라고 하는 형식의 파일을 사용해, views 폴더에 배치한다. 외형을 만드는 파일을 뷰 파일이라고 한다.



app.js

app.get('/top', (req,res)=>{ 
  res.render('top.ejs'); //指定したファイルを画面に表示させる
});

EJS

Embedded Java Script의 약자로 HTML의 코드 안에 JavaScript를 임베드(embedded) 할 수 있다. EJS는 터미널에서 npm install ejs로 설치할 수 있습니다.

자바스크립트 사용

<% %> 또는 <%= %>로 묶는다. <% %>로 묶으면 브라우저에 아무 것도 표시되지 않습니다. 따라서 변수 등의 정의에 사용됩니다. 반대로 변수의 값 등을 표시하고 싶은 경우에는 <%= %> 를 사용한다. JavaScript를 사용할 수 있으므로 forEach 메서드 등 메서드도 사용할 수 있다. forEach 메소드를 사용하면 HTML을 직접 작성하는 것보다 깔끔하게 작성할 수 있습니다.

index.ejs

<% count item = {id:3, name="キャベツ"} %>
<p> id : <% item.id %> </p>
<p> name : <%= item.name %> </p>

　이 실행 결과는 id는 표시되지 않지만 name은 표시됩니다.

CSS 적용

Express에서는 CSS나 이미지등의 파일이 어디에 놓여져 있는지를 지정할 필요가 있다.


app.js

//publicフォルダ内のファイルを読み込めるようにする
app.use(express.static('public'));

top.ejs

<!--public内のパスを指定してCSSを読み込む-->
<link rel="stylesheet" href="/css/style.css">
<!--public内のパスを指定して画像を読み込む-->
<img src="/images/top.eng">

페이지 간 링크

/의 URL을 루트 URL이라고합니다. 가장 처음에 액세스하는 페이지는 루트 URL로 설정하는 것이 일반적이다.

app.js

app.get('/',(req,res)=>{
  res.render('top.ejs');
});

링크 버튼 추가

top.ejs (목록 화면으로)

<a href="/index">一覧をみる</a>

index.ejs (톱 화면으로)

<a href="/">LIST APP</a>