Routes 추가하기
본인 서버가 다른 URL 에 응답하게 만들기
⏱ 예상 ~8분
01 · 읽기
본인 서버는 지금 하나의 URL 에만 응답해요: 루트 경로 /. localhost:3000/about 이나 localhost:3000/anything-else 에 연결하면, 에러가 나요.
진짜 웹사이트는 페이지가 많아요. 홈, 어바웃, 컨택, 제품 페이지, 등등 더 많이요. 각 페이지는 자체 route 가 있어요. 서버가 처리할 줄 아는 URL 경로죠.
routes 를 추가하는 게 서버한테 다른 URL 에 다른 내용으로 응답하라고 가르치는 방법이에요. 각 app.get() 호출이 새 route 를 만들어요.
💡 상상해 봐요routes 를 사무실의 접수처처럼 상상해 봐요. 누가 영업부를 찾으면, 접수원이 한 방으로 데려가요. 고객지원을 찾으면, 다른 방으로 데려가요. 본인 서버는 접수원이고, routes 는 경로예요.
핵심 정리
- 각 app.get('/path', ...) 가 새 route 를 만들어요
- 경로는 URL 에서 localhost:3000 뒤의 부분이에요
- 다른 routes 는 완전히 다른 내용을 돌려줄 수 있어요
- 이게 모든 웹사이트가 다른 페이지를 제공하는 방식이에요
02 · 실기 실습
텍스트 편집기로 app.js 를 열고, 새 routes 두 개를 추가해요. 기존 app.get('/') route 뒤, app.listen() 줄 앞에 두세요.
app.get('/about', (req, res) => {
res.send('This is the about page. I built this server myself!');
});
app.get('/contact', (req, res) => {
res.send('Contact me at: hello@mysite.com');
});03 · 실기 실습
본인 서버는 아직 옛 코드를 돌리고 있어요. 변경을 보려면, 서버를 멈추고 다시 시작해야 해요. 서버가 돌아가는 터미널로 돌아가서, Ctrl+C 로 멈추고, 다시 시작해요.
node app.js
04 · 퀴즈
app.get('/about', handler) 에서, /about 은 뭘 나타내나요?
- 보낼 파일의 이름
- 이 핸들러를 트리거하는 URL 경로
- 컴퓨터의 폴더
- 변수 이름
05 · 빈칸 채우기
Express 에서, app.get('/about', ...) 은 _____ 경로에 응답하는 route 를 만들어요.
06 · 실기 실습
이제 새 routes 를 테스트해요! 브라우저를 열고, 이 두 URL 에 연결해요: 1. http://localhost:3000/about — 본인의 어바웃 페이지 텍스트가 보여야 해요 2. http://localhost:3000/contact — 본인의 컨택 페이지 텍스트가 보여야 해요 http://localhost:3000 도 시도해서 원래 route 가 여전히 동작하는지 확인해요.
http://localhost:3000/about
http://localhost:3000/contact
07 · 퀴즈
본인 서버에 /, /about, /contact 의 routes 가 있어요. 사용자가 http://localhost:3000/pricing 을 방문해요. 어떻게 되나요?
- Express 가 자동으로 pricing 페이지를 만들어요
- 서버가 오류로 멈춰요
- 그 경로에 매치되는 route 가 없어서, 서버가 "Cannot GET /pricing" 오류를 돌려줘요
- 요청이 / route 로 리다이렉트돼요
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.