import type { RouteRecordRaw } from "vue-router";
export const route: RouteRecordRaw[] = [{}]

형태로 경로 구조가 짜여진다는 것을 앞서 설명한적이 있다.

이것을 조금 상세히 파고들려고 한다.

타입스크립트에서는 변수의 타입을 지정한다. 그러니까 route라는 변수는 RouteRecordRaw[] 의 형식을 지니고 있다는 것을 의미한다.

RouteRecordRaw는 그럼 무엇일까?

앞서 npm i vue-router라는 명령어로 설치되어 node-modules라는 폴더에 들어있는 vue-router가 가지고 있는 타입이다.

RouteRecordRaw의 기본 형태는 다음과 같다. redirect 같은 값도 있지만, 그런것을 상세히 다루려면 원문참조

  {
    path: "/",
    name: "",
    meta: {},
    component: () => import(""),
    children: [
    ]
  }

1depth의 경로는 설명하기에 적합하진 않으므로 확장하여 3depth의 경로를 예시로 들겠다.

router/route.ts

import type { RouteRecordRaw } from "vue-router";
export const route: RouteRecordRaw[] = [
  {
    path: "/error",
    name: "error",
    meta: {},
    component: () => import("@/views/layouts/EmptyLayout.vue"),
    children: [
      {
        path: "notFound",
        name: "notFound",
        meta: {},
        component: () => import("@/views/contents/error/404.vue")
      }
    ]
  },
  {
    path: "/:pathMatch(.*)*",
    redirect: "/error/notFound"
  },
  {
    path: "/"
    name: "",
    meta: {},
    component: () => import("@/views/layouts/CommonLayout.vue"),
    children: [
      {
        path: "",
        name: "home",
        meta: {},
        component: () => import("@/views/home/Main.vue"),
      },
      {
        path: "/",
        name: "snb",
        meta: {},
        component: () => import("@/views/layouts/CommonSnb.vue"),
        children: [
          {
            path: "article",
            name: "article",
            meta: {},
            children: [
              {
                path: "main/:page",
                name: "ArticleMain",
                meta: {},
                component: () => import("@/views/contents/article/ArticleMain.vue")
              },
              {
                path: "view/:id",
                name: "ArticleView",
                meta: {},
                component: () => import("@/views/contents/article/ArticleView.vue")
              },
            ]
          }
        ]
      }
    ]
  }
]

간단한 경로를 만들어 보았다.

해당 route.ts 파일은 '/', '/article/main/:page', '/article/view/:id' 를 가지는 3depth 구조이다.

RouteRecordRaw 는 children에 RouteRecordRaw 배열을 가지며, 이들이 순차적으로 쌓여 나간다.

예를 들어 /article/main/:page 를 접근한다고 가정하자.

먼저 라우터는 path: "/", 그리고 path: "/", path: "article"를 거쳐 path: "main/:page"에 도달한다. 화면은 이렇게 오는 과정에 있었던 component들이 쌓여 만들어진다.

path: "article" 는 component가 없으므로 /article/main/:page는

"@/views/layouts/CommonLayout.vue" "@/views/layouts/CommonSnb.vue" "@/views/contents/article/ArticleMain.vue"

이 한 화면을 이루게 될 것이다.

  {
    path: "/:pathMatch(.*)*",
    redirect: "/error/notFound"
  },

이 부분은 routes.ts에 없는 경로로 접근했을 경우 redirect

가 있다고 가정하자

이때, index.ts에서 나머지들을 관리할 수 있다.

stores/index.ts

import { useUserStore } from "@/stores/user";
import { useLoaderStore } from "@/stores/loader";
import { useSnbStore } from "@/stores/counter";
....

export const stores = {
  useUserStore,
  useSnbStore,
  useLoaderStore....
};

이것이 Vue에서 참조되는 것은 이렇게 쓰인다.

test.vue

import { stores } from "@/stores";
const snbStore = stores.useSnbStore();

여기서는 pinia를 차용해서 설명하겠다. vuex도 근데 크게 다르지 않는다.

나는 route든 store든 index.ts를 두고 그 index.ts가 다른 여러개의 pinia, route 따위등을 참조하는것을 선호한다. 코드가 너무 길어지게되면 눈에 들어오지 않고, 기능별로 분류가 되어있는 편이 오류를 수정하기에도 적합하기 때문이다.

store는 일반적으로 페이지가 변경되어도 같은 싱글페이지안에서는 상태가 유지된다.

그래서 유저 로그인 정보나 권한 정보 로딩 언어설정따위를 저장해두곤한다.

import { defineStore } from "pinia";

export const useCustomStore = defineStore("custom",
  state: () => {
    return {
      isData: false,
      data: null as Data | null,
    };
  },
    actions: {
    customActionSet(data:Data) {
      this.$state.isData = true;
      this.$state.data = data;

    },
    customActionDel() {
      this.$state.isData = false;
      this.$state.data = data;
    }
  },
    persist: {
    // storage: localStorage
    storage: sessionStorage
  }
}

*Data는 타입으로 다른 타입형식을 차용해도 동작 이런 형식이다~~ 라는 것

persist는 영속 위치를 정하는 걸로 로컬/세션에 저장하겠다~~

/components/plugins/CustomPlugin.ts

import type { App, Plugin } from "vue";

export const CustomPlugin: Plugin = {
    install: (app: App) => {
        app.config.globalProperties.$myFunction = (value:String) => {

        return value;
        }
    }
}

커스텀 플러그인은 main에서 Vue.use를 사용해 추가할 수 있다.

main.ts

import { createApp } from "vue";
import App from "./App.vue";

import router from "./router"; //앞선 1번의 라우터
import { CustomPlugin } from "@/components/plugins/CustomPlugin";

const app = createApp(App);

import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

app
  .use(CustomPlugin)
  .use(vuetify)
  .use(router)
  .mount("#app");

react랑 비슷하게 vue는 npm i 로 다른 사용자들이 만들어둔 모듈을 받아 사용할 수 있다. 그걸 사용하는 방식이 .use()이다.

index.html로 들어가고

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.png">
    <title>Title</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>

main.ts

뭐 html은 다 일겠지만 app 위치에 main.ts가 들어간다.

import { createApp } from "vue";
import App from "./App.vue";

import router from "./router"; //앞선 1번의 라우터

const app = createApp(App);

import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

app
  .use(vuetify)
  .use(router)
  .mount("#app");

vuetify만 넣었다. '#app' 그러니까 <div id="app"> 저 위치에 마운트 된 App.vue가 들어간다.

App.vue가

<script setup lang="ts">
import { RouterView } from "vue-router";
</script>

<template>
  <RouterView />
</template>

이렇게 기초 구조가 잡힌다. 이제 RouterView에 앞선 router/index.ts 의 route에 따라 경로가 잡힐것이다.

* vite, vue3, 타입스크립트 환경임

vue에는 vue-router라는 일반적으로 프론트 라우트를 관리하는 모듈을 사용한다.

node.js 깔고 cmd에서 npm i vue-router

먼저 라우터의 '경로' 만을 저장하는 라우트 route.ts 파일을 만든다.

router/route.ts

import type { RouteRecordRaw } from "vue-router";

export const route: RouteRecordRaw[] = [{}]

얘가 route 라는 이름으로 경로를 던져줄것이다.

그 경로를 가져다 쓰는 라우터를 생성한다.

createRouter => 라우터를 만듦 createWebHistory => import.meta.env.BASE_URL => vite 루트경로

router/index.ts

import { createRouter, createWebHistory } from "vue-router";
import { route } from "@/router/routes";

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL);
    routes: route
});

* 왜 나눴음?

이렇게 route와 router를 나누는 이유는 토이프로젝트가 아닌 실질적인 프로젝트에서는 route가 너무 길다.

그래서 경로는 route.ts에서 관리. 라우트 접근 전/후에 일어나는 이벤트들은 index.ts에서 관리하려고 분할하는 것이다. ex) 라우트 접근전 로그인 여부, 권한 확인 etc..

1. Vue3에서는 다중루트노드 지원
2. Vue3에서는 Emit 정의 지원

web-app :

Means Single Page Application Vue, React, Angular etc..

Vue instance's Life Cycle:

beforeCreate : 가장 처음, data, methods 선언 전, DOM 접근 불가 created : data methods 정의, 접근 가능, DOM 접근불가(template 속성) beforeMount : 인스턴스 부착 전 mounted : 인스턴스 부착 후, template속성에서 정의한 DOM 접근 가능 beforeUpdate : 데이터 변경 후 리렌더링 전, 데이터 변경 가능 updated : 데이터 변경 후 리렌더링, 화면제어, 데이터 변경시 무한루프주의, DOM 로직 추천 beforeDestroy : 인스턴스 파괴 전, 뷰의 데이터 삭제 destroyed : 인스턴스 파괴 후

Component :

Like React, Split page as Component

Router :

Like React, Path control

Event Bus (not recommend), Vuex (Recommend) :

State Management in Vue like Redux or Recoil in React

HyperText Transfer Protocol :

HTTP recommended using axios lib

Directive :

v-if(영역차지안함) v-for(반복처리) v-show(영역차지) v-bind(데이터바인딩) v-on(이벤트처리) v-model(데이터처리)

Additional attribute:

computed:
    data 값의 변경에 따른 재연산
methods: 
    호출시 연산
watch:
    data 변경시 비동기처리

출처 : https://www.javaguides.net/2020/07/three-tier-three-layer-architecture-in-spring-mvc-web-application.html

Presentation Layer - controller package Business Logic Layer - service package Data Access Layer - repository package

문제

1번 문제 - 괄호 여닫기 문제류.

2번 문제 - dfs, bfs문제 dfs로 풀었다.

3번 문제 - 제한된 가중치가 주어질때 가중치 순환큐에서 원소 갯수 최대문제? 그냥 테케는 통과했는데 히든테케 30%정도를 통과못했다.. 예외처리에서 실수한듯 싶은데 결국 못찾았다. ;ㅁ;

4번 문제 - SQL 기본문제, SELECT SUM AS FROM WHERE LIKE "~%" 정도

3번 문제 한 한시간을 헤맸는데 결국 히든테케 에러를 잡지 못하고..

난이도는 쉬운편이었다. 백준 실버정도라고 생각한다.

제발 인성평가..

src

css는 디자인 적인 부분이니 차치하고, 핵심 기능 역할을 수행하는 js를 위주로 살피자.

들어가기 앞서.. (JS? JSX?)

일단 들어가기 앞서, create-react-app으로 자동 생성된 이 리액트는 확장자명 js 파일을 사용한다.

하지만 조금만 구글링을해서 git 등에서 다른 사람들의 리액트 프로젝트를 보면 js(자바스크립트) 확장자 대신 jsx(자바스크립트 확장, eXtension)를 사용하는 경우를 심심치 않게 볼 수있다.

그래서 js대신 jsx를 쓰는 리액트 프로젝트는 무엇인가에 대해 궁금함을 가질 수도 있다고 생각한다.

여기 그 궁금증을 해결해 줄 오랜 친구 스택 오버 플로우를 살펴보자.

링크 : JS vs JSX

jsx는 js와 확장자로서의 차이점은 없으나 jsx가 표준 자바스크립트 문법이 아니므로 호환성 등을 고려해야 하는 논쟁이 있을 수 있고, 그냥 취향차이 에 가깝다.

다만, jsx는 표현식을 포함할 수 있는 강력한 객체를 제공함으써, 확실히 렌더링시 사용자의 편의를 줄 수 있다.

요약하면,

1. js와 jsx의 확장자역할의 차이는 없고,
2. jsx는 js에 비해 강력한 객체를 확장해 지원하지만, 
3. 논쟁이 있을 수 있고, 취향차이에 가깝다는 것이다.

JSX 소개

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

자 본론으로 돌아와서 App.js를 보자. html문법에 해당하는 return이하를 날리고 js 구조만을 생각해 보도록 하자.

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return ( //...중략...
  );

 export default App;
}

얼마 안되니 순차적으로 살펴보겠다.

import logo from './logo.svg';

 App.js 파일이 위치한 폴더와 같은 폴더에 있는 logo.svg 파일을 
 logo라는 이름으로 이 App.js파일에 import해 사용하겠다.

import './App.css';

App.js 파일이 위치한 폴더와 같은 폴더에 있는 App.css 파일을 사용하겠다.

function App() { return ( //...중략... ) };

return 부 안쪽을 리턴하는 함수 App을 정의하겠다.

export default App;

함수 App을 default export 형태로 내보내겠다.

여기서 가장 마지막 export default App에 집중해 보도록 하겠다.

java스크립트에서 export, 즉 내보내는 방법은 2가지가 있다.

1. default export

하나는 지금 이 default export다.

export default class User {...} 의 형태로 export하고

import User from ... 의 형태로 import한다.

여기서 default의 특장점은

1. 한 js 파일에서 default export 는 유일하며 ,
2. import 받는 측에서 해당 명칭을 자유로이 수정하여 사용할 수 있다.

한 js 파일에서 default export가 유일하다는 예시를 들면

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return ( //...중략...
  );
}

function Test() {
  return ( //...중략...
  );
}
export default App;
export default Test;

이러면 export default Test에 빨간줄이 그어지는 것을 확인 할 수 있다.

import 받는 측에서 수정 가능하다는 예시를 들면

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Bpp from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Bpp />
  </React.StrictMode>
);

실제로 App.js의 함수명은 App이지만 여기서는 Bpp로 명명해서 사용 가능한 것을 볼 수 있다.

2. named export

named export는 말그대로 이름이 있는 export이다. 해당 클래스, 컴포넌트, 펑션을 해당 이름 그대로 외부에 가져다 쓰겠다. 는 의미이다.

export class User {...} 형태로 export 하고 import {User} from ... 형태로 import 한다.

상기된 App.js파일은 default export 형태로 작성되어 았으며 이렇게 class가 아닌 함수형 컴포넌트에서도 적용가능함을 인지하고, named export 형태로 바꾼다면

App.js

import logo from './logo.svg';
import './App.css';

export function App() { //여기에 export를 달아주어
  return ( //...중략...
  );
}

export function Bpp() { //여기에 export를 달아주어
  return ( //...중략...
  );
}


//여기서 export를 지우고

default 와는 달리 여러개의 함수를 export 할 수 있다.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { App, Bpp } from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <Bpp />
  </React.StrictMode>
);

이처럼 중괄호를 사용하여 App.js의 export function App에 접근 가능하다.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

import App from './App';

import =>

const root = ReactDOM.createRoot(document.getElementById('root'));

document.getElementById('root')가 저번 public 폴더의 index.html의 id="root"엘리먼트를 찾고 해당 엘리먼트를 루트라고 한다.

index.html

이 위치

root.render(<React.StrictMode><App /></React.StrictMode>)

이번엔 index.js를 살피도록하자.

이것은 root에서 임포트한 App.js를 실행한다. 특히, React.StrictMode는 자바스크립트의 엄격모드와 같이 이하의 자식 컴포넌트에서 문법에 맞지않거나 맞지않을 우려가 있거나 지원 종료된 함수의 호출 등을 검사하는 기능을 수행한다.(빼도 된다)

reportWebVitals는 앱의 퍼포먼스 시간을 제공하는데 실행 플로우 이해상 그다지 중요하지는 않아 생략한다.

.gitignore

프로젝트를 git에서 작업할 때, git에 push시 푸쉬하지 않는 영역을 지정한다.

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

git에 푸쉬할 때 /node_modules 폴더를 제외한다, /.pnp를 제외한다.... 이런 의미다.

여기엔 git에 올리기 민감한 정보, private_key, DB접근 url id pw 등등을 답은 .env 파일을 포함할 수 있으며

node npm 사용자로써 의식해야 하는 것은

/node_modules를 제하고 푸쉬하므로 git에서 clone 받아 실행할 때, node_modules는 포함되어 있지 않기 때문에 npm i를 수행해서 필요한 디펜던시 모듈들을 설치 하고, npm start를 해야한다.

package.json

{
  "name": "project_name",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

dependencies를 위주로 보면 된다. 프로젝트를 진행 하다 보면 npm i [모듈명] 으로 외부 모듈을 가져다 쓰는 경우가 있을 텐데 해당 모듈들은 전부 이 dependencies에 명시된다. clone 받은 뒤에 비어있는 node_modules를 채우는 것도 이 파일을 중심으로 해결된다.

lock은 의존성 트리를 포함해서 저장하는데 여기는 크게 건드릴 게 없다. 알고만 있자.

우리는 npx create-react-app [프로젝트 명] 이라는 CLI명령어로 [프로젝트 명] 이라는 리액트 프로젝트를 생성하고 cd [프로젝트 명] 으로 해당 프로젝트 폴더로 이동한 뒤 npm start 로 localhost:3000 서버에 우리의 [프로젝트 명] 리액트 프로젝트를 실행하였다.

내 프로젝트 명은 ... 음... project_name이다. 너무 직관적인가? 하하...

아무튼 이 create-react-app으로 생성된 리액트 프로젝트를 뜯어보도록 하자!

node_modules

열어보면 어질어질할 정도로 많은 폴더들이 당신을 반길 것이다. 괜찮다. 크게 신경 쓸 일 없는 폴더니까. npm이 설치한 외부 모듈들이 저장되는 곳이다. 자세한 설명은 package.json을 설명하면서 하겠다.

public

favicon.ico

파비콘이다! 파비콘이 뭐냐면

이 쬐끄마한 이미지다. 이 위치에 다른 이미지를 끼워 넣으면 이게 바뀐다.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

주석을 달자면

<!DOCTYPE html> <!-- 문서의 타입은 html이다 명시-->
<html lang="en"> <!-- html 의 lang 속성. 자동 생성이라 en으로 되어 있다. 한국은 ko -->
  <head>
    <meta charset="utf-8" />  <!-- 문자셋은 utf-8을 사용-->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 아까 위에서 보았던 파비콘 을 적용하는 줄입니다.-->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- view 포트를 장치너비만큼 주고 최초 스케일을 줍니다.-->
    <meta name="theme-color" content="#000000" />
    <!-- 모바일 상단 주소 표시줄 색상에 변화를 줍니다.-->
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- 웹 페이지에 대한 설명 : 이 웹사이트는 create-react-app으로 만들어 졌어~~ -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!-- 파비콘의 아이폰 버전이라고 생각하면 된다... -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--모바일에서의 manifest 사용, 뒤의 manifest에서 설명하겠다. -->
    <title>React App</title>
    <!-- 상단에 표기될 이름-->
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <!-- js의 스크립트를 지원하지 않을 때 대신 표현될 것-->
    <div id="root"></div>
    <!-- 이곳에서 리액트가 조립될 예정!-->
  </body>
</html>

이렇게 볼 수 있겠다.

logo192.png, logo512.png, manifest.json

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

start_url : "." 의 위치에 있는 favicon.ico logo192.png logo512.png 를 사용하는데 사용하는 파일이다.

robots.txt

웹 크롤러의 접근 제한을 권고하는 파일입니다. 자세한 작성 방식은 따로 찾아보고 이런게 있구나 하고 넘어갑시다.

길어지니 나머지는 다음으로!

페이지에 명시된 Node >= 14.0.0 and npm >= 5.6 node와 npm이 설치된 상태로 진행하겠다. 추후 페이지가 수정된다 하더라도 해당 버전만 확인하면 쉬이 해결 할 수 있을 것이다.

react 공식 홈페이지의 순서대로 진행하면

npx create-react-app my-app cd my-app npm start

터미널 CLI에 입력하게 될 이 코드를 만나게 된다. 순차적으로 뜯어보자.

npx =>

이 글을 보는 이 명령어를 처음 보는 사람들이 이 명령어를 처음 보았을 때의 나처럼 어? npm도 아니고 npx? 이건 뭐지? 하는 생각이 들었으면 좋겠다.

npm은 'Node Package Manager'라고 생각되는 것처럼 npx는 'Node Package eXecuter'라고 생각하면 된다.

노드 패키지를 설치하는 것이 아닌 실행시키는 명령어이다. 따라서 create-react-app 패키지는 설치되지 않으며 가상환경에서 실행되는 것이다.

create-react-app =>

이녀석이 react 프로젝트를 만들어 줄 것이다.

앞서 말한 npx가 패키지를 임시설치한 환경에서 실행되어 후술할 명칭의 폴더를 생성하고 그 이하에 리액트 프로젝트를 만든다.

my-app =>

이것은 내가 만들 리액트 프로젝트의 명칭이다. 원하는 것으로 변경해도 된다. npx create-react-app frontend 라던지 npx create-react-app [프로젝트 명] 이라던지.

자 여기까지 수행하면 아래와 같이 콘솔에 뜰 것이다.

이대로 수행하면 react 공식의 내용과 같다.

cd my-app =>

my-app(프로젝트 명) 폴더로 cd(change directory) 하기

npm start =>

정식 명칭은 npm run start 이지만 약식으로 이렇게 사용한다. 혹여 외부 다른 Docker나 script에서 npm을 수행할때는 대신 반드시 npm run start를 적어야하니 잡지식으로 기억해두자.

Hello, React!

자 이제 뱅글뱅글 돌아가는 React 로고를 확인할 수 있을 것이다. 다음 게시물에서는 디폴트 페이지를 분석하며 리액트의 구성 방식을 알아보도록 하겠다.

DOM 을 직접 건드리면서 작업을 하면 코드가 난잡해지기 쉬움

리액트는 어떠한 상태가 바뀌었을때, 처음부터 모든걸 새로 만들어서 보여주자는 아이디어에서 시작

속도와 성능 문제는 Virtual DOM으로 해결 Virtual DOM은 메모리에 가상으로 존재하는 DOM으로 (자바스크립트 객체) 변경 속도가 빠름

Virtual DOM과 브라우저 DOM을 비교하여 차이가 있는 곳을 감지 => 브라우저 DOM에 패치

꽤 늦었지만 누군가의 말처럼 늦었다고 생각했을 때가 가장 빠르다고 오늘부터라도 기술 블로그를 시작하기로 했다.

이 블로그가 내가 아는 지식들을 다시 정리하며 훗날 되돌아 보았을 때 이정표가 되었으면 한다.