[node.js] express, 웹어플리케이션 정적인파일 관리하기

[목표]

- express 복습 : express란 무엇인가? 어떤 역할을 하는가?

- express를 가지고 어떻게 웹어플리케이션을 만들어가는가 알아가기

[정적인파일이란]

- 입력받은 값에 따라 연산 결과값이 바뀌는 것처럼 동적인 것이 아닌 정적인 것

- html, img, css, js 파일 등 어플리케이션을 구성하는 파일들

- 정해진 디렉토리에 위와 같은 파일을 넣어두고 사용함

[웹어플리케이션 정적인파일 관리하기]

1) 앞선 포스팅에서 만든 app.js 와 같은 디렉토리에 public 디렉토리 만들기 : mkdir public

- 정적인파일을 넣어두는 디렉토리명을 관습적으로 public 이라함

2) public 디렉토리에 임의로 img 파일을 넣어둠

- aws 클라우드 서버를 사용 중 public 디렉토리에 임의 img 다운로드 받기 : (콘솔창) wget 이미지주소 

- wget으로 다운로드 받은 파일명 변경 : mv 파일명1 파일명2 (파일명1을 파일명2로 바꿈)

- 혹은 wget 옵션값을 붙여 다른이름저장하기 : wget -O [저장할파일명] [요청이미지주소] (대문자 O 임)

3) app.js에 아래 코드 집어넣기 : 알아보기쉽게 app 변수 선언 아래(vi 사용)

app.user(express.static("public"))

- 앞서 만든 디렉토리를 정적인파일을 넣어두는 디렉토리로 사용한다는 것을 정하는 명령어임(라우팅)

4) 콘솔창에 node app.js 입력 : 웹서버 구동

5) 브라우저를 켠 후 주소창에 http://퍼블릭아이피 혹은 127.0.0.1(로컬):포트번호/파일명.파일확장자

- app.js 에 넣었던 코드로 인해 public 이라는 디렉토리명을 주소에 넣지않아도 이미지파일(정적인파일)을 요청하면 서버가 응답함

[정적인파일 특징]

1) 파일 변경 시 서버를 재부팅하지않아도 변경한 파일이 바로 적용됨 : static 디렉토리로 선언된 곳만 적용

- 비교하기

1) static 폴더(/public)에 있는 이미지 변경하기 - aws를 이용한다면 콘솔탭 두개를 켜야지 바로 확인할 수 있음

1-1) wget으로 다른 이미지 다운로드(옵션 붙여서 파일 덮어쓰기하기)

1-2) 이미지를 변경한 후 브라우저에 같은 주소를 서버에 요청하기

1-3) 이미지가 변경되었는지 확인하기 : 변경됨 

2) app.js (js파일) 내에서 라우팅 메소드에서 html 코드 바로 변경해보기

2-1) 아래의 코드 app.js 파일에 삽입하기

- js 파일에서 html 삽입하기위해서는 `(esc 키 아래)를 삽입해줘야함

2-2) 서버 구동(node app.js) 및 브라우저로 주소로 요청(라우팅한 주소)

- 라우팅이란? 특정 주소(클라이언트 요청)와 특정 응답(서버 응답)을 연결해주는 것

- express 라우팅 메소드 : get, post, put, delete (HTTP method)

2-3) 다른 탭으로 app.js 파일에 삽입한 코드에서 일부 수정하기 : hello를 Hello로 고치기

2-4) 브라우저로 다시 요청(동일한 주소)

2-5) 내용이 변경안된 것을 확인할 수 있음 : static 폴더로 선언된 디렉토리 내에 있는 파일이 변경될 때는 바로 변경됨을 알 수 있음

[참고자료]

(1) nodejs 공식홈페이지 : http://expressjs.com/ko/starter/static-files.html

(2) 생활코딩 nodejs : https://opentutorials.org/course/2136/11857