[패스트캠퍼스] 프론트엔드 강의 학습일지(React 동작 기록과 배포)

패스트캠퍼스/React&Redux

[패스트캠퍼스] 프론트엔드 강의 학습일지(React 동작 기록과 배포)

Rosie, Lee 2023. 4. 21. 23:45

국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다.

Tic Tac Toe 앱 만들기

동작에 대한 기록 저장하기

이전에 만들던 Tic Tac Toe(https://rosylee.tistory.com/20) 앱을 이어서 진행한다.

이번에는 보드에 스퀘어를 누를 때마다 X나 O가 표시되는데, 이것을 저장하여 기록으로 남기는 기능을 추가한다.

핵심은 스퀘어를 누를 때 배열의 복사본(slice())을 만들어서 동작에 대한 기록 저장이 가능하다는 것이다.

History Strate는 Board 컴포넌트와, Square 컴포넌트 둘 다 필요하기 때문에, 최상위 단계인 App에 만들어준다.

기존 Board.js에 만들었던 state를 App.js에 옮겼다.

과거의 이동 표시하기

moves라는 함수를 만들어서 화면에 뿌려준다.

const moves = history.map((step, index) => {
  const desc = index ? 'Go to move #' + index : 'Go to game start';
  return (
    <li>
      <button>{desc}</button>
    </li>
  );
});

아래와 같은 에러가 발생하는데, key(고유값)을 지정해 주면 해결된다.

여기서 고유 값은 index로 사용할 수 있다.

const moves = history.map((step, index) => {
  const desc = index ? 'Go to move #' + index : 'Go to game start';
  return (
    <li key={index}>
      <button>{desc}</button>
    </li>
  );
});

JSX Key 속성

리액트에서 요소의 리스트를 나열할 때는 Key를 넣어줘야합니다. 키는 React가 변경, 추가 또는 제거된 항목을 식별하는데 도움이 됩니다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 합니다.

가상돔 비교해서 파악한 후 바뀐 부분만 실제 돔에 적용해주는데, 리스트를 나열할 때 바뀐 부분을 찾으려면 key를 이용해서 인식한다. key로 index는 비추천한다. 추가되거나 제거되면 변경되기 때문이다.

전개 연산자(Spread Operator)

ES6에서 추가된 기능

객체나 배열의 값을 다른 객체, 배열로 복제하거나 옮길때 사용한다.

... 으로 사용한다

객체는 객체 자체가 아닌 각각의 값이 할당된다.

const obj1 = {
	A: 'a',
    B: 'b'
};
const obj2 = {
	C: 'c',
    D: 'd'
};

const spreadObj = {...obj1, ...obj2};
console.log(spreadObj); // {A: 'a', B: 'b', C: 'c', D: 'd'};


const obj = {obj1, obj2};
console.log(obj);
/*
{
    "obj1": {
        "A": "a",
        "B": "b"
    },
    "obj2": {
        "C": "c",
        "D": "d"
    }
}
*/

기존 배열을 보존할 수 있다.

const arr1 = [1,2,3];
const arr2 = arr1.reverse();
console.log(arr1); // [3,2,1]
console.log(arr2); // [3,2,1]

// 전개 연산자 사용하면 기존 배열을 보존해준다.
const arr3 = [1,2,3];
const arr4 = [...arr3].reverse();
console.log(arr3); // [1,2,3]
console.log(arr4); // [3,2,1]

git 배포

작업 순서

Working Directory ---(git add)---> Staging Area ---(git commit)---> Git repository(LOCAL) ---(git push)---> Git repository(REMOTE)

git 명령어

// 현재 디렉토리 상의 모든 변경 내용을 스테이징 영역에 추가
giit add .


// 스테이징 영역에 있는 소스 코드를 로컬 저장소에 메시지와 함께 저장
git commit -m "commit message"


// main 브랜치 설정
git branch -M main


// 로컬 git 저장소와 github remote(원격) 연결
git remote add origin {깃헙레포지토리주소}


// 로컬 git 저장소에 있는 소스 코드를 github 저장소로 push(local의 main branch에서 git push -u origin main이라고 치면, local의 main과 remote(orgin)의 main 브랜치와 연결된다.)
// 이때 -u는 upstream을 의미(upstream은 git repository끼리 동기화할 때 사용되는 용어이다)
// 한 번 -u를 달아서 커맨드를 날리면 이후엔 브랜치명을 생략하고 git push만 해도 된다.
// downstream 이란 용어도 있다.
git push -u origin main

소스코드를 업로드 했다면, 배포를 해본다.

먼저, gh-pages 모듈을 사용한 React 웹사이트 배포

모듈 설치 방법

npm install gh-pages --save-dev

package.json에 hompage url을 작성해준다.

https:// {깃허브유저이름}.github.io/{저장소이름}/

package.json 배포를 명령어 입력을 위해 script에 "deploy": "gh-pages -d build", 추가

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "gh-pages -d build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

그리고 build 폴더 생성