React - 린캔버스 만들기

김명원·2024년 12월 30일

learnReact

목록 보기

10/26

린캔버스란?

린캔버스(Lean Canvas)는 스타트업과 같은 신생 기업이 비즈니스 모델을 빠르게 정리하고 검증할 수 있도록 도와주는 비즈니스 모델 프레임워크입니다.

📋 린캔버스 구성 요소

1️⃣ 문제(Problem)
고객이 겪는 주요 문제들을 명확하게 정의합니다.

2️⃣ 고객 세그먼트(Customer Segments)
타겟 고객층을 구체적으로 식별합니다.

3️⃣ 독특한 가치 제안(Unique Value Proposition)
고객에게 제공할 핵심 가치를 정의합니다.

4️⃣ 해결책(Solution)
문제를 해결할 수 있는 구체적인 솔루션을 제시합니다.

5️⃣ 채널(Channels)
고객에게 도달할 수 있는 경로를 설정합니다.

6️⃣ 수익 모델(Revenue Streams)
수익을 창출하는 방식을 정의합니다.

7️⃣ 비용 구조(Cost Structure)
주요 비용 항목을 파악합니다.

8️⃣ 핵심 지표(Key Metrics)
성공을 측정할 수 있는 지표를 설정합니다.

9️⃣ 불공정한 경쟁우위(Unfair Advantage)
경쟁자가 쉽게 모방할 수 없는 경쟁 우위를 정의합니다.

🛠️ 프로젝트 생성

Vite 프로젝트 생성

Vite 설치 및 실행
```
npm create vite@latest
```

옵션 설정

√ Project name: ... lean-canvas-react
√ Select a framework: » React
√ Select a variant: » JavaScript + SWC

의존성 설치 및 실행

cd lean-canvas-react
npm install
npm run dev

SWC(Speedy Web Compiler)
Rust로 작성된 자바스크립트 및 타입스크립트 컴파일러로, 빠른 성능과 병렬 처리를 제공합니다.

특징:
- 빠른 성능
- 컴파일러 및 번들러 기능
- 병렬 처리 지원

🛠️ ESLint & Prettier 설정

🖌️ Prettier 설정

Prettier는 코드 포맷터로, 다양한 언어의 코드를 자동으로 정렬하여 가독성을 높이고 팀 내 코딩 스타일을 통일합니다.

Prettier 설치

npm install --save-dev --save-exact prettier

VSCode 설정
- Prettier - Code formatter 플러그인 설치.
- Editor: Format on Save 체크.

.prettierrc 파일 생성

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

Prettier 공식 문서
Prettier Docs

🔍 ESLint 설정

ESLint는 코드 품질 유지와 일관성을 위한 코드 분석 도구입니다.

주요 기능:
1. 코드 품질 검사: 잠재적인 오류나 버그 탐지.
2. 코딩 스타일 일관성: 팀 내 코딩 규칙 강제.
3. 자동 수정: 일부 문제를 자동으로 수정.

ESLint 플러그인 설치
- VSCode에서 ESLint 확장 프로그램 설치.

.vscode/settings.json 파일 생성

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "markdown"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Lint 명령어 실행
```
npm run lint
```

package.json 설정

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "lint:fix": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0 --fix",
    "preview": "vite preview"
  }
}

⚙️ eslint-config-prettier 설정

설치

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

.eslintrc.cjs 설정

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "prettier"
  ]
}

🛠️ ESLint와 Prettier의 차이점

ESLint:
코드 품질 검사에 초점. 에러를 탐지하고 스타일을 강제.
Prettier:
코드 포맷팅에 초점. 코드를 일관성 있고 가독성 높게 정렬.

Vite 프로젝트 생성: SWC를 활용한 빠르고 효율적인 React 프로젝트 환경 구축.
ESLint & Prettier 설정: 코드 품질과 스타일을 유지하며 협업 효율성 극대화.
린캔버스 활용: 프로젝트 관리와 비즈니스 모델 검증에 효과적.

리액트 CSS 스타일링

CSS Modeules

css를 JavaScript Module로 사용가능하게 합니다.
쉽게 사용이 가능 합니다.

src/CssModules/components/Card1.jsx

// 일반적인 CSS
// import './Card1.css';

# CSS Modules를 사용하여 스타일을 적용합니다.
import styles from './Card1.module.css';

function Card1() {

  // 일반적인 CSS
  // return <article className="card">Card1</article>;

  // CSS Module을 사용하여 고유한 클래스 이름을 적용합니다.
  return <article className={styles.card}>Card1</article>;
}

export default Card1;

src/CssModules/components/Card1.module.css

.card {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  padding: 2rem;
  border-radius: 6px;
  background-color: blue;
  color: white;
}

src/CssModules/components/Card2.jsx

import styles from './Card2.module.css';

function Card2() {
  return <article className={styles.card}>Card2</article>;
}

export default Card2;

src/CssModules/components/Card2.module.css

.card {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  padding: 2rem;
  border-radius: 6px;
  background-color: red;
  color: white;
}

CSS Modules 결과
각각의 클래스가 고유의 클래스 명으로 잘 설정되는 것을 확인할 수 있습니다.

만약 일반 CSS를 설정한다면 클래스 명을 잘 설정해야 합니다. 그렇지 않으면 다른 컴포넌트와 클래스 이름이 충돌할 수 있습니다.

Styled Component

Styled Components는 CSS를 자바스크립트 안에서 작성할 수 있게 해주는 라이브러리로, 리액트 컴포넌트에 스타일을 쉽게 적용할 수 있습니다. Styled Components를 사용하면 컴포넌트와 스타일을 같은 파일에 작성할 수 있어, 코드의 가독성과 유지보수성이 향상됩니다.

📌 설정 및 사용

AppStyled.jsx 생성
먼저 src/AppStyled.jsx 파일을 만듭니다.

// index.css 대신 styled-components에서 스타일을 관리할 것입니다.
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

main.jsx 설정
src/main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './AppStyled.jsx';
import './index.css';  // index.css는 비워둡니다.

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Styled Components 설치
터미널에서 다음 명령어를 실행하여 styled-components 라이브러리를 설치합니다.
```
npm install styled-components
```
설치가 완료되면 package.json 파일에 다음과 같이 추가됩니다.
```
...
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "styled-components": "^6.1.13"
  },
...
```

Card 컴포넌트 생성
src/StyledComponents/Card.jsx

import styled from 'styled-components';

# Styled Components를 사용하여 스타일을 정의합니다.
const CardContainer = styled.div`
  border: 2px solid #393939;
  padding: 24px;
  border-radius: 6px;
`;

function Card() {
  return (
    <CardContainer>
      <div>
        <h2>Styled Component</h2>
        <p>이것은 styled-components로 만든 카드 입니다.</p>
      </div>
    </CardContainer>
  );
}

export default Card;

참고로 CSS Modules 방식보다 좋다는 건 아닙니다. 단지 다른 스타일링 방법일 뿐입니다. 상황에 맞게 선택해서 사용하면 됩니다.

AppStyled.jsx 수정
src/AppStyled.jsx

import BaseButton from './components/StyledComponents/BaseButton';
import Card from './components/StyledComponents/Card';
import StyledButton from './components/StyledComponents/StyledButton';

function AppStyled() {
  return (
    <>
      <Card />
      <hr />
      <BaseButton>BaseButton</BaseButton>
      <StyledButton>StyledButton</StyledButton>
    </>
  );
}

export default AppStyled;

StyledButton 컴포넌트 생성
src/components/StyledComponents/StyledButton.jsx

import styled from 'styled-components';
import BaseButton from './BaseButton';

# 기존 BaseButton 컴포넌트를 확장하여 StyledButton을 만듭니다.
const StyledButton = styled(BaseButton)`
  background-color: green;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;

export default StyledButton;

BaseButton 컴포넌트 생성
src/components/StyledComponents/BaseButton.jsx

function BaseButton({ className, children }) {
  return <button className={className}>{children}</button>;
}

export default BaseButton;

Styled Components에서 Props 사용하기
Styled Components를 사용하면 props를 통해 동적으로 스타일을 변경할 수 있습니다.
예를 들어, props.$dark를 사용하여 다크 모드 스타일을 적용할 수 있습니다.

src/StyledComponents/Card.jsx
```
import styled from 'styled-components';

const CardContainer = styled.div`
  border: 2px solid #393939;
  padding: 24px;
  border-radius: 6px;
  ${props => {
    console.log(props); // dark
    return (
      props.$dark &&
      `
        background-color: black;
        color: white;
        border: none;
      `
    );
  }}
`;

function Card() {
  return (
    <CardContainer $dark>
      <div>
        <h2>Styled Component</h2>
        <p>이것은 styled-components로 만든 카드 입니다.</p>
      </div>
    </CardContainer>
  );
}

export default Card;
```
📝 왜 $dark를 사용했는지?
- 접두사 $의 의미:
  Styled Components에서 props를 통해 스타일을 조건부로 적용할 때, 접두사 $를 사용하는 것이 일반적입니다. 이는 Styled Components가 해당 prop이 스타일링에 사용됨을 인지하도록 도와줍니다. 또한, React의 기본 props와 구분하기 쉽게 해줍니다.
- 동적 스타일링:
  $dark라는 prop을 전달함으로써, 다크 모드 스타일을 적용할 수 있습니다.
```
<CardContainer $dark>
  ...
</CardContainer>
```
  위와 같이 $dark prop을 전달하면, Styled Components는 이 prop의 값을 확인하고 조건에 맞는 스타일을 적용합니다.
🛠️ 어떻게 동작하는지?

Styled Components의 스타일 정의는 템플릿 리터럴(백틱 `)을 사용하여 작성됩니다. 이 안에서 JavaScript 표현식을 사용하여 동적인 스타일을 적용할 수 있습니다.
```
const CardContainer = styled.div`
  border: 2px solid #393939;
  padding: 24px;
  border-radius: 6px;
  ${props => {
    console.log(props); // dark
    return (
      props.$dark &&
      `
        background-color: black;
        color: white;
        border: none;
      `
    );
  }}
`;
```
- props 접근:
  ${props => { ... }} 부분에서 props를 사용하여 컴포넌트에 전달된 props 값을 확인할 수 있습니다.
- 조건부 스타일링:
  props.$dark && ... 구문을 통해, $dark prop이 true일 때만 특정 스타일을 적용합니다.
  즉, $dark가 true이면 배경색을 검은색으로, 글자색을 흰색으로 변경하고 테두리를 제거합니다.
- 결과:
  위 코드를 통해, <CardContainer $dark>와 같이 사용하면 다크 모드 스타일이 적용되고, $dark를 전달하지 않으면 기본 스타일이 유지됩니다.
📊 Styled Components 결과 확인

Styled Components는 CSS 클래스 이름을 자동으로 생성하여 스타일을 적용합니다.
또한, 컴포넌트별로 스타일을 정의함으로써 코드의 가독성과 유지보수성을 높여줍니다.

💡 정리
1. CSS Modules
  - CSS 파일을 모듈처럼 불러와 사용.
  - 장점: 클래스 이름 충돌 방지.
  - 단점: 동적 스타일 적용 어려움.
2. Styled Components
  - CSS를 자바스크립트 내부에서 작성.
  - 장점: 컴포넌트별 스타일 정의, 동적 스타일링 가능.
  - 단점: 추가 라이브러리 설치 필요.
  React 프로젝트에서는 팀의 스타일과 프로젝트 요구사항에 따라 CSS Modules 또는 Styled Components를 선택하여 사용할 수 있습니다.

김명원

개발자가 되고 싶은 정치학도생의 기술 블로그

이전 포스트

React 성능 최적화

다음 포스트

React - 린캔버스 만들기

learnReact

린캔버스란?

📋 린캔버스 구성 요소

🛠️ 프로젝트 생성

Vite 프로젝트 생성

🛠️ ESLint & Prettier 설정

🖌️ Prettier 설정

🔍 ESLint 설정

⚙️ eslint-config-prettier 설정

🛠️ ESLint와 Prettier의 차이점

리액트 CSS 스타일링

CSS Modeules

Styled Component

📌 설정 및 사용

📝 왜 `$dark`를 사용했는지?

🛠️ 어떻게 동작하는지?

📊 Styled Components 결과 확인

💡 정리

React 성능 최적화

React - TailwindCSS, Material UI

0개의 댓글

React - 린캔버스 만들기

learnReact

린캔버스란?

📋 린캔버스 구성 요소

🛠️ 프로젝트 생성

Vite 프로젝트 생성

🛠️ ESLint & Prettier 설정

🖌️ Prettier 설정

🔍 ESLint 설정

⚙️ eslint-config-prettier 설정

🛠️ ESLint와 Prettier의 차이점

리액트 CSS 스타일링

CSS Modeules

Styled Component

📌 설정 및 사용

📝 왜 $dark를 사용했는지?

🛠️ 어떻게 동작하는지?

📊 Styled Components 결과 확인

💡 정리

React 성능 최적화

React - TailwindCSS, Material UI

0개의 댓글

📝 왜 `$dark`를 사용했는지?