저번시간에 서버를 간단하게 만들어봤습니다.
근데 메인페이지 하나만 만들어봤는데
이번엔 여러 페이지를 더 만들고 싶으면 어떻게할지 알아봅시다.
근데 만들기 전에 실제 사이트들은 어떤 식으로 여러가지 페이지들을 만들어놨는지 구경부터 해봅시다.
예를 들어 네이버 웹툰같은 사이트 방문해보면
comic.naver.com
여기로 접속하면 메인페이지가 보이긴 하는데
URL 뒤에다가 /webtoon 을 붙여서 접속하면 오늘의 웹툰 페이지 보여주고
URL 뒤에다가 /challenge 를 붙여서 접속하면 도전만화 페이지를 보여줍니다.
네이버 웹툰 말고도 다른 사이트도 이런 방식으로 페이지를 나눠놓는데
우리도 그렇게 만들면 될 것 같습니다.
주소창에 입력하는 URL을 기반으로 각각 다른 페이지를 보내줍시다.
새로운 페이지를 만들어보자
오늘의 뉴스같은걸 보여주는 페이지를 만들고싶으면 어쩌죠?
예를 들면 /news라는 URL로 유저가 접속하면 오늘 뉴스를 보내주는 페이지를 하나 만들고 싶습니다.
그럼 코드를 어떻게 짜야될까요?
저번시간코드를 잘 살펴보면 되어서 눈치만 좋으면 실은 알아서 할 수 있습니다.
app.get('/어쩌구', (요청, 응답)=>{
응답.send('보내줄 웹페이지 내용')
}) 새로운 페이지를 하나 만들고 싶으면 express문법으로 이렇게 작성하면 됩니다.
/어쩌구 부분은 자유롭게 작명하고
보내줄 내용 부분도 알아서 작성하면 끝입니다.
app.get('/news', (요청, 응답)=>{
응답.send('오늘 비옴')
}) 아까 /news로 접속하면 뉴스같은거 보내주는 페이지 만들고 싶다고 했으니
저는 이렇게 작성해봤습니다.
그럼 이제 파일저장하고 터미널에서 실행하고 있던거 컨트롤 c 눌러서 끄고
다시 node server.js 이거 파일 실행해보면 반영됩니다.
진짜로 웹브라우저 켜서 /news 페이지로 접속해보시길 바랍니다.
새로운페이지 완성
Q. 그럼 유저가 /shop 으로 접속하면 '쇼핑페이지입니다~' 라는 글자를 보여주고 싶으면 코드 어떻게 짬?
app.get('/shop', (요청, 응답)=>{
응답.send('쇼핑페이지입니다')
}) 이런 코드를 밑에 추가하면 되겠군요
(참고) 이런거 새로나오는 문법 하나하나 외우고 이해하려고 하는 분들이 있는데 그러지 마십시오.
그냥 express 만든사람이 이렇게 쓰라고 만들어놓은 'express 라이브러리 사용법'이기 때문에
우리도 거기 맞춰서 쓰는 것일 뿐이지 문법을 굳이 이해할 필요는 없습니다
그리고 까먹으면 express 사용법 검색해보면 되기 때문에 그냥 복붙해서 써도 별 상관없습니다.
그래서 서버개발은 뭔가 이해하고 직접 코드짜는 일이 별로 없고
그냥 라이브러리 사용법대로 코드짜면 개발 끝입니다.
오늘의 결론은 그냥 여러분들 사이트에 새로운 페이지가 하나 필요할 때 마다 요 템플릿 그대로 복붙해서 쓰면 됩니다.
잠깐 자바스크립트 문법 설명
function 함수1(){ }
var 함수2 = () => { }자바스크립트에선 function 키워드를 쓰거나
그거대신 => 기호를 쓰거나 해서 함수를 만들 수 있습니다.
app.get('/news', (요청, 응답) => {
응답.send('오늘 비옴')
}) 그래서 여기 있던 () => {} 부분도 함수 만들어서 집어넣는 문법입니다.
근데 지금보면 함수안에 함수를 집어넣고 있죠?
(app.get() 도 실은 함수입니다 함수 사용문법임)
이런 식으로 다른 함수 소괄호 안에 들어가는 함수를 멋있는 말로 콜백함수라고 부릅니다.
그냥 이름이 멋있으니까 알아두시면 됩니다.
실은 자바스크립트에서 특정 함수들이나 특정 코드들을 순차적으로 차례차례 실행하고 싶을 때
콜백함수를 자주 사용합니다.
app.get('/news', (요청, 응답) => {
응답.send('오늘 비옴')
}) 그래서 이 코드가 어떻게 실행되냐면
누가 /news로 접속하면 자동으로 app.get() 이라는게 함수가 실행되어서 접속요청을 처리해주는데
근데 app.get 함수가 실행되고 나서 그 다음에 바로 콜백함수 내에 있는 코드가 실행됩니다.
그런 식으로 동작합니다.
참고로 콜백함수는 맘대로 쓸 수는 없고 콜백함수 쓰라는 곳만 쓸 수 있습니다.
그래서 아무튼 함수 소괄호 안에 들어가는 함수를 '콜백함수'라고 부른다는 것만 상식으로 알아둡시다.
html 파일 보내기
지금은 메인페이지 접속하면 단순한 문자하나만 보내고 있는데
그게 싫고 이쁜 웹페이지를 보여주고싶다면 html 파일을 보내주면 됩니다.
html 파일이 뭐냐면 그냥 웹페이지 레이아웃 만들 때 쓰는 파일입니다.
그 안에 html css 문법으로 코드 열심히 짜면 이쁜 웹페이지 레이아웃을 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
안뇽
</body>
</html> server.js 파일 옆에 index.html 같은 html 파일 하나만 만들고
위처럼 내용을 채워봅시다.
이게 html 파일 기본 템플릿이고 <body> 안에 웹페이지 디자인 시작하면 됩니다.
기본 템플릿은 매번 타이핑할 필요 없고 VSCode 에디터에선 ! 느낌표 적고 엔터나 탭키 누르면 자동완성 될 수 있습니다.
아무튼 만든 html 파일을 유저에게 전송하려면 어떻게 하냐면
app.get('/', function(요청, 응답) {
응답.sendFile(__dirname + '/index.html')
})누가 메인페이지 방문시 html 파일 보내라고 코드는 이렇게 짭니다.
1. 응답.send가 아니라 .sendFile('파일경로') 입력하면 이 파일을 유저에게 보내줍니다.
2. 파일경로를 적고 싶으면
__dirname이라고 쓰면 (언더바 2개) 현재 server.js 파일의 절대경로가 나옵니다.
근데 index.html은 server.js와 같은 폴더에 있으니까
__dirname 뒤에 /index.html 만 추가하면 index.html 파일경로가 나올거같군요.
그래서 터미널에서 실행하고있던거 끄고 다시 터미널에 node server.js 입력해서 파일실행해봅시다.
이제 메인페이지로 접속하면 html 파일이 보이죠?
안보이면 오타거나 파일 저장을 안한 것임
오늘 배운 내용을 요약해보면
1. 웹페이지 하나 만들고 싶으면 app.get 부터 3줄 가져다가 씁시다.
2. 함수 소괄호 안에 들어가는 함수를 콜백함수라고 부르고 코드들을 순차적으로 실행할 때 가끔 씁니다.
3. html파일 보내고 싶으면 응답.sendFile() 쓰면 됩니다.
'Node.js' 카테고리의 다른 글
| node>MongoDB에서 데이터 출력하기 (array/object 문법) (6) | 2024.07.25 |
|---|---|
| node>MongoDB와 서버 연결하려면 (5) | 2024.07.25 |
| node.js>MongoDB 호스팅받고 셋팅하기 (5) | 2024.07.25 |
| node.js>웹페이지에 디자인 넣으려면 (3) | 2024.07.25 |
| Node.js> Node.js, Express 설치와 셋팅 (3) | 2024.07.25 |