slow 개발 일지

React Context

__songji__ — Fri, 15 Apr 2022 21:09:43 +0900

이전 포스팅 Redux와 Ducks Pattern에 연장성으로 React Context API 에 대해 알아보자.

React Context

react 16.3 버전부터, context api를 내장하여 정식적으로 지원한다.

모든 컴포넌트에서 접근가능한 전역상태를 생성하여, props를 일일이 전달해야하는 props-drilling을 보완할 수 있다.

(props-drilling : Redux와 Ducks Pattern 참고)

Context의 주요 개념은 context, context provider, context consumer 정도로 보면 된다.

1. createContext

전역상태를 저장하는 context 생성

2. provider

리액트 컴포넌트
전역 상태의 데이터를 초기화
전역 상태를 하위 컴포넌트들에게 제공

3. consumer

리액트 컴포넌트
provider로부터 제공받은 전역상태를 조회
useContext(MyContext), static contextType = MyContext 또는 <MyContext.Consumer> 모두 Context Consumer에 해당

Context Api 예제

import React, { useContext } from "react";

const CounterContext = React.createContext(); // 1. context 생성

export default function App() {
	
  // 2. Provider로 context 제공
  return (
    <CounterContext.Provider value="0">
      <Counter />
      <CountButton />
    </CounterContext.Provider>
  );
}

const Counter = () => {
  const count = useContext(CounterContext); // 3. Consumer로 context 접근

  return <div>{count}</div>;
};

const CountButton = () => {
  const count = useContext(CounterContext); // 3. Consumer로 context 접근

  return <button> + </button>;
};

대게 Context를 상태관리도구라고 일컫지만,

위의 예제와 같이, Context가 제공하는 메소드만으로는 redux의 reducer나, react의 setState처럼 상태를 직접적으로 변경하고 관리할 수 없다.

상태를 변경하고 관리할수 없는 Context 자체만으로는 완전한 상태관리도구라고 부르기에는 알맞지 않은듯하다.

그렇다면 위의 예제의 button을 클릭하여 context의 값을 어떻게 변경할 수 있을까?

Context 상태를 변경하는 방법에는 여러가지 방법이 있다.

Class Component : component state 활용 (Class component에서 값이 변하는 Context 만들기 참고)
Function Component : usetState, useReducer 등을 활용

위의 예제를 usetState를 활용해서 상태가 업데이트되도록 수정해보자.

import "./styles.css";
import React, { useContext, useState } from "react";

const CounterContext = React.createContext(); // 1. context 생성


// 2. Provider 생성 : useState로 상태값 관리
const CounterProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  return (
    <CounterContext.Provider value={[count, setCount]}>
      {children}
    </CounterContext.Provider>
  );
};


// 2-2. Provider로 context 제공
export default function App() {
  return (
    <CounterProvider>
      <Counter />
      <CountButton />
    </CounterProvider>
  );
}


const Counter = () => {
  const [count] = useContext(CounterContext); // 3. Consumer로 context 접근

  return <div>{count}</div>;
};

const CountButton = () => {
  const [,setCount] = useContext(CounterContext); // 3. Consumer로 context 접근

  return <button onClick={() => setCount((count) => count+1)} > + </button>;
};

이제 위의 Counter context는 상태가 업데이트가 가능해졌다.

하지만 여기서 더 생각해볼 점이 있다.

상태값 count가 업데이트되며느 <Counter> 뿐만 아니라, <CounterButton>도 함께 리렌더링이 이루어진다.

countButton 실행했을 때의 콘솔로그 결과값

이것은 불필요한 렌더링이 이루어지고 있는 것이다!

이런 부분 또한 Context의 단점으로, Context가 온전한 상태관리도구라고 할 수 없다는 점이다.

불필요한 리렌더링을 방지하기 위해서, 다시 코드를 수정해보자.

import "./styles.css";
import React, { useContext, useState } from "react";

// ** Context를 두가지로 분리
const CounterContext = React.createContext();
const CounterDispatchContext = React.createContext(() => {});

// ** Provider 감싸기
const CounterProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  return (
    <CounterContext.Provider value={count}>
      <CounterDispatchContext.Provider value={setCount}>
        {children}
      </CounterDispatchContext.Provider>
    </CounterContext.Provider>
  );
};

export default function App() {
  return (
    <CounterProvider>
      <Counter />
      <CountButton />
    </CounterProvider>
  );
}

const Counter = () => {
  const count = useContext(CounterContext); // ** CounterContext에만 반응함
  return (
    <div>
      <div>{count}</div>
    </div>
  );
};

const CountButton = () => {
  const setCount = useContext(CounterDispatchContext); // ** CounterDispatchContext에만 반응함
  return (
    <button onClick={() => setCount((count) => count + 1)}> + </button>
  );
};

countButton 실행했을 때의 콘솔로그 결과값

이렇게 최종적으로 나름 괜찮은 상태관리가되는 Context를 만들보았다.

이런 상태관리를 해야하는 코드가 많아진다면, Provider Hell에 빠질 수 밖에 없을 것이다.

이 포스팅에서는 다소 Context Api가 부정적으로 보여질 수 있지만, Context Api 만의 장점은 분명히 존재한다.

어떤 상태관리를 사용해야하는데에는 정답이 없기에, 상황에 따라 잘 판단하여 잘 활용해볼 수 있도록 하자 !

✅ Context의 장점

구조가 비교적 간단하다.
- Redux도 내부적으로는 Context로 이루어져 있다.
  - 간단한 전역 상태 또는 정적인 전역상태가 필요하다면, Context를 적극적으로 사용하자.
코드가 비교적 간결하다.
여러개의 Context를 생성할 수 있고, 가시적이다.

✅ Context의 단점

context만으로 상태관리를 할 수 없다.
- context로 상태관리를 해야하는 경우에는
  - high-frequency한 어플리케이션에서는 성능 이슈가 있을 수 있다.
  - Provider Hell을 야기할 수 있다.

https://yrnana.dev/post/2021-08-21-context-api-redux

https://olaf-go.medium.com/context-api-vs-redux-e8a53df99b8

https://ko.reactjs.org/docs/hooks-reference.html#usecontext

https://velog.io/@cada/React-Redux-vs-Context-API#context-api%EB%9E%80-

환경변수 / 멀티 환경변수

__songji__ — Wed, 30 Mar 2022 01:12:11 +0900

nodejs에서는

클라이언트 환경에서 노출되면 안되는 정보, 전역에서 필요한 정보 등을 관리할 수 있는

dotenv(환경변수)를 제공한다.

dotenv npm

전역으로 필요한 정보 관리
보안 정보 관리 : 외부에 노출이 되면 안 되는 정보 ( 세션키 , 개인정보 ( host, user, password ..) 등 ... )

1. dotenv 패키지설치

npm i --save dotenv

2. env 파일 생성

// .env
DB_USERNAME = song
DB_PASSWORD = 1165

3. 환경변수 접근 예시

import dotenv from 'dotenv'

dotenv.config()

process.env.DB_USERNAME
process.env.DB_PASSWORD

require('dotenv').config()

const db = require("db")
db.connect({
  key: process.env.SESSION_SECRET
})

4. 멀티 환경변수

일반적으로 개발환경/배포환경에 따라 설정값이 달라지게 된다.

각 환경별로 환경변수를 선언을 한다.

.env : 기본
.env.local : 로컬 재정의 , test 환경을 제외한 모든 환경에 대해 로드
.env.development : 환경별 설정 (.env.test / .env.production)
.env.development : 환결병 설정 로컬 재정의 (.env.test / .env.production)

cross-env 라이브러리를 같이 활용하면, cli 에서 환경값을 설정하여, 환경에 따른 환경변수를 채택할 수 있다.

npm i -s cross-env

cross-env NODE_ENV=production node config.js

import dotenv from 'dotenv'
import path from 'path'

dotenv.config({ path: path.resolve(__dirname, '../env.${process.env.NODE_ENV}')});

5. React, Next 환경변수

CRA 환경변수

CRA를 설치하면, 환경변수의 우선순위가 자동으로 설정된다.

npm run start

(NODE_ENV = development)

.env.development.local
.env.local
.env.development
.env

npm run build

(NODE_ENV = production)

.env.production.local
.env.local
.env.development
.env

npm run test

(NODE_ENV = test)

.env.test.local
.env.test
.env

NODE_ENV를 제외한 환경변수는 REACT_APP_을 붙여서 변수를 정의해야 한다.

Next 환경변수

nextjs의 환경변수는 react의 확장이라고 생각하자. (각 NODE_ENV에 따라, 우선순위도 동일)

next dev   // development
next build // production
next start // production
next test  // test

process.env.변수명 : node.js 환경에서 접근가능한 환경변수
process.env.NEXT_PUBLIC_변수명 : 브라우저 환경에서 접근가능한 환경변수
- next.config.js > env 옵션 : NEXT_PUBLIC_과 같은 환경변수로, next.config.js에 정의된 환경변수는 process.env.변수명으로 접근 가능하다.

Custom .env

custom .env 참고

react와 next처럼 내부적으로 이미 예약된 NODE_ENV(development, production, test)는 변경이 까다롭지만,

env-cmd 라이브러리를 사용하면, 좀 더 간편하게 환경변수를 변경할 수 있다.

env-cmd로 선언한 환경변수가 최우선순위가 된다.

npm i env-cmd

// package.json

{
	"scripts" : {
    	"build:dev" : "env-cmd -f .env.development next build"
    },
}

https://create-react-app.dev/docs/adding-custom-environment-variables/

https://velog.io/@public_danuel/process-env-on-node-js

https://nextjs.org/docs/basic-features/environment-variables

Redux와 Ducks Pattern

__songji__ — Fri, 25 Mar 2022 00:06:00 +0900

Redux

react는 상태를 자식 컴포넌트로 전달, 전달하는 방식으로,

전달의 단계가 많아진다면 상당히 복잡한 구조가 되고, 리소스 낭비가 되곤한다.

props-driliing

이런 전달의 구조가 깊어지는 것을 props-drilling이라고 부른다.

이런 props-driliing을 해소하기 위해, 전역에서 상태관리가 가능한 여러방법들이 존재한다.

context api, redux, mobx ,, 등 여러가지 방법이 있는데,

이 방법 중, 우리나라에서 가장 사용률이 높은 redux에 관해 살펴보자.

redux는 전역 상태 저장소(store)를 제공한다.

react의 모든 컴포넌트는 이 store에 접근 가능하다.

without Redux vs with Redux

위의 그림과 같이 redux를 사용하게 되면, Store를 통해 상태의 관계를 맺게 되기 때문에, 좀 더 편한 상태전달이 가능하다.

Redux 개념

Store

앱의 전역 상태를 갖는 저장소

store는 독립적이고 무결성을 보장해야 한다.

store의 상태를 변경하는 요소는 action 뿐이다.

import { createStore } from 'redux';
import todoApp from './reducers';

// Reducer들을 store에 넘겨 연결하기
let store = createStore(todoApp);

Action

상태 변화에 대한 정보를 담은 객체 (순수 자바스크립트의 object 타입)

액션 객체는 상태에 행위를 나타내는 type 문자열 필수

{ type: "ADD_TODO", todo: 'to do list item' }

Action Creater

Dispatch에 인자로 전달하기 위해, Action을 함수로 감싼 형태

즉, Action을 Return하는 함수로, 최종적으로 해당 액션이 호출됨

function addTodo(todo) {
  return {
    type: ADD_TODO,
    todo
  }
}

Reducer

액션에 대한 함수를 정의하고, 함수를 실행하여 상태를 업데이트

상태의 Data를 변화시키는 개념이 아닌, 상태변화한 Data를 새로운 상태로 Store에 반환하는 것이 상태 업데이트라고 생각하자.

export default function reducer(state, action){
	...
}

Dispatch

액션을 Reducer에 전달

store.dispatch(addTodo('Learn about Redux'));

Redux 원칙

앱의 전역상태는 단일 저장소 내의 트리에 저장된다. (단일 Redux Store)
상태는 읽기 전용 (Read-Only)
상태는 순수 함수에 의해서 변경되어야 한다.( Action & Action Creator)

Redux Flow

Redux Flow

Component에서 이벤트 발생
이벤트에 해당하는 Action Creator를 Dispatch에 전달
Dispatch가 ActionCreator에서 생성된 Action을 Reducer에 전달 및 실행
Reducer는 Action에 타입에 따라 정의된 함수를 실행하여, 새로운 상태로 업데이트
reducer(prevState, action)
Component 렌더링

Redux sample code

아주 간단한 redux 예제를 만들어보자. (to do list)

react & redux 셋팅

npx create-react-app my-project  
npm install --save react-redux

* 파일구조 *
- src
- actions / index.js
- reducers / index.js
- index.js
- App.js

src/actions/index.js

export const ADD_TODO = 'ADD_TODO';
export const addTodo = (todo) => {
    return {
        type: ADD_TODO,
        todo
    }
}

src/reducers/index.js

import {combineReducers} from 'redux';
import {ADD_TODO} from "../actions";


const todoState = {
    todos : []
}

const todoReducer = (state = todoState, action) => {
    switch (action.type){
        case ADD_TODO:
            return {...state, todos: state.todos.concat(action.todo)}
        default:
            return state
    }
}

// combineReducers : 여러개의 리듀서를 하나로 합쳐주는 메서드
const AppReducer = combineReducers({
    todoReducer
})

export default AppReducer;

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {createStore} from 'redux'
import reducers from "./reducers";
import {Provider} from "react-redux";

const store = createStore(reducers);

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App/>
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

src/App.js

import {useDispatch, useSelector} from "react-redux";
import {useState} from "react";
import {addTodo} from "./actions";


function App() {
    const [text, setText] = useState("");

    // store에 접근하여 state 가져오기
    const { todos } = useSelector(state => state.todoReducer);

    // dispatch를 사용하기 위한 준비
    const dispatch = useDispatch();
    const add = () => {
        // store에 있는 state 바꾸는 함수 실행
        dispatch(addTodo(text));
    };
  return (
    <div className="App">
      <h1 className="App-header">
          To Do List
      </h1>
        <ul>
            {todos.map((item, idx)=>(
                <li key={idx}>{item}</li>
            ))}
        </ul>
        <div>
            <input type="text" onChange={(e)=>setText(e.currentTarget.value)} value={text}/>
            <button onClick={()=>add()}>할일 추가하기</button>
        </div>
    </div>
  );
}

export default App;

이렇게 아주 간단한 To do List에 추가하는 기능을 Redux로 구현해보았다.

여기서 생각해볼 점이,

현재 디렉터리 구조로 redux를 계속 추가할 경우, 각 actions와 reducers 폴더를 나누어서 관리를 해주어야 하는 번거로움이 생긴다.

현재 샘플코드와 맞지 않는 조금 앞서나가는 생각이긴 하지만,

위의 구조와 같이 실제 리덕스를 작업하다보면,

redux 관련한 코드가 수정이 될 경우 import를 타고가서 actions와 reducers 폴더 모두 확인해보고 수정해야하거나,

리듀서가 많아지면 리듀서가 꼬였을때 어디가 문제인지 파악하는데 어려움이 생기는 등의 여러 불편한 점을 흔히들 경험하게 된다.

이러한 리덕스의 복잡도를 해소하기 위해, ducks 패턴이란 것이 생겨났다.

Ducks Pattern

ducks pattern은 자바스크립트 개발자인 Erik Rasmussen이 제안한, 리덕스 사용 방법이다. ( ducks pattern 원문 )

ducsk pattern은 파일중심이 아닌 모듈 중심으로 파일을 나눈다.

일반적으로 redux를 사용하기 위해서는 actionType, actions, reducer 가 함께 추가되어야 하고, action과 reducer가 짝을 이뤄 하나의 redux flow를 사용할 수 있다.

그래서, ducks pattern은 actionType, actions, reducer를 하나의 파일 안에서 모듈형식으로 관리하자는 제안을 하고 있다.

Ducks Pattern 규칙

항상 reducer()란 이름의 함수를 export default 해야합니다.
항상 모듈의 action 생성자들을 함수형태로 export 해야합니다.
항상 npm-module-or-app/reducer/ACTION_TYPE 형태의 action 타입을 가져야합니다.
경우에 따라, action 타입들을 UPPER_SNAKE_CASE로 export 할 수 있습니다.
만약, 외부 reducer가 해당 action들이 발생하는지 계속 기다리거나, 재사용할 수 있는 라이브러리로 퍼블리싱할 경우에 말이죠.

재사용가능한 Redux 라이브러리 형태로 공유하는 {actionType, action, reducer} 묶음에도 위 규칙을 추천합니다.

Redux sample code -> Ducks Pattern sample code

앞에서 작성해보았던 Redux sample code를 Ducks Pattern으로 변경해보자.

* 파일구조 *
- src
- store
- index.js
- todo.js
- index.js
- App.js

✅ ducks pattern에서 리덕스 디렉터리는 store 또는 modules 로 많이 사용된다.

src/store/todo.js


// 1. 액션타입
export const ADD_TODO = 'todo/ADD_TODO';

// 2. 액션 creator
export const addTodo = (todo) => {
    return {
        type: ADD_TODO,
        todo
    }
}

// 3. 모듈의 상태 초기값
const initTodoState = {
    todos : []
};

// 4. 리듀서
export default function todoReducer(state = initTodoState, action) {
    switch (action.type){
        case ADD_TODO:
            return {...state, todos: state.todos.concat(action.todo)}
        default:
            return state
    }
}

src/store/index.js

import { combineReducers } from 'redux';
import todoReducer from "./todo";

const AppReducer = combineReducers({
    todoReducer,
});


export default AppReducer;

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {createStore} from 'redux'
import reducers from "./store"; // * 경로만 바뀜
import {Provider} from "react-redux";
import { composeWithDevTools } from 'redux-devtools-extension';


const store = createStore(reducers);

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App/>
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

src/App.js

import {useDispatch, useSelector} from "react-redux";
import {useState} from "react";
import {addTodo} from "./store/todo"; // * 경로만 바뀜


function App() {
    const [text, setText] = useState("");

    const { todos } = useSelector(state => state.todoReducer);

    const dispatch = useDispatch();
    const add = () => {
        dispatch(addTodo(text));
    };
  return (
    <div className="App">
      <h1 className="App-header">
          To Do List
      </h1>
        <ul>
            {todos.map((item, idx)=>(
                <li key={idx}>{item}</li>
            ))}
        </ul>
        <div>
            <input type="text" onChange={(e)=>setText(e.currentTarget.value)} value={text}/>
            <button onClick={()=>add()}>할일 추가하기</button>
        </div>
    </div>
  );
}

export default App;

이렇게 ducks pattern을 사용하다보면,

코드 작성도 용이하고 가독성도 좋아진는 등의 훨씬 더 많은 이점이 있다.

특별한 이유가 없다면 ducks pattern을 활용하자 !

참고

https://dinn.github.io/web/redux-ducks-pattern/

https://ahnanne.tistory.com/34

https://velog.io/@gyrbs22/React-Redux-flow-Architecture-%EA%B0%9C%EB%85%90

https://eatnug.github.io/frontend/react-redux/

https://velog.io/@mokyoungg/Redux-Redux%EC%9D%98-%EA%B8%B0%EC%B4%88-%EA%B0%9C%EB%85%90

Class Component vs UseEffect LifeCycle

__songji__ — Sun, 6 Mar 2022 20:08:28 +0900

react hook(react 16.8 이상)이 나오기 전에는 , 리액트의 라이프사이클을 활용하기 위해 Class Component를 사용해야 했다.

나 또한, Class Component를 통해 리액트 개발을 해왔다.

Class Component로 개발하다보면, 별거아닌 코드도 길고 거창해지기 마련이다.

또한, 라이프사이클을 잘못 건들면 어느순간 뒤엉켜 머리가 아파진다 ,,

특히, react hook을 활용하면 라이프사이클이 좀더 폐쇄적으로 관리되기 때문에, 이런 라이프사이클의 뒤엉킴에 있어서는 좀 더 안전한 듯하다.

React hook을 활용하여 Function Component 개발은 당연해졌고, React에서도 공식적으로 Function Component를 권장하고 있다.

워낙 리액트 문서가 한글로 지원이 잘 되어있다.

그래서, 기본 개념은 건너뛰고 useEffect hook과 class 라이프사이클만 비교해보자.

(react 공식문서 : https://ko.reactjs.org/docs/hooks-effect.html)

useEffect hook = componentDidMount + componentDidUpdate + componentWillUnMount

Class Component LifeCycle

import React from 'react'

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
    }

    componentDidMount() {}

    componentDidUpdate() {}

    componentWillUnmount() {}

    render() {
        return (
            <div>
                <h1>HOME</h1>
                <div>
                    <button onClick={() => {
                        this.setState({count : this.state.count++})
                    }}>
                    click ME
                    </button>
                </div>
                <div>
                    <Link to="/about">about</Link>
                </div>
            </div>
        )
    }
}

export default Home

페이지 진입 시점 (component mount) :
1. constructor
2. render
3. componentDidMount
state 업데이트 (component update) :
1. render
2. componentDidUpdate
페이지 변경 시점 (component unmount) :
1. componentWillUnmount

useEffect LifeCycle

useEffect( effectFunction , [Array] )

effectFunction : useEffect가 실행할 함수
- clean-up : useEffect가 실행할 함수(effectFunction)의 반환값
Array 옵션 : effectFunction을 실행시킬 조건

import React, {useEffect, useState} from 'react'
import {Link} from "react-router-dom";

export default function About (){
    let [count, setCount] = useState(0);
    let [test, setTest] = useState(0);

    // (1)
    
    useEffect(()=>{
    	// (3)        
        return ()=>{
		    // (4)
        }
    }, [ count ])
    
    // (2)
    
    return (
        <div>
            <h1>About</h1>
            <div>
                <button onClick={() => setCount(count++)}>click ME</button>
            </div>
            <div>
                <Link to="/">Home</Link>
            </div>
        </div>
    )
}

페이지 진입 시점 (component mount) :
1. function scope : (1),(2)
2. useEffect scope : (3)
state 업데이트 (component update) :
- Array option 이 undefined인 경우 / Array option이 변경된 state [count] 인 경우 :
  1. function scope : (1), (2)
  2. useEffect scope :
    1. clean-up : (4)
    2. (3)
- Array option이 [ ] 인 경우 / Array option이 변경되지 않을 state [test] 인 경우 :
  1. function scope : (1), (2)
페이지 변경 시점 (component unmount) :
1. useEffect clean-up : (4)

useEffect는 "componentDidMount + componentDidUpdate + componentWillUnMount" 이므로,

각 라이프사이클 단계에서 useEffect가 모두 실행되는 것을 볼 수 있다.

하지만, Array option에 따라 useEffect의 동작 방식이 다른다는 것을 확인할 수 있다.

여기서 가장 중요한건, Array option을 적절하게 부여하지 않으면, 불가피한 렌더링이 발생할 수 있다는 것을 유념하자 !

불필요한 리렌더링을 방지하기 위해서는, 기준이 될만한 state가 없을 경우에는 [ ] 를 사용하자 !!

참고자료

https://killu.tistory.com/44

npm vs npx

__songji__ — Sun, 6 Mar 2022 17:32:00 +0900

npm

javascript 개발을 한다면, 쉽게 접하는게 npm(Node Package Manage)이다.
Node Package Manage, 말 그대로 Nodejs로 만들어진 패키지(즉, 모듈)를 관리해주는 프로그램이다.
nodejs의 의존성과 패키지 관리, 버전관리 등을 지원한다.
몇 줄의 npm 명령어를 통해 쉽게 설치할 수 있고, 다양한 모듈을 활용하여 원하는 개발을 쉽게 할 수 있다.
javascript 개발자라면 필수적으로 사용하는 프로그램이라고 할 수 있다.

npm init

npm을 사용해보았다면, 종종 npx를 접하게 된다.

이 둘은 비슷한듯 다르기 때문에, 차이점을 확실히 알아두자! (npm !== npx)

npx

npx는 npm5.2 버전부터 추가된, Node 패키지를 실행시키는 하나의 도구이다.
새로운 프로그램 개념이 아니다!
기존의 npm을 좀더 편리하게 사용하라고 제공되었다고 한다.

  npx의 실행과정

1. 실행되어야할 패키지가 로컬 경로에 있는지 먼저 확인
2. 존재한다면, 그대로 실행
3. 존재하지 않다면, npx가 최신 버전의 패키지 설치 후 실행

추가로, npx를 사용하면 패키지를 global 또는 local로 설치했는지 여부가 상관 없다.
npx가 일시적으로 설치하여 알아서 실행시켜준다!

npm은 Manager 패키지 관리자
npm install ~ 설치 후, npm run ~ 실행 필요

npx는 eXecute 패키지 실행
npx ~ 설치 및 실행

아래 링크는 npm,npx의 핵심이 잘 정리되어, 참고하기 좋은 블로그인 것 같다.
https://hanamon.kr/npm-npx-%EC%B0%A8%EC%9D%B4/

참고자료

https://velog.io/@kimkyeseung/%EB%B2%88%EC%97%AD-%EA%B7%B8%EB%9E%98-npx-npm%EB%A7%90%EA%B3%A0-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EC%84%A4%EB%AA%85

https://basemenks.tistory.com/232

https://seizemymoment.tistory.com/106