.get() method 연습해보기

각자 자신에 해당하는 소개 패널 아래의 버튼을 클릭하면 새로운 페이지가 띄워지도록 .get() method를 통해 구현하세요.

1. 기억해야 할 것은 새 페이지를 띄우려면 무엇이 필요한가입니다. 가장 첫번째로 실제로 띄워질 페이지인 .html 파일입니다. .html 파일은 기본 설정일때에는 view 폴더 안에서 관리됩니다.

2. 또한 이러한 .html 파일을 불러오기 위해서는 app.js에서 request를 보내줘야 한다는 것! 이 때 .get() method가 필요합니다.

3. 이때 app.js에서 request를 보내고 render를 해주는 것까지 다한다면 나중에 코딩 내용이 많아질 경우 너무 길어질 수도 있기때문에 관리차원상 routes를 통해 이를 관리합니다.

//* app.js *//
var admin = require ('./routes/admin');    

4. 여기서 앞의 'vanns/intro'부분은 url로써 사이트주소줄에 보이는 주소를 의미합니다. 뒤의 admin.vanns 부분은 routes폴더 안에 있는 admin.js 파일 안의 vanns라는 function을 불러온다는 의미입니다.

//* app.js *//
app.get('/vanns/intro', admin.vanns); 

5. routes폴더 내에 admin.js나 새로운 .js 파일을 만들어서 .html을 렌더링해줍니다. 이때 exports를 통해 기능을 app.js와 연결할 수 있으며, 이때 app.js에서는 exports 뒤에 설정한 이름으로 routes를 해주면 됩니다.

6. 여기서 render는 그려준다는 의미로 이해하고, '/vanns/vannsIntro'는 view폴더 안의 vanns라는 폴더의 vannsIntro.html을 그려주란 의미입니다. swig엔진을 쓰기때문에 .html을 쓸 필요없습니다.

//* routes/index.js *//
exports vanns = function (req, res) {
res.render('./vanns/vannsIntro');
};

※ 이 내용은 node.js, mongoDB 스터디페이지 codeMembersPage에서 진행되는 내용을 정리한 것입니다. 모든 저작권은 본인에게 있으며 상업적 이용, 컨텐츠 변경 가능하며 저작자 표기만 해주시면 됩니다.