하이고니의 개발 스토리

webpack으로 리액트 프로젝트 배포하기

하이고니 — Wed, 22 Mar 2023 20:16:25 +0900

create-react-app 을 사용하지 않고 하나하나 설치해서 배포까지 해보겠습니다. 화이팅!

경로는 이런 식입니다.

1. npm init

$ npm init -y

2. 웹팩과 웹팩 cli 설치

$ npm i -D webpack webpack-cli

3. 바벨 설치 (JSX 읽어야 하니까)

$ npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react

4. 최상위 경로에 webpack.config.js 파일 만들기

5. webpack.config.js 설정

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@babel/preset-env"],
              ["@babel/preset-react", { runtime: "automatic" }],
            ],
          },
        },
      },
    ],
  },
};

6. 리액트 설치

$ npm i react react-dom

7. css-loader, style-loader 설치

$ npm i -D css-loader style-loader

8. styled-components 설치 (optional)

$ npm i styled-components

9. axios 설치 (optional)

$ npm i axios

10. html webpack plugin 설치

$ npm i -D html-webpack-plugin

이쯤에서 webpack.config.js 파일 설정 추가

const path = require("path");
// 플러그인은 빌드할 때 추가적인 기능을 제공하는 것이기 때문에
// 웹팩이 인식할 수 있게 위에서 require로 불러와야 함

const HtmlWebpackPlugin = require("html-webpack-plugin");
// 로더는 빌드할 때 웹팩이 알아서 인식하고 적용함

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@babel/preset-env"],
              ["@babel/preset-react", { runtime: "automatic" }],
            ],
          },
        },
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          }
        ]
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html")
    })
  ]
};

11. file-loader 설치 (png, jpeg 등 이미지 파일까지 빌드해야 하는 경우)

$ npm i -D file-loader

11-1.

public 폴더에 이미지 파일이 있을 때 그냥 <img src="경로" /> 요런 식으로 썼던 코드가 있을 수 있다.

하지만 빌드할 때 그 경로를 읽을 수는 없으므로,

import myImg from '../public/myimage.png'

이런 식으로 임포트해서 <img src={myImg} /> 요렇게 써야 한다.

여기까지 하면 client는 완료.

잘 나온다.

이제 서버.. 오 서버가 생각보다 별 게 없네요

서버 세팅

1. npm init

$ npm init -y

2. nodemon, cors, dompurify, express, jsdom, morgan, uuid 설치 (사용하지 않는 것은 제외)

$ npm i '설치할 패키지 이름'

이제 깃헙 배포 도전

0. 깃헙은 docs 폴더 안에 들어있는 파일들만 읽기 때문에 경로를 수정해줘야 함.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
  // 이부분
    path: path.resolve(__dirname, "docs"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@babel/preset-env"],
              ["@babel/preset-react", { runtime: "automatic" }],
            ],
          },
        },
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          }
        ]
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html")
    })
  ]
};

1. 깃 레포지토리 생성

2. 최상위 경로에 .gitignore 파일 생성

3. 이 페이지에서 내가 사용할 것 (react, Node 등) 입력하고 생성된 코드를 .gitignore 파일에 입력

https://www.toptal.com/developers/gitignore

gitignore.io

Create useful .gitignore files for your project

www.toptal.com

예시

### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional stylelint cache
.stylelintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# vuepress v2.x temp and cache directory
.temp

# Docusaurus cache and generated files
.docusaurus

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

### Node Patch ###
# Serverless Webpack directories
.webpack/

# Optional stylelint cache

# SvelteKit build / generate output
.svelte-kit

### react ###
.DS_*
**/*.backup.*
**/*.back.*

node_modules

*.sublime*

psd
thumb
sketch

# End of https://www.toptal.com/developers/gitignore/api/react,node

4. 프로젝트 git init

$ git init

5. 원격 레포지토리 연결 (이건 깃헙에서 레포지토리 생성하면 안내 코드에 나와 있음. 그거 복붙하면 됨.)

$ git remote add origin [레포지토리 URL]

7. git status로 node_modules처럼 커밋하고 싶지 않은 애들 빠져있는지 확인

8. add

$ git add .

9. commit

$ git commit -m "커밋 메시지"

10. push

git push -u origin main

이렇게 하면 push까지 끝난다.

11. 레포지토리 settings - pages에서

위와 같이 세팅 후 save

12. 배포 완료

+ node_modules 같이 push 해버렸다...!! 이런 문제 상황 발생 시

일단

$ rm -rf .git

입력해서 git 파일 지우고

$ git remote remove [원격 저장소 이름. 보통 origin]

해서 연결 끊은 다음에

$ git init

해보세요..

$ git status

입력했을 때

요런 식으로 커밋한 적 없다고 나오면 된 겁니다..

객체 지향 프로그래밍 - Drag & Drop 프로젝트 02.

하이고니 — Wed, 22 Mar 2023 01:45:42 +0900

본 게시글은 udemy 강좌(Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS)를 수강한 내용을 바탕으로 합니다.

프로젝트 관리 앱.

이 앱에서는 사용자가 프로젝트를 생성할 수 있고, 상태(active / finished) 별 프로젝트를 볼 수 있다.

- Project는 프로젝트 개체를 나타내며 id, 제목, 설명, 인원 수 및 상태(active / finished)를 가진다.
- ProjectItem은 프로젝트 목록의 단일 항목을 나타내며 프로젝트 제목, 인원 수 및 설명을 표시한다.

- State 클래스는 리스너가 상태 업데이트를 구독할 수 있도록 한다.
- ProjectState는 State의 하위 클래스로서 프로젝트를 위한 애플리케이션 상태를 관리한다. 이는 싱글톤 인스턴스를 제공하고, 프로젝트를 추가하는 메서드를 제공한다.

- Validatable 인터페이스와 validate 함수를 통해 사용자 입력의 유효성을 검사한다.

- autobind 데코레이터를 정의해서 클래스 메서드를 클래스 인스턴스에 바인딩한다.

- UI 구성 요소를 만들기 위한 기본 클래스 인 Component. 이는 templateId, hostElementId, insertAtStart 및 newElementId를 취하는 생성자를 정의하며 템플릿을 가져와 새 요소를 생성하고 host element에 삽입한다. 또한 추상 메서드 renderContent를 정의하며 하위 클래스에서 이를 구현해야 한다.

- ProjectList 클래스는 Component를 확장한 것으로, 프로젝트 목록을 표시한다. 프로젝트의 상태(active / finished)를 지정하는 type 인자를 취한다. 이는 프로젝트 상태가 변경되거나 프로젝트가 추가될 때 할당된 프로젝트 목록을 업데이트하기 위해 프로젝트 상태 변경 사항을 체크한다.

ACTIVE PROJECTS에 있는 항목을 FINISHED PROJECTS로,

FINISHED PROJECTS에 있는 항목을 ACTIVE PROJECTS로

드래그해서 옮길 수 있는 기능을 구현하려고 한다.

// Drag & Drop Interfaces
interface Draggable {
  dragStartHandler(event: DragEvent): void;
  dragEndHandler(event: DragEvent): void;
}

interface DragTarget {
	// 드래그 앤 드롭 실행중. 드래그가 타겟이 유효한지 알려주기 위함.
  dragOverHandler(event: DragEvent): void;
  	// 드롭 시 벌어지는 일들.
  dropHandler(event: DragEvent): void;
  	// 드롭이 일어나지 않고 취소되거나 하는 경우?
  dragLeaveHandler(event: DragEvent): void;
}

두 개의 인터페이스를 정의한다.

Draggable: 드래그 할 요소. ProjectItem 클래스

DragTarget: 드래그가 도착하는 곳. ProjectList 클래스

// ProjectItem Class
class ProjectItem extends Component<HTMLUListElement, HTMLLIElement>
  implements Draggable {
  private project: Project;

	...

  constructor(hostId: string, project: Project) {
	...
  }

  @autobind
  dragStartHandler(event: DragEvent) {
    console.log(event);
  }

  dragEndHandler(_: DragEvent) {
    console.log('DragEnd');
  }

  configure() {
    this.element.addEventListener('dragstart', this.dragStartHandler);
    this.element.addEventListener('dragend', this.dragEndHandler);
  }

	...
}

Draggable은 dragStartHandler와 dragEndHandler를 가진다.

addEventListener의 'dragstart', 'dragend' 이벤트 발생 시 해당 메서드가 실행된다.

드래그 스타트

드래그 엔드

// ProjectList Class
class ProjectList extends Component<HTMLDivElement, HTMLElement>
  implements DragTarget {
  assignedProjects: Project[];

  constructor(private type: 'active' | 'finished') {
	...
  }

  @autobind
  dragOverHandler(_: DragEvent) {
    const listEl = this.element.querySelector('ul')!;
    // drop 할 수 있는 곳인지 css 상으로 표현하기 위해 class 추가
    listEl.classList.add('droppable');
  }

  dropHandler(_: DragEvent) {}

  @autobind
  dragLeaveHandler(_: DragEvent) {
    const listEl = this.element.querySelector('ul')!;
    // 마우스 벗어나면 class 제거
    listEl.classList.remove('droppable');
  }

  configure() {
    this.element.addEventListener('dragover', this.dragOverHandler);
    this.element.addEventListener('dragleave', this.dragLeaveHandler);
    this.element.addEventListener('drop', this.dropHandler);

    projectState.addListener((projects: Project[]) => {
		...
    });
  }

	...
}

  // ProjectItem
  
  @autobind
  dragStartHandler(event: DragEvent) {
  // 모든 드래그가 데이터를 전송할 수 있는 건 아님. 그래서 null 일 수도 있다.
  //					데이터 포맷, 전송할 데이터
    event.dataTransfer!.setData('text/plain', this.project.id);
    event.dataTransfer!.effectAllowed = 'move';
  }

옮기고 싶은 데이터 전체를 전송하는 것이 아니다. 나중에 id를 통해서 나머지 정보를 다 불러올 수 있기 때문에 최소한의 데이터만 전송한다.

// ProjectList

  @autobind
  dragOverHandler(event: DragEvent) {
    if (event.dataTransfer && event.dataTransfer.types[0] === 'text/plain') {
      event.preventDefault();
      const listEl = this.element.querySelector('ul')!;
      listEl.classList.add('droppable');
    }
  }

  @autobind
  dropHandler(event: DragEvent) {
  	// 데이터 추출
    const prjId = event.dataTransfer!.getData('text/plain');
    projectState.moveProject(
      prjId,
      this.type === 'active' ? ProjectStatus.Active : ProjectStatus.Finished
    );
  }

  @autobind
  dragLeaveHandler(_: DragEvent) {
    const listEl = this.element.querySelector('ul')!;
    listEl.classList.remove('droppable');
  }

 // ProjectState
 
 moveProject(projectId: string, newStatus: ProjectStatus) {
    const project = this.projects.find(prj => prj.id === projectId);
    // 드롭할 곳의 project의 상태가 이전과 달라야 상태를 변경시켜준다.
    if (project && project.status !== newStatus) {
      project.status = newStatus;
      this.updateListeners();
    }
  }

객체 지향 프로그래밍을 드디어 제대로 접해본 느낌인데, 이게 진짜 너무 너무 어려웠다. 수차례 복습해야지..

객체 지향 프로그래밍 - Drag & Drop 프로젝트 01.

하이고니 — Tue, 21 Mar 2023 15:41:28 +0900

Typescript: 기초부터 실전형 프로젝트까지 with React + NodeJS <Section 9 121 ~ 128>

정확하게 뭘 하는지 설명도 안 해주고 다짜고짜 클래스 만들면서 출발해가지고 너무나도 어려웠다,,,

오버뷰라도 살짝 한 다음에 코드 작성으로 들어갔으면 이해하기가 훨씬 쉽지 않았을까 싶다. 솔직히 강의의 절반도 이해 못한 것 같다. 모르는 건 다 제쳐두고 이해한 것 위주로 작성할 예정이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>ProjectManager</title>
    <link rel="stylesheet" href="app.css" />
    <script src="dist/app.js" defer></script>
  </head>
  <body>
    <template id="project-input">
      <form>
        <div class="form-control">
          <label for="title">Title</label>
          <input type="text" id="title" />
        </div>
        <div class="form-control">
          <label for="description">Description</label>
          <textarea id="description" rows="3"></textarea>
        </div>
        <div class="form-control">
          <label for="people">People</label>
          <input type="number" id="people" step="1" min="0" max="10" />
        </div>
        <button type="submit">ADD PROJECT</button>
      </form>
    </template>
    <template id="single-project">
      <li></li>
    </template>
    <template id="project-list">
      <section class="projects">
        <header>
          <h2></h2>
        </header>
        <ul></ul>
      </section>
    </template>
    <div id="app"></div>
  </body>
</html>

처음 강의 예제 코드를 보고, 왜 HTML이랑 CSS가 다 작성되어 있는데 화면에 아무것도 안 나오지? 내가 npm install을 잘못했나? 이런 생각을 했다.

<template> 태그

<template> 태그는 추가되거나 복사될 수 있는 HTML 요소들을 정의할 때 사용한다.

<template> 요소 내의 콘텐츠는 페이지가 로드될 때 바로 렌더링되지는 않기 때문에 사용자에게 보이지 않는다.
하지만 나중에 자바스크립트를 사용하여, 해당 콘텐츠를 복제한 후 보이도록 렌더링할 수 있다.

<template> 요소는 특정 HTML 요소들을 원하지 않을 때까지 계속해서 다시 사용할 수 있게 해준다.
만약 <template> 요소를 사용하지 않고 이러한 작업을 수행하려면,
자바스크립트를 사용하여 브라우저가 해당 HTML 요소들을 렌더링하지 않도록 HTML 코드를 작성해야 한다.

ProjectInput 클래스

class ProjectInput {
  templateElement: HTMLTemplateElement;
  hostElement: HTMLDivElement;
  element: HTMLFormElement;

  constructor() {
    this.templateElement = document.getElementById(
      'project-input'
    )! as HTMLTemplateElement;
    this.hostElement = document.getElementById('app')! as HTMLDivElement;

    const importedNode = document.importNode(
      this.templateElement.content,
      true
    );
    this.element = importedNode.firstElementChild as HTMLFormElement;
    this.attach();
  }

  private attach() {
    this.hostElement.insertAdjacentElement('afterbegin', this.element);
  }
}

const prjInput = new ProjectInput();

결론적으로, 우리가 보게 되는 건 <div id="app"></div> 내부다. (hostElement)

템플릿 요소의 content를 importedNode에 할당해서(깊은 복사) 그 첫 번째 자식(form)을 클래스의 element로 지정한다.

attach() 메서드가 호출되면 hostElement의 첫 번째 자식으로 this.element가 삽입된다.

그러면 아래 캡처와 같이 input 폼이 렌더된다.

.importNode()

노드 복사 메서드

let node = document.importNode('복제 원하는 노드', boolean : 자식 노드 포함 여부);

반환 : [True인경우(깊은 복사) : 자식 포함], [False인 경우 : 자식 미포함]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>노드의 복사 예제</title>
    <style>
        table {
            border-collapse: collapse;
            margin : 20px;
            text-align :center;
        }
        table td {
            border : 1px solid grey;
            padding : 6px 12px;
        }
    </style>
</head>
<body>
    <template>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </template>
    <table>
        <thead>
            <tr>
                <td>번호</td>
                <td>제목</td>
                <td>내용</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script src="importNode.js"></script>
</body>
</html>

let temp = document.querySelector('template');
let tbody = document.querySelector('tbody');

//데이터 SET
let db = [
    {'id':'1','title':'title1','content':'content1'},
    {'id':'2','title':'title2','content':'content2'},
    {'id':'3','title':'title3','content':'content3'}
];

//테이블 내용 생성
for (let i = 0; i < db.length; i++) {
    //TR (자식노드 까지 복사)
    let copyAllChild = document.importNode(temp.content,true).firstElementChild;
    console.log(copyAllChild);
    copyAllChild.children[0].innerText = db[i].id;
    copyAllChild.children[1].innerText = db[i].title;
    copyAllChild.children[2].innerText = db[i].content;

    tbody.append(copyAllChild);
}

HTML 렌더링된 내용(좌)과 console.log(copyAllChild); 출력 내용(우)

말 그대로 필요한 노드 복사해서 쓰기 위한 메서드. template이랑 함께 쓰면 유용할 듯.

.insertAdjacentElement()

특정 위치에 노드 삽입

element.insertAdjacentElement(position, text)

position	실제 위치
beforebegin	element 전
afterbegin	element 안 첫 번째 child
beforeend	element 안 마지막 child
afterend	element 후

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

Input Form 에 입력한 데이터 처리하기

// autobind decorator
function autobind(_: any, _2: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  const adjDescriptor: PropertyDescriptor = {
    configurable: true,
    get() {
      const boundFn = originalMethod.bind(this);
      return boundFn;
    }
  };
  return adjDescriptor;
}

// ProjectInput Class
class ProjectInput {
  templateElement: HTMLTemplateElement;
  hostElement: HTMLDivElement;
  element: HTMLFormElement;
  titleInputElement: HTMLInputElement;
  descriptionInputElement: HTMLInputElement;
  peopleInputElement: HTMLInputElement;

  constructor() {
    this.templateElement = document.getElementById(
      'project-input'
    )! as HTMLTemplateElement;
    this.hostElement = document.getElementById('app')! as HTMLDivElement;

    const importedNode = document.importNode(
      this.templateElement.content,
      true
    );
    this.element = importedNode.firstElementChild as HTMLFormElement;
    this.element.id = 'user-input';

    this.titleInputElement = this.element.querySelector(
      '#title'
    ) as HTMLInputElement;
    this.descriptionInputElement = this.element.querySelector(
      '#description'
    ) as HTMLInputElement;
    this.peopleInputElement = this.element.querySelector(
      '#people'
    ) as HTMLInputElement;

    this.configure();
    this.attach();
  }

  private gatherUserInput(): [string, string, number] | void {
    const enteredTitle = this.titleInputElement.value;
    const enteredDescription = this.descriptionInputElement.value;
    const enteredPeople = this.peopleInputElement.value;

    // 하나라도 입력 안 됐으면 alert 에러 메시지
    if (
      enteredTitle.trim().length === 0 ||
      enteredDescription.trim().length === 0 ||
      enteredPeople.trim().length === 0
    ) {
      alert('Invalid input, please try again!');
      return;
    } else {
      return [enteredTitle, enteredDescription, +enteredPeople];
    }
  }

  private clearInputs() {
    this.titleInputElement.value = '';
    this.descriptionInputElement.value = '';
    this.peopleInputElement.value = '';
  }

  @autobind
  private submitHandler(event: Event) {
    event.preventDefault();
    const userInput = this.gatherUserInput();
    if (Array.isArray(userInput)) {
      const [title, desc, people] = userInput;
      console.log(title, desc, people);
      this.clearInputs();
    }
  }

	// (1)
  private configure() {
    this.element.addEventListener('submit', this.submitHandler);
  }

  private attach() {
    this.hostElement.insertAdjacentElement('afterbegin', this.element);
  }
}

const prjInput = new ProjectInput();

코드가 길지만

1. input form 에 정보 입력

2. submit

3. 그 데이터 받아와서 처리

4. input 칸 비우기

아직까지는 이게 다다.

(1) configure() 메서드

이벤트 리스너를 설정하는 configure() 메서드를 따로 만드는 이유는 코드의 가독성과 유지 보수성을 높이기 위함이다.

만약 이벤트 리스너를 constructor()에서 바로 설정한다면, 코드의 복잡도가 높아져 가독성이 떨어지고, 추후 이벤트 리스너의 수정 및 삭제가 어려울 수 있다. 따라서, configure() 메서드를 만들어서 이벤트 리스너를 설정하면, 코드의 역할을 명확하게 구분할 수 있고, 추후 코드 수정 및 유지보수가 쉬워진다.

또한, this.submitHandler를 configure()에서 등록하는 이유는 이벤트 핸들러 함수 내부에서 this를 사용할 때, this가 해당 클래스의 인스턴스를 가리키도록 하기 위해서다. 만약 이벤트 핸들러 함수를 외부에서 등록하지 않고, 바로 생성자 내에서 등록하게 되면, 이벤트 핸들러 함수 내부에서 this를 사용할 때, this가 이벤트 객체를 가리키게 되어, 해당 클래스의 인스턴스의 프로퍼티나 메서드에 접근할 수 없게 된다. 이 문제를 해결하기 위해서 configure() 메서드 내부에서 이벤트 핸들러 함수를 등록하고, 해당 함수를 데코레이터 @autobind를 사용하여 바인딩하면, this가 해당 클래스의 인스턴스를 가리키게 된다.

Q: constructor 안에서 이벤트 핸들러 함수를 등록하면 @autobind로 바인딩이 안 되는가?

@autobind 데코레이터를 사용하여 메서드를 자동으로 바인딩할 때, 이 데코레이터는 해당 메서드를 클래스의 프로토타입에 등록된 메서드로 바인딩한다. 이때 constructor에서 이벤트 핸들러 함수를 등록하면, 해당 메서드는 클래스 인스턴스의 메서드가 아니라, constructor에서 선언된 지역 함수로 등록된다.

따라서, 이벤트 핸들러 함수를 등록할 때는 configure() 메서드와 같이 클래스 인스턴스에 속하는 메서드로 등록해야 한다. 그리고 configure() 메서드에서 등록한 메서드는 @autobind 데코레이터를 사용하여 자동으로 바인딩된다. 이렇게 하면, 해당 메서드에서 this를 사용할 때, 클래스 인스턴스를 가리키게 된다.

Validation

// Validation

interface Validatable {
  value: string | number;
  required?: boolean;
  minLength?: number;
  maxLength?: number;
  min?: number;
  max?: number;
}

// 객체를 받는다. 검증 조건과 input이 포함되어 있다.
function validate(validatableInput: Validatable) {
  let isValid = true;
  if (validatableInput.required) {
    isValid = isValid && validatableInput.value.toString().trim().length !== 0;
  }
  if (
    validatableInput.minLength != null &&
    typeof validatableInput.value === 'string'
  ) {
    isValid =
      isValid && validatableInput.value.length >= validatableInput.minLength;
  }
  if (
    validatableInput.maxLength != null &&
    typeof validatableInput.value === 'string'
  ) {
    isValid =
      isValid && validatableInput.value.length <= validatableInput.maxLength;
  }
  if (
    validatableInput.min != null &&
    typeof validatableInput.value === 'number'
  ) {
    isValid = isValid && validatableInput.value >= validatableInput.min;
  }
  if (
    validatableInput.max != null &&
    typeof validatableInput.value === 'number'
  ) {
    isValid = isValid && validatableInput.value <= validatableInput.max;
  }
  return isValid;
}

// autobind decorator
function autobind(_: any, _2: string, descriptor: PropertyDescriptor) {
	...
}

// ProjectInput Class
class ProjectInput {
	...

  constructor() {
    this.templateElement = document.getElementById(
      'project-input'
    )! as HTMLTemplateElement;
    this.hostElement = document.getElementById('app')! as HTMLDivElement;

    const importedNode = document.importNode(
      this.templateElement.content,
      true
    );
    this.element = importedNode.firstElementChild as HTMLFormElement;
    this.element.id = 'user-input';

    this.titleInputElement = this.element.querySelector(
      '#title'
    ) as HTMLInputElement;
    this.descriptionInputElement = this.element.querySelector(
      '#description'
    ) as HTMLInputElement;
    this.peopleInputElement = this.element.querySelector(
      '#people'
    ) as HTMLInputElement;

    this.configure();
    this.attach();
  }

  private gatherUserInput(): [string, string, number] | void {
    const enteredTitle = this.titleInputElement.value;
    const enteredDescription = this.descriptionInputElement.value;
    const enteredPeople = this.peopleInputElement.value;

    const titleValidatable: Validatable = {
      value: enteredTitle,
      required: true
    };
    const descriptionValidatable: Validatable = {
      value: enteredDescription,
      required: true,
      minLength: 5
    };
    const peopleValidatable: Validatable = {
      value: +enteredPeople,
      required: true,
      min: 1,
      max: 5
    };

    if (
      !validate(titleValidatable) ||
      !validate(descriptionValidatable) ||
      !validate(peopleValidatable)
    ) {
      alert('Invalid input, please try again!');
      return;
    } else {
      return [enteredTitle, enteredDescription, +enteredPeople];
    }
  }

	...
  }

  @autobind
  private submitHandler(event: Event) {
    event.preventDefault();
    const userInput = this.gatherUserInput();
    if (Array.isArray(userInput)) {
      const [title, desc, people] = userInput;
      console.log(title, desc, people);
      this.clearInputs();
    }
  }

  private configure() {
    this.element.addEventListener('submit', this.submitHandler);
  }

  private attach() {
    this.hostElement.insertAdjacentElement('afterbegin', this.element);
  }
}

const prjInput = new ProjectInput();

Project List 클래스

// Validation
interface Validatable {
	...
}

function validate(validatableInput: Validatable) {
	...
}

// autobind decorator
function autobind(_: any, _2: string, descriptor: PropertyDescriptor) {
	...
}

// ProjectList Class
class ProjectList {
  templateElement: HTMLTemplateElement;
  hostElement: HTMLDivElement;
  element: HTMLElement;

	// 리스트의 type을 받아서
  constructor(private type: 'active' | 'finished') {
    this.templateElement = document.getElementById(
      'project-list'
    )! as HTMLTemplateElement;
    this.hostElement = document.getElementById('app')! as HTMLDivElement;

    const importedNode = document.importNode(
      this.templateElement.content,
      true
    );
    this.element = importedNode.firstElementChild as HTMLElement;
    // id로 지정
    this.element.id = `${this.type}-projects`;
    this.attach();
    this.renderContent();
  }

  private renderContent() {
    const listId = `${this.type}-projects-list`;
    this.element.querySelector('ul')!.id = listId;
    // 받은 타입을 대문자로 변환해서 렌더링
    this.element.querySelector('h2')!.textContent =
      this.type.toUpperCase() + ' PROJECTS';
    
  }

  private attach() {
  	// 인풋 폼보다 아래로 가도록 마지막에 추가(beforeend)
    this.hostElement.insertAdjacentElement('beforeend', this.element);
  }
}

// ProjectInput Class
class ProjectInput {
	...
}

const prjInput = new ProjectInput();
// 액티브, 피니쉬드 순으로 추가
const activePrjList = new ProjectList('active');
const finishedPrjList = new ProjectList('finished');

Input 데이터 -> 프로젝트 목록 전달 (+ 상태 관리)

// Project State Management

class ProjectState {
	// 함수 참조 배열
  private listeners: any[] = [];
  
  private projects: any[] = [];
  private static instance: ProjectState;

  private constructor() {}

  static getInstance() {
    if (this.instance) {
      return this.instance;
    }
    this.instance = new ProjectState();
    return this.instance;
  }

  addListener(listenerFn: Function) {
    this.listeners.push(listenerFn);
  }

	2. 새 프로젝트 생성
  addProject(title: string, description: string, numOfPeople: number) {
    const newProject = {
      id: Math.random().toString(),
      title: title,
      description: description,
      people: numOfPeople
    };
    this.projects.push(newProject);
    for (const listenerFn of this.listeners) {
      listenerFn(this.projects.slice());
    }
  }
}

// submitHandler에서 addProject를 호출하기 위해
// 전역에서 사용 가능한 인스턴스 생성
const projectState = ProjectState.getInstance();

// Validation
...

// autobind decorator
...

// ProjectList Class
class ProjectList {
	...
    
  assignedProjects: any[];

  constructor(private type: 'active' | 'finished') {
	...

    projectState.addListener((projects: any[]) => {
      this.assignedProjects = projects;
      this.renderProjects();
    });

    this.attach();
    this.renderContent();
  }

  private renderProjects() {
    const listEl = document.getElementById(`${this.type}-projects-list`)! as HTMLUListElement;
    for (const prjItem of this.assignedProjects) {
      const listItem = document.createElement('li');
      listItem.textContent = prjItem.title;
      listEl.appendChild(listItem)
    }
  }

  private renderContent() {
    const listId = `${this.type}-projects-list`;
    this.element.querySelector('ul')!.id = listId;
    this.element.querySelector('h2')!.textContent =
      this.type.toUpperCase() + ' PROJECTS';
  }

  private attach() {
    this.hostElement.insertAdjacentElement('beforeend', this.element);
  }
}

// ProjectInput Class
class ProjectInput {
	...

  constructor() {
	...

    this.configure();
    this.attach();
  }
  
	...
    
  @autobind
  private submitHandler(event: Event) {
    event.preventDefault();
    const userInput = this.gatherUserInput();
    if (Array.isArray(userInput)) {
      const [title, desc, people] = userInput;
      // 1. 여기서 호출
      projectState.addProject(title, desc, people);
      this.clearInputs();
    }
  }

  private configure() {
    this.element.addEventListener('submit', this.submitHandler);
  }

  private attach() {
    this.hostElement.insertAdjacentElement('afterbegin', this.element);
  }
}

const prjInput = new ProjectInput();
const activePrjList = new ProjectList('active');
const finishedPrjList = new ProjectList('finished');

listeners ?

ProjectState 클래스에서 listeners 배열은 새로운 프로젝트가 추가되면 해당 배열 내의 모든 함수를 실행하는 데 사용된다. 이러한 함수는 addListener 메소드를 사용하여 listeners 배열에 추가된다. ProjectList 클래스는 생성자에서 해당 배열에 함수를 추가한다. 따라서 ProjectList 클래스는 새로운 프로젝트가 추가될 때마다 해당 함수를 실행한다.

이렇게 하면 상태 변경 시 자동으로 업데이트되는 UI를 만들 수 있다.

예를 들어, addProject 메소드는 새로운 프로젝트를 projects 배열에 추가 한 다음, listeners 배열 내에 등록 된 모든 함수를 호출하여 새로운 상태를 전달한다. ProjectList 클래스는 addListener 메소드를 사용하여 새로운 상태를 수신하고 해당 상태에 대한 UI 업데이트를 수행한다.

이러한 방식으로 상태 관리를 수행하면, 상태 변경시마다 UI를 업데이트하는 작업을 수동으로 수행하지 않아도 되므로 코드 유지 보수성이 향상된다. 또한 애플리케이션 전반에 걸쳐 일관된 상태를 유지할 수 있다.

중간 정리

1. ProjectState 클래스는 프로젝트 상태를 관리한다. addListener() 메서드를 사용하여 프로젝트 상태 변경에 대한 리스너 함수를 등록하고, addProject() 메서드를 사용하여 새 프로젝트를 추가한다.

2. validate() 함수는 Validatable 인터페이스를 구현하는 입력 객체를 받아 유효성 검사를 수행한다. 각 속성에 대한 필수 여부, 최소/최대 길이 또는 값 등을 확인하고, 유효한 경우 true를 반환한다.

3. autobind 데코레이터는 메서드를 this로 바인딩한다.

4. ProjectList 클래스는 프로젝트 목록을 렌더링한다. 생성자에서는 type 매개변수를 사용하여 목록이 'active'인지 'finished'인지 지정한다. renderContent() 메서드는 제목을 설정하고, renderProjects() 메서드는 할당된 프로젝트 목록을 렌더링한다.

5. ProjectInput 클래스는 새 프로젝트를 추가하는 입력 양식을 렌더링한다. gatherUserInput() 메서드에서는 입력 필드에서 사용자 입력을 수집하고, configure() 메서드에서는 입력 필드에서 이벤트 리스너를 등록한다. attach() 메서드는 입력 양식을 문서에 추가한다.

마지막으로 new ProjectInput()과

new ProjectList('active'), new ProjectList('finished')를 생성하여 프로젝트 입력 양식과 두 개의 프로젝트 목록을 렌더링한다.

참고 자료

https://goodmemory.tistory.com/8

[Javascript] 노드복사 importNode

노드의 복사 var node = document.importNode('복제 원하는 노드', boolean : 자식 노드 포함 여부); 반환 : [True인경우 : 자식 포함], [False인 경우 : 자식 미포함] 샘플 예제 ↓ [HTML] 번호 제목 내용 [Javascript] let

goodmemory.tistory.com

https://powerku.tistory.com/115

자바스크립트 | insertAdjacentElement() 엘리먼트에서 특정 위치에 노드 삽입

insertAdjacentElement(position, text) 특정 위치에 노드를 추가합니다. position에는 4가지의 단어만 들어갈 수 있습니다 beforebegin element 앞에 afterbegin element 안에 가장 첫번째 child beforeend element 안에 가장 마

powerku.tistory.com

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

Element.insertAdjacentElement() - Web APIs | MDN

The insertAdjacentElement() method of the Element interface inserts a given element node at a given position relative to the element it is invoked upon.

developer.mozilla.org

https://velog.io/@zeroequaltwo/TypeScript-%EA%B0%95%EC%9D%98-%EC%A0%95%EB%A6%AC-%EB%8D%B0%EC%BD%94%EB%A0%88%EC%9D%B4%ED%84%B0

TypeScript 강의 정리: 데코레이터

1. 데코레이터란? 1) 메타 프로그래밍이란? 메타프로그래밍이란 자기 자신 혹은 다른 컴퓨터 프로그램을 데이터로 취급하며 프로그램을 작성·수정하는 것을 말한다.(from 위키백과) 클래스와 데

velog.io

사이드 프로젝트 with React 30. AWS Amplify

하이고니 — Tue, 21 Mar 2023 08:39:57 +0900

AWS Amplify

소개

모바일/웹 어플리케이션 프로젝트 진행 시, 구성+빌드+배포+운영까지 모든 라이프사이클을 한 곳에서 편리하게 관리할 수 있도록 통합해둔 AWS의 풀스택 개발 통합 솔루션 서비스

둘러보기

- Admin UI 제공

- AWS 서비스와의 연동이 간편하다.
    - 인증(Cognito) - 로그인, 회원가입, 추가 인증 등
    - 서비스 모니터링/로깅(CloudWatch)
    - 데이터베이스(DynamoDB, Aurora, GraphQL 지원)
    - 앱 푸시 알림(PinPoint)
- CLI(Command Line Interface)으로 할 수 있는 것들이 매우 많다.

(CLI 예시. create-react-app, git push, git add ...)
    - 프론트엔드 초기 프로젝트 셋업 (React, Vue, Angular, Next.js 등 지원)
    - 백엔드 프로젝트 셋업 (node.js 지원)
        - DB 스키마 설정 가능
        - RESTful API 기본 코드셋도 제공
        - DB와의 연동도 이미 되어 있음
    - 배포
        - 커맨드 하나면 배포 끝!
    - 웹 호스팅 추가
        - 별도로 웹 서버 셋팅을 요구하지 않는다. 커맨드 하나면 호스팅 추가 가능. 뒷 단의 웹 서버 관리는 AWS가 알아서 해준다.
- 서비스 배포
    - 배포 모니터링, 로깅이 잘 되어있어, 배포가 실패할 경우 왜 실패했는지 디버깅 하기 용이
    - Github과 연동할 수 있어, main 브랜치에 푸시하는 것으로 배포 프로세스 시작 가능
- 프론트엔드와 백엔드 코드를 한 레포지터리 내에서 관리 가능
    - 그럼에도 백엔드와 프론트엔드 분리 배포 가능
- 디자인 툴 Figma와 연동하여 Figma 내 컴포넌트를 리액트 컴포넌트화 할 수 있음
- CloudFormation을 이용한 인프라 관리
    - Infrastructure as code 서비스의 한 종류

Infrastructure as code란?

한 서비스를 운영하기 위해 필요한 인프라 리소스(서버, 데이터베이스 등)을 코드화 해놓은 것을 의미한다. 매 배포시 마다 배포를 중개하는 서비스에서 해당 파일을 읽어들인 뒤 해당 코드대로 인프라를 구성한다. (e.g. 서버는 auto-scaling을 해줘, DB는 테이블을 이렇게 생성해줘!)

Git으로 버전 관리를 할 수 있으며, 누가 어떤 것을 수정 했는지 트래킹이 가능하다는 장점이 있다.



    - AWS resource를 관리하기 위한 template file
        - 예시 template

    
    
    {
      "Description": "DynamoDB resource",
      "AWSTemplateFormatVersion": "2010-09-09",
      "Parameters": {
        "partitionKeyName": {
          "Type": "String"
        },
        "partitionKeyType": {
          "Type": "String"
        },
        "env": {
          "Type": "String"
        },
        "tableName": {
          "Type": "String"
        }
      },
      "Resources": {
        "DynamoDBTable": {
          "Type": "AWS::DynamoDB::Table",
          "Properties": {
            "KeySchema": [
              {
                "AttributeName": "guid",
                "KeyType": "HASH"
              }
            ],
            "AttributeDefinitions": [
              {
                "AttributeName": "guid",
                "AttributeType": "S"
              }
            ],
            "GlobalSecondaryIndexes": [],
            "ProvisionedThroughput": {
              "ReadCapacityUnits": 5,
              "WriteCapacityUnits": 5
            },
            "StreamSpecification": {
              "StreamViewType": "NEW_IMAGE"
            },
            "TableName": {
              "Fn::If": [
                "ShouldNotCreateEnvResources",
                {
                  "Ref": "tableName"
                },
                {
                  "Fn::Join": [
                    "",
                    [
                      {
                        "Ref": "tableName"
                      },
                      "-",
                      {
                        "Ref": "env"
                      }
                    ]
                  ]
                }
              ]
            }
          }
        }
      },
      "Outputs": {
        "Name": {
          "Value": {
            "Ref": "DynamoDBTable"
          }
        },
        "Arn": {
          "Value": {
            "Fn::GetAtt": [
              "DynamoDBTable",
              "Arn"
            ]
          }
        },
        "StreamArn": {
          "Value": {
            "Fn::GetAtt": [
              "DynamoDBTable",
              "StreamArn"
            ]
          }
        },
        "PartitionKeyName": {
          "Value": {
            "Ref": "partitionKeyName"
          }
        },
        "PartitionKeyType": {
          "Value": {
            "Ref": "partitionKeyType"
          }
        },
        "Region": {
          "Value": {
            "Ref": "AWS::Region"
          }
        }
      }
    }

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발

#패캠인강후기 #패스트캠퍼스후기 #오공완 #사이드프로젝트10개기술스택으로구현하는풀스택서버리스프로젝트withReact

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr

webpack 빌드 시 이미지 경로(assets, 템플릿 로더)

하이고니 — Mon, 20 Mar 2023 16:58:23 +0900

만들어뒀던 js, css, html 기반 프로젝트를 webpack으로 번들링하고 있었다.

다른 건 잘 되는데, asset 폴더 경로를 지정해서 png나 jpg 파일을 불러오려고 하는 것에서 문제가 발생했다.

<!DOCTYPE html>
<html lang="en">
  <head>
		<!-- ... -->
  </head>

  <body>
    
    
		<!-- ... -->
        
      <img src="./jerry.png")> alt="" id="jerry" />
      
		<!-- ... -->
        
  </body>
</html>

저렇게 상대 경로로 설정해두고 빌드하면 경로가 바뀌지 않아서 파일은 정상적으로 따라와도 html이 png 파일을 읽을 수가 없다.

아래는 webpack.config.js 파일 내용이다.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
    
    // png 파일이 저장될 경로
    assetModuleFilename: 'assets/[name][ext]',
    
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
      
      
      // asset 관련
      {
        test: /\.png$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          }
        },
      },
      
      
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),


  ],
};

빌드가 되면 dist 폴더가 생성되고, 그 안에 assets 폴더가 만들어지며, 그 안에 png 파일이 들어갈 것이다.

빌드 후 경로

HTML도 그에 따라 경로가 바뀌어야 하는데, HTML은 그냥 텍스트일 뿐이라서 빌드함에 따라 변하고 자시고 하지 않는다.

그럼 그 경로를 바뀌게 하려면?

<img src="<%= require('./jerry.png') %>" alt="" id="jerry" />

저런 요상한 문법을 사용하면 된다. '템플릿 로더'라고 하는 건데 알아서 assets 파일 내를 가리키게 해준다.

저렇게 쓰고 빌드하면,

빌드 후 dist 폴더 내 html 파일

경로가 잘 바뀐 것을 확인할 수 있다.

사이드 프로젝트 with React 29. 기술셋 선정하기 (2)

하이고니 — Mon, 20 Mar 2023 08:32:31 +0900

기술셋 선정하기 - DevOps

시작하기에 앞서, DevOps 란?

Development + Operation의 합성어

소프트웨어 개발에서 배포까지.

전달(delivery) 과정을 자동화하고 빠르게 하여 결국에는 비지니스의 가치를 높일 수 있도록 하기 위한 개발 환경이나 문화

1. 시스템의 요구사항을 잘 충족시키기 위해 필요한 것들 리스팅

배포 단계를 수립하는 것이 쉬운가?
배포가 쉬운가?
서버를 직접 관리해야 하는가?
웹 사이트 호스팅(도메인)를 쉽게 할 수 있는가?
Github과 연동되어 git push시 배포 프로세스를 시작할 수 있는가?
추후 백엔드 API를 개발할 경우 통합하고 배포하는데에 용이한가?
배포 모니터링 지원
개발 커뮤니티 활성화
무료인가?
기술의 안정성 - v.0.0.1같이 너무 새로운 기술이 아닌, 안정된 버전이 있고, 유지보수 하는 단체가 안정적인가?
팀 내 기술 친숙도
- 기술 친숙도 만으로 기술을 결정하는 요소가 될 수는 없습니다. 하지만 후보군들이 다 비슷비슷할 경우 기술 친숙도로 결정할 수 있다.

2. 후보군 조사

AWS Amplify
Jenkins
Google Firebase

3. 비교 테이블 생성

	AWS Amplify	Jenkins	Google Firebase
배포 단계를 수립하는 것이 쉬운가?	O	X -> 서버 관리, 호스팅 어떻게 할지 다 정해야 함	O
배포가 쉬운가?	O	O	O
웹사이트 호스팅(도메인)을 쉽게 할 수 있는가?	O	X	O
서버를 직접 관리하지 않아도 되는가?	O	X	O
Github과 연동 및 배포 프로세스를 시작할 수 있는가?	O -> Github branch만 연결하면 됨	O -> 하지만 Github action을 별도로 설정해줘야 한다.	O -> 하지만 Github action을 별도로 설정해줘야 한다.
추후 백엔드 API를 개발할 경우, 통합하고 배포하는 데 용이한가?	O -> Lambda, API Gateway 등	X -> 별도의 백엔드 배포 파이프라인이 필요	O -> Cloud function
배포 모니터링 지원	O	O	O
개발 커뮤니티 활성화	O	O	O
기술의 안정성	O	O	O
팀 내 기술 친숙도	상대적	상대적	상대적
무료인가?	12개월 간 프리 티어	O	일정 한도 내 무료

4. 결정

AWS가 클라우드 시장에서 선점을 가하고 있고, AWS의 서비스들(Lambda, S3, DynamoDB 등)을 간편하게 연동하여 사용할 수 있다는 것이 큰 장점. 따라서, Firebase와 Amplify 중 선택해야 한다면, 더치페이 프로젝트에서는 AWS Amplify를 선택할 것

기술셋을 입힌 아키텍처는 이렇게 바뀐다!

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발

#패캠인강후기 #패스트캠퍼스후기 #오공완 #사이드프로젝트10개기술스택으로구현하는풀스택서버리스프로젝트withReact

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr

사이드 프로젝트 with React 28. 기술셋 선정하기 -프론트엔드

하이고니 — Sun, 19 Mar 2023 01:41:31 +0900

3/19 (SUN)

들은 강의: Part 3. 프로젝트 설계하기 02. 기술셋 선정하기 (1) - 프론트엔드

기술셋 선정하기 - 프론트엔드

1. 시스템의 요구사항을 잘 충족시키기 위해 필요한 것들 리스팅

페이지 라우팅
UI 코드 재활용 가능
상태관리가 가능한가?
테스트 코드 작성 용이
개발 커뮤니티 활성화
기술의 안정성 - 나온지 얼마 안 된 너무 새로운 기술은 X. 안정된 버전이 있고, 유지보수 하는 단체가 안정적인가?
팀 내 기술 친숙도
- 기술 친숙도 만으로 기술을 결정하는 요소가 될 수는 없다. 하지만 후보군들이 다 비슷비슷할 경우 기술 친숙도로 결정할 수 있다.

2. 후보군 조사

React.js
Angular
Vanilla JS

3. 비교 테이블 생성

React Angular Vanilla

페이지 라우팅
UI 코드 재활용 가능
상태 관리 가능
테스트 코드 작성 용이
개발 커뮤니티 활성화
기술의 안정성
팀 내 기술 친숙도

4. 비교/분석 하기

React / Angular / Vanilla

	React	Angular	Vanilla
페이지 라우팅	O -> React-router를 이용하여 가능	O -> 내장 기능	X -> 직접 구현
UI 코드 재활용 가능	O -> 컴포넌트	O -> 컴포넌트	X
상태 관리 가능	O -> Redux / Recoil 을 통해 가능	O	O -> Redux를 통해 가능
테스트 코드 작성 용이	O -> 테스트하고자 하는 해당 컴포넌트만 import 하면 됨	X -> 컴포넌트에서 의존하는 모듈 및 자식 컴포넌트들을 일일히 명시해야 함	X -> 리액트에 비해서..?
개발 커뮤니티 활성화	O	O	X
기술의 안정성	O	O	O
팀 내 기술 친숙도	상대적	상대적	상대적

+ 리액트의 인기가 압도적으로 많아서 새로운 프론트엔드 개발자가 오더라도 리액트를 알고 있을 확률이 높다.

5. 결정

React + React-router + Recoil

(이번 프로젝트에서는) 왜 Redux보다 Recoil인가?

1. Redux는 Recoil에 비해 러닝 커브가 훨씬 높다.
2. Recoil은 React 전용 상태 관리 라이브러리.
3. Recoil은 React 스타일의 hook을 제공함.

대규모 상태를 관리해야 하는 프로젝트에는 redux를 사용하는 것이 좀 더 적합하다.

또한 이런 대규모 상태를 감시, 디버깅하기 위한 안정적인 'devtool'도 가지고 있기 때문에 안정성 면에서도 redux가 더 낫다.

그러나 지금 진행하려는 프로젝트는 대규모 데이터를 다루는 것도 아니고, 기한이 길지 않은 프로젝트이기 때문에 상대적으로 적은 코드를 작성하는 recoil이 redux에 비해 유리할 것이다.

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발

#패캠인강후기 #패스트캠퍼스후기 #오공완 #사이드프로젝트10개기술스택으로구현하는풀스택서버리스프로젝트withReact

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr

사이드 프로젝트 with React 27. 기술셋 선정 기준

하이고니 — Sat, 18 Mar 2023 11:51:00 +0900

올바른 기술셋 선정하기

새로운 기술들이 하루가 멀다하고 나오고 있다.

기술의 호수 속에서 우리는 어떤 기술을 사용해야 할까?

올바른 기술셋은 무엇일까?

내가 사용하고 싶은 최신 기술 ❌
무조건 최신 기술이라고, 무조건 많은 라이브러리를 쓴다고 올바른 것이 아니다!
시스템의 요구사항을 잘 충족 시킬 수 있도록 서포트 하는 기술 ✅

왜 중요한가?

어떤 기술을 선택하느냐에 따라 소프트웨어 운영/유지 비용에 영향
- AWS S3가 좋다고 들어서 사용했다가는 요금 폭탄을 맞을 수도
- 소프트웨어의 한계점을 만들어 낼 수도
- 특정 기술이 기능 면에서 한정적이거나 개발자가 다룰 수 있는 범위가 한정적이라면 프로젝트에서 많은 문제를 발생시킬 수 있음!
- 반대로 코드 구현을 수월하게 해준다 하더라도 배포나 다른 기술과의 통합이 어렵다면 이 또한 한계점이 될 수 있음!
지금 선택한 기술이 이 소프트웨어의 근간 기술이 되고, 추후 다른 개발자들도 이 기술을 배우고 사용해야 하기 때문
기술을 위해 소프트웨어가 존재하는 것이 아니라, 더 나은 경험을 제공하는 소프트웨어를 만들기 위해 기술이 존재하는 것 ✨

어떻게 선정할까?

시스템의 요구사항을 잘 충족시키기 위해 필요한 것들 리스팅

e.g. 멀티 스레딩 지원?, 성능, 해당 기술의 learning curve, 팀원들의 기술에 대한 친숙도, 해당 기술의 업데이트가 활발하고 커뮤니티가 활성화 되어 있는가? 등..
후보군 조사
기술셋 후보군 중에 사용해본 적이 없는 기술이 보인다면 해당 기술을 배제하는게 맞을까? → ❌

리서치를 하는 시간을 충분히 가진 후 비교해야 한다. 개발자는 항상 모르는 것이 있을 수밖에 없다. 모른다고 피하기 보다는 이해하는 시간을 가져야 한다. 공식 문서를 읽고, 간단하게 기술을 가지고 놀아보는 시간을 가져보자.
비교 테이블 생성 - 각 후보군 별로 시스템의 요구사항을 충족 시키는지 비교하기 위한 테이블을 만들면 된다.
팀 내 토론 및 결정!

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발

#패캠인강후기 #패스트캠퍼스후기 #오공완 #사이드프로젝트10개기술스택으로구현하는풀스택서버리스프로젝트withReact

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr

사이드 프로젝트 with React 26. 클래스 다이어그램 실습

하이고니 — Fri, 17 Mar 2023 07:20:47 +0900

들은 강의: Part 3. 프로젝트 설계하기 07. [실전] 시스템 설계 (3) - Class diagram for 프론트 엔드

Plant UML 사용
리액트 컴포넌트/클래스의 구조도 작성

1. 자바 설치

https://www.java.com/en/download

Download Java for Linux

Linux RPM filesize: 76.84 MB Instructions After installing Java, you will need to enable Java in your browser.

www.java.com

2. GraphViz 설치

https://plantuml.com/ko/graphviz-dot

Test your GraphViz installation

This page gives information about testing your GraphViz installation for PlantUML. It lists some basic checks and some actions to be taken in case of failure.

plantuml.com

3. VS Code marketplace에서 PlantUML 설치

4. 프로젝트 폴더 아래에 docs폴더 생성

5. react_component_diagram.plantuml 파일 생성

6. UI 디자인을 보면서 Component화 할 수 있는 것들을 추려내기

7. Component 간 구조 정의 (e.g. 상속, 조합)

https://plantuml.com/ko/class-diagram

클래스 다이어그램 구문 및 기능

PlantUML 클래스 다이어그램 구문 : 당신은 정의 할 수 있습니다 인터페이스, 회원, 관계, 패키지, 제네릭, 음 ... 변경 글꼴과 색상도 가능하다.

plantuml.com

https://plantuml.com/ko/component-diagram

구성 요소 다이어그램 구문 및 기능

PlantUML 구성 요소 다이어그램 구문 : 당신은 정의 할 수 있습니다 인터페이스, 구성 요소, 관계, 그룹, 메모 ... 변경 글꼴과 색상도 가능하다.

plantuml.com

리액트에서 클래스로 컴포넌트를 만들 수도 있지만, 함수형 컴포넌트를 만들 수도 있다. (실제로 요새는 함수형 컴포넌트를 더 많이 쓴다.)

그래서 강의에서는 객체 다이어그램을 이용할 것이다.

https://plantuml.com/ko/object-diagram

Object Diagram syntax and features

PlantUML object diagram syntax: You can define objects, fields, relationships, packages, notes... Changing fonts and colors is also possible.

plantuml.com

실습

1. 객체 생성

@startuml

object CreateGroup
object AddMembers
object ExpenseMain

@enduml

아래 두 요소는 굉장히 비슷하다. -> 컴포넌트화할 수 있다.

CreateGroup *-- CenteredOverlayForm
AddMembers *-- CenteredOverlayForm

조합의 관계로 나타낼 수 있다.

저 하얀색 박스도 CreateGroup이나 AddMembers의 CenteredOverlayForm을 재사용해서 만들 수 있을 것 같다.

하지만 Form의 형태가 아니므로 분리가 필요하다.

@startuml

object CreateGroup
object AddMembers
object ExpenseMain

object CenteredOverlay
object CenteredOverlayForm

object AddExpenseForm
object ExpenseSummary
object ExpenseList

CreateGroup *-- CenteredOverlayForm
AddMembers *-- CenteredOverlayForm

CenteredOverlayForm *-- CenteredOverlay

ExpenseMain *-- AddExpenseForm
ExpenseMain *-- ExpenseSummary
ExpenseMain *-- ExpenseList
ExpenseList *-- CenteredOverlay 

@enduml

강의에서는 이렇게 만들었는데, 내가 보기엔 CenteredOverlay가 CenteredOverlayForm을 포함하는 관계가 더 적절한 것 같다.

CenteredOverlay 안에는 CenteredOverlayForm가 있을 수도 있고 ExpenseList가 있을 수도 있기 때문이다.

근데 또 뭐 정확한 위계로 배치했다기보다 CenteredOverlay는 디자인적인 역할만 하는 거라 따로 빼놓은 거면 저게 맞을 수도..

완성본

@startuml

object CreateGroup {
  state groupName: string
  ' 입력된 값이 조건을 만족하는지 체크 '
  state formValidated: boolean
}
object AddMembers {
  state members: string[]
  state formValidated: boolean
}
object ExpenseMain {
  ' 상태 관리 라이브러리를 사용해서 store에서 get할 수 있기 때문에 '
  ' props는 아닐 수도 '
  groupName: string
  members: string[]
}

object CenteredOverlay
object CenteredOverlayForm {
  ' state와 props는 구별해준다. '
  props title: string
  props inputType: string
  props handleFormSubmitted: function

  state currentValue: string
}

object AddExpenseForm {
  ' members는 계속해서 변하는 상태값이 아님 '
  members: string[]
  state payer: string
  ' 결제 내역 '
  state description: string
  state amount: number
  state paidAt: Date
  state formValidated: boolean
}
object ExpenseSummary {
  expenses: expense[]
  members: string[]
}
object ExpenseList {
  expenses: expense[]
}

CreateGroup *-- CenteredOverlayForm
AddMembers *-- CenteredOverlayForm

CenteredOverlayForm *-- CenteredOverlay

ExpenseMain *-- AddExpenseForm
ExpenseMain *-- ExpenseSummary
ExpenseMain *-- ExpenseList
ExpenseList *-- CenteredOverlay 

@enduml

다른 다이어그램은 익숙하지도 않고 잘 안 와닿았는데, 리액트를 써본 입장에서 객체 다이어그램은 프로그램을 만들기 전 필수 요소라고 느껴지기까지 한다. 다이어그램을 그려보면서 이미 코드가 어떤 식으로 작성돼야 할지 어느 정도 감을 잡을 수 있고, 큰 그림을 그릴 수 있게 됐다. 작은 프로젝트라도 PlantUML로 도식화해보는 훈련을 자꾸 하자. 화이팅

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발

#패캠인강후기 #패스트캠퍼스후기 #오공완 #사이드프로젝트10개기술스택으로구현하는풀스택서버리스프로젝트withReact

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr

사이드 프로젝트 with React 25. 프론트엔드 설계란?

하이고니 — Thu, 16 Mar 2023 09:13:56 +0900

프론트엔드 설계란?

프론트엔드의 아키텍처를 설계할 수도 있고, 컴포넌트 간 의존 관계를 나타낸 다이어그램을 그려볼 수도 있다.
더치페이의 프론트엔드 아키텍처 자체는 심플하기에, 리액트 컴포넌트 간의 의존성을 나타내기 위한 클래스 다이어그램을 그려볼 예정!

잘 설계하기 위한 팁

페이지 별로 컴포넌트를 정의
UI 디자인을 살펴보면서 공통된 요소들이 있는지 파악
- 공통된 요소들에 대해 컴포넌트화(DRY;Don't Repeat Yourself 원칙)
- 페이지 별로 컴포넌트를 계층화해서 트리 구조를 만들 수 있겠다.
사용할 만한 컴포넌트 디자인 패턴에는 어떤 것이 있는가?
- Container 패턴: UI를 렌더링하는 데에 집중하는 컴포넌트, 데이터 불러오기 등의 비즈니스 로직을 담아 둘 Container 컴포넌트로 나눠 설계

-
- Provider 패턴: 컴포넌트 내 props drilling (프로퍼티 내리꽂기; 컴포넌트 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정 중 하나로, props를 오로지 하위 컴포넌트로 전달하는 용도로만 사용)을 방지하고자 생긴 패턴. React Context나 Redux/Recoil과 같이 중앙 상태 관리를 이용하여 데이터를 저장해 두고, 필요한 모든 컴포넌트 (i.e. Consumer)에서 이 데이터에 접근 가능하도록 만든 패턴.

App -> ( GroupDetailContainer ) -> GroupDetail 로 themeContext를 전달

각 컴포넌트에 최소한으로 필요한 props는 무엇일지 정의
컴포넌트 간 어떤 데이터들을 주고받아야 할 지 생각
각 컴포넌트 별 state/props를 미리 생각
한 컴포넌트가 하나의 책임만 가지고 있는지 확인(Single Resposibility Principle)
더치페이 예시 - 한 컴포넌트 내에서 그룹 생성 뿐 아니라 그룹 삭제까지 한다면 이 컴포넌트는 너무 많은 것을 핸들링하려고 하는 것이다 -> 쪼개자.
읽어보면 좋을 자료

Thinking in React – React

A JavaScript library for building user interfaces

reactjs.org

투두리스트가 진짜 컴포넌트 하나에 다 때려박아놓은 구조인데, 리팩토링하면서 위 설계 구조에 대해 복습해봐야겠다.

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발

#패캠인강후기 #패스트캠퍼스후기 #오공완 #사이드프로젝트10개기술스택으로구현하는풀스택서버리스프로젝트withReact

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr