[자바스크립트 프로젝트] 일정 관리 웹페이지

💁‍♀️프롤로그

자바스크립트의 개념만 공부하지 않고 실제 프로젝트를 만들어 보는 것이 실력을 향상시키는 데 더 좋다고 생각했습니다. 그래서 만든 일정 관리 웹페이지! 완성하기까지 우여곡절이 많았지만 결과론적으로 만족! 어떻게 만들었는지, 무슨 문법을 썼는지 최대한 자세히 기록해보겠습니다.

 

📋소개

기능을 구현하는 것도 좋지만 디자인적인 부분도 함께 보여줘야 사용자들이 만족할거라 생각했습니다. 그래서 프로젝트를 구현하면서 디자인도 기능 못지 않게 관심을 기울였는데요. 현재 유행에 맞는 디자인을 적용하고 싶어 곰곰히 생각하다 레트로라는 키워드를 생각했습니다. 디지털 카메라, 필름 카메라, Mp3, 복고풍 패션 등 레트로가 유행하기 때문에 이를 디자인에 적용하기로 결정했습니다. 여러 디자인 중 마이크로소프트의 윈도우 98을 이용한 디자인을 구현하기로 했습니다.

 

시작 페이지

시작 페이지 입니다. 옛날의 느낌이 나지 않나요? 글씨체 역시 윈도우의 글씨체를 이용했습니다. 글씨체를 이용할 때 스크립트 코드를 이용하여 폰트를 적용할 수도 있지만 css에 @font-face를 이용하여 컴퓨터 안에 설치된 폰트를 적용할 수도 있습니다. 실제로 저 역시 폰트를 다운받고 해당 기능을 이용하여 폰트를 웹페이제 적용했습니다.

@font-face {

  src: url("../font/W95FA.otf");

  font-family: "window98";

}

body {

  font-family: "window98";

}

 

사용자의 명령을 입력받는 곳은 form 태그 안에 input 태그를 넣었습니다. 사용자 이름을 입력고 엔터를 누르면 자바스크립트를 이용해 메인페이지로 넘어가게끔 만들었습니다. form에 submit 이벤트를 걸어 해당 이벤트가 발생하면 새로고침이 되지 않고 input의 값은 저장한 채 메인 페이지로 넘어가게 코드를 작성했습니다.

function joinHandler(e) {

    e.preventDefault();

    const userName = joinInput.value;

    localStorage.setItem("userName", userName);

    joinWrap.classList.add("hidden");

    joinGreeting(userName);

  }

  const userName = localStorage.getItem("userName");

  function joinGreeting(userName) {

    mainWrap.classList.remove("hidden");

    windowGreeting.innerText = `hello, ${userName} enjoy yourself!`;

  }

 

하지만 여기서 문제가 발생합니다. 새로고침을 하면 이미 사용자 이름을 입력했음에도 다시 시작페이지로 넘어가죠. 이 문제를 해결하기 위해 사용자 이름을 localStorage를 이용해 저장하고, localStorage에 값이 있다면 시작 페이지가 아닌 메인 페이지로 넘어가게끔 로직을 작성했습니다.

  if (userName) {

    joinGreeting(userName);

  } else {

    joinWrap.classList.remove("hidden");

    joinForm.addEventListener("submit", joinHandler);

  }

 

사실 처음부터 해당 디자인은 아니였습니다. 초기에 만든 프로젝트는 아래 사진입니다.

원래 만들었던 페이지

많이 허접하죠? ㅎㅎ;; 사실 저도 처음 만들고 나서 이게 맞나 싶었습니다. 기능만 구현하면 됐다고 생각하다 그래도 제 기준엔 마음에 들지 않았습니다. 그동안 만든 시간과 노력이 아깝지만 더 좋은 프로젝트를 만들기 위한 밑바탕이라 생각하고 다시 만들었습니다.

 

메인 페이지

다시 만든 메인페이지 입니다. 어떤가요? 예전 윈도우의 느낌이 나나요? ㅎㅎ 창같은 경우 기본 css를 만들고 후에 필요한 경우 클래스를 추가해 css를 보완하는 방법을 이용했습니다. 아래처럼요

.window-container {

  position: absolute;

  top: 90px;

  left: 180px;

  width: 300px;

  height: 150px;

}

.window-weather-time-container {

  margin-top: 7px;

  width: 100%;

}

 

전체를 감싸는 div를 만들고 position: relative 속성을 넣었습니다. 그 안에 아이콘과 창을 넣어 코드를 작성했습니다. 아이콘의 경우 이미지와 이름을 하나의 div 태그 안에 작성한 후 position: absolute 속성을 통해 배치했습니다. 창역시 positon: absolute 속성을 이용했습니다.

---

 

인사말 부분은 가입 화면에서 받았던 input의 값을 넣었습니다. 인사말을 넣는 태그를 querySelector로 가져 온 후, 해당 태그에 innerText를 통해 값을 넣었습니다.

 function joinHandler(e) {

    e.preventDefault();

    const userName = joinInput.value;

    localStorage.setItem("userName", userName);

    joinWrap.classList.add("hidden");

    joinGreeting(userName);

  }

---

 

시간 부분은 Date( ) 함수를 이용했습니다. Date 함수는 현재 시간, 날짜를 가져오는 함수입니다. new 키워드를 통해 Date 객체를 생성하고 .getHours .getMinutes 등의 속성을 통해 현재 시간을 가져왔습니다. 이후 가져온 시간 값을 변수에 저장해 마찬가지로 innerText를 통해 넣었습니다.

  function timeHandler() {

    const date = new Date();

    const hours = String(date.getHours()).padStart(2, "0");

    const minutes = String(date.getMinutes()).padStart(2, "0");

    const seconds = String(date.getSeconds()).padStart(2, "0");

    windowTime.innerText = `${hours}:${minutes}:${seconds}`;

  }

  timeHandler();

  setInterval(timeHandler, 1000);

 

초가 지날수록 시간이 변하는 것을 보여줘야 하기 때문에 setInterval 함수를 이용했습니다. 다만 화면을 새로고침하면 설정한 시간 뒤에 함수가 실행되므로 바로 시작되도록 함수를 한번 실행하게끔 만들었습니다.

---

 

달력 역시 Date 함수를 이용했습니다. Date 안의 특정 날짜를 넣으면 해당 날짜, 요일을 가져옵니다. Date 함수를 통해 현재 월의 첫날과 마지막 날을 가져왔습니다. 이후 if 문을 통해 첫날의 요일 직전까지 빈칸을 채우게끔 만들고 마찬가지로 if 문을 통해 if문으로 마지막 날까지 숫자를 채우게끔 만들었습니다.

let firstDay = new Date(year, month, 1); // 첫날

  let firstDayIdx = firstDay.getDay(); // 첫날의 요일, 일:0 ~ 토요일: 6

  let lastDay = new Date(year, month + 1, 0); // 현재 월의 마지막 날

  let numberOfDays = lastDay.getDate(); // 31 출력

  let format = date.toLocaleDateString("en-US", {

    year: "numeric",

    month: "long",

    timeZone: "Asia/Seoul",

  });

  display.innerText = format;

  // 빈칸 생성

  for (let i = 1; i <= firstDayIdx; i++) {

    const div = document.createElement("div");

    div.innerHTML += " ";

    days.appendChild(div);

  }

  // 날짜 입력

  for (let i = 1; i <= numberOfDays; i++) {

    const div = document.createElement("div");

    const currentDate = new Date(year, month, i);

    div.dataset.date = currentDate.toLocaleDateString();

    div.innerText += i;

    days.appendChild(div);

  }

---

 

비디오 경우 ifame 태그를 이용했습니다. 원하는 영상을 유튜브에서 찾고 공유하기 > iframe 태그를 이용하면 원하는 영상을 넣을 수 있습니다.

<iframe

              width="560"

              height="315"

              src="https://www.youtube.com/embed/wZpb3_DpQbQ?si=7E24ls-VHaY95zUi"

              title="YouTube video player"

              frameborder="0"

              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

              referrerpolicy="strict-origin-when-cross-origin"

              allowfullscreen

            ></iframe>

---

 

메모 입력의 경우, 로그인 화면과 같습니다. 메모를 입력하는 창은 form 태그 안에 input을 넣고, 후에 form에 submit 이벤틀걸어 input 값이 메모장에 넣도록 만들었습니다. 

 function showMemo(memo) {

    const list = document.createElement("li");

    list.id = memo.id;

    list.classList.add("window-memo-item");

    const listStyle = document.createElement("span");

    listStyle.classList.add("window-memo-list-style");

    const memoContent = document.createElement("div");

    memoContent.classList.add("window-memo-item");

    memoContent.innerText = memo.memo;

    list.appendChild(listStyle);

    list.appendChild(memoContent);

    memoList.appendChild(list);

    listStyle.addEventListener("click", deleteMemo);

  }

 

🔓마무리

한번 뒤업기도하고 여러 우여곡절이 많았지만 잘 마무리한 프로젝트! 아직 미숙하지만 이것 역시 더 나은 개발자가 되기 위한 발판이라고 생각합니다. 동시에 처음부터 끝까지 제 손을 거쳐 만들어서 그런지 더욱 애정이 가기도 하고요 ㅎㅎ 

제 글을 보고 조금이나마 도움이 되셨으면 좋겠습니다. 깃허브 링크도 걸어둘테니 필요하시다면 얼마든지 방문해주세요!

 

GitHub - dooheeyaa/window98-diary.github.io