231029 TIL

주말의 간단한 TIL

24일 부터 시작됐던 팀 프로젝트.
현재 우리10팀 uNdeFind의 결과물은 거의 완성이 다 되어간 시점이라 판단한다.
(나만의 생각일수도)
그렇기에 그리 급하다거나 밤을 새어가며 작업할 것은 없다.

하지만 그렇다고 한들, 주말에 마냥 쉬는 것은 또 아니라고 느껴진다.
사실 토요일엔 평일에 부족했던 수면을 보충한다고 거의 기절했다가 깨어났다.

그렇기에 무튼, 일요일은 조금이라도 vscode를 만져봐야 겠다고 생각했다.

곧바로 떠오른 것은 detail.html 페이지의 css에 관련한 작업이다.

내가 맡은 영화 상세정보 카드의 css를 어느 정도 끝냈다고 생각했지만, 같은 페이지에 노출될 review.css의 디자인이 내 것과 흡사하지는 않았기 때문이다.

review.css, review.js 부분은 같은 팀원 분이 작업한 것인데, css의 경우엔 그 팀원분과 내가 추구하는 디자인의 방향성이 같다고 볼 순 없었다.
그건 개인의 취향 차이나 이런 문제가 아니라, 애초에 초기 디자인 구성 당시에 구체적인 논의를 안했기 때문이라고도 볼 수 있다.
(이건 오늘 작업하면서 느낀 바다.)
(아 뭔가 처음에 디자인을 구체적이고 뚜렷하게 그려서 출발하는 게 좋겠구나. 라는 생각이 들었다.)
어쨌든, 그렇게 가벼운 마음으로 css작업을 들어갔고 내 나름의 디자인을 완성(?)시킬 수 있었다.

최대한 심플하면서도 무성의하게 보이지 않게끔 노력했으며, 저장버튼, back, top버튼의 색상을 통일화시켰다.
조금 더 욕심을 내자면 손을 댈 곳이 좀 더 있었으나, 그렇게 바뀐 후에 있을 충돌에 대해 조금 겁을 먹고서 이번엔 여기서 만족하자. 같은 생각을 했다.
헌데 그러던 중, 팀원 분께서 추가하신 기능에서(이름순/별점순/최신순으로 나열하던 기능) 영화 카드를 클릭했을 때 detail.html로 이동하지 않는 것을 발견했다.
구체적인 문제점을 짚고 넘어가자면, 이름순/별점순/최신순 버튼을 눌렀을 때, detail.html 페이지로 넘어가는 click 이벤트 리스너가 작동하지 않는다는 거다.
개발자 도구를 통해서 어떠한 오류가 발생했는지 파악하려고 했지만 딱히 오류가 뜨지 않았다.
이 부분에서 나는 살짝 멘붕이 올 뻔 했다.
뭐 기능이 작동하지 않으면 오류가 일어나야 문제를 추적해갈 텐데, 그 오류조차 보이지 않으면 추적의 단서에 대해 감을 잡을 수가 없으니까 말이다.

그래서 좀 고민을 하다가 결국엔 기계 친구에게 도움을 좀 요청했다.

역시 기계 친구라서일까, 약간의 해답과 동시에 단서를 추리할 수 있는 부분을 줬다.

일단 나는 Click EventListener에 대해 문제가 있다고는 어렴풋이 추측했지만...
기계 친구는 이름순, 별점순, 최신순으로 정렬한 후에 click EventListnener가 제대로 연결되어 있지 않다고 확실히 짚어서 알려줬다.
그 부분에 대해서 보자마자, 머릿속에서는 강의로 들었던 것중 하나가 스쳐갔다.
내가 그리 기억력이 좋다거나 똑똑하지 못해서, 구체적으로 설명하지는 못하겠지만 무튼 함수의 재사용에 관한 것이다.

이게 참 사람 입장으로서 보면 융통성 없다고 볼 수 있는 부분인데, 컴퓨터 입장으로서는 입력해주지 않았으니까 작동하지 않는 것이 당연한 부분이다.

것도 그럴게, detail.html 페이지로 가는 click EventListnener는 이미 홈 화면이 출력됐을 때 한 번 작동한다.

그런데 click EventListnener가 이미 작동한 뒤의 홈 화면에서 이름순/별점순/최신순으로 다시금 홈 화면을 조정하면, click EventListnener가 지정되어 있지 않기 때문에 동작하지 않는 것이 당연하다.

즉, 이름순/별점순/최신순으로 재정렬된 홈 화면에도 detail.html로 이동하기 위한 click EventListnener를 지정해줘야한다는 거다.

다행히도 그 부분은 그리 어렵지 않게 수정할 수 있었다.

<script>
document.querySelector('.nameAlignment').addEventListener('click', () => {
  const nameAlignment = movies.sort(function (a, b) {
    let titleACode = a.title[0].charCodeAt(0);
    let titleBCode = b.title[0].charCodeAt(0);
    if (titleACode <= 12593) titleACode += 999999;
    if (titleBCode <= 12593) titleBCode += 999999; //(ascii코드)한글을 큰 숫자로 표현해서 한글->숫자->영문순으로 정렬
    return titleACode < titleBCode ? -1 : titleACode > titleBCode ? 1 : 0;
  });
  moviesContainer.innerHTML = '';
  displayMovies();

  alertId(); // detail.html 로 이동시키기 위해, alertId EventListener 를 재사용.
});
</script>

상기된 코드에서 .nameAlignment가 실행됐을 때, alertId 함수를 불러오게 만들어서 detail.html로 이동하게 만들어주면 될 일이었다.

물론 alertId를 이름순/별점순/최신순 모조리 추가해주는 것이 조금 비효율적으로 느껴지긴 했는데, 이 점에 대해서는 개인적으로 아마 더 공부해야할 부분이라 생각이 든다.

오늘은 여기까지.