안녕하세요. 3년차 Spring 개발자 입니다.
갑자기 의아 하실꺼에요. Spring 개발자가 왜 node js를 ? 굳이?
그냥 재밌잖아요 ㅋㅋㅋ 저는 그냥 개발이 좋아서 일을 시작하게 되었구요
그냥 혼자 하면 재미없으니깐.. 이렇게라도 다같이 해보는 시간 가져봅시다. ㅎㅎㅎ
오늘 첫번째 시간은 node js 설치 그리고 서버 연결 을 목표로 해보죠. 금방 끝나요 ㅎㅎ
일단 node js 가 뭐냐 그냥 쉽게 말하면 javaScript 라는 언어를 가지고 페이지를 만든다고 생각하시면 되여 ㅎㅎ
깊은건 따로 알아보시구 저는 실전으로 넘어갑니다.
자 nodejs 설치 하셔야죠?
여기 들어가서 안정성으로 다운을 받으세요
자 다 다운을 받앗다?
그럼 cmd를 실행시킵니다.
저렇게 node -v를 쳤을때 버전이 나오면 잘 설치가 된거에요 ㅎㅎㅎ
-----------------------------------------------------------------------------------------------------------
님들 벌써 node js 설치가 끝났습니다. 참고로 우리가 실제로 코드를 짤때 cmd에다가 하면 힘들자나요
자 이제 vscode 를 구글에 치면
code.visualstudio.com/download
이거 쓸꺼에요 이거 개좋음 ㅋㅋㅋ
다운 받아보시면
파일 만드는 방법은 new file 클릭하시고 뒤에 .js만 붙여주시면 됩니다.
그리고 우리는 서버를 만들어야 합니다.
위쪽에
Termial 에 new Termial 을 눌러주시면 됩니다.
그리고 이제 우리는 라이브러리 설치를 할때 npm이라는 명령어를 쓸텐데
처음으로 npm init 을 누르면 설정하는 부분이 나옵니다.
이거는 어떤 라이브러리를 설치했는지 자동으로 기록해주는 라이브러리라고 보시면 되여
npm init 을 치면 package.json 파일은 자동으로 설정됩니다.
저기 entry 부분은 명칭은 아무거나 지정해주시면 됩니다
저렇게 설정한 뒤 package.json 을 보시면
이런식으로 나와있을껍니다 . 저는 server.js로 해놧네요 ㅎㅎ..
그리고 서버실행을 위해 우리는
npm install express
를 똑같이 명령어를 날려줍니다. 그러면?
이런식으로 등록이 되어있는걸 볼 수 있습니다
다음 각설하고 실행 소스만 드릴테니 테스트 해보세요
server.js
const express = require('express');
const app = express();
app.listen(8080, function(){
console.log('listening on 8080')
});
app.get('/pet',function(요청,응답){
응답.send('펫')
});
app.get('/',function(요청,응답){
응답.sendFile(__dirname + '/index.html')
});
index.html
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<button type="button" class="btn btn-primary" id="first">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
-->
</body>
</html>
bootstrap은 css를 마음껏 가져다 쓸 수 있는 페이지 입니다.
아마 저쪽을 계속 사용할 거 같습니다.
아 실행방법은
이렇게 하시면
이런 식으로 실행되는 모습을 볼 수 있습니다.
다음은 MYSQL 설치와 DB연동하는 부분을 해봅시다 !
'nodeJs' 카테고리의 다른 글
node JS 프레임워크 express-generator 사용해보기 (0) | 2021.05.25 |
---|---|
node js로 나만의 페이지 만들기 - 2 ( 데이터베이스 연결) (0) | 2021.05.10 |
댓글