구조분해할당

배열이나 객체의 속성을 해체해 그 값을 개별 변수에 담는 것

- 배열 구조 분해

- 객체 구조 분해

 

배열 구조 분해

const[변수] = 배열;

//배열 구조 분해
        let lists = ['apple','grape'];
        //기존 방식
        console.log(lists[0],lists[1]);
        //구조 분해
        [item1, item2] = lists;
        console.log(item1, item2);
        //교환 많이 사용하는 편은 아니다.
        let x = 1, y = 2;
        [x, y] = [y, x];
        console.log(x, y);

const로 배열을 선언했을때 배열 자체는 바꿀 수 없지만 내부 원소의 값은 수정이 가능하다.

 

객체란?

{} 안에 키 : 값을 넣어서 선언하는 것

        //객체
        const Person = {
            //key:value
            name: 'dj',
            age: 222,
            gender: 'm',
            friends: ['alex','json'],
            hello : function(){
                console.log('hello');
            },
            'j-1':'Korea'
        };
        //객체 호출 방법과 수정 방법
        console.log(Person.name);
        Person.age = 234;
        console.log(Person.age);
        console.log(Person.friends[0]);
        console.log(Person['name']);
        console.log(Person['j-1']);//문자열 형태로 객체 내에서 선언된 키를 불러올 때 사용한다.
        Person.city = 'Seoul';//city 키 추가
        console.log(Person);

객체 구조 분해

//예시
        const Persons = [{},{},{}];

        //객체 구조 분해
        const {name, city, gender, key1 = 'Hi'} = Person;
        console.log(name, city, gender, key1);

연산자

...

spread 연산자

// spread 사용
const spread = [...b, ...a];

console.log(con);
console.log(spread);

//객체도 가능
const person = {
    name : "dj",
    age : 28,
}

console.log({...person});
const c = 'Hello';
console.log({...c});

간단히 생각하면 ...을 사용해서 해당 선언된 변수나 객체를 쪼개준다고 생각하면 된다.

마지막의 console.log(...c)로 하면 어떻게 될까?

원래 중괄호 안에서 분해되던 Hello가 나뉘어져서 하나씩 출려된다. 여기서 주의할 점은 객체에 spread 연산자를 쓸때는 중괄호를 무조건 붙여줘야한다.

 

rest 연산자

호출할때 지정을 해준 것을 제외한 나머지를 배열로 출력해준다.

function get(z,q,...rest){
    console.log(z);
    console.log(q);
    console.log(rest);
}
get(10,20,30,40,50);

순서로 지정해준 z와 q에는 각각 10과 20이 순서대로 들어가고 나머지인 30 40 50을 배열로 출력해준다.

 

spread vs rest

• spread 파라미터는 호출하는 함수의 파라미터에 사용

• rest 파라미터는 호출받는 함수의 파라미터에 사용. 호출하는 함수 의 파라미터 순서에 맟춰 값 설정 후 남은 파라미터 값을 배열로 설정

클래스

클래스 안에서는 function과 키워드를 쓸 수 없다

그리고 생성자가 있는데 생성자는 

new 연산자를 통해 객체를 생성할 때 반드시 호출이 되고 제일 먼저 실행되는 일종의 메서드라고 생각하면 편하다.(메서드와 비슷하지 그 의미가 같은 것은 아니다) 생성자는 멤버 변수를 초기화하는 역할을 한다.

js에서는 많이 사용하는 편은 아니다 함수나 객체를 더 많이 사용한다.

 

body-parser

postman

포스트맨에 들어가서 가입 후 나의 작업공간에서 주소 입력해서 정보를 주고 받을 수 있다. >> 더 찾아서 공부해보자

 

일단 사용 순서를 간단히 정리해보자

const express = require('express');
const app = express();
const PORT = 8080;

app.use(express.urlencoded({extended:true}));
app.use(express.json()); // 위 포함 두줄이 body parser이다. 이를 통해서 post 정보를 전송할때 요청의 req.body로 받을 수 있게 해준다.

app.get('/',(req,res) => {
    res.send('Hello');
});

app.post('/',(req,res) => {
    console.log(req.body);
});

app.listen(PORT, ()=>{
    console.log(`http://http://localhost:${PORT}`);
});

이렇게 해서 서버를 키고

포스트맨에서 앞은 post로 바꾸고 body에서 json 파일 형식으로 어떤 내용을 보내면 서버에서 정보를 받을 수 있다.

이러한 과정을 확인할 수 있도록 도움을 주는 것이 포스트맨이다.

대략적으로 말하면 포스트맨으로 프론트엔드에서 정보를 보내는 상황을 만들 수 있다.

 

form 전송

입력된 데이터를 한 번에 서버로 전송하기 위해 사용 

폼 자체적으로 정보를 전송하는 것은 아니다.

클라이언트가 서버에게 정보를 보낼 때 사용한다.

• 속성 : action, name, target, method

• 폼 요소 : <input>, <select>, <textarea>, <button> 등등

 

보내는 방식은 get 방식과 post 방식이 있다 둘의 차이는 다음과 같다

회원가입시에 get 방식을 하면 개인정보가 url에 모두 표시가 되기 때문에 회원가입 같은 경우는 post 방식을 사용해야한다.

쿼리는 url 창에 있는 정보를 가져오는 것이고 바디는 서버의 내용(?)을 가져오는 방식이다 (다시 찾아보고 정리할때 제대로 작성해야겠다.)

form validation (유효성 검사)

정보가 올바르게 입력됐는지 검사하는 것이다.

ex) 비밀번호: 8자리 이상, 특수문자 및 대문자 1개 이상 포함

ex) 이메일: @ 기호 반드시 포함

입력 정보가 바로 데이터베이스에 들어가기 때문에 유효성 검사는 상당히 중요하다.

 

• required : 필수 값

• minlength / maxlength : 최소/최대 문자수

• min / max : 최소/최대 값

• type : 입력받는 정보 타입

• pattern : 정규식으로 검사

 

정규식이란?

정규 표현식 - JavaScript | MDN (mozilla.org)

 

정규 표현식 - JavaScript | MDN

정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있습니다. String의 match(), matchA

developer.mozilla.org

사용 예시는 위와 같다 외워서 사용하기는 힘들기 때문에 찾아보고 사용하면서 개인적으로 익혀보자

 

nodemon

코드가 바뀔때 마다 자동으로 node를 재실행 해주는 역할이다.

[오늘 할 일]

html css 정리 블로깅

오늘 진도 복습(조퇴 때문에 못들은 부분 받아서 익히기) : 못한 form 실습 해보기

자취방 짐 정리

운동 1시간 이상

'포스코x코딩온 KDT 8기 풀스택 과정 회고록' 카테고리의 다른 글

[포스코 코딩온 KDT 8기] 웹 풀스택 과정 29일(08.04)차 회고 | SQL  (0) 2023.08.04
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 28일(08.03)차 회고 | 데이터베이스 설정  (0) 2023.08.04
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 24일(07.29)차 회고 | 비동기 처리  (0) 2023.07.29
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 23일(07.28)차 회고 | Node.js : express  (0) 2023.07.28
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 22일(07.27)차 회고 | Node.js  (0) 2023.07.27

7월달은 약속이나 일정이 많아서 추가적인 공부를 할 시간이 좀 부족하다.. 8월달은 그 시간을 확보하고 바로 포트폴리오도 준비하면서 공부할 것이다. 일단은 피그마도 연습해보고, 포트폴리오 틀 잡아서 내용 채운 다음에 사이트로도 제작해 보고자 한다. 내일 자취방 이사도 있어서 시간이 많을지는 모르겠지만 그래도 해봐야지 허허

 

비동기 처리(동시에 처리하는 것)

seTimeout(코드,delay) 를 사용하여 처리할 수 있다.

특정 코드의 연산이 끝날때까지 코드의 실행을 멈추지 않고 다음코드를 먼저 실행하는 자바스크립트의 특성이다.

 

pay가 먼저 실행되기 때문에 전역변수안에 값이 들어가지 않는다.

 

콜백 함수

자바스크립트는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있는데, 인자로 대입되는 함수를 콜백함수라고 한다.

즉, 다른 함수가 실행된 후에 실해되는 함수이다.

함수를 선언할때는 파라미터로 함수를 받아서 쓸 수 있다.

이를 사용하는 이유는 비동기 방식으로 작성된 함수를 동기 처리하기 위해 사용된다.

콜백 지옥

비동기 프로그래밍 시 발생하는 문제이다. 콜백함수가 반복될수록 단계가 깊어지기 때문에 코드의 가독성이 떨어지고, 코드 수정 난이도가 엄청나게 커질수가 있다.

이러한 문제를 해결하기 위해 나온것이 promise 객체이다

promise 객체

비동기 함수를 동기 처리하기 위해 만들어진 객체

성공과 실패를 분리하여 반환

비동기 작업이 완료된 이후에 다음작업을 연결시켜 진행할 수 있는 기능을 가짐

 

• Pending(대기) : Promise를 수행 중인 상태

• Fulfilled(이행) : Promise가 Resolve 된 상태 (성공)

• Rejected(거부) : Promise가 지켜지지 못한 상태. Reject 된 상태 (실패)

• Settled : fulfilled 혹은 rejected로 결론이 난 상태

 

위와 같은 상태를 가진다.

 

Promise는 두가지 콜백 함수를 가진다.

resolve(value) : 작업이 성공한 경우 그 결과를 value와 함께 호출 > then 메소드 활용

reject(error) : 에러 발생 시 에러 객체를 나타내는 error와 함께 호출 > catch 메소드 활용

finally > 성공 실패와 상관없이 호출

then, catch를 사용하면 결과값만 가져온다.

 

Promise 체이닝

then으로 연결하기 때문에 콜백 지옥에 빠지지 않을 수 있고, 순차적으로 작업을 할 수 있다.

예외 처리도 마지막에 catch로 지정할 수 있어서 편하다.

//체이닝을 사용 안 한 경우
//(4+3)*2-1

function add(n1, n2, callback){
    setTimeout(function(){
        let result = n1 + n2;
        callback(result);
    },1000);
}

function mul(n, callback){
    setTimeout(function(){
        let result = n *2;
        callback(result);
    },700);
}

function sub(n, callback){
    setTimeout(function(){
        let result = n -1;
        callback(result);
    },500);
}

//add
add(4, 3, function(x){
    console.log("1 : ", x)
    mul(x, function(y){
        console.log("2 :", y);
        sub(y, function(z){
            console.log("3 :", z);
        })
    })
})

 

//Promise 체이닝
//장점 : tnen 메서드를 연속해서 쓸 수 있다. > 순차적인 작업이 가능하다.
//예외처리도 마지막에 catch로 지정하면 되기 때문에 간편하다.

function add(n1, n2){
    return new Promise(function(resolve,reject){
        setTimeout(function(result) {
            result = n1 + n2;
            resolve(result);
            // callback(result);
        },1000);
    });

}

function mul(n){
    return new Promise(function(resolve,reject){
        setTimeout(function(result) {
            result = n *2;
            resolve(result);
            // callback(result);
        },700);        
    });

}

function sub(n){
    return new Promise(function(resolve,reject){
        setTimeout(function(result) {
            result = n -1;
            // resolve(result);
            // callback(result);
            reject(new Error("에러처리"));// 에러 객체 만들어서 에러 처리하기
            // PS C:\Users\82103\Documents\KDT-8-Web\230729_비동기처리> node 230729_promise.js
            // 1 :  7
            // 2 :  14
            // Error: 에러처리
            //     at Timeout._onTimeout (C:\Users\82103\Documents\KDT-8-Web\230729_비동기처리\230729_promise.js:140:20)
            //     at listOnTimeout (node:internal/timers:569:17)
            //     at process.processTimers (node:internal/timers:512:7)
        },500);        
    });

}

//add
add(4, 3).then(function(result){
    console.log("1 : ", result);
    //then을 연속적으로 쓸려면 여기서 값을 반환해줘야한다.
    return mul(result);    
}).then(function(result){
    console.log("2 : ", result);
    //then을 연속적으로 쓸려면 여기서 값을 반환해줘야한다.
    return sub(result);    
}).then(function(result){
    console.log("3 : ", result);    
}).catch(function(err){
    console.log(err);
});

두 코드를 비교해보면 체이닝을 한 것이 가독성도 높고 예외 처리 다루기가 훨씬 쉽다. (사실 체이닝 안할때의 예외 처리는 솔직히 잘 모른다..)

async/await

프로미스 기반 코드를 좀 더 쓰기 쉽고, 읽기 쉽게 하기 위해 등장했다.

• async

• 함수 앞에 붙여 Promise를 반환한다.

• 프로미스가 아닌 값을 반환해도 프로미스로 감싸서 반환한다.

• await

• ‘기다리다’ 라는 뜻을 가진 영단어

• 프로미스 앞에 붙여 프로미스가 다 처리될 때까지 기다리는 역할을 하며 결과는 그 후에 반환한다.

 

//async와 await은 항상 같이 사용한다.

let product;
let price;
exec();

function goMart(){
    console.log("마트에 와서 어떤 음료를 마실까");
}

function pickDrink() {
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log("고민 끝!!");
            product = "사이다";
            price = 2000;
            let mymoney = 2000;
            if(price <= mymoney){
                resolve();
            }else{
                reject("돈이 부족해요");
            }
        }, 3000);
    })
}

function pay(){
    console.log(`상품명 : ${product}, 가격 : ${price}`);
}

이 상태에서 아래와 같이 사용한다.

async function exec() {
    goMart(); // 먼저 실행 1번
    await pickDrink(); // 2번
    pay();// 3번 pay가 pickDrink의 실행이 끝날때까지 기다려야 함으로 pickDrink 앞에 await을 붙여준다.

}

 

'포스코x코딩온 KDT 8기 풀스택 과정 회고록' 카테고리의 다른 글

[포스코 코딩온 KDT 8기] 웹 풀스택 과정 28일(08.03)차 회고 | 데이터베이스 설정  (0) 2023.08.04
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 25일(07.31)차 회고 | 자바스크립트 고급 + Node.js  (0) 2023.07.31
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 23일(07.28)차 회고 | Node.js : express  (0) 2023.07.28
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 22일(07.27)차 회고 | Node.js  (0) 2023.07.27
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 21일(07.26)차 회고 | 프로젝트 후기  (0) 2023.07.27

http는 사실 거의 사용하지 않는다. > 가독성과 확장성이 떨어지기 때문이다.

express가 노드js의 거의 90%정도를 차지한다.

 

Express

설치를 위해서는 

npm init -y

npm install express

를 입력해 설치한 후에

 

.gitignore 파일을 만들어서 /node_modules를 하여 용량이 큰 모듈 파일이 깃으로 올라가지 못하게 막는다.

 

.gitignore?

• Git 버전 관리에서 제외할 파일 목록을 지정하는 파일

• Git 관리에서 특정 파일을 제외하기 위해서는 git에 올리기 전에 .gitignore에 파일 목록을 미리 추가해야 한다.

 

*.txt → 확장자가 txt로 끝나는 파일 모두 무시

!test.txt → test.txt는 무시되지 않음.

test/ → test 폴더 내부의 모든 파일을 무시 ( b.exe와 a.exe 모두 무시 )

/test → (현재 폴더) 내에 존재하는 폴더 내부의 모든 파일 무시 ( b.exe무시 )

 

보통 모듈 이름을 변수로 지정하는 것이 관례이다.

 

express를 불러오는 방법에는 두가지가 있다

1. const express = require("express");

2. import express from "express";

2번째 방법이 최신 버전이기 때문에 두 가지 방법을 다 사용하되 최신 버전을 더 많이 사용해보자

 

app.get("/",(req, res) => {

})

순서가 request와 responce를 결정한다. 즉 어떤 변수를 넣어도 처음이 req 다음이 res이다.

 

백엔드를 보통 포트 8000번대에서 다루기(?) 때문에 8000번대를 많이 사용한다.

 

const express = require("express");

const app = express();
const PORT = 8080

app.get("/",(req, res) => {
    res.send("Hello express");
})

app.listen(PORT,() => {
    console.log(`http://localhost:${PORT}`);
})

//import express from "express";는 최신 버전
console.log(express);

실행시키려면 터미널 창에서 node index.js를 입력하면 된다.

 

get

get 방식으로 열리는 도메인이며 get의 "/"에 쓴 이름이 포트 뒤에 이름으로 간다.

만약에 "/app"을 적으면 http://localhost:8080/app이 주소가 된다.

 

app.get("/",(req, res) => {
    // res.send("Hello express");
    res.send({result: true, code : 1000, mesage : "회원가입 성공!" });
})

get 안에 객체로도 만들 수 있다. 그리고 객체 안에 객체를 또 넣을 수 있다.

listen

서버를 열어주는 역할을 한다. 

console.log는 터미널 창에서 뜨고 윈도우에서 뜨지 않는다.

 

Node.js가 어려운 이유

모듈을 하나하나씩 늘려가면서 정말 많아지기 때문에 번거롭고 어렵다 느껴지는 것이다.

npm에서 검색해서 필요한 모듈을 찾고 사용할 수 있다.

 

MIT 라이선스가 무료로 사용 가능하다.

 

그리고 계속 add 할때 오류가 나서 찾아봤는데

https://cocoon1787.tistory.com/728

 

[Git] "LF will be replaced by CRLF in..." 에러 해결 방법

warning: LF will be replaced by CRLF in app.js. The file will have its original line endings in your working directory The file will have its original line endings in your working directory 🚀 git add를 할 때 위와 같은 에러들이 자주 발생

cocoon1787.tistory.com

이유가 이 때문이었다. 이에 대한 해결 방법은 터미널에 git config --globa core.autocrlf true를 쓰면 해결된다.

 

템플릿 엔진

뷰를 보여주기 위한것 실무에서는 많이 사용하지 않는다. 노드 js 자체적으로 웹을 보여주기 위해 사용하는 것이기 때문에 회사 내부적으로 테스트용 웹페이지를 확인하기 위해 사용하는 정도라 많이 사용하지 않는다. 리액트를 들어가게 된다면 거의 사용하지 않을 것이다.

 

EJS 템플릿

• 템플릿 엔진 : 문법과 설정에 따라 파일을 html 형식으로 변환시키는 모듈

• ejs

• Embedded Javascript 의 약자로, 자바스크립트가 내장되어 있는 html 파일

• 확장자는 .ejs

 

<%

%> 

위와 같은 방식으로 쓰고 한줄에 하나씩 사용한다.

값만 표현할 때는  <% =I %> 이와같이 사용한다.

 

npm install ejs로 설치

 

app.set view 엔진을 불러올때 사용

app.use 미들웨어 서버가 처음부터 끝까지 코드가 있을때 중간에 실행 시키는 놈

 

res.render(이름,데이터)// 데이터도 보낼 수 있다.

 

그리고 이상태에서 컨트롤+c를 누르면 서버가 꺼지는 거라서 누르지 않고 실행을 해야 들어갈 수 있다.

 

미들웨어

• 요청이 들어옴에 따라 응답까지의 중간 과정을 함수로 분리한 것

• 서버와 클라이언트를 이어주는 중간 작업

• use() 를 이용해 등록할 수 있다.

 

이론 수업이 끝난 후에 기존에 우리가 했던 실습을 Node.js를 이용해서 ejs로 바꾸는 실습을 진행했다. 그래서 7월7일에 만들었던 애벌레 실습을 옮기는데 이미지를 불러오는 과정에서 어려움을 겪었다..그래서 이를 정리해서 올린다.

app.use(express.static("public"));// 앞에 아무것도 없으면 바로 연결되는 것이기 때문에 바로 이미지로 들어갈 수 있다.
app.use("/static",express.static("public"));// 앞에서 사용하는 /static은 웹 페이지에서 사용할 가상 경로를 설정해주는것이다.
app.use("/static",express.static(path.join(__dirname,"public")));
// __dirnamedms public을 문자열로 가지고 오고 path.join 을 통해 절대 경로로 가져오는 것이다.

따라서 /static은 웹에서 사용되는 가상 주소이고 이를 이미지 경로에 지정을 해줘야한다 위에서 순서대로 1,2,3이라고 하고 이미지를 웹에 띄울려면 아래와 같이 적어야한다.

1. <img src="pngwing.png" alt="">

2. <img src="static/pngwing.png" alt=""> 

3. <img src="static/pngwing.png" alt="">

/static을 적는 부분에 아무것도 적지 않는다면 그냥 이미지 파일 이름만 적어도 적용이 된다.

'포스코x코딩온 KDT 8기 풀스택 과정 회고록' 카테고리의 다른 글

[포스코 코딩온 KDT 8기] 웹 풀스택 과정 25일(07.31)차 회고 | 자바스크립트 고급 + Node.js  (0) 2023.07.31
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 24일(07.29)차 회고 | 비동기 처리  (0) 2023.07.29
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 22일(07.27)차 회고 | Node.js  (0) 2023.07.27
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 21일(07.26)차 회고 | 프로젝트 후기  (0) 2023.07.27
[포스코x코딩온 KDT 8기] 웹 풀스택 과정 1-2주차 회고 | JQuery 정리  (0) 2023.07.15

서버에 맞게 다시 작성된 자바스크립트이다. 

웹 브라우저 없이 사용이 가능하다.

일렉트론 : html css js만 가지고 pc 응용 프로그램을 만들 수 있다.

npm 패키지는 세계에서 가장 큰 오픈 소스 라이브러리

 

npm이란 Javascript로 개발된 각종 모듈의 설치, 업데이트, 구성, 제거 과정을 자동화하여 관리해주는 기능이다.

 

Node.js 설치

LTS를 설치해야한다 오른쪽은 계속해서 업그레이드하는 버전이고 LTS는 안정화된 버전이다.

 

설치 후 설치 되었는지 확인하는 방법은 cmd 창에 node -v를 검색하여 설치한 버전이 뜨는지 확인해보면 된다.

npm도 npm -v로 버전 확인을 할 수 있다.

터미널에서 바로 실행도 가능하다

이를 노드의 REPL 콘솔이라고 한다.

테스트 용도로 사용한다.

 

npm

노드 패키지를 저장하는 저장소이다

즉 노드 패키지를 관리해주는 틀이다.

이미 만들어진 것을 가져와서 사용하는 것이다.

직접 만들고 싶다면 코드를 만들어 npm 저장소에 올리면 다른 사람의 나의 패키지를 사용할 수 있다.

 

npm을 통해 package.json을 생성할 수 있고, package.json이란  패키지들이 서로 의존되어 있어, 문제가 발생할 수 있는데 이를 관리하기 위해 필요하고 프로젝트에 대한 정보와 사용 중인 패키지 이름 및 버전 정보 가 담겨 있는 파일이다.

 

“name” : 패키지 이름

“version” : 패키지의 버전

“main” : 자바스크립트 실행 파일 진입점 ( 문답식에서의 entry point )

“description” : 패키지에 대한 설명

“scripts” : npm run 을 이용해 정해놓는 스크립트 명령어(이를 통해 다른 컴퓨터엣도 run으로 설치하여 그대로 사용할 수 있다.)

“license” : 해당 패키지의 라이센스

 

Node.js의 특징

1. js 사용

2. 하나의 스레드를 사용한다.

싱글스레드는 에러를 처리하지 못할 경우 멈추기 때문에 예외처리가 정말 중요하다.

 

3. Non-blocking I/O

I/O 작업 : 파일 시스템 접근 ( 읽기, 쓰기, 만들기 등 ), 네트워크 요청

Node.js는 표준 라이브러리의 모든 I/O 메서드를 비동기 방식으로 제공한다.

 

4. Event-Driven

이벤트 리스너와 콜백 함수 사용 가능

 

Call Stack ( 호출 스택 ) LIFO(Last In Frist Out) 방식이다.

 

Event Loop

https://www.korecmblog.com/node-js-event-loop/ 

 

Node.js 이벤트 루프(Event Loop) 샅샅이 분석하기

글에 들어가기에 앞서 Node.js의 이벤트 루프의 경우 공식 문서에 설명이 부족하고 이에 따라 여러 사람들이 각자 나름대로 분석한 글이 많아 무엇이 이벤트 루프의 정확한 동작인지 알기 힘듭니

www.korecmblog.com

 

Node.js의 역할 

• 간단한 로직

• 대량의 클라이언트가 접속하는 서비스 ( 입출력이 많은 서비스 )

• 빠른 개발 요구

• 빠른 응답시간 요구

• 비동기 방식에 어울리는 서비스 ( 스트리밍 서비스, 채팅 서비스 등 )

 

모듈

모듈이란 

특정한 기능을 하는 함수들이나 변수들의 집합

재사용 가능한 코드 조각

코드 추상화/ 코드 캡슐화/ 코드 재사용/ 의존성 관리

 

클래스와 거의 유사하다.

 

모듈은 다음과 같이 만든다.

 

자바스크립트 자체 모듈 시스템 문법 -> package.json 에

“type”: “module” 을 추가해 사용

이 경우에 require을 사용할 수 없다

 

 

추가적으로 중간에 객체를 알려주셨는데

키 : 값

이 형태에서 키와 값이 같다면 키만 적어줘도 작동하고 키와 값이 다르면 키와 값을 같이 작성해야한다.

즉 

const aba = "a";라고 하고 이를 

module.exports = {a : abc}; 에 넣을때 이렇게 넣어줘야 하는 것이다.

만약에 변수가 a라면 a만 적어줘도 불러올 수 있다.

 

서버만들기

http 모듈

• 웹 서버를 구동하기 위한 node.js 내장 웹 모듈

• server 객체, request 객체, response 객체를 사용한다.

• server 객체 : 웹 서버를 생성할 때 사용하는 객체

• response 객체 : 응답 메시지를 작성할 때 두 번째 매개변수로 전달되는 객체

• request 객체 : 응답 메시지를 작성할 때 첫 번째 매개변수로 전달되는 객체

 

const http = require("http");

const server = http.createServer((request, responce)=>{
    responce.writeHead(200);
    responce.write("<h1>Hello</h1>");
    responce.end("<p>End</p>");
});

server.listen(8000, function(){
    console.log("localhost : 8000포트로 실행")
});

listen(port, callback) 서버를 첫번째 매개변수의 포트로 실행한다.

Response 객체

writeHead : 응답 헤더 작성

write : 응답 본문 작성

end : 응답 본문 작성 후 응답 종료

 

localhost

• localhost는 컴퓨터 내부 주소 (127.0.0.1 )

• 자신의 컴퓨터를 가리키는 호스트이름(hostname)

Port

• 서버 내에서 데이터를 주고받는 프로세스를 구분하기 위한 번호

• 기본적으로 http 서버는 80번 포트 사용 ( 생략 가능, https는 443 )

 

html 파일 전송은 try catch 문으로 작성한다.

http 응답

• 1XX : 처리중

• 100: Continue, 102: Processing
• 2XX : 성공 • 200: OK, 201: Created, 202: Accepted

• 3XX : 리다이렉트(다른 페이지로 이동)

• 4XX : 요청 오류 • 400: 잘못된 요청, 401: 권한 없음, 403: 금지됨 • 404: 찾을 수 없음(Page not found)

• 5XX : 서버 오류

 

 

'포스코x코딩온 KDT 8기 풀스택 과정 회고록' 카테고리의 다른 글

[포스코 코딩온 KDT 8기] 웹 풀스택 과정 24일(07.29)차 회고 | 비동기 처리  (0) 2023.07.29
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 23일(07.28)차 회고 | Node.js : express  (0) 2023.07.28
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 21일(07.26)차 회고 | 프로젝트 후기  (0) 2023.07.27
[포스코x코딩온 KDT 8기] 웹 풀스택 과정 1-2주차 회고 | JQuery 정리  (0) 2023.07.15
[포스코x코딩온 KDT 8기] 웹 풀스택 과정 1일차 회고  (0) 2023.07.03

+ Recent posts

티스토리툴바