자바스크립트의 데이터 타입은 원시 타입과 객체 타입으로 분류된다.

-원시 타입은 단 하나의 값만 나타내고, 원시 타입의 값은 변경이 불가능하다. -객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조이며, 객체 타입의 값은 변경 가능한 값이다.

자바스크립트는 객체 기반의 프로그래밍 언어이고, 자바스크립트를 구성하는 거의 모든 것은 객체로 구성되어 있다.

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 하나의 프로퍼티는 key - value의 모양을 가지고 있다.

객체 리터럴이란?

리터럴(literal)은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법이다.

고로, 객체 리터럴은 객체를 생성하는 표기법을 의미한다.

객체 리터럴을 사용하면 객체를 생성하기 위해 Class를 먼저 선언하고 new 연산자와 함께 생성자를 호출할 필요가 없이 일반적인 문자, 문자열을 만드는 것과 같이 객체를 생성할 수 있다.

객체 리터럴을 사용하면 좋은점 -코드가 간결해진다. -class와 같이 복잡하지 않아도 된다.

객체 리터럴로 객체를 생성해보자

let objectLiteral = {
      key : 'value',
      func : function () { return 'hello world' }
}

console.log(objectLiteral);            // 1
console.log(objectLiteral.key);        // 2
console.log(objectLiteral.func());    // 3 

/*
out put
1. {key: 'value', func: ƒ}
2. value
3. hello world 
*/

객체 리터럴은 중괄호 '{ }' 내부에 0개 이상의 프로퍼티를 정의해서 선언하는 것을 알 수 있다.

프로퍼티란 ?

객체의 상태를 나타내는 값으로 key - value의 형태로 객체를 구성한다.

let objectLiteral = {
      key : 'value', // 프로퍼티, 프로퍼티 키 : 'key', 프로퍼티 값 : 'value'
      'my key' : 'my value', // 프로퍼티, 프로퍼티 키 : 'my key', 프로퍼티 값 : 'my value'
      func : function () { return 'hello world' } // 메서드
}

메서드?

객체의 프로퍼티 값이 함수로 구성되어 있을 경우 메서드(Method)라고 부른다.

메서드는 프로퍼티를 참조하고 조작할 수 있는 동작을 의미한다.

객체 리터럴을 사용해서 사칙연산을 하는 객체를 만들어보자

const calculator = {
    add : (a,b) => a+b,
    sub : (a,b) => a-b,
    mul : (a,b) => a*b,
    div : (a,b) => a/b
}

console.log(calculator.add(1,1)); // 2
console.log(calculator.sub(2,1)); // 1
console.log(calculator.mul(1,2)); // 2
console.log(calculator.div(4,2)); // 2

구조 분해 할당

객체나 배열을 변수로 분해할 수 있는 ES6에서 새롭게 도입한 문법이다.

객체 구조 분해 할당 예제

const obj = { name : 'kwonga', age:'50', bloodType : 'D', major : 'fishing' }

const { name, abc, bloodType, major, say } = obj;

console.log( name, abc, bloodType, major, say , age);
// wonga undefined D fishing undefined

예제를 보면 변수명과 객체의 프로퍼티 이름이 일치해야 정상적으로 구조 분해 할당이 된 것을 확인할 수 있다.

배열 구조 분해 할당 예제

const arr = ['1월','2월','3월','4월'];


const [ january, february , april ] = arr ;

console.log(january, february , april);
// 1월 2월 3월

변수명은 개발자 마음대로 선언이 가능하다. 또한 배열의 순서대로 할당되는 것을 볼 수 있다.

선언한 변수를 제외한 나머지 배열의 요소는 할당되지 않는다.

배열 구조 분해 할당을 사용해서 변수의 값 바꾸기

1. 임시변수를 사용하기

let a = 1 ;
let b = 9 ; 
let temp ; 

temp = a ;
a = b ; 
b = temp ;

console.log(a,b); // 9  1

2. 배열 구조 분해 할당 사용하기

let a = 10 ;
let b = 90 ;

[ a, b ] = [ b, a ];

console.log(a,b); // 90  10

배열 구조 분해 할당을 사용하면 직관적으로 변경할 수 있다.

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

다른 함수에서 입력값으로 전달되어 다른 함수에 의해서 나중에 호출되는 함수이다.

아래 예시를 보면

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

let length = (element) => element.length > 6 ;

const result = words.filter(length);

console.log(result);
// Array ["exuberant", "destruction", "present"]

word array에서 filter 함수를 사용하려고 할 때 인자 값으로 length 함수를 받고 있다.

*filter 함수의 첫번째 인자 값은 callback 함수이다. [참고] array.filter

이처럼 filter 함수에 의해 나중에 호출되는 함수 length는 callback 함수라고 할 수 있다.

대부분은 callback 함수 자리에 익명함수를 넣어주는 경우가 많다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(e => e.length > 6 );

console.log(result);
// Array ["exuberant", "destruction", "present"]

async 란?

promise를 매우 편리하게 사용할 수 있게 도와주는 문법이다.

promise에 대한 내용은 따로 정리할 예정이다 ...

async는 await와 같이 사용된다.

*아래 예시를 통해 사용해보자

// promise와 setTimeout()을 사용해서 비동기 코드를 흉내낸 함수
function timer(time){
    return new Promise((resolve)=>{
        setTimeout(()=>{resolve(time)},time);
    });
}

// timer 함수가 끝나면 콘솔에 time을 출력하고 1초를 추가해서 사이클을 반복하라
console.log('start');
timer(1000).then((time)=>{
    console.log('time:'+time);
    return timer(time+1000);
}).then((time)=>{
    console.log('time:'+time);
    return timer(time+1000);
}).then((time)=>{
    console.log('time:'+time);
      console.log('end');
});

/*
start
time:1000
time:2000
time:3000
end
*/

위 예제를 깔끔하게 만들어보자 ...

function timer(time){
    return new Promise((resolve)=>{
        setTimeout(()=>{resolve(time)},time);
    });
}

// 비동기 처리
async function run(){
    console.log('start');
    let time = await timer(1000);
    console.log('time:'+time);
    time = await timer(time+1000);
    console.log('time:'+time);
    time = await timer(time+1000);
    console.log('time:'+time);
    console.log('end');
}


console.log('parent start');
run();
console.log('parent end');

/* 위에 함수와 결과값이 같으나 코드가 간결해진 것을 볼 수 있다.
parent start
start
parent end
time:1000
time:2000
time:3000
end
*/

위 예제에서 console.log(run()); 을 실행해보면 promise를 반환하는데 아래 예제와 결과 값을 비교해보자

// 함수는 동일하다.
function timer(time){ ... }

// 비동기 처리
async function run(){ ... }

async function run2(){
    console.log('parent start');
    await run();
    console.log('parent end');
}
run2();

/* 바로 위 예제와 결과를 비교해보자
parent start
start
time:1000
time:2000
time:3000
end
parent end
*/

즉, await 가 붙은 run();이 종료된 후에 console.log('parent end'); 가 실행되는 것을 볼 수 있다.

정리해보면 일반 함수 앞에 async 를 붙여주면 비동기로 처리해달라는 의미이고, 내부에 있는 await은 async 내부에서만 사용 가능하며, await가 붙은 요청은 그 요청이 끝나는 시점까지 다음 동작으로 넘어가지 못하게 한다.

reference -https://www.youtube.com/playlist?list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI

-.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

우선 공식 홈페이지를 통해 확인해보자 [공식홈페이지 바로가기]

express는 자체적인 최소한의 기능을 갖춘 라우팅 및 미들웨어 웹 프레임워크이며, express 애플리케이션은 기본적으로 일련의 미들웨어 함수 호출이라고 설명하고있다.

그래서 미들웨어가 뭔데?

미들웨어 함수는 req(요청), res(응답) 그리고 어플리케이션 요청 ~ 응답 과정 도중 그 다음의 미들웨어 함수에 대한 엑세스 권한을 갖는 함수이다.

쉽게 생각하면 클라이언트에게 들어오는 요청을 미들웨어가 받아서 원하는 동작을 하도록 처리해주는 함수라고 할 수 있다.

미들웨어 함수는 어떤 어떤 일을 할까?

1.모든 코드를 실행 2.요청 및 응답 객체에 대한 변경을 실행 3.요청-응답 사이클 종료 (res 호출을 하여 종료 가능) 4.스택 내의 다음 미들웨어 함수를 호출

*미들웨어 함수가 요청-응답 사이클을 종료하지 않는 경우에는 next()를 호출하여 그 다음 미들웨어 함수에 제어권을 넘겨야한다. 그렇지 않으면 해당 요청은 정지된 채로 방치된다고 한다.

Express 애플리케이션은 다음과 같은 유형들의 미들웨어가 있다.

-애플리케이션 레벨 미들웨어 -라우터 레벨 미들웨어 -오류처리 레벨 미들웨어

애플리케이션 레벨 미들웨어

애플리케이션 레벨 미들웨어는 app.use() 와 app.METHOD() 함수를 사용해서 애플리케이션 미들웨어를 app 오브젝트 인스턴스에 바인드한다.

*마운트 경로가 없는 미들웨어 = 앱 요청이 올 때마다 실행된다.

const app = express();

app.use((req, res, next)=>{
    console.log('요청마다 실행되는 함수입니다.');
    next(); // next() 를 명시해주지 않고 테스트해보면 무한로딩이 된다.
});

*아래 예시는 /path/:id 경로에 대한 모든 유형의 HTTP 요청에 대해 실행된다.

// localhost:3000/path/applevel
app.use('/path/:id',(req,res,next)=>{
  console.log(`id값 ${req.params.id}을 가지고 /path 경로로 요청`)
  next();
})

// console
// id값 applevel을 가지고 /path 경로로 요청

*아래 예시는 /path/:id 경로에 대한 GET 요청을 처리한다.

// localhost:3000/path/applevel?name=kwonga&age=50 
app.get('/path/:id', (req,res,next)=>{
  let {name,age} = req.query;
  console.log(`id값 ${req.params.id}을 가지고 /path 경로로  GET요청`)
  console.log(`GET 요청으로 들어온 데이터 : ${name}, ${age}`);
  next();
})

// console
// id값 applevel을 가지고 /path 경로로  GET요청
// GET 요청으로 들어온 데이터 : kwonga, 50

*아래 예시는 같은 경로의 GET요청에 대해 2개의 라우터를 정의한 예시이다. (미들웨어의 흐름을 보자)

// 1번 라우트
app.get('/path/:id', (req, res, next) => {
    console.log('1번 콜백함수 !!');
    next(); // 2번 콜백 함수로 이동
}, (req, res, next) => {
    console.log('2번 콜백함수 !!');
    res.send('함수 종료 !!'); // 요청에 대한 응답을 끝낸다.
      // res.send 대신 next(); 를 사용하면 2번 라우트도 실행된다.
});

// 2번 라우트 (실행 x -> 1번 라우트에서 사이클을 종료시켜서
app.get('/path/:id', (req, res, next) => {
    console.log('2번 라우트 실행시켜줘 !');
});

// console
// 1번 콜백함수 !!
// 2번 콜백함수 !! 

*아래는 next('route')를 사용하여 흐름을 제어하는 예시이다. next('route')를 사용하면 다음 함수를 호출하지 않고 넘어가는 것을 확인할 수 있다.

// 1번 라우트
app.get('/path/:id', (req, res, next) => {
    if (req.params.id == 0) next('route');
    else next();
}, (req, res, next) => {
    console.log('2번 콜백함수 !!')
    res.send('regular');
});

// 2번 라우트
app.get('/path/:id', (req, res, next) => {
    console.log('2번 라우터 !!');
    res.send('special');
});

// id 값이 0인 경우 : 2번 라우터 !!
// id 값이 0이 아닌 경우 : 2번 콜백함수 !!

라우터 레벨 미들웨어

라우터 레벨 미들웨어는 express.Router() 인스턴스에 바인드 된다는 점을 제외하면 애플리케이션 레벨 미들웨어와 동일한 방식으로 작동된다.

const app = express();
const router = express.Router();

// 마운트 경로가 없는 미들웨어, 항상 실행된다.
router.use((req, res, next) => {
    console.log('저는 마운트 경로가 없습니다.');
    next();
});

// /path 경로로 들어오는 모든 요청에 대해 항상 실행
router.use('/path/:id', (req, res, next) => {
    console.log('Request URL:', req.originalUrl);
    next();
}, (req, res, next) => {
    console.log('Request Type:', req.method);
    next();
});

// /path 경로로 들어오는 get 요청에 대해 실행
router.get('/path/:id', (req, res, next) => {
    // id 값이 0이면 다음 라우트로
    if (req.params.id == 0) next('route');
    // id 값이 0이 아니면 다음 함수로
    else next(); 
}, (req, res, next) => {
    console.log('end point : regular !!');
    res.send('regular');
});

router.get('/path/:id', (req, res, next) => {
    console.log('end point : special !!');
    res.send('special');
});

app.use('/', router); // /로 들어오는 모든 요청은 reuter로 넘겨주세요


/*id 값이 0인 경우의 콘솔*/
// 저는 마운트 경로가 없습니다.
// Request URL: /path/0
// Request Type: GET
// end point : special !!

/*id 값이 0이 아닌 경우의 콘솔*/
// 저는 마운트 경로가 없습니다.
// Request URL: /path/2
// Request Type: GET
// end point : regular !!

오류처리 미들웨어

오류처리 미들웨어는 일반적인 미들웨어와는 달리 4개의 인수를 제공해야한다. 그렇지 않으면 일반적인 미들웨어로 해석해서 오류처리에 실패할 수 있다.

// 오류처리 미들웨어 예시
app.use((err, req, res, next)=>{
    console.log(err);
      res.status(500).send('500 err !!');
})

단, 오류처리 미들웨어는 다른 app.use() 및 라우트 호출을 정의한 후에 마지막으로 정의해준다.

*아래 예시는 오류처리 미들웨어를 간단하게 정의했다.

app.get('/',(req,res,next)=>{
    const err = new Error('Not Found');
      err.status= 404;
      next(err); // 에러처리 미들웨어 호출, 다음 미들웨어는 실행하지 않고 바로 에러처리 미들웨어를 호출한다
})

// 오류처리 미들웨어
app.use((err, req, res, next) => {
      console.error(err.stack) // 에러 내용 콘솔 출력
      res.status(err.status).send('에러!!!!!') 
});

/*
Error: Not Found
at /Users/Desktop/workSpace/expressprog/app.js:73:15
...
*/

next() 함수에는 'route' 문자열을 제외한 다른 내용을 전달하면 express는 오류가 있는 것으로 판단하여 바로 오류처리 미들웨어로 보내준다.

*따로 오류처리 미들웨어를 정의하지 않아도 기본 오류 핸들러가 내장되어있다.

reference -https://expressjs.com/ko/guide/using-middleware.html#middleware.built-in

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

express의 공식홈페이지에서는 express를 "Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크"라고 소개하고 있다. 즉, node js로 서버를 빠르고 간편하게 만드는 것을 돕는 웹 프레임워크이다.

Express는 웹서버 자체가 아니라 node js로 웹 서버를 만드는 것을 도와주는 프레임워크 임을 기억하자 !

*일반 웹 서버 vs node js로 만든 웹 서버 일단 일반적인 웹 서버와 node js로 만든 웹 서버는 다르지 않다. 어떤 도구를 사용해서 만들었는지의 차이이다. 일반적인 웹 서버와 동일한 기능을 수행하는 웹 서버를 만들 수 있으며, 이는 node js를 포함한 다른 언어나 도구로 만드는 웹 서버도 동일하다.

Express를 이용해서 웹 서버를 구현해보자 !

*에디터는 vscode를 사용했습니다!

1. node js 설치
2. 프로젝트 생성
3. 콘솔/터미널로 워크스페이스에 접근 후 'npm init -y' 입력

-> package.json 파일이 생성되었는지 확인한다. 4. npm을 통해 express를 다운받는다. 'npm install express' 입력 5. package.json에 dependencies : { "express" ... } 이 추가되었으면 성공 ! 6. app.js 생성 7. express 공식 홈페이지를 참고하여 app.js 기본 세팅 ! 공식홈페이지

const express = require('express')
const app = express()
const port = 3000 // 3000번 포트를 사용하겠습니다잉 이라는 뜻

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

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

8. 콘솔/터미널로 프로젝트에 접근해서 app.js 파일 실행 'node app.js' 입력
9. 브라우저를 열고 http://localhost:3000/ 로 접근하여 'Hello World!' 출력되면 성공 !

요약

1. express는 웹서버가 자체가 아닌 node로 웹 서버를 만드는 것을 도와주는 프레임워크이다.

reference -

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

HyperText Transfer Protocol의 약어로 데이터를 주고 받는 양식을 정의한 Protocol 중 하나

*Protocol : 데이터 통신을 원활하게 하기 위해 필요한 통신 규약.

매우 범용적인 양식을 가지고 있어서 전 세계에서 가장 많이 쓰이는 통신 규약이다.

모든 브라우저는 HTTP 프로토콜을 기본으로 지원하며 HTTP 프로토콜을 기반으로 데이터를 주고 받는다.

어떻게요 ??

HTTP에서는 Request, Response라는 개념이 존재한다.

서버 - 브라우저의 시점으로 살펴보자 1.브라우저는 서버에게 자신이 원하는 페이지를 요청(Request)한다. 2.서버는 브라우저가 원하는 페이지가 있는지 확인한다. 3.페이지가 있다면 해당 페이지에 대한 데이터를 반환(Response)해준다. 4.반환받은 데이터를 기반으로 브라우저에 그려준다.

http의 구성 요소

-Method GET : 어떠한 리소스를 얻을 때 사용된다. POST : 서버로 데이터를 전송할 때 사용된다.

-Header General Header : 컨텐츠의 비중 보다는 요청과 응답의 시간 날씨 등 일반적인 정보가 포함된다. Request Header : 웹브라우저가 웹서버에 요청하는 것을 텍스트로 변환한 메세지들이다. Response Header : 웹서버가 웹브라우저에 응답하는 컨텐츠가 들어가있는 메세지이다.

-Payload Payload는 전송되는 실질적인 데이터를 의미한다. GET method를 제외한 모든 요청/응답들은 Payload를 보낼 수 있다.

http 동작을 확인해보자

개발자도구 > 네트워크 탭으로 이동 > 원하는 페이지 접근 > 아주 불순해 보이는 목록들이 노출된다. 위에서 언급한 불순해 보이는 목록들이 웹 서버에서 반환해주는 데이터이다. (주황색 영역)

불순한 데이터 리스트 중 가장 위에 있는 흉악한 파일(붉은색 영역)을 눌러보면 브라우저에서 서버로 보낸 Request 데이터와 서버에서 브라우저로 보낸 데이터를 확인할 수 있다.

요약

1. http는 데이터를 주고 받는 양식을 정의한 프로토콜 중 하나이다.
2. http는 Request, Response라는 개념으로 데이터를 주고 받는다.
3. http는 크게 Method, Header, Payload 로 구성된다.

reference https://hanamon.kr/

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

공식사이트 바로가기 !! 공식 사이트의 설명에 따르면 node는 크롬 V8 JS 엔진으로 빌드된 JS 런타임이라고 명시되어있고, V8엔진으로 빌드되었지만 구글이 만든것은 아니고 자바스크립트를 실행할 수 있는 환경이라고 보면 된다.

이게 뭔소리 ?? 자바스크립트를 실행할 수 있는 환경이라고 보면 된다. -> 브라우저가 아닌 컴퓨터에서 브라우저 없이 실행하게 도와주는 환경이다.

node js는 Single-Thread의 non-blocking I/O 이벤트 기반 이다.

*런타임 : 컴퓨터 프로그램이 실행되고 있는 동안의 동작을 말한다. 자바스크립트 런타임의 종류 : 웹 브라우저(크롬, 파이어폭스, 익스플로러 등)와 Node.js 등이 있다.

*Thread : 프로세스 내에서 실행되는 여러 흐름의 단위이며, 프로세스가 할당받은 시스템 자원 (CPU 시간, 메모리 영역 등)을 이용하는 실행 단위이다.

*Process : 프로그램이 실행되는 즉시 CPU 로부터 할당받는 자원 (메모리 영역 :Code, Data, BSS, Heap, Stack)

Node js의 장단점

장점 -자바스크립트를 동일하게 사용해서 서버단 로직을 처리할 수 있다는게 가장 큰 장점 -이벤트 기반 비동기 방식이라 서버 자원을 덜 소모한다. -npm을 통한 다양한 모듈(패키지)을 제공한다.

단점 -코드를 실행시켜야 에러 여부가 판단되며, 테스트의 비중이 매우 크다. -업무의 복잡도/ 난이도가 큰 웹서비스에는 어울리지 않는다.

Node의 REPL

REPL 환경이란 ? 입력 받은 코드를 읽어(Read) 메모리에 저장하고, 평가 (Evaluate)된 값을 출력(Print)을 반복(Loop)해주는 간단한 개발 환경이다.

*웹브라우저에서 js REPL이 가능한데 ? 웹 브라우저에서 개발자 도구의 콘솔 창에서도 작업이 가능하지만 node가 제공하는 API를 사용할 수 없고 브라우저의 api를 사용해 DOM을 제어할 수 있다는 차이가 있다.

*사용방법

node JS를 설치 (공식사이트 바로가기)

터미널/콘솔을 켜고 node 입력하면 node js가 제공하는 REPL환경을 사용할 수 있으니 참고하여 유용하게 사용하자 !!

요약

1. node는 크롬 V8 JS 엔진으로 빌드된 JS 런타임이다.
2. node는 Single-Thread의 non-blocking I/O 이벤트 기반 이다.

reference https://haeunyah.tistory.com/81

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

자바스크립트가 존재하기 이전의 웹

자바스크립트가 존재하기 이전의 웹 생태계는 HTML과 CSS로 아주 간단한 스티알만 적용하는게 대부분인 웹 브라우저가 대다수였다.

CSS또한 현재의 웹 브라우저 처럼 화려한 기능들은 존재하지 않았고, 텍스트를 꾸미고 간격을 조정하는게 전부였다.

HTML이라는 단어 그대로 Hyper Text를 이용해서 각 페이지 이동을 원활하게 해주는 순수한 Markup Language 역할만 했다.

참고 *Hyper text : 참조 ( 하이퍼링크 ) 를 통해 독자가 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트이다.

*Markup Language : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지

자바스크립트는 이런 정적인 웹 브라우저 (문서)를 조금 더 동적으로 동작시키기 위해 만들어진 언어이다.

자바스크립트는 NetScape라는 웹 브라우저에서 상호작용을 강조하려고 간단한 기능을 넣어 만든 것이 자바스크립트의 시초가 되었다.

넷스케이프를 기반으로 브라우저를 만드는 각 회사에서 자신들의 웹 브라우저에 다이나믹한 상호작용을 만들기 시작하였고, 웹 개발자들은 각 브라우저에서 동일한 기능을 구현하기 위해 모든 코드를 작성해야했다.. 얼마나 끔찍한가..

이러한 단점을 보완하기 위해 표준화 작업을 진행하였고, 그 결과 ECMAScript(ECMA-262)라는 이름으로 자바스크립트의 표준을 제정하였다.

*Java와 JavaScript는 전 ~ 혀 관련이 없다.

ES6? ES2015?

2015년에 제정된 ECMAScript 표준을 ES2015 라고 부를 수 있다. 즉, ES6 = ES2015 인 셈이다..

2021년 기준 가장 대중적으로 사용되는 버전은 ES6 ES7 버전이다.

*JavaScript 엔진 V8 js가 동작할 수 있는 모든 브라우저에는 js엔진이 내장되어 있는데 크롬에 내장되어 있는 V8 엔진은 ECMAScript 표준을 가장 완벽하게 구현한 엔진이라고 한다. (2021년 기준) 젤루 빠름

요약

1. 자바스크립트 표준은 ECMAScript(ECMA-262) 이다.
2. V8 엔진은 크롬에 내장되어 있으며, ECMAScript 표준을 가장 완벽하게 구현한 엔진이라고 한다.
3. ES6는 가장 대중적으로 사용되는 자바스크립트 버전이다.

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

Application Programming Interface의 약자로 API는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어 할 수 있게 만든 인터페이스를 뜻한다.

인터페이스 ( Interface )

인터페이스는 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고 받는 접점이나 경계면이다. 즉, 사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템을 의미한다.

api는 어떤 일을 할까 ?

1. api는 서버와 데이터베이스에 대한 접근을 도와준다.
2. api는 어플리케이션과 기기가 원활하게 통신할 수 있도록 도와준다.
3. api는 모든 접속을 표준화한다.

REST api ? REST ful ?

개발자라면 REST API라는 단어를 들어보았을 것이다. 그렇다면 저 단어의 의미가 뭘까 ?

우선 REST먼저 살펴보자

REST ( Representational State Transfer )

자원을 이름 ( 자원의 표현 )으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 즉, 자원(resource)의 표현(representation)에 의한 정보 교환 방식이다.

구체적인 개념을 살펴보면 HTTP URL을 통해 자원(resource)을 명시하고, HTTP Method ( GET, POST, PUT, DELETE )를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다.

REST API

REST 기반으로 서비스 API를 구현한 것이다. REST API의 특징을 살펴보면

확장성과 재샤용성을 높여 유지보수 및 운용을 편리하게 할 수 있으며 HTTP 표준을 기반으로 구현하므로, HTTP를 지원하는 프로그램 언어로 클라이언트, 서버를 구현할 수 있다.

즉, REST API를 제작하면 클라이언트 뿐 아니라, JAVA, C#, 웹 등을 이용해 클아이언트를 제작할 수 있다.

RESTful

RESTful은 일반적으로 REST라는 아키텍처를 구현하는 웹 서비스를 나타내기 위해 사용하는 용어이다. REST API를 제공하는 웹 서비스를 RESTful 하다고 할 수 있다.

RESTful은 이해하기 쉽고 사용하기 쉬운 REST API를 만드는 것을 기반으로한다.

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

모든 식별자 (변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정된다. 이를 스코프라고 한다. 즉, 스코프는 식별자가 유효한 범위를 말하며 스코프는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다.

스코프의 종류 ? 전역 vs 지역

전역 스코프는 코드의 가장 바깥 영역 - 전역 변수 지역 스코프는 함수 몸체 내부 영역 - 지역 변수

아래 예제를 통해 콘솔이 어떻게 찍힐지 예측해보자 !!

function one (){
      two();
    console.log('one 내부 !!');
}

three();
console.log('외부 1 !!');

function two(){
    console.log('two 내부 !!');
}

function three(){
    two();
      console.log('three 내부 !!');
}

one();

function four(){
    console.log('four 내부 !!');
}


/*
two 내부 !!
내부 !!
외부 1 !!
two 내부 !!
one 내부 !!

four은 호출을 안했다 ..
*/

호이스팅이란 ?

예제를 먼저 확인해보자

console.log(score);     // undefined
var score ;             // 변수 선언

자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log(score); 가 먼저 실행되는데 console.log(score); 실행 시점에는 score 변수가 선언이 실행되지 않았는데 에러 발생이 나지 않았다.

이유가 뭘까 ?

그 이유는 변수 선언 시점이 인터프리터에 의해 순차적으로 실행되는 시점보다 빠르기 때문이다.

1. 변수 선언
2. 스크립트 코드 순차적으로 실행 ( 런타임 ) 의 순서로 실행이 된다.

이처럼 변수의 선언 시점이 런타임 시점보다 먼저 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라고 한다.

아래 에제 코드는 어떻게 실행될까 ?

console.log(test); 

test = 80;
var test;

console.log(test);

/* 콘솔 출력 결과이다.
undefined
80
*/

TDZ란 ?

var 키워드로 선언하는 변수와 달리 let 키워드로 선언한 변수는 호이스팅이 발생하기 않는 것처럼 동작한다.

console.log(score);     // undefined
var score ;             // 변수 선언

console.log(foo);        // Uncaught ReferenceError: foo is not defined
let foo ;                // 변수 선언

왜그럴까 ?

var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 undefined 로 선언과 초기화가 한번에 진행된다.

하지만 let 키워드로 선언한 변수는 선언과 초기화가 분리되어 진행된다. 즉, 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 런타임 이후 인터프리터에 의해 함수 선언문에 도달했을 때 실행된다.

/*

                런타임 이전 변수 선언 단계            런타임 단계 (인터프리터의 순차적 코드 실행)
var로 선언        선언과 동시에 undefined로 초기화

let로 선언        변수 선언 (초기화 x)<---요기가 TDZ--->함수 선언문에 의한 변수 초기화

*/

위 예시 처럼 변수 선언 후 초기화 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대 (TDZ) 라고 부른다.

요약

1. 스코프는 식별자가 유효한 범위를 말한다.
2. 호이스팅은 변수의 선언 시점이 런타임 시점보다 먼저 동작하는 자바스크립트 고유의 특징이다.
3. TDZ는 let 키워드로 변수 선언 후 초기화 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대 (TDZ) 라고 부른다.

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

-숫자 타입 ( Number ) : 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재한다. -문자열 타입 ( String ) : 문자열 -불리언 타입 ( boolean ) : 논리적 참 (true)과 거짓 (false) -undefined 타입 : var 키워드로 선언된 변수에 암묵적으로 할당되는 값 -null 타입 : 값이 없다는 것을 명시할 때 사용하는 값 -심벌 타입 (symbol) : ES6에서 추가된 7번째 타입

-객체 타입 : 객체, 함수, 배열 등

객체 타입이란 ?

자바스크립트의 데이터 타입은 6가지의 원시 타입 ( Number, String, boolean, undefined, null, symbol) 과 객체 타입으로 ( 참조형 ) 구분할 수 있다.

왜 원시타입과 객체 타입으로 구분할까 ?

원시 타입의 값은 변경이 불가능한 값이고 객체(참조) 타입의 값은 변경 가능한 값이기 때문이다.

그렇다 이해가 안된다.

원시 타입에 대해 더 깊게 들어가보자

변수와 값을 구분해서 생각해보자.

let a = 10; // 변수 선언

위와 같이 변수를 선언하면 10이라는 값을 저장하기 위해 메모리에 공간을 할당 받는다. 할당받은 메모리에는 10이라는 값이 저장된다. 그리고 10이라는 값이 저장된 메모리를 찾아갈 수 있게 지정해 놓은 이름을 변수명이라고 생각하는게 정신 건강에 이롭다.

변수 메모리 a --- 10 (a가 할당 받은 메모리)

다른 예시를 들어보자

let a = 10; // 변수 선언
let b = a; // b = 10

예제를 보면 a 의 값도 10이고 b의 값도 10이다. a와 b가 각각 한 개씩의 메모리 영역을 할당 받아서 값을 각각 저장한다. (총 2개)

변수 메모리 a --- 10 (a가 할당 받은 메모리)
b --- 10 (b가 할당 받은 메모리)

다른 상황을 예로 들어보자

let a = 10;     // 변수 선언
let b = a;         // b = 10
a = 100;         // a = 100

a 변수에 대해 재할당이 된 경우이다. 이 경우에는 우선 a와 b가 각각 한 개의 메모리의 영역을 할당받아 값을 각각 저장한다. 그 이후에 a는 하나의 메모리를 추가로 할당 받아서 100이라는 값을 저장한다. 기존에 a가 10을 저장한 메모리는 가비지 콜렉터가 해제를 시킨다.

변수 메모리 10 -> 가비지 콜렉터에 의해 메모리 해제가 된다. a --- 100 (a가 할당 받은 메모리)
b --- 10 (b가 할당 받은 메모리)

위 동작 과정을 이해하였으면 원시 타입의 값은 변경이 불가능하다는 것을 알 수 있다.

즉, 변수는 값 변경은 재할당이 가능하다. 재할당은 새로운 메모리를 할당받아 새로운 원시 값을 저장하고 사용하지 않는 메모리는 해제한다. 직접적으로 메모리에 저장된 데이터(원시 값)를 변경할 수 없다는 것을 의미하고 위 내용이 원시 타입은 데이터 변경이 불가능한 값이라는 뜻이다.

우리는 왜 이 고생을 해가면서 원시 타입은 값을 변경할 수 없다는 것을 이해했을까? 왜냐하면 다음에 나올 객체와 비교해가면서 이해하려고 했기 때문이다.

진짜 객체 타입이란 ? 

객체는 프로퍼티의 개수가 정해져 있지 않으며, 동적으로 추가되고 삭제할 수 있다. 또한 프로퍼티의 값에 제약이 없다.

참조형은 원시 데이터의 집합이다.

객체(참조) 타입의 값, 즉 객체는 변경 가능한 값이다.

배열, 객체, 함수가 대표적인 참조 타입이다.

객체를 만들어서 변수에 할당해보자

// 변수에 객체를 할당
let person = {
    name : 'kim'             
}

console.log(person);         // {name: 'kim'}
console.log(person.name);     // 'kim'

무슨 일이 벌어졌는지 확인해보자

person 변수에는 객체가 저장되어있는 메모리의 주소가 할당된다. 이를 참조 값이라고 한다. person 변수는 자신에게 할당 된 메모리의 주소 값을 통해 객체에 접근할 수 있다.

변수 메모리 person --- '객체가 저장된 메모리의 주소' -ㄱ (줄을 맞춰야) ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ ㅣ (하는 것이여) ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ ㅣ (얘네는 무시하세요잉) { name : 'kim' } <ㅡㅢ 어우 힘들다

// 변수에 객체를 할당
let person = {
    name : 'kim',
      addr : 'guro'
}

person.name = 'dindin';    // 프로퍼티 값 갱신
person.age = 46;        // 프로퍼티 동적 생성
delete person.addr;        // 프로퍼티 삭제

console.log(person);    // {name: 'dindin', age: 46}

객체는 변경이 가능한 값이므로 메모리에 저장된 객체를 직접 수장할 수 있다. 이때 객체를 할당한 변수에 재할당을 하지 않음으로 person에 할당된 객체 메모리의 값은 변화가 없다.

요약

1. 원시 타입의 데이터는 변경이 불가능하다. ( 메모리에 저장된 값 ) 1-1. 재할당을 통해 변수의 값을 변경할 수 있으나 이는 새로운 메모리를 할당 받는 것이다.
2. 참조형 데이터는 변수에 객체의 메모리 주소를 저장한다. 2-1. 변수에 저장된 메모리 주소를 통해 객체에 접근이 가능하다. 2-2. 객체의 값을 변경하더라도 재할당이 일어나지 않아 변수에 저장된 객체의 메모리 값에는 변경이 없다.

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

자바스크립트의 모든 값은 타입이 있다. 개발자가 본인의 의도에 따라 타입을 변환하는 것을 명시적 타입 변환( explicit ) 또는 타입 캐스팅 ( type casting ) 이라고 한다.

예시를 들어보자

let x = 10; // number

// 숫자를 문자열로 형변환 한다. (명시적 형변환)
let str = x.toString();
console.log(typeof str, str); // string 10

// 원본 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x) // number 10

그러면 원하지 않는데 타입이 바뀌는 경우가 있어요 ???

개발자의 의도와는 상관없이 코드를 작성하는 도중에 자바스크립트 엔진이 개입하여 암묵적으로 타입이 자동 변환되기도 한다. 이를 암묵적 타입 변환 ( implicit coercion ) 또는 타입 강제 변환 ( type coercion ) 이라 한다.

예시를 들어보자

let x = 10 ; // number

// 문자열 연결 연산자는 숫자 타입의 값을 바탕으로 새로운 문자열을 생성한다. ( 암묵적 타입 변환 )
let str = x+''; // 개발자의 의도와는 상관 없이 문자열 연결 연산자로 인해 문자열 타입으로 변환된다.
console.log(typeof str, str); // string 10

// 원본 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

형변환의 의미는 기존 원시 값을 직접적으로 변경하는 것이 아니다. 위의 예제를 들면 x의 변수 값이 변하지 않고 x의 값을 바탕으로 새로운 변수에 할당하는 것이다. 즉, 기존 변수에 재할당하여 변경하는 것이 아니다.

다양한 명시적 타입 변환

// 문자열로 형변환
String(30);            // '30'
NaN.toStriong();    // 'NaN'
true+'';            // 'true'

// 숫자열로 형변환
Number('999');        // 999
parseInt('-30');    // -30
+56                    // 56
+true                // 1
Number(false);        // 0

다양한 암묵적 타입 변환 ( 예측하기 힘든 암묵적 타입 변환 )

'10'+2 // '102'
5*'10' // 50
!0 // true
if(1) console.log('메롱') // '메롱'
if(0){ console.log('메롱') }else{ console.log('바보') } // '바보'

// 템플릿 리터럴
`1+1 = ${1+1}` // '1 + 1 = 2'

요약 1.개발자가 본인의 의도에 따라 타입을 변환하는 것을 명시적 타입 변환 혹은 타입 캐스팅이라고 한다. 2.발자의 의도와는 상관없이 자바스크립트 엔진이 개입하여 타입을 변환하는 것을 암묵적 타입 변환 혹은 타입 강제 변환이라고 한다.

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

대표적인 동적 타입 언어 : JavaScript, Python, PHP, Ruby, Lisp, Perl 등 대표적인 정적 타입 언어 : JAVA, C, C++, GO, Haskell, Rust, Scala 등

뭐가 다른걸까?

정적 타입 언어

기본적으로 정적 타입의 언어는 변수를 선언할 때 변수에 할당할 수 있는 값으 종류, 즉 데이터 타입을 사전에 선언해야한다. 이를 명시적 타입 선언이라 한다. ( explicit type declaration )

// c에서 변수를 선언하는 예시
char c; // c 변수에는 1바이트 정수 타입의 값만 할당할 수 있다.

int num; // num 변수에는 4바이트 정수 타입의 값만 할당할 수 있다.

위와 같이 정적 타입 언어는 변수의 타입을 변경할 수 없고 변수에 선언한 타입에 맞는 값만 할당할 수 있다. 이러한 정적 타입 언어는 컴파일 시점에 타입을 체크하는데 이 과정에서 타입에 맞지 않는 변수가 할당되면 에러 메세지와 함께 프로그램 실행 자게를 막는다.

그렇다면 동적 타입 언어는 어떤지 살펴보자

동적 타입 언어

동적인 언어는 변수를 선언할 때 데이터 타입을 선언하지 않는다. (다만 자바스크립트는 키워드를 사용해 변수를 선언한다.)

자바스크립트는 정적 타입 언어와 같이 미리 선언한 타입의 값만 할당할 수 있는 것이 아니다. 어떤 데이터 타입의 값이라도 자유롭게 할당할 수 있다.

// let 키워드로 변수 선언
let foo;
console.log(typeof foo); // undefined

foo = 3;
console.log(typeof foo); // number

foo = 'hello';
console.log(typeof foo); // string

foo = false;
console.log(typeof foo); // boolean

foo = null;
console.log(typeof foo); // object

foo = Symbol();
console.log(typeof foo); // symbol

foo = {}; // 객체
console.log(typeof foo); // object

foo = []; // 배열
console.log(typeof foo); // object

foo = () => {}; // 함수
console.log(typeof foo); // object

예제를 통해 let 키워드를 사용해 선언한 변수에 모든 데이터 타입이 할당 되는 것을 확인할 수 있다.

단점은 없나요 ?

복잡한 프로그램에서 변화하는 변수의 값을 추적하기 어려울 수 있을 뿐더러, 타입이 고정되어 있지 않고 동적으로 변하는 동적 타입 언어의 특정 상 변수의 값이 언제든 의도하지 않았는데 변경될 수 있다. 또한 자바스크립트 개발자의 의도와는 다르게 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되기도 한다. 그로인해 엄청난 에러를 생성할 수 있다...

동적 타입의 언어를 사용하는 경우에는 ..

1. 변수는 꼭 필요한 경우에 한해 제한적으로 사용한다.
2. 변수의 유효범위 ( 스코프 )는 최대한 좁게 만들어 변수의 부작용을 억제하자
3. 전역 변수 사용을 자제하자
4. 변수보다는 상수를 사용해 값의 변경을 억제한다.
5. 변수의 네이밍 규칙을 준수하고, 목적이나 의미를 파악할 수 있게 한다.

요약

1. 정적인 언어는 명시적 타입 선언을 한다.
2. 동적인 언어는 데이터의 타입과 상관 없이 자유롭게 할당이 가능하다.
3. 2번과 같은 이유로 동적 타입 언어는 정적 타입 언어에 비해 유연성은 높지만 신뢰성은 떨어지는 특성을 가지고 있다.

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

-숫자 타입 ( Number ) : 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재한다. -문자열 타입 ( String ) : 문자열

-불리언 타입 ( boolean ) : 논리적 참 (true)과 거짓 (false) -undefined 타입 : var 키워드로 선언된 변수에 암묵적으로 할당되는 값 -null 타입 : 값이 없다는 것을 명시할 때 사용하는 값 -심벌 타입 (symbol) : ES6에서 추가된 7번째 타입 -객체 타입 : 객체, 함수, 배열 등

불리언 타입이란 ?

불리언 타입은 논리적 참 혹은 거짓을 나타내는 true, false 이다.

let bool = true;
console.log(bool); // true

bool = false;
console.log(bool); // false

불리언 타입의 값은 조건문에서 주로 사용하는데 간단한 코드를 작성해보자

let bool = true;
function conditional(data){
  if(data){
    console.log(`data의 값은 참입니다 : ${data}`);
  }else{
    console.log(`data의 값은 거짓입니다 : ${data}`);
  }
}

conditional(bool); //data의 값은 참입니다 : true


bool = false;
conditional(bool); //data의 값은 거짓입니다 : false

undefined 타입이란 ?

var 키워드로 선언한 변수는 암묵적으로 undefined로 자동 초기화된다. 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄지기 전에 자바스크립트 엔진이 undefined로 초기화한다.

선언과 초기화는 따로 글에서 다룰 예정이다

그럼 let과 const 키워드는 ? 우선 예시 코드를 살펴보자

var foo;
console.log(foo); // undefined

let foo1;
console.log(foo1); // undefined

const foo2; // SyntaxError: Missing initializer in const declaration

var과 let 키워드로 선언한 변수를 확인해보니 두 값 모두 undefined가 나왔다. const는 선언 자체가 오류가 난다.

var과 let의 키워드는 undefined로 초기화되는 시점이 다른데 이 내용은 선언과 초기화를 다룰때 같이 다루겠다.

null 타입이란 ?

프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다.

즉, 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 뜻이다.

다만

let foo = '집인데 집에 가고싶어요';
foo = null;

위 처럼 null을 선언해서 참조를 제거하기 보다는 변수의 스코프를 좁게 만들어서 변수 자체를 재빨리 소멸시키는게 더 좋다.

또한 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다.

심벌 타입이란?

심벌은 ES6에서 추가된 7번째 타입으로, 변경 불가능한 원시 타입의 값이다.

심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 주로 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.

// 심벌 값 생성
let key = Symbol('asd2468');
console.log(key); // Symbol(asd2468)
console.log(typeof key); // symbol

요약

1. undefined는 자바스크립트 엔진이 초기화 시켜주는 값
2. null은 더 이상 값을 참조하지 않겠다는 의미

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

템플릿 리터럴은 백틱 (` `) 을 사용해서 표현하는 문자열 표기법인데 ES6 부터 도입되었다.

따옴표로 문자열을 표현할 수 있는데 왜 필요할까 라는 생각이 들어야 정상이다.

템플릿 리터럴은 편리한 문자열 처리 기능을 제공한다.

1.멀티라인 문자열 ( multi-line string ) 2.표현식 삽입 ( expression interpolation ) 등등 ..

템플릿 리터럴은 런타임 시점에 문자열로 변환되어 처리된다.

1. 멀티라인 문자열 ( multi-line string )

일반적인 문자열 내에서는 이스케이프 시퀀스를 사용하지 않는 이상 줄바꿈이 허용되지 않는다.

// 이스케이프 시퀀스를 사용해서 줄바꿈을 표현하는 경우
let escapeStr = "<div>\n\t<a href='#'>편의점가기</a>\n</div>";

console.log(escapeStr);
/*
<div>
    <a href='#'>편의점가기</a>
</div>
*/

// 템플릿 리터럴을 사용해서 줄바꿈을 표현하는 경우
let templateStr = `<div>
    <a href="#">편의점가기</a>
</div>`;

console.log(templateStr);
/*
<div>
    <a href="#">편의점가기</a>
</div>
*/

콘솔 출력 결과가 같고 훨씬 직관적이고 사용이 쉽다.

2.표현식 삽입 ( expression interpolation ) 

문자열에서 표현식을 표현하려면 + 연산자를 통해 사용해야 했지만 템플릿 리터럴을 사용하면 ${표현식}으로 표현할 수 있다.

const name = '기영이';
const name2 = '기철이';

// 기존 문자열 표현 방법
console.log(name+'와'+' '+name2+'는 형제입니다.'); // 기영이와 기철이는 형제입니다.

// 템플릿 리터럴을 사용한 표현 방법
console.log(`${name}와 ${name2}는 형제입니다.`); // 기영이와 기철이는 형제입니다.

// 템플릿 리터럴을 사용한 표현 방법2
console.log(`1 + 2 = ${1+2}`); // 1 + 2 = 3
console.log('1 + 2 = ${1+2}'); // 1 + 2 = ${1+2}

콘솔 출력 결과가 같고 훨씬 직관적이고 사용이 쉽다.

요약 1.문자열에 줄바꿈을 표현하는 경우, 템플릿 리터럴 승 2.문자열에 표현식을 추가하는 경우, 템플릿 리터럴 승 3.템플릿 리터럴 쓰는게 정신건강과 유지보수에 좋다.

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

-숫자 타입 ( Number ) : 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재한다. -문자열 타입 ( String ) : 문자열 -불리언 타입 ( boolean ) : 논리적 참 (true)과 거짓 (false) -undefined 타입 : var 키워드로 선언된 변수에 암묵적으로 할당되는 값 -null 타입 : 값이 없다는 것을 명시할 때 사용하는 값 -심벌 타입 (symbol) : ES6에서 추가된 7번째 타입 -객체 타입 : 객체, 함수, 배열 등

Number 타입이란 ?

java, C와 같은 언어는 정수, 실수를 구분해서 다양한 숫자 타입을 제공한다. 하지만 자바스크립트는 하나의 숫자 타입만 존재하고 모든 수를 실수로 처리해준다.

let integer = 10;     // 정수
let double = 10.12;    // 실수
let negative = -10;    // 음의 정수

console.log(1 === 1.0); // true
console.log(4 / 2); // 2
console.log(3 / 2); // 1.5

숫자 타입은 추가적으로 세 가지 특별안 값도 존재한다.

console.log(10 / 0); // Infinity : 양의 무한대
console.log(10 / -0); // -Infinity : 음의 무한대
console.log(1 * 'String'); // NaN (not-a-number): 산술 연산 불가
// NaN은 대소문자를 구별하기 때문에 사용할 때 주의해야 한다 !!

문자열 타입이란 ?

문자열 타입은 텍스트 데이터를 표현하는데 사용한다. 문자열을 사용하는 표기법은 ' ' : 작은따옴표 " " : 큰따옴표 ` ` : 백틱 (ES6) 이 세가지가 있는데 이 세 가지로 텍스트를 감싸서 문자열을 표현할 수 있다.

따옴표로 감싸지 않으면 텍스트를 키워드나 식별자로 인식하는 오류가 발생할 수 있다.

// 정상적인 따옴표 사용법
let str = '문자열 "내부" 문자열'; 
console.log(str); // '문자열 "내부" 문자열'

let string = "문자열 '내부' 문자열";
console.log(string); // "문자열 '내부' 문자열"

// 따옴표 구분을 하지 않는 경우
let errstr = '문자열 '내부' 문자열'; // Uncaught SyntaxError: Unexpected identifier '내부'

문자열을 언급하면서 백틱 (` `)을 언급하지 않았는데 앞으로 자주 써야하고 중요하기에 나눠서 정리한다.

요약

1. 자바스크립트는 하나의 숫자 타입만 존재하고 모든 수를 실수로 처리해준다.
2. 문자열은 큰/작은 따옴표를 사용해서 텍스트를 감싸서 표현한다.
3. 백틱, 템플릿 리터럴은 다음 글에..

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

pop 메서드는 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환해준다. 요소를 제거하려는 배열이 빈 배열이면 undefined를 반환해준다. pop 메서드는 push, unshift 메서드와 마찬가지로 원본 배열을 직접 변경한다.

// 배열 선언
const arr = ['민수','덕수','길동']

// 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환
let result = arr.pop();
console.log(result); // '길동'

Array.shift();

shift 메서드는 원본 배열 첫 번째 요소를 제거하고 제거한 요소를 반환한다. 요소를 제거하려는 배열이 빈 배열이면 undefined를 반환해준다. shift 메서드는 push, unshift, pop 메서드와 마찬가지로 원본 배열을 직접 변경한다.

// 배열 선언
const arr = ['하나','둘','셋','넷'];

// 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환
let result = arr.shift();
console.log(result); // '하나'

요약

1. pop 메서드는 배열의 마지막 요소를 제거하고 제거한 요소를 반환해준다.
2. shift 메서드는 배열의 첫 번째 요소를 제거하고 제거한 요소를 반환해준다.

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

unshift 메서드는 인수로 전달받은 모든 값을 원본 배열의 앞부분에 요소로 추가하고 변경된 배열의 length 프로퍼티 값을 반환한다.

// 배열 선언
const arr = ['하나','둘','셋','넷'];

// 배열의 앞부분에 요소를 추가하고 result 변수에 값을 넣어준다.
let result = arr.unshift('영');

// arr.unshift(...) 의 리턴 값 확인
console.log(result); // 5

// arr 배열 요소 확인, 원본 배열을 직접 변경하는 것을 확인할 수 있다.
console.log(arr); // ['영','하나','둘','셋','넷']

unshift 메서드는 원본 배열을 직접 변경하는 부수 효과가 있다. 원본을 변경해서 예상하지 못한 위험을 줄이기 위한 방법도 있는데 ES6의 스프레드 문법을 사용하는 것이다.

// 배열 선언
const arr = [1,2];

// ES6 스프레드 문법을 사용한 배열 요소 추가
let newArr = [-1,0, ...arr];
console.log(newArr); // [-1,0,1,2,3]

이 방법은 함수의 호출 없이 요소를 추가할 수 있으며, 원본이 변경되어 발생하는 위험도 적다.

요약

1. unshift 메서드는 원본 배열을 직접 변경하고, 변경된 배열의 길이를 반환한다.
2. 원본 변경의 위험을 줄이고 싶으면 스프레드 문법을 사용하면 된다.

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

JWT는 약자 그대로 Json 형식의 웹 토큰을 의미한다. 공식 홈페이지를 방문해보자 >> 클릭!!아주아주 흉물스럽다 .. 우선 인코드된 문자열을 확인해보자 !

*공식문서에서 확인 할 수 있는 JWT 토큰 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

.으로 세 영역을 구분하고 있는데 각각 살펴보자

HEADER:ALGORITHM & TOKEN TYPE.PAYLOAD:DATA.VERIFY SIGNATURE

헤더에서는 두 가지의 정보를 가지고 있다.

ALGORITHM : 해시 알고리즘의 정보, 데이터를 암호화 해주는 알고리즘의 정보를 넣어준다. +추가로 주로 사용하는 알고리즘은 HS256라고들 한다!!

TOKEN TYPE : 토큰의 타입을 지정해준다. 당연하게도 JWT가 들어가 있다

// 예시 !
{ "alg": "HS256", "typ": "JWT" }

위와 같은 정보가 암호화가 되어서 JWT의 HEADER를 구성한다.

HEADER:ALGORITHM & TOKEN TYPE.PAYLOAD:DATA.VERIFY SIGNATURE

payload 에는 토큰에 넣어줄 정보를 가지고 있다.

Registered claims(등록된 클레임) : 사전에 이름이 정의 된 클레임이다. 필수 값은 아님!!!

1. iss : 토큰 발급자 (issuer)
2. sub : 토큰 제목 (subject), 토큰의 주제를 설명한다.
3. aud : 토큰 대상자 (audience)
4. exp : 토큰의 만료시간 (expiraton), 숫자 형식으로 유효기간이 지난 토큰은 사용 불가능 하도록 처리한다. 또한 현재 시간보다 이후로 설정되어야한다.
5. nbf : Not Before 를 의미하며, 만료시간과 마찬 가지로 숫자 형식이며, 해당 시간 이전에는 사용라지 않도록 처리 합니다.
6. iat : 토큰이 발급된 시간 (issued at)
7. jti : JWT ID, 주로 중복적인 처리를 방지하기 위하여 사용됩니다

공개 (public) 클레임 공개용 정보를 위해 사용 된다, 일반적으로 충돌 방지를 위해 URI 형태로 구성된다.

Private claims(비공개 클레임) 토큰을 주고 받는 양측에서 사전 협의된 이름으로 사용되는 클레임이다.

이 글에서는 간단하게 예시를 들고 넘어가도록 하겠다.

귀찮아서 그런거 아니다

// 예시 !
{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

위와 같은 정보가 암호화가 되어서 JWT의 payload를 구성한다.

HEADER:ALGORITHM & TOKEN TYPE.PAYLOAD:DATA.VERIFY SIGNATURE

VERIFY SIGNATURE (서명) 에는 JWT의 위변조를 검증하기 위한 정보를 가지고 있다. 인코딩한 Header, Payload 값을 합친 후, 헤더의 alg에서 정의된 알로리즘으로 인코딩하여 생성한다.

//서명을 만드는 슈도코드(pseudocode)의 구조이다.
HMACSHA256(
   base64UrlEncode(header) + "." +
   base64UrlEncode(payload),
   secret
)

JWT 동작 방식

1. 클라이언트에서 권한을 요청
2. 권한이 부여되면 서버에서 액세스 토큰을 생성 후 반환
3. 클아이언트에 엑세스 토큰을 로컬 쿠키에 저장
4. 클라이언트는 서버에 요청할 때 항상 헤더에 엑세스 토큰을 포함시켜서 요청한다.
5. 요청에 포함된 토큰을 받아서 유효한 토큰인지 secret key를 통해 검증
6. 서버가 클라이언트 측으로 데이터 전달
7. 엑세스 토큰의 수명이 만료되면 토큰을 재발급하여 사용

더 자세하게 포스팅 된 글을 보고싶다면 ?! https://bravenamme.github.io/2021/03/25/jwt/ https://velopert.com/2389 https://sudo-minz.tistory.com/53

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!