사용 스택
언어 : html, css, javaScript
배포 : netlify
개발 왕초보인데, 아이디어만 넘쳐나는 것 같아 억울합니다. ㅠㅠ
코딩 실력만 좋았다면 만들 수 있었던 소프트웨어 서비스가 정말 많은데....
그래도 지금 만들 수 있는 간단한 서비스부터 차근차근 하나씩 만들어 보려 합니다.
완성 후 배포까지 진행된 제 첫 번째 소프트웨어 서비스는
'Due Date Timer' 입니다.
DueDateTimer 서비스 개요
기존의 타이머들은 3분, 5분과 같이 카운트다운을 진행할 시간을 정확하게 알고 있는 경우에만 사용이 가능했습니다. 하지만 Due Date Timer는 마감 일자나 시간이 명확한 경우에 더욱 편하게 사용할 수 있습니다.
만약, 내일 오후 1시 45분까지 끝내야 하는 과제가 있습니다. 남아있는 시간을 계산해서 타이머로 맞춰 시작을 누르는 과정 자체가 너무나도 번거로울 뿐만 아니라, 시간을 계산하는 동안 이미 시간이 한참 지나가서 남아있는 시간을 다시 계산해야 하는 뫼비우스의 띠 상황이 벌어집니다.
Due Date Timer는 마감 일자나 시간만 입력해 주면, 해당 마감 시간으로부터 현재 시간을 빼서 남은 시간을 기존 타이머 형태와 같이 출력해 줍니다.
프로젝트 후기 그리고 배운점
이번 서비스를 만들고, 배포까지 해보면서 정말 너무 많은 것을 배웠습니다.
netlify.app 을 통해서 무료로 웹 코드를 웹 사이트로 배포가 가능하다는 것을 배웠고, netlify.app 사용법 또한 익힐 수 있었습니다.
이번 프로젝트를 통해 배운 것 중 가장 중요한 것은 html, css, js 코드의 이름입니다. html 코드의 head 부분에 파일명만 정확하게 입력해 주면, html 과 css 그리고 javascript 코드가 서로 연동되는데 아무 문제가 없었습니다. 하지만 이것은 로컬 pc에서만 가능했습니다. 웹사이트로 배포까지 하려면 반드시 index.html, style.css이라는 이름을 사용해 줘야 합니다. 다른 이름의 css 파일로 배포했다가, 로컬 pc에서는 잘만 되는데, 웹사이트에서는 css 효과가 전혀 들어가지 않아서 당황했습니다. html 파일은 index라는 이름을, css 파일은 style이라는 이름을 사용해야만 합니다. 반드시.
마지막으로 css 효과는 반드시 vh, vw (뷰포트) 단위를 쓰자입니다. 기기가 너무 다양해져서 px(픽셀) 과 같은 단위를 사용했다가는 pc에서는 아무 문제가 없지만, 태블릿과 스마트폰에서는 완전히 다른 레이아웃을 지닌 웹사이트가 나타나는 것을 경험할 수 있습니다. 제가 그랬습니다..
너무 간단하고 빈약하지만, 그래도 이렇게 하나의 서비스를 만들어보니 나름 뿌듯합니다. 개발 공부 인생에 있어서 정말 잊지 못할 날이 될 것 같습니다. 😁
