개요

---

✅Keupang Github

E-Commerce

---

E-Commerce 프로젝트를 선택하게 된 이유는 내가 적용하고 싶은 기술을 적용할 수 있는 주제이기 때문이다.

앞으로 내가 다룰 기술들을 하나하나 포스팅할 생각이고, 이에 대한 이슈가 되는 부분 그리고 해결까지 업로드를 할 것이다.

개발과정에서 어떤 도전과 성장이 있었는지 기록하며 공유할 생각이다.

기술 소개

---

사용할 기술과 그 기술을 사용하려한 이유

사용할 기술과 선택 이유

---

• React
  여러 프로젝트에 사용하며 이미 익숙해진 라이브러리라 제일 먼저 생각이 났다. 컴포넌트 기반 개발로 생산성을 높이고, SPA(Single Page Application)으로 어떠한 상품에 들어갔다 나왔다 하는 페이지의 변화가 많이 일어나는 E-Commerce 프로젝트에 적합하다고 판단하였다.

• Vite
  빠른 개발 서버와 HMR(Hot Module Reloading)기능을 제공하여 개발 속도를 향상시킨다. 그리고, 추후에 Github Actions를 이용한 자동화 CI/CD를 구성할 계획인데, Rollup을 사용한 최적화된 번들링은 이에 적합하다고 판단하였다.
  

• TypeScript
  타입 안정성을 제공해 코드 작성시 오류를 사전에 방지할 수 있다. 이는 여러 기능들이 맞물리게 될 E-Commerce 프로젝트에 적합하다고 판단하였다.

• Vitest
  Vite와 자연스럽게 통합되어 빠르게 테스트코드를 작성할 수 있다. 여러 비즈니스 로직이 포함될 프로젝트에 테스트코드는 필수라고 생각하였으며, 현재 사용할 기술과 맞물려 좋은 시너지를 낼 수 있다. 이미 Vitest를 사용해보아 익숙하게 사용할 수 있다고 판단하였다.
  

• Emotion
  스타일링을 위한 라이브러리는 Emotion을 선택했다. 우선 CSS-in-TS 방식의 스타일링을 선택한 이유는 컴포넌트에 필요한 스타일을 지정하여, 다른 곳에 영향을 미치지 않는다. 기존에 하던 방식인 CSS파일을 밖으로 빼는 방식을 사용하면 className이 겹치는 경우 스타일이 겹치는 문제가 발생할 수 있고, .module.css 방식을 사용하는 것 또한 유지보수를 하는 과정에서 두 파일을 열어놓아야 하는 점, 동적 스타일링을 하는 경우에서 코드의 복잡성 등 다양한 오점이 있다.

  CSS-in-TS 라이브러리는 대표적으로 styled-components가 있다. 이는 기존에 많이 사용하던 라이브러리인 만큼 커뮤니티가 크다는 장점이 있다. 하지만, Emotion에 비하면 장점이 이뿐이라고 생각한다. Emotion은 styled-components에 비해 성능이 뛰어나다. 이는 런타임 시점이 아닌 컴파일 시점에서 많은 스타일을 생성하는 등 다양한 최적화 작업이 진행되어있다.

  또 다른 장점은 css함수로 스타일을 정의하거나, 기존에 사용하던 styled API를 이용하여 스타일을 정의할 수 있다. 즉, styled-components보다 더 유연하게 사용이 가능하다.

  크게 위와 같은 두 장점을 고려하여 Emotion을 사용하는 것이 더 좋다고 판단하였다.

 

Vite를 사용한 React.ts 시작하기

---

Vite를 이용하여 React.ts 시작해보기.

Package Manager는 yarn을 채택하였다.

프로젝트 생성 및 초기화

---

yarn create vite [프로젝트 명] --template react-ts

프로젝트를 생성한다.

Vite와 함께 React.ts 템플릿으로 프로젝트를 빠르게 생성한다.

여기선 의존성 패키지가 설치되지 않았다.

현 프로젝트에선 프로젝트 명을 keupang이라 하였다.

cd keupang

yarn

폴더를 이동한 후, yarn명령어를 통해 package.json에 명시된 의존성과 개발 의존성 파일을 설치한다.

이로 인해 프로젝트에서 사용할 라이브러리가 준비상태가 되어 사용할 수 있게 된다.

"scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

스크립트를 보면 dev를 사용하면 vite로 실행된다는 설정을 볼 수 있다.

즉, 뭘 사용해도 상관없다.

yarn dev
yarn vite

이제 우리의 프로젝트가 로컬에 열렸다. localhost:5173에서 확인해보자.

 

포트 설정

---

5173이 기본 포트로 열리게 되었는데, 익숙하지 않다면 위에 소개한 스크립트의 "vite" 부분을 수정하여 포트를 변경해줄 수 있다.

"scripts": {
    "dev": "vite --host 0.0.0.0 --port 3000",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

나는 익숙하기 때문에 포트를 변경하지 않고 그대로 사용할 예정이다.

Vitest 설치

yarn add -D vitest

vitest를 설치하는데, -D 옵션으로 개발 의존성에 추가하겠다는 의미이다. (devDependencies)

yarn list --pattern vitest

위 명령어로 vitest가 잘 설치 되었는지 확인해보자 !

 

예시 테스트 작성

yarn test

위 스크립트를 package.json에 추가하고, 잘 작동하는지 실험하고 싶었다.

src/example.test.ts 파일을 생성하여 테스트가 잘 작동하는지 해보았다.

import { describe, it, expect } from 'vitest';

describe('예시 테스트 > ', () => {
    it('바로 통과', () => {
        expect(true).toBe(true);
    });
});

기분 좋은 초록색 창을 확인할 수 있었다.

 

Emotion 설치하기

---

yarn add @emotion/react @emotion/styled

Emotion은 두 가지의 패키지로 구성되어있다.
@emotion/react는 Emotion의 핵심 패키지이다. css함수와 테마 기능을 제공한다.

@emotion/styled는 styled API를 제공하여, styled-components와 유사한 스타일을 작성할 수 있다.

초기 세팅하기

---

ESLint, Prettier의 초기세팅을 진행한다.

ESLint, Prettier

---

ESLint는 코드의 문법적 오류, 잠재적인 오류를 잡아준다.

미사용 변수, 정의 되지 않은 변수 사용, 함수의 매개변수 불일치 등의 문제를 제어해준다.

Prettier는 코드 포매팅에 집중한다.

즉, 코드가 어떻게 보이는지를 신경쓴다.

들여쓰기, 따옴표 사용 등을 제어해준다.

프로젝트를 살펴보니 Vite 기본 템플릿에 eslint.config.js가 포함되어있다.

그래서, prettier만 설치해주는데 eslint가 prettier와 충돌하는걸 대비하여 Prettier가 우선적으로 적용되도록 설치한다.

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

• eslint-config-prettier: Prettier와 충돌할 수 있는 ESLint 규칙을 비활성화하여 스타일링과 관련된 설정을 Prettier가 우선하도록 설정하는 것.
• eslint-plugin-prettier: Prettier 규칙을 ESLint의 규칙으로 추가하여, ESLint가 포매팅 문제를 감지하도록 하는 것.

이를 통해 설치를 완료했고, 각 설정파일은 다음과 같이 진행했다.

//.prettierrc.json
{
	"semi": true,
	"singleQuote": true,
	"jsxSingleQuote": true,
	"tabWidth": 2,
	"useTabs": true,
	"trailingComma": "es5",
	"bracketSpacing": true,
	"bracketSameLine": true,
	"arrowParens": "always",
	"quoteProps": "as-needed"
}

//eslint.config.js
import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import * as tseslint from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';

export default [
	{
		ignores: ['dist'],
	},
	{
		files: ['**/*.{ts,tsx}'],
		languageOptions: {
			parser: tsParser,
			ecmaVersion: 2020,
			globals: globals.browser,
		},
		plugins: {
			'react-hooks': reactHooks,
			'react-refresh': reactRefresh,
			'@typescript-eslint': tseslint,
		},
		rules: {
			...reactHooks.configs.recommended.rules,
			'react-refresh/only-export-components': [
				'warn',
				{ allowConstantExport: true },
			],
		},
	},
];

 

Summary

---

• E-Commerce를 선택한 이유
• 채택한 기술과 그 이유
• Vite를 사용한 React.ts 시작하기
• Vitest 설치하기
• Emotion 설치하기
• ESLint, Prettier 설정하기