mini Project(Online-timer)

<한국폴리텍대학 분당융합기술교육원 임베디드시스템과_개인 프로젝트>

(2023.11.06)(til69)

<프로젝트 설계>
학과 과정 중간 점검 느낌으로 지금까지 배운 c, java, javascript 중 하나를 사용해 온라인 타이머 웹사이트를 만들어 보려고 한다. 기본적으로 메인화면에 현재 시간을 띄워놓고, 알람 기능과 스톱워치 기능 등 타이머 기능 등을 추가해 보려 한다. 기본적인 틀은 온라인 시계 사이트(https://vclock.kr/timer/)를 참고했다.
가장 익숙한 언어인 javascript로 먼저 만들어 볼 건데, 리액트 같은 라이브러리는 쓰지 않고 최대한 바닐라 자바스크립트로만 짜보겠다. 라이브러리는 언제 없어지고 바뀔지 모르니까..

<한 일>

• 깃허브 레포지토리 생성
  • 깃허브랑 vscode 연동하는 부분부터 다시 복습
  • git이 뭐였는데
• vscode 초기 세팅
• 온라인 타이머 웹페이지 구상

(2023.11.07)(til70)

<프로젝트 시작>
배우긴 했지만 아직 미숙한 jquery로 할까 아님 전에 프로젝트를 해봐서 익숙한 리액트로 할까 고민하다가 가장 근본인 바닐라 자바스크립트로(코드가 길어질 거 같긴 하지만) 먼저 해보기로 했다. 일단 기본이 확실하면 나중에 뭘 활용하던 쉽게 할 수 있을 테니까.
현재 시각을 띄우는 거랑 알람, 스톱워치 기능을 어떻게 페이지를 나누고 UI를 구성할지 고민해 보는 시간을 가졌다.

<한 일>

• 폴더 초기세팅
• 타이머 기능을 구현하기 위한 자바스크립트 문법 공부
• 레이아웃 짜기, nav바 구현

(2023.11.08)(til71)

<프로젝트 진행>
역시 css는 재밌고 어렵다. 뭔가 끼워 맞추기 식으로 한 느낌이 없지 않아 있지만 일단 현재 시각을 보여줄 메인 페이지는 얼추 그럴듯하게 완성했다. 레이아웃을 대충 잡아놨으니 이제 현재 시각을 보여주는 기능을 구현하려고 한다~~.
new Date()와 내장함수 .getMonth()등을 통해 현재 시각과 날짜 보여주기 완성!
(얼추 모양은 잡힌 모습)

<한 일>

• 메인 페이지 레이아웃 완성
• getElementById를 사용해 id가 time(date)인 div에 현재 시각(날짜) 표시
• setInterval 함수를 통해 현재 시각과 날짜를 1초마다 호출

(2023.11.09)(til72)

<프로젝트 진행>
사실 어제 코딩하면서 좀 찝찝했던 부분이 있었다. 바로 페이지를 로딩하면 시간과 날짜가 뜨기까지 (체감상) 한참 걸리는 부분이었다. 처음에는 귀찮아서 그냥 통신 상태가 안 좋은가 하고 넘겼는데 말이 안 되는 소리였다.. 오늘 아침에 오자마자 다시 찬찬히 코드를 보다가 문득 setInterval(dpTime, 1000)으로 설정해놔서 1초 후에 보이는 건가? 하는 생각이 들었고, 1초로 설정된 부분을 0.01초로 바꿔 보았더니 다른 페이지들처럼 바로 뜨기 시작했다.

그럼 빠른 로딩을 위해서 무조건 setInterval 부분을 10으로 설정해 줘야 하는 건가?
=> 짧은 간격으로 setInterval을 설정하면 브라우저가 더 자주 코드를 실행해야 하기 때문에 메모리 사용량이 증가할 수 있다. 또한, 너무 짧은 간격으로 설정하면 브라우저가 해당 작업을 처리하는 동안 다른 작업들에 대한 응답이 떨어질 수 있으므로 전체적인 성능에 부정적인 영향을 미칠 수 있다.

<한 일>

• setInterval 주기 재설정, 공부
• MySQL 수업(오늘 대체 수업이라 프로젝트 할 시간이 없었다는,,)

(2023.11.10)(til72)

<프로젝트 진행>
메인 페이지라고 할 수 있는 현재 시각을 표시해 주는 시계 페이지를 완성하고, 스톱워치와 알람 페이지를 만들기 전 페이지 이동 기능을 구현하려고 한다.
header와 nav바, footer는 그대로 놔두고 section 부분만 바뀌게 했다.
section 부분에 clock.html 파일을 띄우는데 자꾸 에러가 뜬다..

failed to load resource: the server responded with a status of 404 (Not Found) 

아 진짜 미치겠네...

<한 일>

• 폴더 구조 관리
  • 기능별로 시계, 스톱워치, 알람 페이지를 따로 작성
• fetch()를 통해 메인 화면에 시계 및 알람 페이지 html 띄우기(실패)

(2023.11.14)(til74)

<프로젝트 진행>
바닐라 자바스크립트로 SPA만드는 법을 제대로 공부해야 겠다는 생각이 들었다. 매번 라우터 기능을 쓸 때마다 react-router-dom 같은 라이브러리를 사용하는 경우가 대부분이었는데, 이번 기회에 라우터를 직접 개발해보며 라우팅에 대해 깊게 이해해보려고 한다.
라이브러리와 프레임워크 없이 바닐라 JS만으로 라우팅 시스템을 개발하는 방법에는 크게 2가지 방법이 있다. Fragment 해시를 이용하는 방법(해시 라우터)과 history API를 이용하는 방법(브라우저 라우터)인데, history API인 pushState와 popState 메서드가 지원되면서 Fragment 해시를 쓰지 않고도 라우팅 시스템을 개발할 수 있게 되었다. 하지만 모든 브라우저에서 지원되는 라우터를 개발하기 위해서는 여전히 해시 라우터를 사용해야 한다. 해시 라우터만의 압도적인 장점이 있고, 브라우저 라우터 또한 해시 라우터를 기반으로 만들어졌기 때문이다!

Fragment 해시
Fragment 해시란 URL에 포함될 수 있는 해시(#)로 시작하는 부분으로, 웹 페이지의 특정 섹션을 식별하는 것이 목적이다.
예를 들어 www.kakaoent.com#/melon에서 melon이 Fragment 해시이고, 해시를 통해 HTML에서 id=“melon” 요소를 식별한다. 해시 변경이 일어났을 때는 브라우저는 서버에 요청하지 않고 페이지가 새로고침 되지 않는다. 또한 새로고침이나 리다이렉션이 발생했을 때, 해시(#) 이전의 도메인 주소로 요청을 보내므로 오류가 발생하지 않고, 언제나 올바른 entry point로 요청이 간다. 즉 404 에러를 대비한 별도의 서버 설정이 필요 없게 된다.

<한 일>

• Fragment 해시 연습
• 라우터란 무엇인가(라우팅의 두가지 방법 -> 해시 라우터 / 브라우저 라우터)

(2023.11.16)(til76)

<프로젝트 진행>
그저께에 이어 바닐라 자바스크립트로 해시 라우터 만들기 진행!
clock 컴포넌트에서 DOMContentLoaded 부분을 인식을 못 해서 window.onload = function()으로 바꿔보았지만 역시나 실패.. clock.html에서는 정상적으로 작동하지만 index.html페이지로 불러오는 과정에서 인식을 못 한다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
일단 프로젝트를 끝내는 게 우선이니 비동기 부분을 사용하지 않는 방법으로 코드를 수정하기로 했다. online-clock.js 파일에서 직접 html을 추가하는 방법으로 짜봐야겠다.
(고민한 시간을 아까워하지 말자)

<한 일>

• 폴더 구조 변경(컴포넌트별 폴더를 지우고 다 같은 위치로 옮김)
• fetch함수 대신 innerHTML을 사용해 직접 DOM 조작하는 코드로 수정(진행 중)

(2023.11.17)(til77)

<프로젝트 진행>
바닐라 자바스크립트로 SPA를 만드는 과정이 이렇게 오래 걸릴 줄 몰랐다. 라우터 기능 없이 online-timer.js 파일에서 동적으로 html을 그려 진행하기로 했다.
후 일단 넘어가자. 기능 먼저 구현하고 고민해보기로 한다..

<한 일>

• 페이지 이동 부분의 콘솔 범벅..(실패)
• 스톱워치 페이지 레이아웃
• 스톱워치 기능 로직 구상
  • 분 초 밀리초 단위로 나눈 후 start stop 버튼 시작
  • start 버튼을 누르면 record로 글자가 바뀌게
  • 그 상태에서 stop을 누르면 restart, reset 글자로 바뀌게
  • 시간 기록 남기기

(2023.11.20)(til78)

<프로젝트 진행>
스톱워치 기능 구현 중 start버튼과 stop버튼으로 시간이 가고 멈추게 하는 건 구현했지만 다시 재시작을 눌렀을 때 정지해 있던 시간만큼 추가로 출력되는 문제가 생겼다.(ex. 5초에 stop버튼 누른 후 10초 뒤 다시 start버튼 누르면 6초가 아닌 16초가 출력됨)

<한 일>
-start, stop 버튼으로 스탑워치에서 시간 출력 기능 구현

(2023.11.23)(til80)

<프로젝트 진행>
고민하고 구글링 하다가 나랑 비슷한 문제로 고민한 사람의 블로그에서 힌트를 얻었다!

STOP 버튼을 눌렀을 때 전역변수에 STOP 시점의 시각을 저장하고, 재시작 버튼을 눌렀을 때의 시각에서 STOP시점의 시각을 빼면 된다.

if(!stTime) {
    stTime = Date.now()	
  } else {
    stTime += (Date.now() - endTime)
  }

이 부분은 스톱워치가 처음 시작될 때를 처리하는 부분인데, 조건문 if (!stTime)은 stTime이 0 또는 falsy한 값일 때 실행된다.
처음에는 이 값이 설정되어 있지 않으므로 (!stTime이 true가 됨) 이 조건이 참이 되고, 그 아래의 코드 블록이 실행된다. 현재 시간을 나타내는 Date.now()를 사용하여 stTime에 값을 할당하여 스톱워치가 처음 시작될 때 stTime이 현재 시간으로 설정되게 했다.
이 조건문을 사용하여 스톱워치가 처음 시작될 때만 초기화를 진행하고, 이미 시작된 상태에서는 초기화를 건너뛰어 스톱워치가 계속 진행되게 하였다.

<한 일>

• stopwatch 기능 수정(완성)
• stopwatch UI 구현

(2023.11.24)(til81)

<프로젝트 진행>
드디어 clock.js를 화면에 띄울 수 있게 됐다!!!
그 동안 DomcontentLoaded 이벤트를 메인 자바스크립트 파일에서 못 불러오는 게 문제였는데
document.readyState로 readyState를 검사해서 콜백을 실행해주는 방식으로 해결하였다.
(참고 블로그)

<한 일>

• clock.js파일 불러오기
• css 마무리

(2023.11.27)(til82)

<프로젝트 진행>
이제 알람 페이지만 완성하면 얼추 온라인 타이머 페이지 만들기가 끝난다. 다른 웹페이지들의 알람 기능이 어떤 식으로 구성돼있는지 조사하고 내 알람 페이지 UI를 구상하였다.
알람 탭 클릭 시 알람 페이지가 뜨는 것까지 완료.

<한 일>

• 알람 탭 클릭 시 알람 페이지 로드
• 알람 페이지 UI 구상

(2023.11.28)(til83)

<프로젝트 진행>
타이머의 마지막 기능인 알람 기능 구현을 시작했다. 원래 계획대로 알람 페이지에서도 현재 시각을 항상 보여주고, 그 밑에 내가 설정한 시간과 남은 시간을 보여주는 형식이었는데 문제가 생겼다. 현재 시각이 처음 페이지 로드할 때만 표시되고, 다른 페이지들을 들어갔다가 돌아오면 현재 시각이 호출되지 않았다. 아무래도 dpTime() 함수 호출하는 부분에서 문제가 생긴 것 같은데..

<한 일>

• 시간 업데이트 로직 수정 : 맨 처음에만 현재 시간이 표시되는 이유는 dpTime() 함수가 페이지가 로드될 때 한 번만 호출되기 때문이었다. dpTime() 함수를 호출하여 현재 시간을 표시하는 부분을 DOMContentLoaded 이벤트 핸들러 내부에서만 호출하는 것이 아니라, setInterval에 의해 주기적으로 호출되도록 setInterval 내부로 이동하여 해결.

(2023.11.30)(til84)

<프로젝트 진행>
알람 시간 설정은 오후와 오전, 시, 분 이렇게 세 부분으로 나눠서 설정할 수 있게 했다. 시간 설정 후 알람 시작 버튼을 누르면 내가 설정한 알람 시간이 "오전(오후) 몇시 : 몇분" 형식으로 뜨고 그 밑에 남은 시간이 시 분 초 단위로 뜨게 구현했다.

<한 일>

• 알람 시간 설정 후 시작 버튼 클릭시 설정 시간과 남은 시간이 뜨도록 구현
• 시간 설정 버튼, 설정한 시간 및 남은 시간 보여주는 UI 구현
  시간을 설정하는 부분은 < input type="time" >을 사용하여 다양한 브라우저와 장치에서 일관되게 작동되도록 함
• 남은 시간을 시 분 초 순으로 00 : 00 : 00 형식으로 표현
  • 한 자리 수의 시간, 분, 초를 두 자리로 맞추기 위해 padStart(2, "0") 메서드 사용

(2023.12.04)(til85)

<프로젝트 진행>
이제 레이아웃 조금만 더 다듬고 알람 종료 알림창 부분과 에러 메시지 부분만 끝내면 온라인 타이머 페이지 완성이다!

<한 일>

• 알람 설정 버튼에 클릭 이벤트 리스너를 추가 후 설정한 시간이 다 되면 알람창이 뜨도록 구현
• 알람 완료 알림창 확인 또는 취소 버튼 클릭 시 초기화
  • 알람 진행 도중에도 취소 버튼 클릭 시 초기화 되도록 구현
• 알람 시간을 설정하지 않고 시작 버튼을 눌렀을 때 에러 메시지 띄우기