2023.05.09 TIL

토깽이연구소 수석연구원·2023년 5월 9일
CSSgit기타
0

TIL

목록 보기
25/37
post-thumbnail

오늘의 나는 무엇을 잘했을까?

자바스크립트 프로토타입을 북스터디를 통해 더 잘 이해할 수 있었다. 확실히 함께 공부하니까 더 쉽게 이해되는 것 같다. 물론 프로토타입에 대해 깊게까지 전부 설명하지는 못하지만 어떤 구조로 만들어져 있는지까지는 확실히 알게 되었다.

오늘의 나는 무엇을 배웠을까?

git branch 이름

git branch는 feat 브랜치와 feat/refactor 브랜치가 공존할 수 없다. 브랜치는 계층 구조가 아니기 때문에 그렇다. feat 브랜치가 있는 상태에서 feat/refactor브랜치를 만드려고 하면 다음과 같은 에러가 난다.

따라서 git 브랜칭 전략에 따라 feat브랜치에서 분기하여 작업하는 경우엔 feat/login 같은 이름을 쓸 수 없다.

현업에서는 feat이라는 이름의 브랜치가 따로 있는것이 아니고, develop 브랜치에 feat/login, feat/logout 같은 브랜치들을 merge하는 방식이다.

Scss

Scss는 최근 많이 사용하는 Css preprocessor중 하나다. 기존 css에는 잘 사용하지 않는 변수나 함수와 유사한 문법들을 사용할 수 있어 편하다.

사용법

$ npm install sass

# or

$ yarn add sass

자세한 가이드는 공식 문서에서 익힐 수 있다.

  • mixin 사용 (함수와 유사한 문법)

    @mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}

.alert {
  @include theme($theme: DarkRed);
}

  • nesting 사용

    nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Tailwind CSS

Utility-first 라는 디자인 방법론으로 디자인을 적용하는 라이브러리중 가장 널리 쓰이는 라이브러리이다.

Utility-first에서는 각 CSS 속성을 CSS 클래스로 만든다. CSS 속성을 작성하는 게 아니라 미리 잘 정의된 클래스들을 가지고 조합해서 디자인을 적용하는 방법론이다. 

 <div class="flex justify-end">
   <button class="bg-secondary px-16 py-8">취소</button>
   <button class="bg-primary px-16 py-8">비우기</button>
 </div>

사용법(CRA기준)

  1. 설치

    npm install -D tailwindcss

    npx tailwindcss init

  2. configure

     // tailwind.config.js 파일
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     "./src/**/*.{js,jsx,ts,tsx}", // 내가 사용할 템플릿 파일 path들 추가
   ],
   theme: {
     extend: {},
   },
   plugins: [],
 }

  3. tailwind 디렉티브 index.css에 추가

     // index.css
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

  4. 사용하기

     export default function App() {
   return (
     <h1 className="text-3xl font-bold underline">
       Hello world!
     </h1>
   )
 }

포매터와 린터

  • 코딩 컨벤션

    코딩 컨벤션에 대한 좋은 정리글이 있어 가져왔다.

  • 코딩 컨벤션을 일일히 신경쓰기는 어렵다

    물론 기본적인 컨벤션은 지키는 것 자체가 어렵진 않지만, 실수가 있을 수도 있고 상황별 컨벤션도 디테일하게 많아서 이것을 다 신경쓰면서 개발하기는 어려운 일이다. 그래서 자동으로 컨벤션에 맞게 포매팅해주는 개발 도구가 있는데, 바로 포매터와 린터이다.

    • 포매터: 코드 스타일을 검사, 수정해줌(포매팅)
    • 린터: 코드의 구조를 검사해서 잘못 작성된 코드가 없는지 확인(Static Analysis)

  • 포매터 린터 자동화 도구들

    • Husky: 포매터와 린터를 일일히 실행하는 것도 실수와 누락이 있을 수 있어, 이런 실행을 자동화해주는 패키지이다. Git에서 제공하는 Git Hooks 기능을 쉽게 사용할 수 있게 도와주는 패키지라서, 꼭 husky가 아니더라고 Git의 기능으로 자동화를 할 수도 있다.
    • GitHub Action: 로컬이 아닌 원격 저장소에서도 자동화 스크립트를 실행할 수 있게 해주는 툴이다. 린터를 실행하거나 빌드를 하는 일도 깃허브에서 Github Action으로 자동화할 수 있다.

  • editor config

     vscode에서 settings.json으로 tab이나 space의 칸 수를 설정해본 일이 있을 것이다. 이렇게 하면 컨벤션을 잘 지킬 수 있지만, 모든 사람이 vscode를 쓰는것이 아니고 다른 에디터를 사용하는 경우도 있다. 이럴 때 .editorconfig 파일이라는 것이 도움을 준다. 이 파일을 최상위 디렉토리에 위치시켜놓으면 기본적인 에디터 설정을 할 수 있다. 
  
 ```jsx
  // .editorconfig
  root = true
  
  [*]
  indent_style = space          # 들여쓰기에 스페이스 사용
  indent_size = 2               # 들여쓰기 크기는 스페이스 2개로 쓰기
  charset = utf-8               # 파일 인코딩은 utf-8
  insert_final_newline = true   # 파일 맨 마지막에 빈 줄 추가하기
 ```

    Prettier(formatter)

    대표적으로 많이 사용하는 포매터 라이브러리이다. 나의 경우 vscode extension으로 받아서 잘 사용하고 있따. 코드를 작성한 후 저장을 누를 때 자동으로 코드가 포매팅된다.

    더 잘 사용하는 방법은 포매팅 룰을 커스텀하여 prettier에게 알려주는 방법이다. 다음과 같은 형식의 .prettierrc.json이라는 파일을 만들어 둔다. 

       // .prettierrc.json
   {
     "trailingComma": "es5",
     "tabWidth": 2,  //들여쓰기는 2칸
     "semi": false,  // 세미콜론은 쓰지 않기
     "singleQuote": true // 홑따옴표만 쓰기
   }

    prettier 패키지를 직접 실행할 수도 있지만, npm을 통해서 다음과 같이 스크립트에 등록할 수 있다.

    —write 옵션은 파일을 덮어써서 수정하겠다는 의미이다. 또한 src/*/.js는 src디레토리 아래에 있는 모든 js파일을 포맷팅 대상으로 하겠다는 의미이다. 

       // package.json
   {
     "name": "formatter-and-lint",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
       ***"prettier": "prettier --write src/**/*.js"***
     },
     "author": "",
     "license": "ISC",
     "devDependencies": {
       "prettier": "^2.8.8"
     }
   }

    더욱 자세한 사용법은 여기를 참고하면 좋을 것 같다.

    ESLint

    React에서 사용하기

    1. 설치

      npm init @eslint/config

    2. 프롬프트

      Need to install the following packages:
@eslint/create-config@0.4.3
Ok to proceed? (y)
      ? How would you like to use ESLint? …
❯ To check syntax and find problems
To check syntax, find problems, and enforce code style
To check syntax only
      ? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

    3. npm 스크립트 추가

      {
  ...
  "script": {
    "lint": "eslint src/**/*.js", // src폴더 아래 있는 모든 js파일에 eslint실행
    ...
  }
}

    4. .eslintrc.js 파일 원하는대로 수정(디폴트 사용도 가능)

      // .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {},
}

      자주 쓰이는 설정들

      1. 리액트17 이상 버전에서 매번 import React from 'react' 하지 않아도 되는데, import 안했다고 린트가 불평하지 않게 하는 설정

        module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    ***'plugin:react/jsx-runtime',***
  ],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {},
};

      2. airbnb에서 사용하는 코딩 컨벤션을 eslintrc파일로 만든 패키지 설치 후 extends에 추가

        module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    ***'airbnb',
    'airbnb/hooks',***
  ],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {},
};

        팁

      3. Prettier와 ESLint 충돌 없애기: 추가 패키지 설치

        npm install --save-dev eslint-config-prettier

        module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'airbnb',
    'airbnb/hooks',
    ***'prettier',***
  ],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {},

      4. 타입스크립트와 eslint 함께 사용하기

        최신 버전에서는 ESLint 안에서 타입스크립트를 지원한다. 마찬가지로 공식 홈페이지의 설명을 참고해 TypeScript와 관련된 패키지들을 설치하고, .eslintrc 를 수정하면 된다.

        다음은 참고하면 좋은 자료이다.

        JS코드를 깔끔하게 해주는 ESLint 알아보기! (적용방법과 상세 옵션)

오늘의 나는 어떤 어려움이 있었을까?

Git flow 전략에 대해 공부하고 실전에 적용해보려다가 많은 시행착오를 겪었다. 깃허브 컨벤션을 작성하는데 시간이 오래걸렸고, 깃 브랜치 이름에 대한 잘못된 오개념을 가지고 있었어서 이미 작성한 글을 수정하는데도 애를 먹었다.

내일의 나는 무엇을 해야할까?

  • 남은 강의 마저 듣기
  • 기술블로그 글 쓰기
  • 투두리스트 1커밋하기
profile
토깽이연구소 수석연구원
Let's get after it
이전 포스트

2023.05.08 TIL

다음 포스트

2023.05.10 TIL

0개의 댓글