방법 바로 보기

react typescirpt eslint prettier airbnb style guide 적용 방법은 여기로…
https://github.com/chinsun9/typescript-react-eslint-prettier-practice

TMI

상황

• 진짜 여러 튜토리얼을 따라해도 뭔가 잘 안됬다
• 차근차근 따라하기보다 세팅을 빨리 끝마치고 싶은 생각에 복붙을 시전했다
• 일단 뭔가 쫌 되야 이렇구나 생각할텐데 잘안되서 머리가 아팠다

문제 & 원인

vscode setting.json

• eslint없이 prettier 를 사용하면서 설정해둔 설정값
• format on save 이것때문에, 린트 이후에 prettier가 다시 코드를 포맷팅하는 문제

1
2
3
4
5
6

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

• 처음에는 이거를 둘다켜놨엇다
• 기존에 eslint에서 fix한거 formatOnSave가 다시 prettier 포맷터로 다시 포맷해서 생겼었다

.eslintrc.js

Parsing error: “parserOptions.project” has been set for @typescript-eslint/parser. The file does not match your project config: .eslintrc.js. The file must be included in at least one of the projects provided.

• 이유를 모르겠으나. .js 방식으로하면 위 오류가 떠서 안됬다
• 그래서 단순하게 .json방식으로 바꾸었다. 그랬더니 해결됬다…

알게된 것

• eslint-config-prettier 를 통해 별도 .prettierrc 파일없이
• eslintrc에서 prettier 설정이 가능하다

• reportWebVitals.ts 이런 자동생성된 파일은 린트를 적용시킬 필요가없다
• 파일 최상단에 /* eslint-disable */를 적어 무시해주자

• 빨간줄이 생기면 희소식이다. 빨간줄 조차 안생기면 eslintrc 파일에 문제가 생긴거다
• vscode도 재시작해보자

• “source.fixAll.eslint”: true 설정으로 eslint에서 포맷팅을 실행할 수 있다

• 쓸모없다고 생각하는 룰은 그냥 꺼버리자
• 마우스를 올려서 어떤 룰인지 확인하고 .eslintrc > rules 에 해당 룰을 적고 0으로 세팅한다

세팅법 - 여기까지 리액트 프로젝트

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

• readme.md에 설정하는 방법을 정리해두었다
• 커밋내역을 보면 명령어 입력 순서가 나와있으니 참고하면 좋을 것 같다

참고

• Create-React-App with TypeScript, ESLint, Prettier, and Github Actions | by Bryan Grill | Medium
• prettier/eslint-config-prettier

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

• icarus 테마를 적용하고 다 좋았지만,
• 커스텀하고 싶었던 것들이, 칼럼들의 비율과 가로 넓이가 너무 좁다는 것이였다
• 한번 커스텀해보자

themes 폴더에 icarus 테마깔기

• npm install hexo-theme-icarus ; npm으로 icarus 테마를 설치할 수 있는데,
• 이 방법으로 설치한 테마는 커스텀하여 사용하기에는 구조가 이상한 것 같아서(node_modules 안에서 icarus패키지를 수정..)
• 테마 설치는 /themes 디렉터리 아래에서 클론 방식으로 하는 것을 추천한다
• git clone --depth 1 https://github.com/ppoffice/hexo-theme-icarus.git
• 그냥 클론하게되면 커밋 내역까지 다 불러오느라 용량이 커진다
• --depth 1을 붙여 최신 상태만 받아 올 수 있다
• 필요없는 .git 폴더를 삭제해도된다

• 참고 ; git clone 커밋 히스토리없이 가볍게 클론하기

1

theme: icarus

• 위에서 설치한 테마 디렉터리명이랑 _config.yml 의 theme 항목의 값이랑 동일해야한다

themes
└── icarus

• 디렉터리 구조는 이렇다

칼럼 비율 조절하기

• 수정하기 용이하도록 themes/icarus 경로에서 vscode를 실행한다
• 지금부터 설명하는 파일의 경로는 themes/icarus 기준의 상대경로이다

1
2
3
4
5
6
7
8
9

function getColumnSizeClass(columnCount) {
  switch (columnCount) {
    case 2:
      return 'is-3-tablet is-3-desktop is-3-widescreen'; // 여기 수정
    case 3:
      return 'is-4-tablet is-4-desktop is-3-widescreen';
  }
  return '';
}

• layout/common/widgets.jsx 로 가보면 getColumnSizeClass라는 함수가 있다
• 여기에 자신의 columnCount 에 맞게 수정한다
• columnCount 의 기본값은 2라서 case 2인 경우를 수정한다
• 나는 is-3으로 수정했다

1
2
3
4
5
6
7
8
9
10
11

<div
  class={classname({
    column: true,
    'order-2': true,
    'column-main': true,
    'is-12': columnCount === 1,
    'is-9-tablet is-9-desktop is-9-widescreen': columnCount === 2, // 여기 수정
    'is-9-tablet is-9-desktop is-6-widescreen': columnCount === 3,
  })}
  dangerouslySetInnerHTML={{ __html: body }}
></div>

• layout/layout.jsx 하단을 보면 위 코드가 나오는데
• 나는 is-9로 수정해주었다

• 전체 12에서 기본값은 프로필이 들어있는 영역이 4, 게시글 영역이 8이였다
• 위처럼 수정하게되면 우선 그 비율을 3, 9로 변경해준 것이다
• 프로필 영역을 좁게, 게시글 영역은 크게 바뀐 것이다
• 이 12라는 것은 칼럼들의 상위에 있는 container의 크기를 기준으로 12등분한 것이다
• 그럼 이 container의 크기를 늘려보자

container 크기 늘리기

1
2
3
4
5

$gap ?= 16px
$tablet ?= 769px
$desktop ?= 1288px
$widescreen ?= 1480px
$fullhd ?= 1672px

• include/style/base.styl 로 가서 23라인 정도에 이런 코드가 보일 것이다
• 나는 $widescreen, $fullhd의 값을 각각 200px 씩 늘려주었다
• 그랬더니 container가 커졌다!

커스텀 css 적용하기

• 나는 보통 글을 쓸때, 그림을 먼저보고주고 그 아래에 그에 대한 설명을 하는 편이다
• 그래서 그림 위에있는 글이 아래 사진과 별로 관계가 없다는 것을 마진을 주어 표현하고 싶다
• 그런데 매번 그림이 나올 때 마다, <br>을 할 수도 없고…
• 그래서 아예 게시글 영역 안에 있는 이미지 태그에 대한 커스텀 css를 적용시킨다

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

&.article
    .article-meta, .article-tags
        color: $text-light

    .article-meta
        overflow-x: auto
        margin-bottom: .5rem

    .article-more
        @extend .button.is-light

    .content
        word-wrap: break-word
        font-size: $article-font-size

        img                     // 여기 추가
            margin-top: 30px    // 여기 추가

• .styl 에 대한 문법은 잘모르지만,
• 들여쓰기로 셀렉터들의 관계가 정의되어있고
• 내가 원하는 게시글 영역의 이미지 태그가 적용되려면
• .article .content 아래에 img 태그에 대한 css를 정의해주었다

배포, 적용시키기

• 이렇게 변경하고 나고 배포를해야는데 그냥 배포하면 적용이 안된다
• public/css/default.css 를 삭제해준다
• 그리고 배포를 하면, hexo에서 default 파일이 없어짐을 감지하고 새로 생성하게 되는데,
• 그때 변경 내역이 적용된다!

1
2
3
4
5
6
7
8
9
10

{
  // ...
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

• settings.json에 추가시켜준다
• 저장할 때마다 자동으로 포맷팅되는 것을 확인할 수 있다

일괄적으로 포맷팅하기

• prettier 없이 개발했다가 코드 포맷팅을 일괄적으로 하고싶을 때가 있다

1
2
3
4
5
6
7

{
  "singleQuote": true,
  "parser": "typescript",
  "semi": true,
  "printWidth": 120,
  "tabWidth": 2
}

• .prettierrc 파일을 생성한다

npx prettier -w **/*.tsx

• terminal에 위 명령을 치면
• prettier가 일회성으로 설치되면서 지정한 확장자에 대해 포맷팅을 일괄적으로 실행해준다
• .prettierrc prettier config file을 참고해서 실행되니
• 원하는 디렉터리만, 또는 무시할 디렉터리, 파일들을 설정해서 사용할 수 있다

참고

• Prettier Configuration File

• 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

참고

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

• 막 배운 리액트로 처음 만들어본 프로젝트이다
• 계산하기 귀찮아하는 나는 평소 네이버 퍼센트 계산기를 이용했었는데
• 이 계산기를 리액트를 사용해 클론코딩해보자..

데모

• Percentage Calculator (React)

후기

• 내가 너무 간단한 것을 만들어서 그런지 모르겠지만
• 리액트를 처음 써본 내 기준으로 너무 복잡하다고 느껴졌다
• 기존에 html, css, js로 만들때 보다 시간이 배로 걸렸다
• 나중에 훨씬 복잡한 것을 만들게 되었을 때 리액트가 좋다고한다
• 이미 잘 만들어진 리액트 튜토리얼을 따라만들고, 수정하는 방식으로 만들었다
• 사용한 개념에 대해 완전히 이해하고 익숙해지는데 시간이 필요할 것 같다

소스코드

• react-percentage-calculator
• README.md에 리액트로 만든 화면을 깃허브 페이지로 보여주는 방법 등 메모해놨다