[TIL] Git page에 react 올리기

어제 만든 숫자세기 게임을 직접 해보고 싶다는 친구의 요청으로 전부터 해보고 싶던 git page를 이용해 보기로 했다!

무료로 간단하게 배포할 수 있어서 참 좋은 것 같다!
https://ryanromaris.github.io/jerrynote/

Git page에 내 리액트 프로젝트 업로드하기!

미리 말하자면 올리고 바로 최신화가 되지 않는다. 약간 참을성이 요구된다. 썩 빠르지 않지만 무료니까.. 간편하니까.. 한번쯤은.. 해볼만하다.

1. 깃 레포지토리를 만든다! 이름 상관없다! git.io로 시작해야 한다고 하는데가 있는데 상관없다!(내가 해봤다 다..) 나는 jerrynote로 했다. 소문자로 해야 에러가 안난다.

2. 내 리액트 파일 최상단에서 gh-pages를 깔아준다.

$ npm install gh-pages

3. package.json에 다음 속성들을 추가해준다.

   "homepage": "https://{깃헙아이디}.github.io/{레포지토리명}"
   "predeploy": "npm run build",
   "deploy": "gh-pages -d build"

4. 내 리액트를 1에서 만든 레포지토리와 git remote 시켜주고 add, commit push 해준다.

5. npm run deploy 해준다.

6. gh-page가 알아서 빌드된 파일을 gh-page라는 브랜치에 올려준다.(이 과정 후 깃헙을 가보면 브랜치가 생성되고 빌드된 파일이 담겨 있어야 한다)

7.이제 우리의 레포지토리 맨 오른쪽에 setting 으로 가준다.

빌드된 파일이 gh-pages 브랜치에 있으니 당연히 gh-pages로 설정해 주어야 정상적으로 react 프로젝트가 가동된다. 최종적으로 배포가 되면 사진처럼 연두빛 성공 표시가 뜬다.

클릭 게임 약간의 리팩토링

1. 두 게임 중 선택할 수 있는 창을 추가했다.

2. 추가적으로 클릭을 할 때마다 랜덤한 위치에 별이 생기는 이펙트를 추가해주었다. 아주 마음에 든다.

3. 클릭을 하면 일어나는 일

• 일단 useState로 관리되는 count숫자를 늘려준다.
• 랜덤 x,y좌표를 생성하고, createElement로 만든 별(이미지요소)에 top과 left속성으로 준다. (position:absolute)
• 클릭할때마다 생기는 별이 클릭하는 부분에 영향을 주지 않게 하기 위해서 별이 생성되는 범위를 한정시켜주었다.
• 3초에 걸쳐 서서히 opacity를 줄여서 이쁘게 사라진다
• opacity가 없어져도 요소는 남아있다. 보이지만 않을뿐. 즉 성능향상을 위해 3초후에 아예 별을 없앤다.

const plus = () => {
    setCounting((counting) => counting + 1);
    makeRandomStar();
  };

  const generateRandomInt = (min, max) => {
    return Math.floor(Math.random() * (max + 1 - min) + min);
  };

  const makeRandomStar = () => {
    let x = generateRandomInt(0, 95);
    let y = generateRandomInt(0, 90);

    if (x >= 10 && x <= 75 && y >= 30 && y <= 60) {
    } else {
      let root = document.querySelector('.main_container');
      let star = document.createElement('img');
      star.style.width = '60px';
      star.style.height = '60px';
      star.setAttribute('src', img);
      star.style.left = `${x}vw`;
      star.style.top = `${y}vh`;
      star.style.position = 'absolute';
      let fadeEffect = setInterval(function () {
        if (!star.style.opacity) {
          star.style.opacity = 1;
        }
        if (star.style.opacity > 0) {
          star.style.opacity -= 0.1;
        } else {
          clearInterval(fadeEffect);
        }
      }, 300);

      root.append(star);
      setTimeout(() => star.remove(), 3000);
    }
  };

오늘의 공부 && 고민거리

• Git page 배포도 next에서 배포했을때와 같은 라우팅 문제가 있었다. 주소창에 직접 입력하거나 새로고침을 누르면 페이지가 안뜬다. 원하는 주소 뒤에 .html을 붙이면 원하는 결과가 나온다. 근본적으로 해결하려면 라우팅 api를 만들어주어야한다.
  https://velog.io/@ryanromaris/Next.js-%EC%97%90%EC%84%9C-Redirect-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95

• 모바일인지 pc인지에 따라 클릭하는 부분의 위치가 달라지므로 모바일인지 pc인지 알아내고 싶었다. vh와 vw로 표현했지만, 그래도 가로와 세로의 비율자체가 다른 pc와 모바일 기기에 따른 대처가 필요하다. 다양한 방법들이 구글에 보인다.
  https://7942yongdae.tistory.com/65