app.get('/어쩌구', (요청, 응답)=>{
응답.send('보내줄 웹페이지 내용')
}) 새로운 페이지를 하나 만들고 싶으면 express문법으로 이렇게 작성하면 됩니다.
/어쩌구 부분은 자유롭게 작성하면 끝입니다.
app.get('/news', (요청, 응답)=>{
응답.send('오늘 비옴')
}) 아까 /news로 접속하면 뉴스같은거 보내주는 페이지 만들고 싶다고 했으니
저는 이렇게 작성해봤습니다.
요청(request, req)과 응답(response, res)은 클라이언트와 서버 간의 통신을 담당하는 객체야.
🔹 요청(request, req)
클라이언트(브라우저, 앱 등)가 서버에 데이터를 요청할 때 사용돼.
- 어떤 URL로 요청을 보냈는지 (req.url)
- 요청 방식 (req.method → GET, POST 등)
- 요청 보낸 사람의 정보 (req.headers, req.ip)
- 요청한 데이터 (req.body, req.query, req.params)
예제 1: 요청 데이터 확인
app.get('/hello', (req, res) => {
console.log(req.url); // "/hello"
console.log(req.method); // "GET"
console.log(req.headers); // 요청한 브라우저 정보 등
res.send('안녕!');
});
🔹 응답(response, res)
서버가 클라이언트에게 응답을 보낼 때 사용돼.
- res.send() → 간단한 텍스트, JSON 등 전송
- res.json() → JSON 응답
- res.status() → 상태 코드 설정
예제 2: 다양한 응답 방식
app.get('/data', (req, res) => {
res.json({ message: '데이터 응답' }); // JSON 데이터 반환
});
app.get('/error', (req, res) => {
res.status(404).send('페이지 없음'); // 404 상태 코드 응답
});
1️⃣ 클라이언트가 /news 경로로 GET 요청을 보냄
2️⃣ 서버가 응답(res.send())을 이용해 "오늘 비옴"을 보냄
- 만약 브라우저에서 http://localhost:3000/news를 열면 오늘 비옴이 표시돼!
📌 정리
- req → 클라이언트의 요청 정보를 담음 (URL, 데이터 등)
- res → 서버가 클라이언트에게 응답을 보냄 (send(), json(), status())
- app.get('/경로', (req, res) => { ... }) 구조를 따름
유저가 /shop 으로 접속하면 '쇼핑페이지입니다~' 라는 글자를 보여주고 싶으면 코드
app.get('/shop', (요청, 응답)=>{
응답.send('쇼핑페이지입니다')
})
문법을 외우려고 하지말고 express라이브러리 사용법 검색해서 사용하면되고
새로운 페이지가 필요할때 이 템플릿을 복붙해서 사용하면 된다.
app.get('/news', (요청, 응답) => {
응답.send('오늘 비옴')
}) 그래서 여기 있던 () => {} 부분도 함수 만들어서 집어넣는 문법입니다.
근데 지금보면 함수안에 함수를 집어넣고 있죠?
(app.get() 도 실은 함수입니다 함수 사용문법임)
이런 식으로 다른 함수 소괄호 안에 들어가는 함수를 멋있는 말로 콜백함수라고 부릅니다.
그냥 이름이 멋있으니까 알아두시면 됩니다.
실은 자바스크립트에서 특정 함수들이나 특정 코드들을 순차적으로 차례차례 실행하고 싶을 때
콜백함수를 자주 사용합니다.
그래서 이 코드가 어떻게 실행되냐면
누가 /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, MongoDB' 카테고리의 다른 글
| MongoDB 호스팅받고 셋팅하기 (1) | 2025.02.28 |
|---|---|
| 웹페이지에 디자인 넣으려면 (0) | 2025.02.27 |
| Node.js 란, 개발환경세팅하기 (0) | 2025.02.25 |