Cute Apple
본문 바로가기
개발/Node.js

Node.js 기초

by 미댕댕 2021. 4. 1.

Node.js란?

응용프로그램을 개발하기 위한 자바스크립트

 

 

기존 js와 차이

기존 js는 프론트개발을 위한 기술이지만, node.js는 주로 서버개발을 위한 기술이다. 그러다보니, DOM을 지원할 필요가 없다.

 

 

console 이란?

전산분야에서 전통적으로 입력과 출력 처리를 담당하는 도구

 

예전에는, 중앙의 컴퓨터에 접속하여 입력과 출력을 처리했지만, 근래에는, 자신의 pc와 입력 출력을 처리하는 것도 콘솔이라 칭한다. 따라서 콘솔이랑 GUI(그래픽) 없이, 검정화면에 흰글씨기반으로 컴퓨터에 입력과 출력을 처리하는 도구를 의미한다.

 

 

 

전역변수

 

1) __filename (앞에 언더바 2개)

    지금 실행중인 js파일의 경로를 담고있는 변수

 

2) __dirname (앞에 언더바 2개)

    지금 실행중인 js파일의 디렉토리 경로를 담고있는 변수

 

 

<실행결과>

 

 

모듈이란?

모듈은 변수, 함수 등의 코드가 모여진 단위

 

개발자가 모듈을 정의할때는 내장객체 중 exports 객체를 사용하면 된다.

그 외에도 Nodejs에 내장된 여러 모듈이 있다.(os, process, fs 등등)

 

※ 내장 모듈은 Nodejs API 에서 확인하고 사용할것 (nodejs.org/docs/latest-v14.x/api/)

 

<exports 사용 예>

 

<os 사용 예>

 

<process 사용 예>

 

 


서버 구축하기

 

접속

-접속시 브라우저에 하기와 같이 접속해야함

 

1) http://내 아이피:8888

2) http://localhost:8888

3) http://127.0.0.1:8888

 

 

 

 

<console에서 서버 접속>

 

<브라우저 결과창>

 

 

 

 

 


 

회원가입 창 생성 및 서버구축

 

1. regist form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 파비콘.. 윈도우 상 아이콘이다. -->
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
 
<style>
body {font-family: Arial, Helvetica, sans-serif;}
{box-sizing: border-box;}
 
input[type=text],input[type=password] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
 
input[type=button] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
input[type=submit]:hover {
  background-color: #45a049;
}
 
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
/*JQuery 의 문법 형시 (누구를).어떻게, 누구자리에 올수있는 요소?
CSS의 selector가 올수 있다.*/
$(function(){ //onLoad되면
    $("input[type=button").click(function(){
         //유효성 체크
         if($("#user_id").val()==""){
            alert("아이디를 입력하세요");
            return//이 함수를 호출한 곳으로 되돌아감
         }
         //if 조건을 만나지 않은 사람은 올바르게 입력한 사람이므로 서버에 데이터를 전송
        $("form").attr("action""http://localhost:7777/param"); //이 요청을 받을 서버의 주소
        $("form").attr("method""post"); //전송방식을 post로 지정
        $("form").submit(); //폼 양식에 입력한 데이터를 서버로 전송
    });
});
 
</script>
</head>
<body>
 
<h3>Contact Form</h3>
 
<div class="container">
    <!-- 폼 태그의 속성중 action은 이 폼양식을 전송할 대상 서버의 url을 명시할 수 있다. -->
  <form action="http://daum.net">
    <label for="user_id">ID</label>
    <input type="text" id="user_id" name="id" placeholder="Your ID..">
 
    <label for="user_pass">Password</label>
    <input type="password" id="user_pass" name="pw" placeholder="Your Password..">
    
    <label for="user_name">Name</label>
    <input type="text" id="user_name" name="name" placeholder="Your Name..">
 
    <!-- input 태그의 type 중 submit은 디폴트로 전송기능이 포함되어 있기 때문에
    클릭만으로도, 전송이 발생함. 따라서 일반 버튼화 시켜놓자 -->
    <input type="button" value="Submit" onclick="">
  </form>
</div>
 
</body>
</html>
 
cs

 

 

전송방식 get/post

 

1) get 방식

-  url 에 전송한 정보들이 노출되어 나타난다.

 

2) post 방식

- url에 전송한 정보들이 나타나지 않는다.

 

 

 

<도해>

 

 

 

 

 

2. server

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
// 서버 구축하기
var http=require("http");//http 모듈 가져오기
var fs=require("fs"); //fs 모듈 가져오기-파일을 다룰떄 사용되는 모듈
var mysql=require("mysql"); //mysql을 연동하기 위한 모듈 가져오기
 
//외부모듈이다 따라서 개발시 추가 설치가 필요하다
//npm이라는 툴을 이용하면, 노드js 개발시 모듈설치와 관련된 많은 기능을 지원한다.
//npm(Node.js Pakage Manager)
//추가 설치 명령어 : cmd > npm install 모듈명
 
 
//서버객체 생성
var server = http.createServer(function(request, response){
    //클라이언트에 응답하기
    //클라이언트에게 보여줄 html 문서를 이루고 있는 코드를 읽어들여서,
    //응답정보로 보내보자!!
 
    //클라이언트가 브라우저의 URL에 어떤 주소를 입력했는지를 조사해보자!
    //그 조사 결과에 따라서 아래 코드 중 어떤 코드가 실행될지를 결정짓자
    /*request객체란 클라이언트의 요청 정보를 가진 객체이기 때문에 클라이언트가
    입력한 url정보도 이 객체를 통해 얻어낼 수 있다*/
    var url=request.url;
    console.log("클라이언트가 요청시 입력한 주소는 ", url);
 
    //localhost:8888/member/form  : 회원가입 디자인폼을 달라는 요청으로 간주
    //localhost:8888/member/regist  : 회원가입 요청으로 간주
    //localhost:8888/member/result  : 회원가입 완료로 간주
 
 
    if(url=="/member/form"){
        //회원가입을 희망하는 사람이라면
        fs.readFile("./regist_form.html""utf8"function(error, data){
            //파일의 내용을 모두 읽어들인 순간 이 익명함수가 동작함
            response.end(data)
        });
 
 
 
 
    }else if(url=="/member/regist"){
        // 회원가입 등록을 원하면
        /*쿼리문 수행전에 node.js가 mysql에 접속을 성공해야한다(제이슨으로) */
        var con=mysql.createConnection({
            url:"localhost:3306"//db는 네트워크 프로그램이라 포트를 사용함
            database: "nodejs"//사용중인 db명
            user: "root",
            password:"1234"
        });//접속
        console.log("접속결과 객체", con);
 
        
        // console.log("DB등록을 원하시는군")
        var sql="insert into member(user_id, user_pass, user_name)";
        sql+=" values('superman','0000', '수퍼맨');"
        //※ values 앞에 '공란'이 필요함
        
        //쿼리문 수행
        con.query(sql, function(err, fields){
            if(err){
                console.log("쿼리문 수행중 에러발생", err);
            }else{
                console.log("등록 성공");
            }
        }); 
        
 
    }else if(url=="/member/result"){
        //회원가입을 성공한 사람이라면
        fs.readFile("./result.html""utf8"function(error, data){
            //파일의 내용을 모두 읽어들인 순간 이 익명함수가 동작함
            response.end(data)
        });
 
    }
 
    
 
});
 
//서버가동
server.listen(8888,function(){
    console.log("Server is running at 8888...");
 
})
cs

 

 

 

 


 

 

 

mysql 연동

 

 

1. MYSQL 에서 정보들을 생성한다.

 

데이터 베이스 생성

mysql> create database nodejs;

 

데이터베이스 접속

mysql> use nodejs;
Database changed

 

테이블 생성
mysql> create table member(
    -> member_id int primary key auto_increment
    -> , user_id varchar(20)
    -> , user_pass varchar(20)
    -> , user_name varchar(20)
    -> , regdate timestamp default now()
    -> ) default character set utf8;

 

정보 추가

mysql> insert into member(user_id, user_pass, user_name)
    -> values('batman','1234', '배트맨');

 

 

mysql> select * from member;

 

 

 

서버에 접속한 뒤 브라우저에 http://localhost:7777//member/regist 로 들어가게되면 데이터 생성

- mysql와 접속을 한뒤 데이터를 입력해야한다.

 

 

 

등록성공시 데이터 베이스에 데이터가 추가됨

 

반응형

댓글