231027 TIL

팀프로젝트 2일차 -3.

아니, 대체 프로젝트 시작한지 시간이 꽤 지났는데 왜 2일차야?
라고 생각함과 동시에 헛웃음을 웃으며 키보드에 손을 올린다.

뭔가 큰 깨달음을 얻거나, 스스로 디버깅을 해냈을 때.
그때마다 TIL을 작성하고 싶으나 이게 당최 어렵기만하다.

그래도 어떻게든 배운 지식과 경험이 휘발되어 날아가지 않게 하기 위해...
시간이 지났어도 이렇게 남겨야한다고, 개인적으론 그리 생각한다.

우선 지난 TIL에 이어 오늘 좀 이해한 것에 대해 설명하고자 하는 부분은..

이전 페이지로 돌아가는 버튼, 맨 위로 이동하는 버튼이다.

상단이 디폴트고 하단은 마우스 커서를 갖다 대었을 때다.

최대한 기본 디자인의 분위기와 어울리게끔 나름 css를 줬다.

그저 버튼 만들고 css 넣는 건 비교적 이제 익숙하게 하는데...후...

<body>
    <div class="backBtnContainer">
      <button id="backBtn" class="backButton">Back</button>
    </div>
    <div class="pageContainer">
      <div id="movieDetails" class="detailPage"></div>
    </div>
    <div class="toTopBtnContainer">
      <button id="toTopBtn" class="toTopButton">Top</button>
    </div>
  </body>

간략하게 하기 위해 중간의 코드는 지웠다.

우선 메인 페이지로 돌아가기 위한 Back 버튼은 아무래도 밑에 위치하기 보다, 위쪽에 위치하는 것이 유저에게 편할 것이라 생각했다.
(사실 내가 그게 편해서 그랬다.)

그래서 body 부분에 버튼을 담아둘 Container를 만들어 준 후, 그 안에다가 버튼을 집어넣었다.
또한 나중에 css, js를 생각해서 적당한 id 와 class를 부여시켰다.

(그런데 id 하나만 있어도 css까지 할 수 있지 않나?)

다음은 페이지 상단으로 즉시 이동시켜주는 버튼의 차례다.
아무래도 녀석의 존재 이유 자체가 상단으로 이동시켜주는 버튼이니, 응당 하단에 위치하는 것이 나을 것이라 판단했다.
(물론 좀 고수가 된다면, 스크롤 따라 따라다니는 툴바? 같이 만들수도 있지 않을까 싶다.)

그렇기에 body의 제일 밑부분에 위치시켜주고, Back 버튼과 동일하게 코드를 입력했다.
음..지금보니 toTopBtn이 좀 길게 느껴지기도 한다.
다음엔 좀 더 효율적인 단어로 선택해야겠다.

(여기서 왜 들쑥날쑥하게 대문자를 섞어쓰냐고 의문을 지닐 수도 있는데, 저렇게 표기하는 걸 camelcase라고 한다. _(언더바)를 사용하는 건 snake_case라고 한다.)

초라하고 작은 버튼이 웹페이지에 뿅 나타난 걸 본 뒤, 일단 css를 먹이고 js를 진행하자, 라고 생각했다.
솔직히 진행을 js->css로 안해봐서, 어떤 것이 더 효율적인지 같은 건 모르겠다. 다음엔 반대로 해보는 걸로...

<style>
#backBtn {
  width: 80px;
  height: 80px;
  /* 아무래도 깔끔한 분위기의 디자인이기에 정사각형이나 원이 어울릴 것이라 생각했고, 
여백이 꽤나 생길 것 같은 디자인을 머리에 담아두고 있었기에 각진 것 보다는 둥근 것이 좋을 것 같았다.*/
  
  background-color: #d7d7d7aa;
/* 배경화면의 색상 역시 흰 바탕과 어울리면서도 너무 시선을 뺏지 않았으면 좋겠다고 생각했다.  
그래서 나름 시선이 가고, 포인트가 될 수 있을 연한 회색계열을 선택한 후, opacity값을 좀 더 줬다.*/
  
  border: 0px solid #d7d7d7aa;
  border-radius: 50%;
/*사각형의 날카롭게 모난 사각을 border-radius로 혼내줘서 둥글게 만든다.*/
  
  box-shadow: 3px 3px 15px 0px lightslategray;
  /*마지막으론 너무 밋밋하면 또 심심하니 입체감을 위해 그림자 효과를 좀 준다.*/
}

#toTopBtn {
  width: 80px;
  height: 80px;

  background-color: #d7d7d7aa;

  border: 0px solid #d7d7d7aa;
  border-radius: 50%;

  box-shadow: 3px 3px 15px 0px lightslategray;
}
</style>
/*이후 상단으로 향하는 버튼도 같이 만들어준다. 
뭐 각각 달라도 그 맛이 있을지 모르겠지만, 지금은 통일성이 좀 더 나을 것이라 여겼다.

이렇게 만들고 나서 그 다음은?

그 다음은 컨테이너도 일단 css를 주기로 했다.

<style>
.backBtnContainer {
  width: 100px;
  height: 100px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 20px auto auto 20px;
}

.toTopBtnContainer {
  width: 100px;
  height: 100px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: auto 20px 20px auto;
}
</style>

그 버튼 두 개 하는 거에 무슨 컨테이너까지 만드냐, 오히려 번거롭지 않느냐?
라고 말할 수도 있지만...
뭔가 나는 개인적으로 일단 컨테이너에 집어넣고 요리조리 움직여야 좋지 않을까? 하는 약간의 집착이 있는 것 같다.

무튼!!

저렇게 하고 나면, 버튼이 알맞게 위치했다고 말할 수 있다.
이제는 js를 해야한다...

<script>
document.addEventListener('DOMContentLoaded', function () {
  const backButton = document.getElementById('backBtn');

  backButton.addEventListener('click', function () {
    // 뒤로가기 버튼시 localstorage에서 pageNumber가 있다면 가져와 URL 생성
    window.location.href = `index.html`;
  });
});
</script>

먼저 내부 함수가 html 페이지가 로드되기도 전에 먼저 실행되지 않게끔 짜주고.
backBtn이라는 요소를 html내에서 찾아서 backButton 변수에 할당하고.
backBtn이 클릭이라는 작용에 기능하기 위해, 클릭 이벤트 리스너를 추가함.
이제 backBtn을 클릭하면 window.location.href = index.html 이것에 따라서 index.html로 이동하게 된다.

이후에는 여기서 머물던 페이지로 돌아가는 기능까지 구현하긴 했는데...
역시나 팀원 분께 도움을 많이 받았다.
그저 빛...
이 없었다면 나는 어둠 속에서 허우적거렸겠지...
손에 익혀야하는데, 이걸 개인과제에다가 구현시키던가 사이드프로젝트로 진짜 단순하게 이런 버튼만 수십개씩 직접 손으로 입력해 만들어보던가 해야겠다...

불금...그리고 내일부턴 다시 주말이다...
그래 그냥 생각한 김에 주말에 해봐야겠다.
어차피 난 미루다가 안 할 놈이니까
그나마 빠른 시일 내에 해봐야겠다.