안랩샘아카데미 React로 시작하는 프론트엔드 4주차 정리

JavaScript 심화

구조분해할당

구조분해할당(비구조화할당) 문법은
배열이나 객체에 저장된 여러 개의 값들을 분해해서 각각 다른 변수에 할당하고
객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언할 수 있다.

const object = { a: 1, b: 2 };
const { a, b } = object;
console.log(a); // 1
console.log(b); // 2

실습

// 구조분해할당 사용- 배열
let arr = [1,2,3];

//let one = arr[0];
//let two = arr[1];
//let three = arr[2];

let [one,two,three] = arr; 

console.log(one, two, three); // 1 2 3 

//2개만 선언한 경우
let [one, two] = arr;

console.log(one, two); // 1 2

//4개 선언한 경우
let [one,two,three,four] = arr; //four는 선언했지만 할당

console.log(one, two, three, four); // 1 2 3 undefined


//구조분해할당 사용-객체
let arr = { name: "홍길동", age: 20, job: "개발자"};

let {name, age, job, hobby="hello"} = arr; //초기화하면서 hobby를 넣어줄수있다.

console.log(name, age, job, hobby); //홍길동 20 개발자 hello

구조분해할당 - 함수파라미터

• 함수의 파라미터에서도 비구조화 할당 가능

//객체를 파라미터로 받아서 키로 접근
let arr = { a:1, b:2 };
function print(arr){
    console.log(arr.a)
    console.log(arr.b);
}
print(arr);

//사용 예1
let arr = { a: 1, b: 2 };
let { a, b } = arr;
function print(a,b){
    console.log(a)
    console.log(b);
}
print(a,b);

//사용 예2 
let arr = { a:1, b:2 };

function print(arr){
	let {a, b} = arr;
    console.log(a)
    console.log(b);
}
print(arr);


//사용 예3
let arr = { a: 1, b: 2 };

function print({ a, b }) {
console.log(a);
console.log(b);
}
print(arr);

//사용 예4->b의 기본값을 2로 초기화해서 사용할 수 있다.
let arr = { a: 1 };

function print({ a, b = 2}) {
console.log(a);
console.log(b);
}
print(arr);

Spread 연산자와 Rest 매개변수

spread 연산자

• spread: 펼치다, 퍼뜨리다
• 객체 혹은 배열을 펼칠 수 있다.

//spread연산자 ... 사용하기
const person = {
    name: "홍길동",
};

const person2 = {
    ...person,
    attribute: "cute",
};

const person3 = {
    ...person2,
    age: 20,
};

// spread 사용하기- 4와 5사이에 arr1넣기 
let arr1=[1,2,3];
let arr2=[4,...arr1,5,6];
console.log(arr2);

rest

• rest: 나머지
• rest는 객체, 배열, 그리고 함수의 파라미터에서 사용이 가능

const numbers = [0,1,2,3,4,5,6];

const [one, ...rest] = numbers;
// const [...rest,one] = numbers; //SyntaxError->rest는 앞에 올수없다.

console.log(one); // 0
console.log(rest); // [1,2,3,4,5,6]

const [one,two,three, ...rest] = numbers;

console.log(one); // 0
console.log(rest); // [3,4,5,6]


function sum(...rest){
	let result = 0
    for(let i = 0 ; i < arr.length; i++){
         result += rest[i]
    }
    return result;   
    //reduce 이용하기
    return rest.reduce((acc, current) => acc + current, 0);
}

// result=sum(1,2);
// result=sum(1,2,3);
const result=sum(1,2,3,4,5,6);
const numbers = [1,2,3,4,5,6];

const result = sum(...numbers);

console.log(result);

비동기작업

function work(callback) {
    setTimeout(() => {
    const start = Date.now();
    for (let i = 0; i < 1000000000; i++) {}
    const end = Date.now();
    console.log(end - start + "ms");
    callback();
    }, 0);
    }
    console.log("작업 시작!");
    work(() => {
    console.log("작업이 끝났어요!");
    });
    console.log("다음 작업");
    
 //숫자 n 을 파라미터로 받아서 다섯번에 걸쳐 1초마다 1씩 더해서 출력하기
//setTimeout함수와 콜백함수 이용해서 구현해보기
function work(n,callback){
    setTimeout(() =>{
        const num = n+1;
        console.log(num);
        callback(num);
    },1000);
}
console.log("작업 시작");
work(0,(n) =>{
    work(n,(n) =>{
        work(n,(n) =>{
            work(n,(n) =>{
                work(n,(n) =>{
                    console.log("작업 끝");
                });
            });
        });
    });
});
console.log("다음 작업");

프로미스

• 비동기 작업을 조금 더 편하게 처리 할 수 있도록 ES6 에 도입된 기능

• 콜백 함수로 처리를 하게 된다면 비동기 작업이 많아질 경우 코드가 쉽게 난잡

• 숫자 n 을 파라미터로 받아와서

• 다섯번에 걸쳐 1초마다 1씩 더해서 출력하는 작업을

• setTimeout 으로 구현

프로미스 만들기
const myPromise = new Promise((resolve, reject) => {
// 구현..
});

//프로미스 사용하기
const myPromise = () => 
    new Promise((resolve,reject) => {
        let a = 2;
        if(a == 2) {
            resolve("success");
        } else {
            reject("failed");
        }
    });
    
myPromise().then((message) => {
    console.log("This is in the then" + message);
}); // 성공메세지 출력

.catch((message) => {
    console.log(message);
}); // 실패메세지 출력

//프로미스 resolve,reject 연습하기
const myPromise = () => 
    new Promise((resolve,reject) => {
       setTimeout(() => {
        resolve(1);
       }, 3000)
    });

const myPromise = () => 
    new Promise((resolve,reject) => {
       setTimeout(() => {
        reject("failed");
       }, 3000)
    });

myPromise().then((message) => {
    console.log(message);
})

.catch((message) => {
    console.log(message);
});

//숫자 n 을 파라미터로 받아서 다섯번에 걸쳐 1초마다 1씩 더해서 출력하기
// 프로미스로 구현해보기
const myPromise = (n) => {
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            const num = n+1
            if(num>5){
                reject("error")
            }else{
                console.log(num)
                resolve(num)
            }
        }, 1000)
    }).then((num)=>myPromise(num))
    .catch((message)=>console.log(message))
}

function work(n,callback){
   return new Promise((resolve,reject) =>{
    setTimeout(() => {
        const value = n+1;
        if(value > 5) {
            const error = new Error();
            error.name = "ValueIsFiveOver";
            reject(error);
            return;
        }
        console.log(value);
        resolve(value);
    }, 1000);
   });
}

work(0).then((n) =>{
    return work(n);
})
.then((n) => {
    return work(n);
})
.then((n) => {
    return work(n);
})
.then((n) => {
    return work(n);
})
.then((n) => {
    return work(n);
})
.catch((e) => {
    console.error(e);
});

async/await 문법

• ES8에 해당하는 문법으로서, Promise 를 더욱 쉽게 사용 할 수 있다.

function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function process() {
console.log("안녕하세요!");
await sleep(1000); // 1초 쉬고
console.log("반갑습니다!");
}
process();

async

• 어떤 함수를 비동기 함수로 만들어주는 키워드
• 함수가 프로미스를 반환하도록 함

await

• async 함수 내부에서만 사용이 가능한 키워드
• 비동기 함수가 다 처리되기를 기다리는 역할

function sleep(ms){
    return new Promise((resolve) => setTimeout(resolve,ms));
}

async function process() {
 console.assert("안녕하세요");
 await sleep(1000); //async 안에서만 await 사용가능
 console.log("반갑습니다.");
}

process();


const Dog = async () => {
    await sleep(1000);
    return "멍멍";
}

const Rabbit = async () => {
    await sleep(500);
    return "깡총";
}

const Turtle = async () => {
    await sleep(3000);
    return "엉금";
}

async function process(){
    // const dog = await Dog();
    // console.log(dog);
    // const rabbit = await Rabbit();
    // console.log(rabbit);
    // const turtle = await Turtle();
    // console.log(turtle);
    const results = await Promise.all([Dog(),Rabbit(),Turtle()]);
    console.log(results); // 동시에 출발-> [`멍멍`, `깡총`, `엉금`]
}

process();

Node.js

자바스크립트 엔진

• 자바스크립트는 자바스크립트 엔진 필요
• 웹 브라우저

JavaScript 실행 환경(Run Time)

• node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임
• 자바스크립트가 웹 브라우저 밖에서도 동작할 수 있도록
• React.js도 node.js 를 기반으로 동작하는 기술

JavaScript 실행 환경(Run Time)

• node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임

설치후 cdm으로 node -v로 버전을 확인해서 설치된걸 확인할 수 있다.

npm
Node Package Manager

• node.js에서 사용하는 패키지를 관리하는 도구
• CLI: Command Line Interface -> 터미널
• node index.js

vs code에서 터미널이용해서 패키지를 생성하는 명령어 npm init 입력해서
패키지이름, 버전, 세부사항 등 확인하고 패키지를 생성하면
package.json 생성된다.

{
  "name": "nodepkqtest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

index.js

console.log("Hello node.js");

src폴더밑에 index.js가 있을경우 매번 node src/index.js를 입력하기번거로운경우 "scripts"에 "start": "node src/index.js"를 추가해서 npm start 명령으로 똑같은 결과를 출력한다.

변경한 package.json

{
  "name": "nodepkqtest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node src/index.js"
  },
  "author": "",
  "license": "ISC"
}

모듈시스템(Module system)이란?

• 모듈을 다루는 다양한 기능을 제공하는 시스템
• 모듈 생성, 불러오기, 사용하기
• Common JS(CJS)
• ES module(ESM)

math.js

function add(a,b) {
    return a+b;
}

function sub(a,b) {
    return a-b;
}

module.exports = {
    //add: add, 
    //sub: sub, //같은 이름일경우 함수의이름만 명시하면된다.
    add,
    sub,
};

index.js

const moduleData = require("./math");

//console.log(moduleData);

console.log(moduleData.add(3,4));
console.log(moduleData.sub(3,4));

구조분해할당 사용해서 index.js 변경하기

const {add,sub} = require("./math");

console.log(add(3,4));
console.log(sub(3,4));