[TIL] 230113

Timer

// 외부모듈
import React, { useState, useEffect, useRef } from 'react';
import styled from 'styled-components';

function Timer({ setIsStartTimer }) {
  const [seconds, setSeconds] = useState(20);

  useEffect(() => {
    const countdown = setInterval(() => {
      setSeconds(parseInt(seconds, 10) - 1);
    }, 1000);
    if (parseInt(seconds, 10) === 0) {
      clearInterval(countdown);
      setIsStartTimer(false);
    }
    return () => clearInterval(countdown);
  }, [seconds]);

  return (
    <StTimer>
      <StTimerText>남은 시간</StTimerText>
      <GameTimer>{seconds} 초</GameTimer>
    </StTimer>
  );
}

export default Timer;

const StTimer = styled.div`
  border: 1px solid green;
  display: inline-block;
`;

const StTimerText = styled.div`
  font-size: 24px;
`;

const GameTimer = styled.div`
  font-size: 24px;
`;

GameRoomRTC

Timer import 하는 곳

 const [isStartTimer, setIsStartTimer] = useState(false);
 
  function timerStart() {
    setIsStartTimer(true);
  }
  
        <div>
          <button onClick={timerStart}>발언권 부여</button>
          {isStartTimer && <Timer setIsStartTimer={setIsStartTimer} />}
        </div>

 

게임 타이머 만들기

parseInt(seconds) 를 쓰니 Missing radix parameter 오류남

- 기수 매개 변수 누락

문자열이 다른 값으로 시작하는 경우 기수는 10 

https://rateye.tistory.com/1012

JSLint "missing radix parameter" 오류

parseInt(seconds, 10) 이렇게 쓰니 해결됨

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/parseInt

parseInt() - JavaScript | MDN

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

setInterval() - Web APIs | MDN

https://ko.javascript.info/settimeout-setinterval

setTimeout과 setInterval을 이용한 호출 스케줄링

https://www.daleseo.com/js-timer/

자바스크립트의 setTimeout()과 setInterval() 함수

https://gaemi606.tistory.com/entry/React-%ED%83%80%EC%9D%B4%EB%A8%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-Hooks-setInterval

React | 타이머 만들기 ( Hooks, setInterval )

https://handhand.tistory.com/32

[React] 컴포넌트에서 타이머 설정하기 (with Hooks)

https://velog.io/@leobang17/React%EB%A1%9C-%ED%83%80%EC%9D%B4%EB%A8%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-pt.3

React로 타이머 구현하기 Part.3 (完)

https://twinklehwa.tistory.com/426

시간 줄어드는 타이머 만들기

https://devjhs.tistory.com/115

[javascript] setTimeout , setInterval - 일정시간 동안 반복 실행

https://cocobi.tistory.com/64

[JS] 시간 지연 함수 setTimeout()

https://developer.mozilla.org/en-US/docs/Web/API/setTimeout

setTimeout() - Web APIs | MDN

https://webisfree.com/2014-04-08/[javascript]-%EC%8B%9C%EA%B0%84-%EC%A7%80%EC%97%B0-%ED%95%A8%EC%88%98-%EC%9D%BC%EC%A0%95-%EC%8B%9C%EA%B0%84-%EB%92%A4-%EC%8B%A4%ED%96%89%EC%8B%9C%ED%82%A4%EA%B8%B0-settimeout()-%7B%7D 

[JavaScript] 시간 지연 함수, 일정 시간 뒤 실행시키기, setTimeout() {}

https://velog.io/@lemuel0525/React-setTimeOut%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%ED%83%80%EC%9D%B4%EB%A8%B8-%EC%84%A4%EC%A0%95

[React] setTimeOut을 이용한 타이머 설정

 

 

aws 배포

https://hell-of-company-builder.tistory.com/m/244

AWS S3 ,CloudFront로 리액트앱 프론트앤드 웹페이지 배포하기

https://react-etc.vlpt.us/08.deploy-s3.html

리액트 앱 AWS S3, CloudFront 에 배포하기 · GitBook

https://42place.innovationacademy.kr/archives/9784

AWS S3, CloudFront로 리액트(프론트) 배포하기

https://velog.io/@ireneeming/AWS-S3%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-React%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-%EC%B4%88%EA%B0%84%EB%8B%A8-5%EB%B6%84%EC%BB%B7

[AWS] S3를 이용하여 React배포하기 (초간단 5분컷)

https://velog.io/@krkorklo58/AWS-S3%EB%A1%9C-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0#ssl-%EC%9D%B8%EC%A6%9D%EC%84%9C-%EC%9A%94%EC%B2%AD

AWS S3로 React 배포하기

https://juein.tistory.com/47

[React] create-react-app 작업 내용을 build 하기

https://uiyoji-journal.tistory.com/88

[gh-pages] CRA 배포 시 homepage 경로를 참조하지 못할 때

https://velog.io/@seondal/React-homepage-%EC%9E%85%EB%A0%A5%EB%A7%8C-%ED%95%98%EB%A9%B4-%ED%9D%B0%EC%83%89-%ED%99%94%EB%A9%B4%EC%9D%B4-%EB%9C%A8%EB%8A%94-%EB%B0%B0%ED%8F%AC-%EC%98%A4%EB%A5%98

[React] homepage 입력만 하면 흰색 화면이 뜨는 배포 오류

https://lopicit.tistory.com/450

AWS) Route53 과 S3를 이용하여 정적 웹사이트 배포하기

https://blog.walkinpcm.com/18

AWS CloudFront의 Origin으로 S3를 사용할 때, REST API 엔드포인트를 입력하는 것과 웹사이트 엔드포인트

https://velog.io/@han-byul-yang/%EC%97%90%EB%9F%AC-React-%EB%B9%8C%EB%93%9C-%ED%9B%84-%EB%B0%B0%ED%8F%AC-%EC%8B%9C-%ED%9D%B0-%ED%99%94%EB%A9%B4-%EC%98%A4%EB%A5%98

[에러] React 빌드 후 배포 시 흰 화면 오류

https://pottatt0.tistory.com/m/entry/BrowserRouter-HashRouter-%EC%B0%A8%EC%9D%B4-BrowserRouter-%EB%B0%B0%ED%8F%AC%EC%8B%9C-%ED%9D%B0-%ED%99%94%EB%A9%B4-%EB%AC%B8%EC%A0%9C

BrowserRouter HashRouter 차이 + BrowserRouter 배포시 흰 화면 문제

https://kooremo.tistory.com/m/entry/react-yarn-%EB%B9%8C%EB%93%9C%ED%95%98%EA%B8%B0

react yarn 빌드하기

 

https://ui.dev/react-router-nested-routes

The Guide to Nested Routes with React Router

중첩라우팅 왜 안 됨???왜!!!!!!!