get 의 예시
/beauty 을 주소로 get요청하면 /beuty에 들어가면 뷰티에 관련된 것을 입력해놓았다면 그것을 보여줌
const express = require('express');
const app = express(); // 설치 라이브러리 참고해서 객체 만들어줘
app.listen(8080, function(){
console.log('listening on 8080')
});
// 누군가가 /pet으로 방문하면..
// pet관련된 안내문 띄우기
app.get('/pet', function(요청, 응답){
응답.send('펫용품 쇼핑 페이지임')
});
app.get('/beauty', function(요청, 응답){
응답.send('뷰티용품 쇼핑 페이지임')
});nodemon 설치를 해보자
터미널 켜신 다음 npm install -g nodemon 입력하시면 됩니다.
자동적으로 수정사항을 서버에 반영해준다.
nodemon이 vscode 창이 닫혀서 반영을 못해줄 경우
터미널에서 아래 명령어를 실행한다.
nodemon server.js(파일명)app.get('/', function(요청, 응답){
응답.sendFile(__dirname + '/index.html')
});
이러한 코드를 통해서 파일내용 전달가능.
시작을 위해선 아래의 template 코드를 html에 타이핑.
이후에 본인이 원하는 디자인 코드들을 찾아서 복붙.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
-->
</body>
</html>내가 짠 html 코드
<!doctype html>
<html lang="en">
<link rel="stylesheet" href="style.css">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div>
<p>할일</p>
<div class="inputbox" style="width: 100%; height: 50px; border: 1px solid gray; margin-bottom: 20px;"></div>
<p>Due date</p>
<div class="inputbox" style="width: 100%; height: 50px; border: 0.1px solid gray; margin-bottom: 20px;"></div>
</div>
<button type="button" class="btn btn-danger">Submit</button>
.. 정리하려고 봤는데 그냥 한바퀴 돌고나서 정리해야될듯. 모르는게 node.js에 너무많다. 굳이 css 적용해보려 했다가 시간만 1,2시간 날린듯
그래도 css 아직 안까먹었더라.ㅎㅎ
기적을 한웅큼 품은 js러버