• nodejs로 이것저것 할 때 yarn을 피해 갈 수 없을 것이다

설치방법

• https://classic.yarnpkg.com/ > install yarn > download installer
• https://classic.yarnpkg.com/en/docs/install#windows-stable
• 인스톨러를 받고 실행하면 끝

• 설치가 완료되면 cmd를 열고 yarn -v 를 쳐서 확인한다

yarn

• 페이스북에서 만든 npm

참고

• yarn ; https://classic.yarnpkg.com/

1
2
3
4
5
6

npx create-react-app my-react-app
cd my-react-app

exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/chinsun9/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/null)

yarn start

• 누군가 자동으로 세팅하는 스크립트를 제작해두었다
• 명령어 3개만 입력하면 세팅이 끝난다
• windows에서는 gitbash에서 해당 명령을 실행하면 된다
• 추가로 eslint 확장도구가 설치되어 있어야한다

• 추가로, prettier 확장도구를 통해 자동포맷팅을 사용하는 사람들은

1
2
3
4
5
6

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": false
}

• "editor.formatOnSave": false ; prettier 확장도구로 인한 포맷팅은 비활성화해주고,
• "source.fixAll.eslint": true ; eslint에서 포맷팅을 하도록한다

TMI

따라해도 나오는 오류

Replace onPerfEntry with (onPerfEntry)eslint (prettier/prettier)

• src/reportWebVitals.js 파일에서 1개의 파라미터만 받는 함수에 괄호로 묶어주라는 오류가 나올 것이다
• 이것만 고쳐주면 잘 동작한다

• 혹시 빨간줄이 계속남아있거나, 안된다면 vscode를 다시 실행해보자

계속된 세팅 실패

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

        leadingComments: [
          {
            type: 'Line',
            value: ' If you want to start measuring performance in your app, pass a function',
            start: 270,
            end: 344,
            loc: [SourceLocation],
            range: [Array]
          },
          {
            type: 'Line',
            value: ' to log results (for example: reportWebVitals(console.log))',
            start: 345,
            end: 406,
            loc: [SourceLocation],
            range: [Array]
          },
          {
            type: 'Line',
            value: ' or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals',
            start: 407,
            end: 481,
            loc: [SourceLocation],
            range: [Array]
          }
        ],
      }
    ],
    parent: null
  }
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-practice@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-practice@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\chin_\AppData\Roaming\npm-cache\_logs\2020-11-17T06_40_37_514Z-debug.log

• eslint-config-airbnb 만 설치하면 위 오류가 뜨면서 실행조차 안됬다
• 이유는 모르겠다

eslint-prettier-airbnb-react 포크

• karlhadwen/eslint-prettier-airbnb-react를 포크해서 내가 오류난 부분을 바꿔주었다
• Delete `␍`eslintprettier/prettier 문제였는데,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
  "rules": {
    // ...
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 80,
        "endOfLine": "auto" // <-- 추가
      }
    ]
    // ...
  }
}

• "endOfLine": "auto"를 추가해어 해결하였다

.prettierrc 파일 불필요

• eslint-config-prettier 을 사용해서 prettierrc 파일없이 eslint 설정만으로도 가능하다고한다
• eslintrc.json에 rule 아래 prettier/prettier이 있는데, 여기에 내가 필요한 포맷팅 설정을 해두면된다

여기까지 리액트 프로젝트

• https://github.com/chinsun9/react-eslint-prettier-practice

참고

• 동영상 Setup ESLint, Prettier & Airbnb Style Guide in under 2 Minutes
• eslint-prettier-airbnb-react

• ABI (Application Binary Interface)
• 일렉트론js에서 iohook 설치할 때 사용해보았다

참고

• ABI Stability | Node.js
• 응용 프로그램 이진 인터페이스

1
2

log(`__dirname`, __dirname);
log(`process.cwd()`, process.cwd());

C:\git>node tmp\app-root\index.js
__dirname C:\git\tmp\app-root
process.cwd() C:\git

• __dirname은 현재 실행하는 파일의 절대경로이다
• process.cwd()는 node명령을 호출한 작업디렉터리의 절대경로이다

app-root-path

1
2
3
4
5
6

const log = console.log;
const app_root_path = require('app-root-path').path;

log(`__dirname`, __dirname);
log(`process.cwd()`, process.cwd());
log(`app_root_path`, app_root_path);

• 프로젝트 루트를 찾아주는 패키지도 있다

참고

• Modules: CommonJS modules | Node.js Documentation
• app-root-path

1
2
3
4
5

node --inspect      app.js
node --inspect-brk  app.js

nodemon --inspect     app.js
nodemon --inspect-brk app.js

• node app을 크롬 개발자 도구로 디버깅 할 수 있다
• chrome://inspect/#devices

• --inspect-brk 옵션은 코드 시작전 멈추는 옵션이다

참고

• Debugging in 2017 with Node.js
• Node.js 8 inspector

1

npm unpublish {패키지명} -f

• 내 패지키 디렉터리로 가서 위 명령을 실행

• 처음에 브라우저로 npm에 접속한다음에 패키지 > 세팅 에 딜리트가 있는줄 알았는데,
• cli로 지워야 했다

주의사항

• unpublish하면 24시간 동안 동일한 이름의 패키지를 publish 할 수 없다

삭제 조건

• 72 시간 이내에 게시된 패키지
• 새로 생성 된 패키지의 경우 npm Public Registry의 다른 패키지가 패키지에 종속되지 않는 한 게시 후 처음 72 시간 이내에 언제든지 게시를 취소할 수 있습니다

• 72 시간 이상 전에 게시된 패키지
  • 다른 패키지의 종속성이 아니어야 한다
  • 지난주에 다운로드 횟수가 300 회 미만
  • 단일 소유자

참고

• Unpublishing packages from the registry
• npm Unpublish Policy

• 기존에 만들었었던 Nodejs Express WEB 프로젝트를 도커라이징 해보았다
• 얄팍한 코딩사전님의 가장 쉽게 배우는 도커를 보고 시도했다
• 도커가 이런거구나 하고 느낀 순간이였다.. 마치 신세계…
• 이번 도커라이징을 통해서 내 프로젝트를 도커가 설치되어있는 다른컴퓨터에서 매우 쉽게 돌려볼 수 있다는걸 알게되었다

기존 상태 설명

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.
├── node_modules/
├── web
│ ├── bin
│ │ └── www
│ ├── public/
│ ├── routes/
│ ├── utils/
│ ├── views/
│ └── app.js
├── .gitattributes
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── sqldump.sql

• 그냥 node express 서버와 db덤프 파일인 sqldump.sql 가 구분없이 한 디렉터리에 있었다

벡엔드와 데이터베이스로 분리하기

• backend, database 폴더를 만든다
• backend폴더로 sqldump.sql와 깃허브, 프리티어 세팅 등을 제외한 99.9999%의 소스파일들을 이동한다
• database폴더로 sqldump.sql을 이동

1
2
3

database
└── scripts
    └── sqldump.sql

• 이런식으로 node express 서버와 db를 분리할 수 있었다

Dockerfile 작성하기

backend

1
2
3
4
5
6
7
8

FROM node:12.18.3

WORKDIR /usr/src/app

COPY . .
RUN npm i

CMD ["npm", "start"]

• 내가 로컬에서 사용하는 환경을 토대로
• 내 앱에 맞는 노드버전을 가져와서
• /usr/src/app 라는 워크디렉터리에
• backend 아래있는 모든 파일들을 복사해오고
• RUN 명령어로 npm i로 종속성을 설치한다
• 그리고 CMD 명령으로 backend 서버를 실행시킨다

database

1
2
3
4
5
6
7
8

FROM mariadb:10.5

ENV MYSQL_USER mysql_user
ENV MYSQL_PASSWORD 1234
ENV MYSQL_ROOT_PASSWORD 1234
ENV MYSQL_DATABASE webtest

COPY ./scripts/ /docker-entrypoint-initdb.d/

• 내가 로컬에서 사용했던 마리아디비 버전 그대로 가져왔다
• 데이터베이스 관련 환경변수들을 정의해주고
• scripts 디렉터리에 있는 dump파일을 /docker-entrypoint-initdb.d/ 로 복사한다
• /docker-entrypoint-initdb.d/ 는 데이터베이스를 생성할 때,
• 하위 sql을 가지고 데이터베이스를 초기화해준다

후기

• 메모리 딸린다…
• 처음에는 좋아서 이것저것 다 도커라이징할려고 했는데,
• 하다보니까 메모리가 딸려서 마우스가 뚝뚝 끊겼다…

참고

• Nodejs Express WEB
• 가장 쉽게 배우는 도커

1

ts-node src/index.ts

• tsc를 통해 .js파일로 만들고, js파일을 실행하는 것이 아니라
• 바로 .ts 파일을 실행하는 것처럼 보여준다
• 따로 .js파일은 생성되지 않는다

ts-node 설치

1

npm install -g ts-node

참고

• TypeStrong/ts-node

• banner-maker/banner-maker를 클론코딩해보았다
• 내 두번째 리액트 프로젝트..!

데모

• Banner Maker (React)

기능

• 캔버스 크기 조절
• 실시간 캔버스 업데이트
• 폰트 사이즈 조절
• 폰트색 조절
• 캔버스색에 따른 폰트색 자동조절
• 캔버스색 조절
• 랜덤 캠버스색
• 이미지로 다운로드
• 클립보드로 카피
• 컬러 히스토리 기능
• 컬러 히스토리 임포트, 익스포트 기능

후기

• 타입스크립트 공부 겸 리액트도 같이 하자는 생각으로 리액트 타입스크립트를 시작했다
• velopert님의 리액트 프로젝트에서 타입스크립트 사용하기 글을 보고 따라하다가
• 튜토리얼을 통해 잘 만들어진 프로젝트 구조를 기반으로 만들었다
• 리액트가 아직 익숙하지 않은데 리액트의 훅이라던지 처음부터 고급??개념들을 사용하니까
• 사실 뭐가 좋은지, 이렇게 써서 좋은점이 무엇인지..
• 이 개념을 도입하기전의 것들을 시도해보지 않았기 때문에 막연한 감이 있었다
• 나는 공부할때 이론보단 무조건 실기이고, 일단 만들어보면서 익히고 이해하자라는 주의이다
• 그래서 이것저것 쉽게만들 수 있다고 생각한다. (나중에 보면 코드가 엄청 구릴지라도..)

• 이번에 만들면서 신경썼던 것은
• 사용성..?? 인 것같다

• 나는 보통 이미지를 ctrl c 카톡에다가 ctrl v 하여 톡방에 올리는데
• 그걸위한 copy clipboard 버튼을 만들었다. 저장후 이미지 올리기는 귀찮기 때문에..

• 또 랜덤 칼러 버튼을 만들어서 색을 쇼핑했다

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
/**
 * Get color (black/white) depending on bgColor so it would be clearly seen.
 * @param bgColor
 * @returns {string}
 */
function getColorByBgColor(bgColor) {
  if (!bgColor) {
    return '';
  }
  return parseInt(bgColor.replace('#', ''), 16) > 0xffffff / 2
    ? '#000'
    : '#fff';
}

• 사용해보면 알겠지만 랜덤으로 생성된 배경색에 따라 폰트색도 검정색/흰색 적절한게 선택된다

• 컬러 히스토리 기능이다
• copy 버튼이나 download 버튼을 누르면 해당 배경색과, 폰트색이 히스토리에 저장된다
• 만약에 같은 최근 히스토리에 저장된 색과 같은 색이면 저장하지 않도록 하였다. 버튼을 누를때마다 증식되지 않도록..
• export 버튼을 눌러 현재 저장된 컬러 히스토리를 json 파일로 내보내는 기능도있다
• 깃허브 페이지를 이용해 호스팅하기때문에, 내 앱은 정적이다
• 어떻게 히스토리를 저장하고 불러올까 생각하다가 json 파일로 내보내고 다시 불러오도록 만들게 되었다

개선방향

• 칼러픽커에서 알파값을 바꿀 수 있도록 하기
• 폰트 변경 기능
• textarea를 div안에 넣어버리기..? (html2canvas 사용해보기)
• json파일로부터 컬러히스토리 임포트할때 덮어쓰기가 아니라 병합으로 불러오기

1
2
3
4
5
6
7
8
9
10
11

export function copyToClipboard() {
  const canvas = document.querySelector(`#myCanvas`);
  if (!canvas) {
    return;
  }
  canvas.toBlob(function (blob) {
    // eslint-disable-next-line no-undef
    const item = new ClipboardItem({ 'image/png': blob });
    navigator.clipboard.write([item]);
  });
}

• 클립보드 복사 js 코드를 ts로 변환하지 못한 코드..

소스코드

• react-banner-maker

참고

• 리액트 타입스크립트 공부 ; 리액트 프로젝트에서 타입스크립트 사용하기

• 오버워치 강의 영상을 보다가 영상 속 키보드 마우스 뷰어? 를 가끔 보았었다
• 일단 깔끔한 키보드 뷰어로 흥미가 생겼었는데
• 찾아보니까 OBS input overlay라는 OBS 전용 플러그인이었다

• 일렉트론이라는 프레임워크를 사용하여
• html, css, js로 데스크탑 앱으로 만들어보았다

신경 쓴 것

글로벌 키 훅?

• 내가 만든 앱 밖에서 키가 눌리고 떼지는 걸 알아야 한다

1
2
3
4
5

const ioHook = require('iohook');

ioHook.on('keydown', (event) => {
  mainWindow.webContents.send('keydown', event.rawcode);
});

• iohook 패키지를 사용해서 해결하게 되었다
• 그런데 iohook이 최신 버전의 일렉트론에서 실행이 안되어서 일렉트론 8.x버전으로 낮추어 진행하게 되었다

overlay window

• 오버레이 화면에 마우스 클릭이 되지 않도록 했다
• 오버레이 화면이 프레임을 가지지 않도록 했다
• 오버레이 화면이 모니터 크기를 구하여 우측 하단에 생기도록 하였다 (여러 해상도 대응)

일렉트론

• 웹 기술로 데스크탑앱을 만들 수 있게해주는 마법이다
• 나는 요즘 js만 해왔기 때문에 일렉트론에 대해 찾아보았다
• 일렉트론으로 만들어진 대표적인 앱으로는 비주얼 스튜디오 코드가 있다

일렉트론 시작

• Create Desktop App + Installer with HTML/CSS/JS - Electron Tutorial 2020 유튜브를 보며 시작했다
• create-electron-app 를 통해 express-generator 처럼 빠르게 프로젝트를 시작할 수 있다. (보일러플레이트)
• electron-builder 를 통해 배포용 setup 파일을 생성할 수 있다
• 소스코드 ; https://github.com/chinsun9/electron-practice

일렉트론 단점?

• 엄청나게 간단한 앱일지라도 nodejs + Chromium 조합으로 용량이 상당히크다

소스코드

• Input Overlay (Electron)