React 학습 [아토믹 디자인, 환경설정] - 01/23

환경설정

1. eslint (eslintrc.cjs)

npm init @eslint/config // eslint의 설정 파일을 초기화하고 구성하기 위한 명령어

• 'eslint/config' 스코프를 붙여 구성 마법사를 실행하는데, 이때, 여러 가지 질문을 통해 최적의 eslint 설정을 구성합니다.
• 프로젝트의 환경과 사용하고 있는 프레임워크, 코드 스타일 가이드, 자바스크립트 버전, 모듈 시스템 등을 설정 생성한다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true, // 사용 하고 있는 번들러인 vite가 node 환경에서 실행되기 때문에
  },
  extends: [
    'eslint:recommended', 
    'plugin:react/recommended',
    'plugin:react/jsx-runtime' // import React from 'react'을 작성하지 않아도 react 사용 가능 
  ],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    // "react/jsx-uses-react": "off",
    // "react/react-in-jsx-scope": "off"
  },
};

2. prettier (prettierrc.cjs)

• 야무선생님께서 사용하시는 설정을 가져와 사용했다.
• 내가 설정한 prettier를 가져오기 편하게 snippet으로 저장해 두기

module.exports = {
  // 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a)
  arrowParens: 'always',
  // 닫는 괄호(>) 위치 설정
  // ex: <div
  //       id="unique-id"
  //       class="contaienr"
  //     >
  htmlWhitespaceSensitivity: 'css',
  bracketSameLine: false,
  // 객체 표기 괄호 사이 공백 추가 여부 (ex: { foo: bar })
  bracketSpacing: true,
  // 행폭 설정 (줄 길이가 설정 값보다 길어지면 자동 개행)
  printWidth: 80,
  // 산문 래핑 설정
  proseWrap: 'preserve',
  // 객체 속성 key 값에 인용 부호 사용 여부 (ex: { 'key': 'xkieo-xxxx' })
  quoteProps: 'as-needed',
  // 세미콜론(;) 사용 여부
  semi: true,
  // 싱글 인용 부호(') 사용 여부
  singleQuote: true,
  // 탭 너비 설정
  tabWidth: 2,
  // 객체 마지막 속성 선언 뒷 부분에 콤마 추가 여부
  trailingComma: 'es5',
  // 탭 사용 여부
  useTabs: false,
};

3. vite (vite.config.js)

pnpm add @vitejs/plugin-react -D // Vite를 사용하는 React 기반 프로젝트에 필요한 공식 플러그인

/* vite.config.js */
import { defineConfig } from "vite";
import reactPlugin from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [reactPlugin()],
})

• Vite가 React 코드를 제대로 처리하고, 개발 서버를 실행 또는 빌드 생성 할 때 React와 관련된 최적화를 적용한다.

추가적으로, vite.config.js 에서 설정한 위 코드의 문법은 commonJS를 지원하지 않기 때문에 package.json에서 기본 문법 환경을 ESM(ECMAScript Modulses)로 바꿔줘야 합니다. ( "type" : "modules"; )
package.json을 바꾸면, 프로젝트의 환경의 기본 문법이 commonJS에서 ESM으로 됐기 때문에, eslint와 prettier의 설정 파일의 확장자를 cjs로 바꿔야 합니다.

---

아토믹 디자인

아토믹 디자인(Atomic Design)은 웹 인터페이스를 구축하기 위한 디자인 시스템으로 화학에 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)의 개념을 차용한 방법론입니다.

1. 원자(Atoms) : UI의 가장 기본적인 빌딩 블록 (ex. label, input, button)입니다. 재사용 가능하며, 이 자체로는 많은 의미를 가지진 않지만 결합될 때 유용합니다.
2. 분자(Molecules) : 원자들이 결합하여 더 복잡한 기능을 수행하든 단위입니다. 예를 들어 label, input, button 원자들을 결합해 form을 만듭니다.
3. 유기체(Orgamisms) : 분자들이 더 큰 부분의 인터페이스를 형성하도록 결합한 것입니다. 예를 들어 header, footer 등이 있습니다. 유기체는 하나의 독립된 section으로써, 여러 원자와 분자들로 구성되어 있습니다.
4. 템플릿(Templates) : 앞서 설명한 원자, 분자, 유기체들을 결합해 한 페이지의 레이아웃을 구성하는 단계입니다. 실제 콘텐츠보단 구조와 배치에 초점을 맞춥니다.
5. 페이지(Pages) : 템플릿에 콘텐츠를 채워넣어 사용자에게 보이는 인터페이스를 완성하는 단계입니다. 이 단계에선 디자인이 실제 콘텐츠와 어떻게 작동하는지 검토, 수정을 합니다.

React에서 아토믹 디자인을 적용하면 컴포넌트 기반 개발의 이점을 극대화할 수 있습니다.

컴포넌트는 재사용 가능하고 여러 조합이 가능하기 때문에, 아토믹 디자인의 단계들을 리액트 프로젝트에 적용해 컴포넌트를 표현하기 아주 적합한 것 같습니다.