Skip to content

Latest commit

 

History

History
220 lines (195 loc) · 6.55 KB

0804.md

File metadata and controls

220 lines (195 loc) · 6.55 KB

0. BDD(Behavior Driven Development)개발을 하기위해 feature파일을 만들거에요.

1. 스펙 만들기 App.feature 파일

2. 시나리오 쓰기: 시나리오는 하나의 기능을 말합니다.

2.1 3가지 시나리오 작성 2.2 feature파일에 주석을 달기 위해 Cucumber (Gherkin) Full Support 익스텐션을 설치합니다.

3. bun project 초기화.

bun create react 프로젝트이름

4. 코드 짜기 시작

  1. index.html의 head에 pico.css를 추가. classless css임! 기본 html을 예쁘게
<link
  rel="stylesheet"
  href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css"
/>
  1. App.tsx 작성 시작 2.1 선택된 색깔 배열을 만든다 const colors = ["red", "green", "blue"]; 2.2 값이 여러 새인 배열은 map을 써서... element 여러 개로 변환한다! 2.3 여러 개의 값을 background에 문자열로 넣어준다.!

선택한 색깔 보여주기 기능

function App() {
  //1번- 선택된 색이 여러개인 배열을 만든다
  const colors = ["red", "green", "blue"];

  return (
    <div className="App">
      <article>
        <table className="selectedContainer flex flex-row">
          <tr>
            {/* 2번 - map을 써서 배열의 값을 화면에 뿌려준다. */}
            {colors.map((color) => (
              <td
                style={{
                  backgroundColor: color,
                }}
              >
                {color}
              </td>
            ))}
          </tr>
        </table>
        <div id="pallete" className="flex flex-row flex-wrap"></div>
      </article>
    </div>
  );
}

색깔 선택하기 기능

function App() {
  //1번 - 선택된 색이 여러개인 배열을 만든다 - BOX_COUNT 개인 배열을 만들어서 흰색으로 채운다
  //5번 - useState를 사용해 colors를 반응형(reactive) 상태로 만든다.
  const [colors, setColors] = React.useState(Array(BOX_COUNT).fill(WHITE_HEX)); // 문자열

  //6번 - addSelected 함수를 만들어
  function addSelected(hex: string) {
    setColors((old) => {
      // findIndex는 배열의 값 중에서 조건에 맞는 값이 있는 첫 번째 index를 찾는다!
      // hex 중에서 hex의 색이 white인 첫번째 index를 찾아낸다.
      const firstWhiteIndex = old.findIndex((hex) => hex === WHITE_HEX);
      if (firstWhiteIndex === -1) {
        // 인덱스를 못 찾으면! -1을 반환
        return old; // 원래 colors를 그대로 반환... 더 채울 하얀칸이 없으므로!
      }

      // 이미 바뀐 색은 old대로 놔두고
      const copy = [...old];
      // 찾아낸 첫 번째 인덱스에 hex값을 넣는다.
      copy[firstWhiteIndex] = hex;
      return copy; // newState !!!
    });
  }
  return (
    <div className="App">
      <article>
        <table className="selectedContainer flex flex-row">
          {/* 2번 - map을 써서 배열의 값을 화면에 뿌려준다. */}
          <tr>
            {colors.map((color) => (
              // 3번 - 스타일에 map으로 받아온 color 문자열 값을 backgroundColor로 지정해준다.
              <td
                style={{
                  backgroundColor: color,
                }}
              >
                {color}
                {/* text node */}
              </td>
            ))}
          </tr>
        </table>
        <div id="pallete" className="flex flex-row flex-wrap">
          {/* 4번 - pallete도 값이 여러 개이므로 map을 사용한다. */}
          {pallete.map((hex) => (
            <button
              onClick={() => addSelected(hex)}
              className="roundButton"
              style={{ backgroundColor: hex }}
            >
              {hex}
            </button>
          ))}
        </div>
      </article>
    </div>
  );
}

지우기 기능 구현

import * as React from "react";
import "./App.css";

const BOX_COUNT = 10;
const WHITE_HEX = "#ffffff";
const pallete = [
  "#e6e6e6",
  "#d2b48c",
  "#800000",
  "#7e181e",
  "#29f9ff",
  "#a8a8f8",
  "#5050f1",
  "#ffb3ba",
  "#ccff00",
  "#ff7f50",
  "#fa8072",
  "#bada55",
];

function App() {
  //1번 - 선택된 색이 여러개인 배열을 만든다 - BOX_COUNT 개인 배열을 만들어서 흰색으로 채운다
  //5번 - useState를 사용해 colors를 반응형(reactive) 상태로 만든다.
  const [colors, setColors] = React.useState(Array(BOX_COUNT).fill(WHITE_HEX)); // 문자열

  //6번 - addSelected 함수를 만들어
  function addSelected(hex: string) {
    setColors((old) => {
      // findIndex는 배열의 값 중에서 조건에 맞는 값이 있는 첫 번째 index를 찾는다!
      // hex 중에서 hex의 색이 white인 첫번째 index를 찾아낸다.
      const firstWhiteIndex = old.findIndex((hex) => hex === WHITE_HEX);
      if (firstWhiteIndex === -1) {
        // 인덱스를 못 찾으면! -1을 반환
        return old; // 원래 colors를 그대로 반환... 더 채울 하얀칸이 없으므로!
      }

      // 이미 바뀐 색은 old대로 놔두고
      const copy = [...old];
      // 찾아낸 첫 번째 인덱스에 hex값을 넣는다.
      copy[firstWhiteIndex] = hex;
      return copy; // newState !!!
    });
  }

  //7번 - deleteSelected 함수를 만들어
  function deleteSelected(targetIndex: number) {
    setColors((old) => {
      const copy = [...old];
      // targetIndex의 값을 흰색 헥스를 넣는다.
      copy[targetIndex] = WHITE_HEX;
      return copy; // newState !!!
    });
  }

  return (
    <div className="App">
      <article>
        <table className="selectedContainer flex flex-row">
          {/* 2번 - map을 써서 배열의 값을 화면에 뿌려준다. */}
          <tr>
            {/* 7.2번 - targetIndex는 여기서 index를 받아온 값이다. */}
            {colors.map((color, index) => (
              <td
                onClick={() => deleteSelected(index)}
                style={{
                  backgroundColor: color,
                }}
              >
                {color}
                {/* text node */}
              </td>
            ))}
          </tr>
        </table>
        <div id="pallete" className="flex flex-row flex-wrap">
          {/* 4번 - pallete도 값이 여러 개이므로 map을 사용한다. */}
          {pallete.map((hex) => (
            <button
              onClick={() => addSelected(hex)}
              className="roundButton"
              style={{ backgroundColor: hex }}
            >
              {hex}
            </button>
          ))}
        </div>
      </article>
    </div>
  );
}

export default App;