• 사용자가 요청한URL에 따라 해당URL에 맞는 페이지를 보여주는 것
• 가장 많이 쓰이는 라이브러리? React Router

리액트 라우터(React Router)

• 개발자가 주소별로 다른 컴포넌트를 보여주기 위해 사용하는 라이브러리
• 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트 제공
• 주요 컴포넌트 BrowserRouter Routes Route Link createBrowserRouter

BrowserRouter

• Router의 역할
• 새로고침을 하지 않아도 새로운 컴포넌트를 렌더링 해주는 기능 담당
• URL마다 컴포넌트가 바뀔때 이때 바뀌는 부분의 최상단에 위치 해야 한 다.

Routes, Route

• 경로가 일치하는 컴포넌트를 렌더링 해주도록 경로 매칭
• Route에서는 구체적으로 어떤 컴포넌트를 렌더링할지 결정

Link

• 경로를 변경한다
• 기존 HTML의 a 태그가 새로고침해 렌더링을 수행했다면 컴포넌트는 페이지 전환을 방지한다.

URL 파라미터

• useParams()
• /product/:id
• 경로에: 를사용해설정되는것
• URL 파라미터가여러개인경우/product/:id/:name 처럼 설정

URL 쿼리스트링

페이지 이동

참고

[코딩온] 웹개발자 풀스택 과정 15주차 ppt

• 클래스 컴포넌트에서만 가능했던 state(상태관리) 와 lifecycle(라이프사이클) 이 가능하도록 돕는 기능

let list = ['a','b','c','d','e'];
for ( let i = 0; i < list.length; i++) {
    console.log( list[i] );
}

hooks 사용규칙

• 최상위 단계에서만 호출 가능

  • 최상위 컴포넌트 X
  • 반복문, 조건문, 중첩된 함수 내부에서 호출하면 안되는 것!

• hooks는 오로지 React 함수형 컴포넌트 안에서만 호출이 가능하다

• 커스텀 훅 이름은 "use"로 시작(권장사항)

hooks종류

• useState(): 상태 관리를 위한 가장 기본적인 훅
• useRef(): 참조(reference)를 생성하고 관리할 수 있는 훅 (DOM 접근, 변수 보존 등)
• useEffect(): 컴포넌트가 랜더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅
• useMemo(): 메모이제이션을 통해 함수의 리턴 값을 재사용할 수 있게 해주는 훅
• useCallback(): 함수를 메모이제이션하여 불필요한 렌더링을 줄이게 해주는 훅
• useReducer(): 복잡한 컴포넌트 상태 로직을 리듀서 함수를 통해 관리할 수 있는 훅
• useContext(): 리액트에서 전역적으로 접근 가능한 데이터나 함수를 관리하고, 불필요한 컴포넌트에서 그 값을 바로 가져와 사용할 수 있게 도와주는 훅

useMemo()

• 함수형 컴포넌트 내부에서 발생하는 연산을 최적화시켜주는 hook
• 렌더링 과정에서 특정 값이 바뀌엇을 때만 연산을 실행한다.

const memoizedValue = useMemo(callback,dependency)

• 렌더링 과정에서 두 번째 인자로 받은 의존 배열내 값이 바뀌는 경우에만 첫번째 인자로 받은 콜백함수를 실행해 구한 값을 반환한다.

useCallback

• 렌더링 최적화에 사용되는 hook API
• useMemo와 유사함. useMemo에서는 값을 최적화 시켰지만, 다시 rendering 될 때 함수를 다시 불러오는 것을 막는다.

const memoizedCallback = useCallback(callback, dependency)

const onClikc = useCallback(e => {
    e.preventDefault();
    setNumber(number + 1);
}, [number]);

hook - useReducer()

• reducer란? 현재 상태와 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수

Custom Hooks

• 컴포넌트에서 반복되는 로직이 많을 때 custom hooks을 이용하면 편리

• 즉, 컴포넌트 분할과 달리 컴포넌트 로직 자체를 분할하거나 재사용이 가능

• 보통은 hooks/ 디렉토리 안에 커스텀 훅을 정의하여 사용

  • use 로 시작하는 파일을 만드는 것이 관례
  • ex. useScroll.js, useToggle.js 등

참고

[코딩온] 웹개발자 풀스택 과정 14주차 ppt

• Mount

  • Dom이 생성되고 웹 브라우저 상에 나타남

• Update

  • props or state 바뀌었을 때 업데이트함

• UnMount

  • 컴포넌트가 화면에서 사라질(제거될) 때

함수형 컴포넌트

useEffect()

• 함수형 컴포넌트에서는 useEffect()를 사용해 Mount, Update, Unmount 시 특정 작업을 처리

useEffect(effect, deps);
// effect: 랜더링 이후 실행할 함수 (Mount, Update)
//     - effect 함수에서 함수를 return 시 반환하는 함수가 컴포넌트 Unmount 될 때 실행됨
// deps: 배열 값이 변하면 effect 함수 실행
//     - 생략: Mount & Update 시 동작
//  - []: 빈 배열 -> Mount 시에만 동작
//  - [data]: 배열 안의 data 값이 Update 시 동작

// 컴포넌트 Mount or Update 될 때 동작
useEffect(() => {});

// 컴포넌트 Mount 될 때 동작
useEffect(() => {}, []);

// data 값이 Update 될 때 동작
const [data, setData] = useState();
useEffect(() => {}, [data]);

컴포넌트가 rendering 될 때마다 특정 작업을 수행

useEffect(() => {
    console.log('렌더링이 완료되었습니다.');
    console.log( "name : ", name, " & email : ", email)
})

useEffect(() => {
    console.log('처음 렌더링될 때만 실행됨!!');
}, []);

• Mount 될 때만 실행된다.
  • Mount: 최초 rendering

useEffect()

• 특정 값이 바뀔 때만 실행하게 하고 싶다면?

  useEffect (() => {
    console.log(name);
  }, [name]);     // 함수형 컴포넌트

• 컴포넌트가 unmount 되기 직전에 작업을 수행하고 싶다면? => cleanup(뒷정리 함수) 이용하기 return 으로 함수 반환하기

  useEffect (() => {
    console.log("effect");
    console.log(name);
  
    return () => {
        console.log("cleanup");
        console.log(name);
    };
  });

실행 예시

import { useState, useEffect } from 'react';

const myComponent = (props) => {
    const { number } = porps;
    const [text, setText] = useState('');

    useEffect(() => {
        // Mount 시점에 실행
        console.log('Funcitional Component | mount!');

        // Unmount 시점에 시행
        return () => {
            console.log('Functional Component | unmount');
        }
    }, []);

    // Mount & Update 시점에 실행
    useEffect(() => {
        console.log('Functional Component | update!');
    });


    // text 가 바뀔 때만 실행
    useEffect(() => {
        console.log('Functional Component | text update!');
    }, [text]);

    return (
    <>
        <p>MyComponent {number}</p>
        <input
            type="text"
            value={text}
            onChange={(e) =>. setText(e.target.value)}
        />
    </>
    );
};

const LifeCycleFunc = () => {
    const [number, setNumber] = useState(0);
    const [visible, setVisible] = useState(true);

    const changeNumberState = () => {
        setNumber(number + 1);
    };

    const changeVisibleState = () => {
        setVisible(!visible);
    };

    return (
        <>
            <button onClick={changeNumberState}>PLUS</button>
            <button onClick={changeVisibleState}>ON/OFF</button>
            {visible && <MyComponent number={number} />}
        </>
    );
};

export default LifeCycleFunc;

결론

리액트의 주기 lifecycle에 대해 알아봣으며 함수형 컴포넌트에서는 useEffect()를 사용해서 작업을 하는 것을 알게 되었다. useEffect()의 사용방법과 use가 들어가는 hooks 에 대해 더 공부할 필요성을 느꼈다.

참고

[코딩온] 웹개발자 풀스택 과정 14주차 ppt

-> React 컴포넌트가아닌HTML Element에 직접 접근해야한다면..?

1) id 지정

• 같은컴포넌트를 반복해서 사용하면 id가 중복되는 문제 => 고유한 id가 되지않음.

반면에 ref는 컴포넌트 내부에서만 작동

ref 란?

• 전역적으로 작동하지 않고 컴포넌트 내부에서 선언 및 사용
• 동일한 컴포넌트를 반복해 사용해도 각 컴포넌트 내부에서만 동작

• 따라서중복되지않음!

• DOM을 직접적으로 건드려야 할 때 사용
• 특정 input에 focus 주기, 스크롤박스조작, 비디오 플레이어의 재생/정지 기능 등

주의! Class 형 컴포넌트에서만 기본 기능으로제공함. 이번 챕터까지 클래스형 컴포넌트 사용. 이후는 함수형 컴포넌트만 사용.

ref 사용하기

함수형 컴포넌트

• 함수형 컴포넌트에서 ref를사용 하기 쉽게 만들어주는 Hook
• useRef()는 인자로 받은 값으로 초기화된 변경 가능한ref 객체를반환 한다.
• ref.current로 현재 가리키는 객체에 접근할 수 있다.

참고

[코딩온] 웹개발자 풀스택 과정 13주차 ppt

일반 for 반복문

let list = ['a','b','c','d','e'];
for ( let i = 0; i < list.length; i++) {
    console.log( list[i] );
}

map() 함수

• map()의 인자로 넘겨지는 callback 함수를 실행한 결과를 가지고 새로운 배열을 만들때 사용
• map() 함수를 필요에 따라 반복문처럼 사용할 수도 있음

map() 함수 문법

arr.map( callbackFunction, [thisArg] )

• callbackFunction
  • 새로운 배열의 요소를 생성하는 함수로, currentValue, index, array 3개의 인수를 가질 수 있다.
  • [thisArg] 는 생략 가능한 것으로 callbackFunction 에서 사용할 this 객체

let list = ['a', 'b', 'c', 'd', 'e'];
let items = list.map((txt, id, arr) => {
    console.log("txt: ", txt);
    console.log("id: ", id);
    console.log("arr: ", arr);
    return txt + id;
})

• txt : list를 순서대로 돌면서 나오는 값
• id : 방금 나온 값(txt)의 인덱스
• arr : 현재 반복을 돌고 있는 배열
• items: "return txt + id"로 만들어진 배열

배열 데이터, map()과 함께 사용

• 배열 데이터를 좀 더 효율적으로 그리기 위해서 map 사용!

• key

  • 기존 요소와 업데이트 요소를 비교하는데 사용되는 속성,
  • 다른 요소와 겹치지 않는 고유한 값이어야 합니다.
  • key는 고유한 값을 가져야 하기 때문에 배열의 요소 중 고유한 값(id 등) 이 존재하지 않는다면 index로 사용해도 됩니다! (단, index를 사용하는 것은 최후의 수단!)

Component에 map()적용

• map() 함수를 이용해 컴포넌트를 생성할 때 “key” 사용을 권장한다.
• Why? React는 자율적으로 업데이트 전 기존 요소와 업데이트 요소를 비교하는데 key를 사용한다.

filter() 함수

• filter()의 인자로 넘겨지는 callback 함수의 테스트(조건)를 통과하는 요소 를 모아 새로운 배열을 생성.
• filter() 함수를 사용하여 배열에서 원하는 값을 삭제하는 코드 구현 가능.

let animals = ['dog', 'cat', 'rabbit'];
let newAnimals = animals.filter((animal) => { return animal.length > 3});
console.log(newAnimals);

let newAnimals = animals.filter((animal) => animal.length > 3);

let words = ['dog', 'cat', 'rabbit'];

let result2 = words.filter((word) => {
    return word.includes('a');
});
console.log( result2 );

단축평가란?

• 논리 연산자를 사용하여 특정 조건에 따라 값을 결정하거나, 조건에 따라 특정코드를 실행하는 방법

1) && 연산자를 사용한 단축 평가

• 둘다 참

2) || 연산자를 사용한 단축 평가

• 둘 중 하나 참

  && 연산자

  A && B

• A가 false : B는 아예 확인하지 않고 바로 A의 값을 반환합니다. A가 이미 false이므로 A와 B 모두 참일 수 없기 때문

  const result = false && "Hellog";
  console.log(result); // 출력: false

  • A가 true: 만약 A가 true 라면, B의 값을 확인. 이 경우, B의 값이 반환됩니다.

const name = "Martin";
const greeting = name && `Hello, ${name}!`;
console.log(greeting); // 출력: "Hello, Martin!"

|| 연산자

A || B

• A가 false: B의 값을 확인해야 합니다. 이 경우, B의 값이 반환됩니다.
  const defaultName = "Martin"; const userName = null; const displayName = userName || defaultName; console.log(displayName); // 출력: "Martin"

  - A가 true: B는 아예 확인하지 않고 바로 A의 값을 반환합니다. 왜냐하면 A가 이미 true이므로 A나 B 중 하나만 참이면 되기 때문입니다.

  const result = true || "Hello"; console.log(result); // 출력: true

### 참고
[코딩온] 웹개발자 풀스택 과정 13주차 ppt

• React에서 앱의 유동적인 데이터를 다루기 위한 개체
• 계속해서 변하는 특정 상태
• 상태에 따라 다른 동작을 함
• 왜 사용할까?
  • State가 변경될 시 자동으로 재랜더링 되기 때문
  • 이 점이 변수와 다른점

주의할점

• state는 원칙적으로 클래스형 컴포넌트에서만 사용 가능
• 직접 this.state를 변경하지 말것!!! => 항상 setState를 사용
• setState는 비동기적으로 동작하므로, 이전 상태를 기반으로 계산할 때 함수 형태의 setState를 사용

함수형 컴포넌트의 state

참고

[코딩온] 웹개발자 풀스택 과정 12주차 ppt

• properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소
• props는 컴포넌트끼리 값을 전달하는 수단
• 상위 컴포넌트에서 하위 컴포넌트로 전달 (단방향 데이터 흐름)

{/* 일반 사용법 */}
<ClassComponent></ClassComponent>

{/* props 사용법 */}
<ClassComponent title="제목" content"내용></ClassComponent>

함수형 컴포넌트 props

• 부모 컴포넌트에서 전달한 props는 함수형 컴포넌트에서 함수의 파라미터로 전달받으며, JSX 내부에서 {} 기호로 감싸서 사용한다.

<FuncComponent name="코딩온"></FuncComponent>
{/* 부모 컴포넌트에서 name props 전달*/}

{/* 자식 컴포넌트에서 name props 받음*/}
const FuncComponent = (props) => {
    return(
        <>
            <div>안녕? **{props.name}**</div>
            <div>반가워 !</div>
        </>
    )
}

defaultProps

• 부모 컴포넌트에서 props가 전달되지 않았을 때 기본값으로 보여 줄 props를 설정 하는 것

FuncComponent.defaultProps = {
    nmae: '홍길동'
}

props.children

• 부모 컴포넌트에서 자식 컴포넌트를 호출할 때 태그 사이에 작성한 내용

  <FuncComponent name="코딩온">**자식 내용**</FuncComponent>

{/* 자식 컴포넌트*/}
const FuncComponent = (props) => {
    return(
        <>
            <div>안녕? **{props.name}**</div>
            <div>반가워 !</div>
            <h4>**{prop.children}**/<h4>
        </>
    )
}

propTypes

• 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용
• JavaScript의 "유연한 특성"을 해결하기 위해 권장되는 기능
• 정해진 타입이 아닌 다른 타입으로 정보가 전달될 시, 제대로 동작은 하지만 console에 오류가 나온다.

impport PropTypes from "prop-types";

FuncComponent.propTypes = {
    name: PropTypes.string
}

클래스형 컴포넌트 props

class ClassComponent extends Component {
    render() {
        return(
            <h1>Class component 입니다. 이름은 { this.props.name }</h1>
        );
    }

    static defaultProps = {
        name: "기본 이름"
    };

    static propTypes = {
        name: PropTypes.string
    }
}

{/* 다른 형식 */}
ClassComponent.defaultProps = {
    name: '홍길동'
}

.ClassComponent.propTypes = {
    name: PropTypes.string
}

이제는 props 관련 리액트 예제 문제를 풀어보자.

예제 1)

class App extends Component {
  render() {

    const printConsole = () => {
      console.log('콘솔 띄우기 성공!');
    }
    return (
      <div className="App">
        <ClassComponent text='dd'/>

import { Component } from 'react'
import PropTypes from 'prop-types';

export default class Ex01 extends Component {

  render() {
    const {text, valid} = this.props;
    return (
        <>
            <div>{text}</div>
            <button onClick={valid}>버튼</button>
        </>
    )
  }
}

Ex01.defaultProps = {
    text: '이건 기본 text props입니다.'
}

Ex01.propTypes = {
    text: PropTypes.string.isRequired,
}

예제 2)

import React, { Component } from 'react'

export default class Ex02 extends Component {
    // state 사용
    state = {
        number: 0,
    }

  render() {
    const { number } = this.state;
    return (
      <>
        <h2>{number}</h2>
        <button onClick={() => {
            this.setState({number: number + 2});
        }}>plus</button>
        <button onClick={() => {
            this.setState({number: number - 1});
        }}>minus</button>
      </>
    )
  }
}

예제 3)

import { useState } from "react"

const Ex03 = () => {
    const [number, setNumber] = useState(0);


    const increase = () => {
        setNumber(number + 1);
    }

    const decrease = () => {
        setNumber(number - 2);
    }

    return (
        <>
            <h1>{number}</h1>
            <button onClick={increase}>plus</button>
            <button onClick={decrease}>minus</button>
        </>
    )
}

export default Ex03

결론

리액트 props에 대한 개념 정리와 문제를 통해 이해할 수 있는 시간을 가졌다. 프론트엔드의 중요한 부분을 차지하기에 많이 연습을 해야 할 거 같다.

참고

[코딩온] 웹개발자 풀스택 과정 12주차 ppt

Open Authorization

• 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 어플리케이션의 접근 권한을 부 여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개 방형 표준이다(위키백과)

• 즉, 서드파티 어플리케이션이 사용자의 계정에 접근할 수 있는 권한 을 부여하기 위한 프로토콜

OAuth 1.0

• 서드파티 어플리케이션이 사용자의 데이터에 접근할 권한을 얻기 위해 서명된 요청을 사용
• 요청의 서명 부분은 어플리케이션의 비밀 키와 사용자의 토큰을 조합하여 생성되며, 이를 통해 보안이 유지

OAuth 2.0

• OAuth 2.0은 보다 간편하고 확장성이 있는 버전으로, 기본적으로 인증과 권한을 분리하여 다루는 것을 특징
• Access Token을 통해 권한을 부여하고, 사용자의 실제 비밀 정보를 공유하지 않습니다.

JWT Bearer Token 인증

• OAuth 2.0에서는 Bearer Token 인증 방식을 지원
• JWT를 Bearer Token으로 사용할 수 있음
• 클라이언트가 발급받은 JWT를 "Authorization" 헤더에 담아 요청을 보내면, 서버는 해당 JWT의 유효성을 검사하여 권한을 부여

• Bearer? 웹 서비스에서 사용자 인증에 사용되는 인증 방식 중 하나

jwt

JWT(JSON Web Token)

• 웹 애플리케이션에서 정보를 안전하게 전송하기 우한 간단한 방법
• 인증된 사용자를 식별하거나 데이터에 서명을 하여 변조를 방지하는데 사용

JWT 구성

• Header: 토큰의 타입과 해시 알고리즘 정보가 포함
• payload: 실제 정보 데이터가 포함되며, 클레임 이라 불리는 키-값 쌍으로 이루어져 있음
• Signature: 토큰의 무결성을 검증하기 위한 서명 부분으로, Header와 Payload의 조합에 비밀 키를 사용해 생성

JWT 작동 방식

JWT 주요 함수

• sign: 서버측에서 JWT를 생성할 때 사용

  jwt.sign(payload, secretOrPrivateKey, [options, callback])

• verify: 클라이언트나 서버에서 받은 JWT의 유효성을 검증할 때 사용 jwt.verify(token, secretOrPublicKey, [options, callback])

JWT 사용하기

npm install jsonwebtoken

const jwt = require('jsonwebtoken');

결론

앞으로는 프론트엔드 위주로 블로깅을 할 예정! 백엔드는 틈틈이 이어나가야 할 거 같다!

참고

[코딩온] 웹개발자 풀스택 과정 11주차 ppt

cookie

• 웹 브라우저(클라이언트)에 저장되는 키와 값이 들어있는 작은 데이터 파일
• 이름, 값, 만료일, 경로 정보로 구성되어 있다.

cookie의 동작 방식

• 쿠키의 동작 방식

1. 클라이언트가 페이지를 요청
2. 서버에서 쿠키를 생성
3. HTTP 헤더에 쿠키를 포함 시켜 응답
4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤어데 포함시켜 응답

쿠키 사용하기

session 이란?

• 웹 서버에 저장되는 쿠키
• 사용자가 웹 브라우저를 통해 접속한 시점부터 연결을 끝내는 시점까지의 시간 동안 일련의 요구를 하나의 상태로 보고 그 상태를 유지시킨다.
  • ex. 로그인 유지

session 의 동작 방식

1. 클라이언트 서버에 접속 시 세션 ID를 발급받습니다.
2. 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있습니다.
3. 클라이언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 서버에 전달해서 사용합니다.
4. 서버는 세션 ID를 전달받아서 별다른 작업 없이 세션 ID로 세션에 있는 클라이언트 정보를 가져옵니다.
5. 클라이언트는 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답ㅎ바니다.

session 사용하기

참고

[코딩온] 웹개발자 풀스택 과정 11주차 ppt

지난 MVC블로깅에 이어서 예제를 가져왔다.

MVC 흐름

• 전체적인 흐름은 아래와 같이 구성하였다.

• model

  • 데이터를 처리하는 부분 (유저 정보 데이터)

• view

  • UI 관련된 것을 처리하는 부분 (사용자에게 보여지는 부분) - post.ejs

• controller

  • View와 Model을 연결해주는 부분

• routes - index.js

app.js

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

// body-parser
app.use(express.urlencoded({ extended: true });
app.use(express.json());

// view engine
app.set('view engine', 'ejs');
app.set('views', './views');

const router = require('./routes');
app.use('/', router)

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

• 경로를 controller와 연결해 설정 가능

routes/index.js

const express = require('express');
const controller = require('../controller');
const router = express.Router();

// router
// === 페이지
router.get('/', controller.axiosPost);
// === 데이터 요청, 응답
router.post('/resultPost', controller.resultPost);

module.exports = router;

model/user.js

const users = [
    {
        userid: 'kdt11',
        userpw: '1234',
    },
];

modeuel.exports = users;

• model 폴더에 user.js 로 데이터 저장

views/post.ejs

 <body>
        <h1>POST 로그인 실습</h1>
        <form>
            <label for="username">아이디</label>
            <input type="text" id="username" required />
            <br />
            <label for="pw">패쓰워드</label>
            <input type="password" id="pw" required />
            <br />
            <button type="button" onclick="login()">로그인</button>
        </form>
        <br />
        <br />
        <div class="resultBox"></div>
        <script>
            const resultBox = document.querySelector('.resultBox');
            function login() {
                //백엔드로 요청보낼 데이터
                const data = {
                    id: document.querySelector('#username').value,
                    pw: document.querySelector('#pw').value,
                };
                axios({
                    method: 'POST',
                    url: '/resultPost',
                    data,
                }).then((res) => {
                    console.log('res', res);
                    const { result, userInfo } = res.data;
                    if (result) {
                        resultBox.textContent = `${userInfo.id}님 환영합니다`;
                        resultBox.style.color = 'blue';
                    } else {
                        resultBox.textContent = '아이디 또는 패쓰워드가 틀렸습니다';
                        resultBox.style.color = 'red';
                    }
                });
            }
        </script>
    </body>

• 프론트 레이아웃 정보 작성

controller/index.js

const User = require('../model/user');

exports.axiosPost = (req, res) => {
    res.render('post');
};

exports.resultPost = (req, res) => {
    console.log('요청값', req.body);
    const { id: reqId, pw: reqPw } = req.body;

    if (User[0].userid === reqId && User[0].userpw === reqPw {
        res.send({ result: true, userInfo: {id: User[0].useid } })
    } else {
        res.send({ result: false, userInfo: null });
    }
};

아직도 mvc 개념으로 구조를 작성해봤다. 간단한 서버만들기부터 다양한구조로 연습을 많이 필요하다.

참고

[코딩온] 웹개발자 풀스택 과정 10주차 ppt

mvc에 들어가기전 환경변수에 대한 개념을 알고 넘어가기로 하였다.

환경변수

• 환경변수는 운영 체제나 애플리케이션에서 사용되는 데이터 값을 저장하는 메커니즘
• 프로그램의 동작을 조정하거나 구성
• Node.js에서도 이러한 환경변수를 활용하여 애플리케이션의 설정과 동작을 조정

Node.js 환경 변수

Node.js에서는 process.env 객체를 통해 환경변수에 접근

// node.js 환경변수 확인
const ps = process.env;
console.log(ps);

.env

• 환경변수를 관리하기 위해 .env파일을 사용하는 것이 일반적
• 깃 저장소에 업로드 하지 말아야함!
• 서버에 파일만 업로드

환경변수 사용

npm install dotenv

require('dotenv').config() // .env 파일의 환경변수를 읽어옴

환경변수 사용

NAME=KDT NODE=dev

require('dotenv').config() // .env 파일의 환경변수를 읽어옴

app.get('/', (req, res) => {
    res.send('log');
    console.log(process.env.NAME);
    console.log(process.env.NODE);
});

pacakage.json 사용

npm install cross-env

Node.js 프로젝트에서 운영 체제 간 환경변수 설정을 도와주는 모듈

"scripts": {
    "start": "cross-env NODE_ENV=development node index.js",
    "start:prod": "cross-env NODE_ENV=production node index.js,
    "test": "echo \" Error: no test specified\" && exit 1"
},

MVC 이론에 대해 알아보자.

MVC란?

• Model View Controller
• 소프트웨어 설계와 관련된 디자인 패턴 (상황에 따라 자주 쓰이는 설계 방법을 정리한 코딩 방법론)
• MVC 이용 웹 프레임워크
  • PHP
  • Django
  • Express
  • Angular 등등

MVC 장단점

• 장점

1. 패턴들을 구분해 개발
2. 유지보수 용이
3. 유연성이 높다.
4. 확장성이 높다.
5. 협업에 용이

• 단점

1. 완벽한 의존성 분리가 어렵다
2. 설계 단계가 복잡하다
3. 설계 시간이 오래 걸린다.
4. 클래스(단위) 가 많아진다.

MVC 흐름

• Model

  • 데이터를 처리하는 부분

• View

  • UI 관련된 것을 처리하는 부분 (사용자에게 보여지는 부분)

• Controller

  • View와 Model을 연결해주는 부분

    

index.js(app.js) 개인적으로는 app.js가 친숙하다.

const indexRouter = require('./routes'); // index는 생략 가능!
app.use('/', indexRouter); // localhost:PORT / 경로를 기본으로 ./routes/index.js 파일에 선언한 대로 동작

// 404 error ㅓ리
app.get('*', (req, res) => {
    // res.send('404 Error! 잘못된 주소 형식입니다.);
    res.render('404');
});

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

• Router 불러오는 부분
• 위의 코드를 이용해 특정 시작 url의 역할 구분 가능

routes/index.js

const express = require('express')'
const controller = require('../controller/Cmain.js');
const router = express.Router();

// localhost:PORT/
router.get('/', controller.main); // GET /
router.get('/comments', controller.comments); // GET / coments

module.exports = router;

• 경로를 controller와 연결해 설정 가능

참고 - 404 Error 라우팅

app.get('*', (req, res) => {
    // res.send('404 Error! 잘못된 주소 형식입니다.');
    res.render('404');
});

주로 get을 사용

app.use('*', (req, res) => {
    res.status(404).render('404');
});

모든 http 요청에 사용

• 맨 마지막 라우트로 선언
• • : 그 외 나머지 주소는 모두(all) 잘못된 요청임을 사용자에게 알려야 함
• 클라이언트가 올바르지 않은 주소로 요청 시 Error 페이지 렌더링
• use일때는 모든 http 요청시 404페이지 나타나게 됨

Controller/Cmain.js

exports.main = (req, res) => {
    res.render('index');
};

exports.comments = (req, res) => {
    res.render('comments');
};

• 경로와 연결될 함수 내용을 정의
• 경로와 연결되는 함수이기에 req객체와 res 객체를 사용 가능

Controller - model

const Comment = require('../model/Comment');

exports.main = (req, res) => {
    res.render('index');
};

exports.comments = (req, res) => {
    console.log(Comment.commentInfos()); // 댓글 목록이 [ {}, {}, {} ] 형태로 출력
    res.render('comments', { commentInfos: Comment.commentInfos() });
};

• 컨트롤러와 모델을 연결한다.

환경변수와 MVC의 개념및 코드 활용법에 대해 알아봤다. 다음 블로깅은 동적 폼 전송의 로그인 실습을 MVC 구조로 바꾸는 문제를 연습해보고 작성하는 시간을 가지려고 한다.

참고

[코딩온] 웹개발자 풀스택 과정 10주차 ppt

SQL문

WHERE 절 - 범위, 집합, 패턴, NULL

• BETWEEN a AND b : a와 b의 값 사이에 있으면 참 (a와 b 값도 포함)

• IN ( list ) : 리스트에 있는 값 중에서 어느 하나라도 일치하면 참

• LIKE '비교문자열' : 비교문자열과 형태가 일치하면 사용 (%, _사용)

• % 0개 이상의 어떤 문자

• _ 1개의 단일문자

• IS NULL : NULL 값인 경우 true, 아니면 false

WHERE 절 - 논리연산자

AND : 앞에 있는 조건과 뒤에 오는 조건이 참(TRUE)가 되면 결과도 참(TRUE) OR : 앞에 있는 조건과 뒤에 오는 조건 중 하나라도 참(TRUE)면 결과는 참(TRUE) NOT : 뒤에 오는 조건과 반대되는 결과를 돌려준다.

ORDER BY

• 결과가 출력되는 순서 조절
• where 절과 함께 사용 가능
  • 단 where 절 뒤에 나와야함 ASC: Ascending, 오름차순(기본값) DESC: Descending, 내림차순

DISTINCT

• 중복된 데이터 제거

LIMIT

• 출력 개수 제한

집계함수

SUM() 합계 AVG() 평균 MAX() 최대값 MIN() 최소값 COUNT() 행 개수 COUNT(DISTICT) 중복 제외한 행 개수

GROUP BY

• group by 속성이름끼리 그룹으로 묶는 역할
• having group by절의 결과를 나타내는 그룹의 조건 걸기

DML - UPDATE, DELETE

UPDATE

• 데이터를 수정하기 위해 사용

  UPDATE 테이블명 SET 필드1=값1 WHERE 필드2=조건2;

DELETE

• 데이터를 삭제하기 위해 사용

  DELETE FROM 테이블명 WHERE 필드1=값1;

결론

한동안 백엔드 관련 블로깅을 해야 할 거 같다. 복습해야 할 부분이 많이 남아있는 만큼 여러 번 반복을 통해 익혀나가겠다.

참고

[코딩온] 웹개발자 풀스택 과정 9주차 ppt

SQL문

• Structured Query Language
• 구조적 쿼리 언어
• 관계형 데이터베이스를 제어하고 관리할 수 있는 목적의 프로그래밍 언어

SQL 분류

• 데이터 정의어 (DDL, Data Definition Language)
• 데이터 조작어 (DML, Data Manipulation Language)
• 데이터 제어어 (DCL, Data Control Language)

데이터 정의어

SQL문 – DDL

• DDL ( Data Definition Language )
• 데이터베이스 or 테이블을 정의하는 언어

DDL - CREATE

2 데이터 정의어 DML

SQL문 – DML

• DML ( Data Manipulation Language )
• 데이터베이스의 내부 데이터를 관리하기 위한 언어

Response 객체 writeHead: 응답 헤더 작성 write: 응답 본문 작성 end: 응답 본문 작성 후 응답 종료

CRUD

• 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 처리 기능
• Create(생성)
• Read(읽기)
• Update(갱신)
• Delete(삭제)

DML - INSERT

• 테이블에 데이터를 추가하기 위해 사용

SELECT문

• 데이터를 검색하는 기본 문장
• 질의어(query)라고도 함
• SQL문 중 가장 많이 사용되는 문법

SELECT 속성이름, ...FROM 테이블이름 [where 검색조건]

SQL 문 내부적 실행 순서

• 홍길동 고객의 주소를 찾으시오.

  SELECT addr FROM customer WHERE custname = '홍길동';

SELECT 문 구성요소

SELECT addr - 속성이름 FROM coustomer - 테이블 이름 WHERE custname = '홍길동'; - 검색 조건

DML - SELECT

• 데이터를 검색(조회)하기 위해 사용

SELECT * FROM 테이블명;
SELECT * FROM 테이블명 WHERE 필드1 = 조건값1;
SELECT * FROM 테이블명 WHERE 필드1 = 조건값1 ORDER BY 필드1 ASC;
SELECT 필드1, 필드2, 필드3 FROM 테이블명 WHERE 필드1 = 조건값1 ORDER BY 필드1 ASC;
SELECT 필드1, 필드2, 필드3 FROM 테이블명 WHERE 필드1 = 조건값1 ORDER BY 필드1 ASC LIMIT 개수;

WHERE 절 - 부정연산자

!= 같지 않다. ^= 같지 않다. <> 같지 않다 NOT 컬럼명 = ~와 같지 않다.

WHERE 절 - 부정연산자

!= 같지 않다. ^= 같지 않다. <> 같지 않다 NOT 컬럼명 = ~와 같지 않다.

데이터베이스 SQL문을 추가로 블로깅 해야 할거같다.

참고

[코딩온] 웹개발자 풀스택 과정 9주차 ppt

모듈

• 특정한 기능을 함수나 변수들의 집합
• 재사용 가능한 코드 조각

모듈의 장점

• 코드 추상화 -> 복잡한 시스템이나 객체를 단순화하여 핵심적인 부분에 집중하는 프로그래밍 원칙

• 코드 캡슐화 -> 코드의 무분별한 변경을 막기 위해 모듈 내부에 코드를 숨길 수 있다

• 코드 재사용

• 의존성 관리

모듈 만들기 - 1

하나의 모듈 파일에 하나 만들기

function connect() {
    return a + b;
}

module.exports = connect;

모듈 만들기 - 2

하나의 모듈 파일에 여러 개 만들기

const a = "a 변수";
const b = "b 변수";

//1
module.exports = {
    a,
    b
}

//2
module.exports.a = a
module.exports.b = b

//2의 생략
exports.a = a
exports.b = b

모듈 불러오기

const { } 로 가져올 때는 구조분해해 가져오기에 이름이 동일해야 한다.

const { a, b } = require("./var.js");
const returnString = require("./func.js");

하나만 내보낸 모듈은 다른 이름이어도 불러올 수 있다.

http 모듈

• Node.js를 통해 서버를 구축하는 방법은 http와 express 두개

• http 모듈

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

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

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

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

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

const http = require('http');

const server = http.createServer();

server.listen(8080, function() {
    console.log('8080번 포트로 서버 실행');
};

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

const http = require('http');

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

server.listen(8080, function() {
    console.log('8080번 포트로 서버 실행');
};

Response 객체 writeHead: 응답 헤더 작성 write: 응답 본문 작성 end: 응답 본문 작성 후 응답 종료

localhost와 port

• localhost -localhost는 컴퓨터 내부 주소 (127.0.0.1) -자신의 컴퓨터를 가리키는 호스트이름(hostname)

• port -서버 내에서 데이터를 주고받는 프로세스를 구분하기 위한 번호 -기본적으로 http서버는 80번 포트 사용 (생략 가능, https는 443)

server 객체

server 객체 - 이벤트

express 모듈

express

• 웹 서버를 생성하는 것과 관련된 기능을 담당하는 프레임워크

• 웹 애플리케이션을 만들기 위한 각종 메소드와 미들웨어 등이 내장되어 있다.

• http 모듈 이용 시 코드의 가독성 ↓ 확장성 ↓ → 이를 해결하기 위해 만들어진 것이 Express 프레임워크

express 사용

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

app.get('/', function (req, res) {
    res.send('hello express');
});

app.listen(PORT, function () {
    console.log(`Listening on port ${PORT} http://localhost:${PORT}`);
});

Express 사용

• express()

  • Express 모듈이 export하는 최상위 함수로, express application 을 만듬

• app 객체

  • Express()함수를 호출함으로써 만들어진 express application

EJS 템플릿

• 템플릿 엔진 문법과 설정에 따라 파일을 html 형식으로 변환시키는 모듈
• ejs Embedded Javascript 의 약자로, 자바스크립트가 내장되어 있는 html 파일 확장자는 .ejs

ejs 문법 사용하기

<% %> 무조건 자바스크립트 코드가 들어가야 하고 줄바꿈을 할 경우에는 새로운 <% %> 를 이용해야 한다.

<% %> 값을템플릿에출력할때사용

<%- include('view의 상대주소') %> 다른 view 파일을 불러올 때 사용

미들웨어

• 요청이 들어옴에 따라 응답까지의 중간 과정을 함수로 분리한 것
• 서버와 클라이언트를 이어주는 중간 작업
• use()를 이용해 등록할 수 있다.

app.set('view engine', 'ejs'); app.use('/views', express.static(__dirname + '/views'));

미들웨어 - static

• 이미지,css 파일 및 Javascript 파일과 같은 정적 파일 제공

• Express에 있는 static 메소드를 이용해 미들웨어로 로드

• 등록방법 app.use('/static', express.static(__dirname + '/static'));

결론

모듈, ejs, 미들웨어 등에 대해 알아봤다. Node.js와 관련된 개념 및 문제들을 앞으로 많이 작성할것 같다.

참고

[코딩온] 웹개발자 풀스택 과정 8주차 ppt

Node.js

• 구글 크롬의 자바스크립트 엔진(V8 Engine)에 기반해 만들어진 Javascript 런타임
• 이벤트 기반, 비동기 I/O 모델을 사용해 가볍고 효율적
• npm 패키지는 세계에서 가장 큰 오픈 소스 라이브러리

런타임이란?

• 프로그래밍 언어가 구동되는 환경
• Javascript의 런타임 환경은 웹 브라우저만 존재 했었다 -> Javascript를 서버단 언어로 사용하기 위해 나온 것이 node.js -> 웹 브라우저 없이 실행 가능

npm

Node Packgae Manager 노드 패키지를 관리해주는 틀 (npm에 업로드 된 모듈, 패키지들 간 의존 관계가 존재)

package.json

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

"name" : 패키지 이름 "version" : 패키지의 버전 "main" : 자바스크립트 실행 파일 진입점 (문답식에서의 entry point) "description" : 패키지에 대한 설명 "scripts": npm run 을 이용해 정해놓는 스크립트 명령어 "license": 해당 패키지의 라이센스

npm 사용하기

npm init

• 프로젝트를 시작할 때 사용하는 명령어
• package.json에 기록 될 내용을 문답식으로 입력한다.

npm init --y

• pacakge.json이 생성될 때 기본값으로 생성된다.

npm install 패키지 이름

• 프로젝트에서 사용할 패키지를 설치하는 명령어
• 설치된 패키지의 이름과 정보는 package.json의 dependencies에 입력된다.

Node.js 특징

1. 자바스크립트 언어 사용
2. Single Thread
3. Non-blocking I/O
4. 비동기적 Eevent-Driven

Single Thread

프로세스

• 실행 중인 프로그램
• 운영체제에서 할당하는 작업의 단위

Thread(스레드)

• 프로세스 내에서 실행되는 흐름의 단위
• 하나의 프로세스에는 n개의 스레드가 존재하며 동시에 작동할 수 있다.

Node.js는 사용자가 직접 제어할 수 있는 스레드는 하나이다.

• 싱글 스레드가 주어진 일을 하나밖에 처리 못한다.
• Non-blocking I/O 기능으로 일부 코드는 백그라운드(다른 프로세스)에서 실행 가능
• 에러를 처리하지 못하는 경우 멈춘다.
• 프로그래밍 난이도가 쉽고, cpu, 메모리 자원을 적게 사용한다.

에러를 처리하지 못하면 프로그램이 아예 중단됨

Non-blocking I/O

동기 (Synchronous)

• 데이터의 요청과 결과가 한 자리에서 동시에 일어나는 것
• 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어진다.
• 한 요청에 서버의 응답이 이루어질 때까지 계속 대기해야 한다

비동기 (Asynchronous)

• 동시에 일어나지 않는 것
• 요청한 후 응답을 기다리지 않고 다른 활동을 한다.

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

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

Event-Driven

• Event-Driven: 이벤트가 발생할 때 미리 지정해둔 작업을 수행
• ex) 클릭, 네트워크 요청, 타이머 등
• 이벤트 리스너 (Event Listener) -> 이벤트 등록 함수
• 콜백 함수 (Callback Function) -> 이벤트가 발생했을 때 실행되는 함수

Call Stack

Event Loop

Node.js의 역할

• 간단한 로직
• 대량의 클라이언트가 접속하는 서비스 (입출력이 많은 서비스)
• 빠른 개발 요구, 빠른 응답시간 요구
• 비동기 방식에 어울리는 서비스(스트리밍 서비스, 채팅 서비스 등 )

결론

서버에 데이터를 요청할때 필요한 axios fetch를 같이 알아봤다. 여기에 Ajax 등도 있다. 개인적으로 axios/fetch 이 두 가지를 사용하게 될거 같다. 다음에는 예제 등을 가져와 코드를 추가로 보충하겠다.

참고

[코딩온] 웹개발자 풀스택 과정 8주차 ppt

Axios

Node.js와 브라우저를 위한 Promise API를 활용

비동기 HTTP 통신이 가능. return이 Promise 객체로 온다.

• 장점

  • Promise 기반으로 만들어졌다.
  • 브라우저 호환성이 뛰어나다

• 단점

  • 모듈 설치 or 호출을 해줘야 사용이 가능하다 npm i 또는 cdn 사용해야 한다.

    

    

Fetch

JavaScript 내장 라이브러리

Promise 기반

• 장점

  • JavaScript 내장 라이브러리이므로 별도의 import 필요X
  • Promise 기반

• 단점

  • 최신 문법
  • Timeout 기능이 없다
  • 상대적으로 Axios에 비해 기능 부족

Fetch - response

response 에는 Promise를 기반으로 하는 다양한 메서드(함수) 존재. 이 메서드들을 사용하면 다양한 형태의 응답 처리 가능 response.text() - 응답을 읽고 텍스트를 반환 response.json() - 응답을 JSON 형태로 파싱 (실제로 확인해보면 JavaScript 객체 형태로 반환)

결론

서버에 데이터를 요청할때 필요한 axios fetch를 같이 알아봤다. 여기에 Ajax 등도 있다. 개인적으로 axios/fetch 이 두 가지를 사용하게 될 거같아 지금부터 미리 연습을 많이 해야겠다고 느꼈다. 다음에는 예제 등을 가져와 코드를 추가로 보충해야겠다.

참고

[코딩온] 웹개발자 풀스택 과정 7주차 ppt

Promise 예제 01

let colorBg = (newBg, delay) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            document.body.style.backgroundColor = newBg;
            resolve();
        }, delay);
    })
}

colorBg('red', 1000)
.then(() => {
    return colorBg('orange', 1500);
})
.then(() => {
    return colorbg('blue', 2500)
})
.then(() => {
    return colorbg('black', 3500)
})
.then(() => {
    return colorbg('lightblue', 4500)
})

resolve 콜백함수만 사용하였으며, 백그라운드 색상(newBg)과 딜레이 시간(delay)을 변수로 저장해서 코드를 작성하였다.

• Promise는 두 가지 콜백 함수를 가짐 resolve(value): 작업이 성공(fulfilled)한 경우, 그 결과를 value와 함께 호출 reject(error): 에러(rejected)발생 시 에러 객체를 나타내는 error와 함께 호출

Promise 예제 02

function call(name) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(name);
            resolve(name);
        }, 1000);
    })
 }
 function back() {
     return new Promise((resolve) => {
        setTimeout(() => {
            console.log('back')
            resolve('back');
        }, 1000);
     })
  }
  function hell() {
      return new Promise((resolve) => {
        setTimeout(() => {
            resolve('callback hell');
        }, 1000);
     })
  }

  // promise 실행
      call('kim').then((res) => {
        console.log(`${res} 반가워`);
        return back();
    })
    .then((res1) => {
        console.log(`${res1}을 실행 했구나`);
        return hell();
    })
    .then((res2) => {
        console.log(`여기는 ${res2}`);
    });

async / await 으로 예제 2 수정

async / await 프로미스 기반 코드를 좀 더 쓰기 쉽고 읽기 쉽게 하기 위해 등장 비동기 처리 패턴 중 가장 최근에 나온 문법

async

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

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

  await

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

let exec = async () => {
    let name = await call('kim');
    console.log(`${name} 반가워`);

    let res1 = await back();
    console.log(`${res1} 을 실행했구나`);

    let res2 = await hell();
    console.log(`여기는 ${res2}`);
  };

  exec();

 async function exec() {
     let name = await call('kim');
    console.log(`${name} 반가워`);
    let res = await back();
       console.log(`${res}을 실행 했구나`);
    let result = await hell();
    console.log(`여기는 ${result}`);
  }

 exec();

결론

Promise()와 async/await의 중요하기에 복습 및 예제 코드등을 다시 한번 정리하는 시간을 가졌다. 비동기와 동기 그리고 콜백함수까지 까먹지 않게 공부 및 연습을 많이 해야할 것 같다.

콜백함수

JavaScript는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있는데, 인자(매개변수)로 대입되는 함수를 콜백함수라고 한다.

즉, 다른 함수가 실행을 끝낸 뒤 실행되는 함수

함수를 선언할 때는 parameter(인자, 매개변수)로 함수를 받아서 쓸 수 있다.

• 비동기 받ㅇ식으로 작성된 함수를 동기 처리하기 위하여 사용 독립적으로 수행되느 작업도 있는 반면 응답을 받은 이후 처리되어야 하는 종속적인 작업도 있을 수 있으므로 그에 대한 대응 방법이 필요

콜백지옥

• 비동기 프로그래밍시 발생하는 문제
• 함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기가 너무 깊어지는 현상
• 가독성은 떨어지고 코드수정 난이도는 올라간다.

Promise

• 비동기 함수를 동기 처리하기 위해 만들어진 객체
• 성공과 실패를 분리하여 반환
• 비동기 작업이 완료된 이후에 다음 작업을 연결시켜 진행할 수 있는 기능을 가짐

Promise 사용법 01

function promise1(flag) {
    return new Promise(function (resolve, reject) {
    if(flag) {
        resolve('promise 상태는 fulfilled!!! then으로 연결됩니다. \n 이때의 flag가 true입니다.');
    } else {
        reject('promise 상태는 rejected!!! catch로 연결됩니다'. \n 이때의 flag가 false입니다.');
    }
  });
}

• Promise는 두 가지 콜백 함수를 가짐 resolve(value): 작업이 성공(fulfilled)한 경우, 그 결과를 value와 함께 호출 reject(error): 에러(rejected)발생 시 에러 객체를 나타내는 error와 함께 호출

Promise 사용법 02

함수 호출 (성공)
promise1(true)
 .then(function (result) {
     console.log(result);
 })
 .catch(function (err) {
     console.log(err);
 });

 함수 호출 (실패)
promise1(true)
 .then(function (result) {
     console.log(result);
 })
 **.catch**(function (err) {
     console.log(err);
 });

 - resolve() -> then 메서드 실행
 - reject() -> catch 메서드 실행

async / await

• Promise도 chaning을 하다보면 then().then() 처럼 꼬리를 물게 되어 코드의 가독성이 떨어질 수 있다.
• Promise보다 직관적인 코드를 위해 등장한 async, await
• 기능이 추가된 것이 아닌, Promise를 다르게 사용하는 것

async / await 프로미스 기반 코드를 좀 더 쓰기 쉽고 읽기 쉽게 하기 위해 등장 비동기 처리 패턴 중 가장 최근에 나온 문법

async

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

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

  await

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

function goMart() {
    console.log('마트에 가서 어떤 음료를 살지 고민한다');
}

function pickDrink() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () { 
            console.log('고민 끝!!');
            product = '제로 콜라';
            price = 2000;
            resolve();
           }, 3000);
         });
        }

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

   async function exec() {
       goMart();
    await pickDrink();
    pay();
   }

   let product;
   let price;
   exec();

결론

자바스크립트에서 가장 중요한 개념들을 알아봤다. 동기와 비동기등을 이해하고 사용하는데 연습을 통해서 익히고 이해해야 할 것 같다. 콜백함수로 처리된 코드를 Promise를 이용한 코드로 바꾸는 연습을 해야겠다고 느꼈다.

참고

[코딩온] 웹개발자 풀스택 과정 6주차 ppt

* 5주차는 프로젝트를 진행하였는데 회고를 프로젝트GitHub의 README에 작성할 예정이다.

구조분해 할당

• 배열이나 객체의 속성을 해체해 그 값을 개별변수에 담는 것
• JavaScript 에서 많이 쓰이는 자료구조인 배열과 객체를 편하게 사용하기 위함
• 결국에는 코드를 얼마나 효율적인 방법으로 쓸 수 있는지에 대한 것으로 이해 하였다.

JavaScript 코드

<script>
const car = {
    id: 1,
    name: "현대",
    price: 2000,
}

// 객체의 키값을들 변수로 저장해 아래와 같이 저장할 수 있다.
const id = car.id;
const name = car.name;
const price = car.price;

// 구조분해할당으로 더 효율적으로 정리할 수 있다. 한줄로!
const {id, name, price} = car;

// 배열에서도 구조분해할당으로 정리 가능하다.

const plane = [2, '대한항공', '인천']

// 배열을 아래와 같이 할당했다.
const planeId = plane[0];
const planeName = plane[1];
const planePlace = plane[2];

// 구조분해할당으로 다시 정리해보자

const [planeId, planeName, planePlace] = plane;

// 한줄로 깔끔하게 작성할 수 있다.
// 객체는 {} 중괄호 - 배열은 [] 대괄호 사용
// 구조분해할당으로 꺼내와서 작성시 원하는 값만 작성도 가능하다.

const {id, name, price} = car;
const {name, price} = car; // id값 빼고 나머지 2개의 값 가져오기

// 배열은 조금 방법이 다르다
// 사용하지 않는 값에 언더바(_)로 대체해서 작성해야 한다. 

const [planeId, planeName, planePlace] = plane;
const [planeId, _, planePlace] = plane; // planeName을 언더바값으로 작성했다.

</script>

spread 연산자 - 전개구문(spread)...

• 반복 가능한 객체에 사용하는 문법 -> 배열, 유사 배열, 문자열 등에 사용 가능

• 객체의 요소에 접근해서 요소들을 하나씩 분리해서 전개요소에 접근해서 반환

• 연산자 ... 사용

  const arr1 = [1, 2, 3, 4, 5]; const arr2 = ["a", "b", "c"]; 위 두 배열을 합쳐서 접근할때 spread연산자를 통해 가능하다 const arr3 = [...arr1, ...arr2];

  spread vs rest

  • spread 파라미터는 호출시 함수의 파라미터에 사용 get(...values);

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

결론

구조분해할당과 스프레드 연산자에 대한 개념과 예제를 통한 연습으로 이해할 수 있어서 좋은 공부가 되었다. 많은 도움이 될 수 있게 복습을 열심히 해야할 것 같다.

참고

[코딩온] 웹개발자 풀스택 과정 6주차 ppt

JavaScript 코드

<script>
    let n = 0;
    let sum = 0;

    while(n < 100) {
        if(n % 2 != 0 || n % 3 != 0) {
            sum += n;
        }
        n++;
    }
    console.log(sum);
</script>

• 100까지의 숫자중 2의 배수와 3의 배수의 합을 더한값을 while문으로 출력한다.

forEach문 01 예제

<script>
    let array = []
    let sum1 = 0;
    let sum2 = 0;
    let sum3 = 0;

    for(let i = 0; i < 100; i++) {
        array.push(i+1);
        sum1 += array[i];
    }
    // forEach 문
    array.forEach((arr) => {
        sum3 += arr;
    })

    console.log(sum1, sum2, sum3);
    console.log(array);
</script>

• 1부터 100까지 숫자의 합 forEach문 출력

forEach문 02 예제

<script>
    let fruits1 = ["사과", "딸기", "파인애플", "수박", "참외", "오렌지", "자두", "망고"];
    let fruits2 = ["수박", "사과", "참외", "오렌지", "파인애플", "망고"];

    let same = [];
    let diff = [];

    fruits1.forEach((fruits) => {
        if(fruits2.includes(fruits)) {
            same.push(fruits);
        }
    })

    fruits1.forEach((fruits) => {
        if(!fruits2.includes(fruits)) {
            diff.push(fruits);
        }
    })

    console.log(same);
    console.log(diff);
</script>

• 두 배열의 공통점과 차이점 찾기

filter

• forEach 02 예제를 filter() 사용해서 출력하기

<script>
    let fruits1 = ["사과", "딸기", "파인애플", "수박", "참외", "오렌지", "자두", "망고"];
    let fruits2 = ["수박", "사과", "참외", "오렌지", "파인애플", "망고"];

    let same = fruits1.filter((fruits) => fruits2.includes(fruits));
    let diff = fruits1.filter((fruits) => !fruits2.includes(fruits));

    console.log(same);
    console.log(diff);
</script>

결론

지난 약 10일간 프로젝트 준비 때문에 복습 및 지난 배웠던거를 놓쳤었는데 다시 복습 및 자바스크립트 공부를 반복적으로 연습해야 해야겠다.