구글 타이머 만들기

electron 의 이해

main process vs renderer process

main process creates web page by creating browserWindow instance.
each webpage runs in it's own process, renderer process

목표 설정

주요 요구사항 정리

• frameless
• always on top
• clock shape
• can set duration
• visualize duration

frameless, always on top

• Browser window 객체를 생성할때 frame: false option 을 지정할 수 있다.
• 마찬가지로 always on top 도 지정할 수 있다.
• 추가적으로, 모양을 바꾸기 위해서 transparent option 을 주고, css 를 요소에 적용하면 해당 모양을 얻을 수 있다.

시계 모양 만들기

https://codepen.io/gringrape/pen/LYGGvJr

어려웠던 점

• 눈금을 정확한 위치에 이동, 회전 하는 것이 어려웠다.
• transform origin 을 사용해서 개선할 수 있을 것 같다.

시계 모양 만들기 개선

  &__minute-tick li {
    position: absolute;
    display: block;
    width: .5rem;
    height: 1rem;
    background-color: black;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(10deg) translateY(-10rem);
  }

Superposition

• transform 부분에서 각 연산을 순차 적용 시키면 superposition 된다.
• 요점은 복잡한 연산을 단순한 연산의 superposition으로 만드는 것.

trigonometry

• 시계 눈금 숫자를 이동시키는데에는 회전을 이용하지 못한다
• 삼각 함수를 사용해서 해당각도에서 x, y 축 방향으로 얼마나 이동할지를 구한다.

개선된 시계 모양

https://codepen.io/gringrape/pen/ExPPzrM