안녕하세요. 3년차 Spring 개발자 입니다.
갑자기 의아 하실꺼에요. Spring 개발자가 왜 node js를 ? 굳이?
그냥 재밌잖아요 ㅋㅋㅋ 저는 그냥 개발이 좋아서 일을 시작하게 되었구요
그냥 혼자 하면 재미없으니깐.. 이렇게라도 다같이 해보는 시간 가져봅시다. ㅎㅎㅎ
오늘 첫번째 시간은 node js 설치 그리고 서버 연결 을 목표로 해보죠. 금방 끝나요 ㅎㅎ
일단 node js 가 뭐냐 그냥 쉽게 말하면 javaScript 라는 언어를 가지고 페이지를 만든다고 생각하시면 되여 ㅎㅎ
깊은건 따로 알아보시구 저는 실전으로 넘어갑니다.
자 nodejs 설치 하셔야죠?
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
여기 들어가서 안정성으로 다운을 받으세요
자 다 다운을 받앗다?
그럼 cmd를 실행시킵니다.
저렇게 node -v를 쳤을때 버전이 나오면 잘 설치가 된거에요 ㅎㅎㅎ
-----------------------------------------------------------------------------------------------------------
님들 벌써 node js 설치가 끝났습니다. 참고로 우리가 실제로 코드를 짤때 cmd에다가 하면 힘들자나요
자 이제 vscode 를 구글에 치면
code.visualstudio.com/download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
이거 쓸꺼에요 이거 개좋음 ㅋㅋㅋ
다운 받아보시면
파일 만드는 방법은 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 |
댓글