스윗미 초기 세팅

React

리액트 프로젝트 초기 설정: vite vs cra

이번 자율프로젝트를 리액트로 하면서 기존처럼 cra를 사용할지 vite를 사용할지 고민하게 되었다. cra와 vite를 알아보자! 리액트 프로젝트를 시작할 때 필요한 개발 환경을 세팅 해주는 도구 아마 리액트를 처음 배우게 되면서 create-react-app을 다들 알게 됐을 것이다. CRA의 장점으로는 쉽다는 것! npx create-react-app [app 이름] 명령어 하나로 모든 설치가 완료된다.

https://velog.io/@haeinah/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%B4%88%EA%B8%B0-%EC%84%A4%EC%A0%95-vite-vs-cracreate-react-app

• cra는 모듈 번들러로 webpack 사용 → 느림

• vite는 esbuild를 기반 → 100배 빠름

• 시작: yarn create vite swithme —template react
Vite
Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.)은 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다. vite는 기본적으로 최적화 된 설정을 제공하지만, Plugin API 또는 JavaScript API 를 이용할 수 있습니다. (물론 TypeScript 역시 지원하구요.)
https://vitejs-kr.github.io/guide/

• yarn으로 패키지들 설치: yarn

• yarn으로 실행: yarn dev

절대 경로 설정

vite 절대경로 설정하는 법

Vite를 사용할 때 '@/components/Helloworld.vue' 이런 식으로 경로를 설정하고 싶을때 사용하는 방법입니다. javascript는 vite.config.ts만 설정해줘서 손쉽게 가능합니다. 이 방법은 vite를 사용하는 react, vue, svelte 등 모든 프레임워크에서 사용가능합니다. Javascript vite.config.js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src') } } }) Typ..

https://l4279625.tistory.com/entry/vite-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-%EB%B2%95

• vite.config.js 파일의 defineConfig에 아래 코드 추가

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import * as path from "path"; // path import

export default defineConfig({
  plugins: [react()],
	// resolve 추가
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Emotion

Install

There are lots of ways to use Emotion, if you're using React, the easiest way to get started is to use the @emotion/react package. If you're not using React, you should use the @emotion/css package.

https://emotion.sh/docs/install

• yarn add @emotion/react @emotion/styled

• 앱을 cra로 만들지 않았으므로 CRACO(Create-React-App Configuration Override: CRA에 config 설정을 덮어쓰기 위한 패키지)를 설치하거나 할 필요가 없음
[Craco] Craco 란?
이전에 CRA(Create-React-App)로 React 프로젝트를 생성할 땐 Webpack의 커스텀 필요성을 잘 느끼지 못했다. 하지만, 이번에 Boiler Plate를 제작하면서 추가적으로 설정할 부분들이 생겼다. (절대경로 alias 컴파일, Less Loader) CRA에서는 설정파일이 숨겨져 있고, 이를 추출해서 각 config, babel 등 설정을 적용해야 하는 번거로움이 있기 때문이다. 그렇기에, React에서는 이러한 번거로움과 위험성을 없앨 수 있는 다양한 커스터마이징 패키지들이 존재한다.

https://abangpa1ace.tistory.com/220

 

StoryBook

Prettier / Eslint

• eslint vscode 확장 프로그램 설치

ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자.

ESLint, Prettier 관련해서 환경 세팅을 하면 항상 어쩔 땐 잘되고, 어쩔 땐 안되고... 구글링하면 그렇게 많이 나오는 방식들을 전부 해봐도 계속 안돼서 시간을 그렇게 버릴 때가 많았던 것 같다. 그냥 생각없이 Prettier extension 설치해라, eslintrc 이렇게 세팅해라, 등등.. 따라 하니까 꼬이기도 하고, 저장을 시도하면 자동 수정은 안되고..

https://helloinyong.tistory.com/325

• eslint-plugin-prettier: prettier 의 설정 중 eslint 의 설정과 충돌이 나는 설정들을 비활성화하는 플러그인
• 추천되지 않음?
eslint를 사용할 때 prettier의 설정(.prettierrc file 사용 방법)
개요 eslint와 prettier 설정으로 검색하기 싫어서 정리해두자. Prettier를 적용하는 방법 Prettier를 프로젝트에 적용하는 방법은 세가지가 있습니다. .prettierrc 설정 파일 사용(자주 사용된다고 한다.) `를 다음 줄로 내릴지 여부 "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부 "printWidth": 80, // 줄 바꿈 할 폭 길이 "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2) "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식 "semi": true, // 세미콜론 사용 여부 "singleQuote": true, // single 쿼테이션 ..

https://heewon26.tistory.com/262

• eslint-config-prettier: prettier의 규칙을 eslint에 적용시킬 수 있게 하는 플러그인

• .eslintrc.json

{
  "env": {
    "browser": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "extends": ["react-app", "eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended", "prettier"],
  "rules": {
    "linebreak-style": 0,
    "object-curly-newline": 0,
    "no-unused-vars": "warn",
    "no-use-before-define": 1,
    "indent": ["error", 2],
    "react/react-in-jsx-scope": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".jsx"] }],
    "import/prefer-default-export": "off",
    "jsx-quotes": ["error", "prefer-single"],
    "no-console": 0,
    "no-alert": 0,
    "react/jsx-props-no-spreading": 0,
    "react/prop-types": 0
  }
}

"linebreak-style": 0,
"object-curly-newline": 0,
"no-unused-vars": "warn",
"no-use-before-define": 1,
"indent": ["error", 4],
"react/jsx-indent": [2, 4, { "checkAttributes": true, "indentLogicalExpressions": true }],
"react/jsx-indent-props": [2, 4],
"react/react-in-jsx-scope": "off",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"import/prefer-default-export": "off",
"jsx-quotes": [2, "prefer-single"],
"no-console": 0,
"no-alert": 0,
"jsx-a11y/no-noninteractive-element-interactions": [
	"error",
		{
			"handlers": [
				"onClick",
				"onMouseDown",
				"onMouseUp",
				"onKeyPress",
				"onKeyDown",
				"onKeyUp"
			]
		}
],
"react/jsx-props-no-spreading": 0,
"react/prop-types": 0

• .prettierrc

{
  "singleQuote": true, // single 쿼테이션 사용 여부
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "semi": true, // 세미콜론 사용 여부
  "useTabs": false, // 탭 사용 여부
  "tabWidth": 2, // 탭 너비 
  "printWidth": 120, //  줄 바꿈 할 폭 길이
  "arrowParens": "always", // 화살표 함수 괄호 사용 방식
	"bracketSameLine": true // 객체 리터럴에서 괄호에 공백 삽입 여부 
}

글로벌 스타일, 폰트

import { Global, css } from '@emotion/react';
import emotionReset from 'emotion-reset';

const style = css`
  ${emotionReset}

  html {
    font-size: 62.5%;
  }

  html, body {
    width: 100%;
    height: 100%;
  }

  * {
    box-sizing: border-box;
  }

  body,
  button,
  input {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto,
      'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji',
      'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  }

  select,
  input,
  button,
  textarea {
    border: 0;
    outline: 0;
  }

  a {
    text-decoration: none;
  }

  button {
    cursor: pointer;
    background-color: transparent;
  }
`;

const GlobalStyle = () => {
  return <Global styles={style} />;
};

export default GlobalStyle;

<link
	rel="stylesheet"
	as="style"
	crossorigin
	href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-dynamic-subset.css" />

📦src
 ┣ 📂assets
 ┣ 📂components
 ┃ ┣ 📂base
 ┃ ┣ 📂domain
 ┃ ┣ 📂templat
 ┣ 📂contex
 ┣ 📂hooks
 ┣ 📂page
 ┣ 📂stories
 ┃ ┣ 📂components
 ┃ ┣ 📂hooks
 ┣ 📂styles
 ┃ ┗ 📜globalStyle.jsx
 ┣ 📂utils
 ┃ ┗ 📜api.js
 ┣ 📜App.jsx
 ┗ 📜main.jsx

• base: input같은 기본적인 컴포넌트

• domain: postItem, postdetail과 같이 좀 더 디테일한 부분

• template: 항상 있어야 하는 부분(ex. 헤더)

import Menu from '@components/domain/Menu';

const DefaultTemplate = ({ children }) => {
  return (
    <div>
      <Menu />
      <main>{children}</main>
    </div>
  );
};

export default DefaultTemplate;

• 이슈 템플릿 (Settings에서 설정 가능)

// 기능 템플릿
## Description

## Progress
- [ ] To do
- [ ] To do
- [ ] To do

// 버그 픽스 템플릿
## Reproduce
> 버그가 어디에서 어떻게 발생했는지 작성

## Screenshot

## Environment
> 어떤 환경(OS), 브라우저

• 깃허브 템플릿

## ⛓ 관련 이슈
- close #issue_number

## 📝 작업 내용
- [ ] 구현한 기능
- [ ] 스타일링 등

## 📍 PR Point
- 리뷰어가 알아야 하는 부분
- 우려되는 부분
- 궁금한 점

## 📷 스크린샷

API_END_POINT=http://kdt.frontend.3rd.programmers.co.kr
PORT=5004

Vite

Vite는 import.meta.env 객체를 이용해 환경 변수에 접근할 수 있도록 하고 있으며, 아래와 같은 환경 변수에 접근이 가능합니다. 프로덕션에서는 환경 변수가 모두 정적으로 교체됩니다. 따라서 항상 환경 변수는 정적으로 참조해야만 하며, import.meta.env[key] 와 같은 동적 참조는 작동하지 않습니다. JavaScript 문자열 및 Vue 템플릿에서도 마찬가지로 환경 변수는 모두 정적으로 교체됩니다.

https://vitejs-kr.github.io/guide/env-and-mode.html#env-variables

Vite

명령 줄에서 vite를 실행시킬 때, Vite는 자동으로 프로젝트 루트의 vite.config.js 파일 확인을 시도합니다. 가장 기본적인 설정 파일의 내용은 다음과 같습니다: 참고로 Vite는 프로젝트가 네이티브 Node ESM을 사용하지 않는 경우에도 설정 파일에서 ES 모듈 구문을 사용할 수 있도록 지원하고 있습니다(예: package.json의 type: "module"). 이 때 설정 파일은 사용되기 전에 자동으로 미리 처리됩니다.

https://vitejs-kr.github.io/config/

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import * as path from 'path';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      __APP_ENV__: env.APP_ENV,
    },
    plugins: [react()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
  };
});