20210219 3일차 개발 환경세팅

Framework(프레임워크)

프레임워크는 뼈대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술입니다.  

소프트웨어에서의 프레임워크는 '소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합' 이라 할 수 있으며, 완성된 어플리케이션이 아닌 프로그래머가 완성시키는 작업을 해야합니다. 

객체 지향 개발을 하게 되면서 통합성, 일관성의 부족이 발생되는 문제를 해결할 방법중 하나라고 할 수 있습니다.

 

프레임워크의 특징

• 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성되어 있습니다.  
• 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의합니다. 
• 컴포넌트들은 재사용이 가능합니다. 
•  높은 수준에서 패턴들을 조작화 할 수 있습니다.

프레임워크 예시: 자바스크립트 프레임워크인 AngularJS, React, Polymer, Ember

웹 프레임워크: Express.js

라이브러리(Library)

라이브러리는 단순 활용가능한 도구들의 집합을 말합니다.

즉, 개발자가 만든 클래스에서 호출하여 사용, 클래스들의 나열로 필요한 클래스를 불러서 사용하는 방식을 취하고 있습니다.

 

라이브러리 예시: JQuery, axios, express, jsonwebtoken, react-dom, react-redux 등.

개발에서는 라이브러리와 모듈은 동일한 의미이다.

프레임워크와 라이브러리의 차이점

라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이 누구에게/어디에 있는가에 있습니다.

즉, 어플리케이션의 Flow(흐름)를 누가 쥐고 있느냐에 달려 있습니다.

프레임워크는 전체적인 흐름을 스스로가 쥐고 있으며 사용자는 그 안에서 필요한 코드를 짜 넣으며 반면에 라이브러리는 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 쓰는 것이라고 할 수 있습니다.

다시 말해, 라이브러리는 라이브러리를 가져다가 사용하고 호출하는 측에 전적으로 주도성이 있으며 프레임워크는 그 틀안에 이미 제어 흐름에 대한 주도성이 내재(내포)하고 있습니다.

프레임워크는 가져다가 사용한다기보다는 거기에 들어가서 사용한다는 느낌/관점으로 접근할 수 있습니다.

 

출처: https://webclub.tistory.com/458 [Web Club]

 

---

필수 세팅 요소

 

1. React

: 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

2. React-hooks

: Hook을 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.

useState, useEffect

import React, { useState } from 'react';

function Example() {
  // "count"라는 새로운 상태 값을 정의합니다.  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다.

 

3. Redux(코드 리뷰를 통해 흐름 파악)

 

View -> Action -> Dispatcher -> Store(Middleware -> Reducer) -> View

const { createStore } = require("redux");

//!초기 state(데이터)를 정의한다.
const initState = {
  name: "김코딩",
  posts: [],
};

//!action creator
//!action 은 객체로 data 를 받으면 type 과 payload(여기에서 data) 가 reducer 에게 전달된다.
const changeUsername = (data) => {
  return {
    type: "CHANGE_NAME",
    data,
  };
};

const addPost = (post) => {
  return {
    type: "ADD_POST",
    post,
  };
};
//! reducer: 실제 메소드로 데이터를 변경해준다. 
//! initState(prevState)와 action 을 받아 type 에 따라 
//! payload를 활용하여 특정 method 를 실행시킨다. 
const reducer = (prevState, action) => {
  switch (action.type) {
    case "CHANGE_NAME":
      return {
        ...prevState,
        name: action.data,
      };
    case "ADD_POST":
      return {
        ...prevState,
        posts: [...prevState.posts, action.post],
      };
    default:
      return prevState;
  }
};

//! Store
//! createStore 메소드를 활용. createStore(reducer, [preloadedState], [enhancer])
//! reducer: returns the next state tree, given the current state tree and an action to handle.
//! [preloadedState]: initState  
//! [enhandcer]: to enhance the store with third-party capabilities such as middleware, time travel, persistence, etc.
const store = createStore(reducer, initState);

//! dispatch
//! The base dispatch function always synchronously sends an action to the store's reducer, 
//! along with the previous state returned by the store, to calculate a new state. 
//! It expects actions to be plain objects ready to be consumed by the reducer.
store.dispatch(changeUsername("김제이"));
store.dispatch(addPost("포스트1"));
store.dispatch(addPost("포스트2"));

console.log(store.getState());

참고: nomadkim880901.tistory.com/397?category=964527

 

4. Typescript

 

A Static Type Checker(코드 실행 전 에러 체크)

 

The main benefit of TypeScript is that it can highlight unexpected behavior in your code,

Lowering the chance of bugs.

 

TypeScript for JavaScript Programmers(with examples)

: www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

 

By understanding how JavaScript works, TypeScript can build a type-system that accepts JavaScript code but has types.

 

타입스크립트는 자바스크립트를 사용, 모든 기능 포함.

자바스크립에 포함되지 않은 새로운 기능을 갖는다.

버그 줄이고 -> 쉬운 유지 보수 -> 질 좋은 코드

 

프로그래밍 언어인 동시에 컴파일러이다.

타입스크립트 언어를 브라우저가 이해할 수 있는 자바스크립트 언어로 컴파일한다.

 

5. Eslint

ESLint는 ECMAScript 코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정하는 린트 도구 중의 하나다. 코드의 가독성을 높이고 잠재적인 오류와 버그를 제거해 단단한 코드를 만드는 것이 목적이다.

• 포맷팅
• 코드 품질

포맷팅은 일관된 코드 스타일을 유지하도록 하고 개발자로 하여금 쉽게 읽히는 코드를 만들어 준다. 이를 테면 "들여쓰기 규칙", "코드 라인의 최대 너비 규칙"을 따르는 코드가 가독성이 더 좋다.

한편, 코드 품질은 어플리케이션의 잠재적인 오류나 버그를 예방하기 위함이다. 사용하지 않는 변수 쓰지 않기, 글로벌 스코프 함부로 다루지 않기 등이 오류 발생 확률을 줄여 준다.

 

6. Prettier

프리티어는 코드를 "더" 예쁘게 만든다. ESLint의 역할 중 포매팅과 겹치는 부분이 있지만 프리티터는 좀 더 일관적인 스타일로 코드를 다듬는다. 반면 코드 품질과 관련된 기능은 하지 않는 것이 ESLint와 다른 점이다.

 

5&6 통합방법

여전히 ESLint를 사용해야 하는 이유는 남아 있다. 포맷팅은 프리티어에게 맡기더라도 코드 품질과 관련된 검사는 ESLint의 몫이기 때문이다. 따라서 이 둘을 같이 사용하는 것이 최선이다. 프리티어는 이러한 ESLint와 통합 방법을 제공한다. eslint-config-prettier 는 프리티어와 충돌하는 ESLint 규칙을 끄는 역할을 한다. 둘 다 사용하는 경우 규칙이 충돌하기 때문이다.

 

출처: jeonghwan-kim.github.io/series/2019/12/30/frontend-dev-env-lint.html

 

7. StyledComponent

CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다.

 React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인가를 끌면서 웹개발의 패러다임이 바뀌고 있습니다. 웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript을 몽땅 때려 박는 패턴이 많이 사용되고 있습니다. React는 JSX를 사용해서 이미 JavaScript가 HTML을 포함하고 있는 형태를 취하고 있는데, 여기에 CSS-in-JS 라이브러리만 사용하면 CSS도 손쉽게 JavaScript에 삽입할 수 있습니다.

 

출처: www.daleseo.com/react-styled-components/

---

세팅하기

1. React + typescript + Redux

npm create react-app client-app --typescript --template redux

참고: www.youtube.com/watch?v=ODvirqIC09A

, redux.js.org/introduction/getting-started

 

2. ESLINT + Prettier

 

  1) ESLint 설치

  2) Prettier 설치

  3) ESLint Prettier 통합

 

참고: jeonghwan-kim.github.io/series/2019/12/30/frontend-dev-env-lint.html

3. Styled Components

npm install --save styled-components

참고: styled-components.com/docs/basics

 

4. Redux

redux 툴킷 설치

npm install @reduxjs/toolkit

RTK includes utilities that help simplify many common use cases, including store setup, creating reducers and writing immutable update logic, and even creating entire "slices" of state at once.

 

redux core

npm install redux

5. 필요한 모듈 설치

  "dependencies": {
    "@babel/preset-react": "^7.12.10",
    "@reduxjs/toolkit": "^1.5.0",
    "axios": "^0.21.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-icons": "^4.1.0",
    "react-redux": "^7.1.0-rc.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0", //비동기 액션을 구현하기 위해 thunk 미들웨어를 사용
    "styled-components": "^5.2.1",
    //확인이 필요한 모듈 
    "polished": "^4.1.0",
    "prop-types": "^15.7.2",
    "query-string": "^6.13.8",
    "web-vitals": "^0.2.4"
  },
   "devDependencies": {
    "eslint": "^7.19.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^1.7.0",
    "prettier": "2.2.1"
  }