react로 만들어본 퇴근시간 계산기

• Go Home Time (React)

기능

메인 페이지

• 목표 시각까지 남은 시간 계산
• url param을 통해 목표 시각 세팅
• 목표 시각이 지나면 퇴근하라는 메시지를 뛰움

about 페이지

• 링크 공유 기능
• 퇴근 시간 설정 기능
• 자동 클립보드 복사

깃허브 페이지 spa 세팅

• https://iamsjy17.github.io/react/2018/11/04/githubpage-SPA.html
• 원리. 404페이지에 스크립트를 두고 index페이지로 url 파라미터로 넘김

배경이미지 출처

• https://unsplash.com/photos/WVIkqpoKz1I
• Photo by @swayte on Unsplash

해결한 문제들

gsap 적용안됨

• https://github.com/greensock/GSAP/issues/285#issuecomment-433729632

Share.tsx

import { Power3, TimelineLite } from 'gsap';
import CSSPlugin from 'gsap/CSSPlugin'; // 추가

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const C = CSSPlugin; // 추가

• 로컬에서는 애니메이션이 잘 실행되었는데, 빌드 후 애니메이션이 안 나오는 문제 해결

후기

• 어느 정도 리액트에 익숙해진 것 같다
• 주로 사용하는 패턴이 생긴 것 같다
• 엄청 간단해 보이지만 이것저것 신경 쓴 것 같은데, 기록을 안 해놨다 ㅠㅠ
• 나는 코드에 조금의 변화가 생겨도 커밋을 했었는데,,
• 이번에는 커밋을 안 하고 한 번에 몰아서 마지막에 파일별로 커밋을 했다
• 그래서 해결한 문제들이 기억이 잘 안 난다.. ㅠㅠ

신경 썼던 것들

input element

• about 페이지에서는 링크를 생성하는 부분이 있다
• 처음에는 input width가 좁았었다. 그래서 고민했던 것이…
• input 넓이보다 안의 내용이 더 길면은 끝부분이 감춰진다

• input에서 포커스를 해제하면 위 그림처럼,
• 계속 앞쪽으로 포커스가 자동으로 이동했다

• 나는 input 내용의 가장 뒤쪽,
• url param이 변하는 것에 포커스가 가도록 만들려고 이것저것 해봤는데…

• 결국엔 그냥 input width를 늘려버리고 끝을 냈다…

github pages SPA

• 깃허브 페이지는 기본적으로 SPA를 지원하지 않는다
• react-router-dom 으로 여러 경로들을 만들어 두면 index 말고는 404 페이지로 리디렉트 된다
• 그래서 찾아보니까,,.!

404.html

var segmentCount = 1;

var l = window.location;
l.replace(
  l.protocol +
    '//' +
    l.hostname +
    (l.port ? ':' + l.port : '') +
    l.pathname
      .split('/')
      .slice(0, 1 + segmentCount)
      .join('/') +
    '/?p=/' +
    l.pathname
      .slice(1)
      .split('/')
      .slice(segmentCount)
      .join('/')
      .replace(/&/g, '~and~') +
    (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
    l.hash
);

index.html

(function (l) {
  if (l.search) {
    var q = {};
    l.search
      .slice(1)
      .split('&')
      .forEach(function (v) {
        var a = v.split('=');
        q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
      });
    if (q.p !== undefined) {
      window.history.replaceState(
        null,
        null,
        l.pathname.slice(0, -1) + (q.p || '') + (q.q ? '?' + q.q : '') + l.hash
      );
    }
  }
})(window.location);

• 원리는 index 경로 외에 나머지 경로로 들어오면 404페이지를 반환하는데,
• 커스텀 404페이지에서 스크립트를 통해서 index페이지로 리디렉트 하게 한다
• 이때, url params 및 query string을 가공한다

• index.html에서는 404.html로부터 넘겨받은 값으로 라우팅이 적용된 화면을 보여준다
• 이걸 만든 사람은 정말 대단한 것 같다. ㄷㄷ;

소스코드

• https://github.com/chinsun9/go-home-time

참고

github pages spa

• https://iamsjy17.github.io/react/2018/11/04/githubpage-SPA.html
• https://github.com/rafgraph/spa-github-pages