[Node.js 3강] Express 정적파일 서비스 Express How to serve static files

본 강의는 생활코딩 강좌를 바탕으로 복습하며 진행되는 코드들을 재구성한것입니다. 일부 코드들의 경우 호환성의 이유로 원본의 강좌와 다를수 있음을 알려드립니다.

NodeJS 6.11.0 LTS, Express 4.X 버전에서 완벽하게 작동하는것을 확인하였습니다.

2강의 내용과 비슷합니다. 다만 Express의 정적파일을 다루는 기능을 포함하고 있기에 하위강좌로 분류되지 않을까 생각됩니다. 이 강좌의 코드는 생활코딩과는 일부 다른점이 있습니다. Node 버전과 Express 버전이 업데이트되면서 발생되는 문제가 아닐까 싶은데 코드를 살펴보면서 확인하여봅시다.

전체적인 코드는 아래와 같습니다.

2강에서처럼 각자 라우팅 경로를 정해주고 있지만 path라는 모듈과 app.use(express.static(path.join(__dirname, 'public'))); 이라는 코드가 추가되어있음을 확인할수 있습니다. 정적인 파일을 서비스하는 경우에는 관례적으로 public 이라는 폴더안에 자료가 들어간다고합니다. 그래서 저는 프로젝트 폴더 안에 public 이라는 폴더를 생성해주었습니다.

경로 / 와 /login의 경우에는 2강에서도 확인해보았으니 정상적으로 작동됨을 확인하셨을 것이고 우리가 눈여겨보여야할것은 /route입니다. img라는 HTML 태그가 추가되어있는데 여기서 경로를 확인하여보면 /image.jpg라는 의미는 어디의 경로의 기준으로 image.jpg 파일을 불러오는지 궁금해야합니다.

위에서 static 폴더의 공간의 public이라고 정의해주었기에 public 폴더를 기준으로 주소를 생성하면 되는것입니다. 의외로 개발을 하다보면 경로문제에서 많은 시간을 잡아먹는 경우가 많아서 처음부터 경로문제를 확실히 개선하고 개발을 시작함이 좋은것같습니다.

결과는 아래와 같이 출력됩니다. 정상적으로 텍스트와 이미지가 로드됨을 확인할수 있습니다. 

다만 이 코드를 작성하면서 궁금했던점은 단입 웹앱에서야 이렇게 폴더한개를 만들어 서비스를 하면되겠지만 큰 기업들에서는 어떤방식으로, 분류로 폴더들을 관리하고 권한을 설정하는지 정말 궁금하더군요. 이것이 실무와 공부의 차이가 아닐까 생각합니다만.. 항상 실무적인 부분으로 적용한다고 생각하면 생각할것이 정말 많아지는것같습니다.