[코드스쿼드] 1~2주차 회고록

1주차

처음 코드스쿼드에 오프라인으로 방문한 날이였다. 사람들도 다들 친절하고 금세 어울렸다.

이번에 클론 프로젝트를 진행하였는데, 개념 학습보다 우선은 미션 구현 하는 것 에 급급했던 1주였다. 처음으로 html을 이용하고 css를 이용하여 화면을 구성해보았다. 이번 한주는 무지성으로 코딩을 하다보니, 이러면 안되겠다는 생각이 문득 들었다.

2주차

html class명 고민

1주차 때 무지성으로 코딩했던 게 2주차때는 발목을 잡았다. class 명을 지었는데 이게 무슨 기능을 하는지 전혀 모르겠고, html 구조를 봐야지만 무슨 기능을 하는지 알 정도였다. 이러면 안되겠다고 생각이 들어서, 제 3자가 봐도 알아 볼 수 있을 정도로 class명을 구성해봐야겠다는 생각을 해서 bem에 대해서 자세히 알아봤다.

그렇게 class명을 구성해봤는데 구체화를 시키다보니 class명의 길이가 너무 길어져버렸다. 구조를 짤때는 처음부터 코딩을 하는게 아니라 설계를 구체적으로 시키고 BEM에 더해서 나만의 코딩 컨벤션도 만들어야겠다는 생각을 했다.

<div class="nav__shipping_popup">
              <div class="nav__shipping_popup-shape"></div>
              <div class="nav__shipping_popup-box">
                <div class="nav__login_popup-box_text">KR으로 배송할 품목을 표시하겠습니다. 다른 국가로 배송되는 품목을 보려면 배송 주소를 변경하십시오.</div>
                <div class="nav__shipping_popup-box_button">
                  <button class="nav__login_popup-box_button-ing">계속</button>
                  <button class="nav__login_popup-box_button-change">주소 변경</button>
                </div>

끝도 없이 늘어나는 class 이름...
text, img, button일때는 어떤 식으로 끝내야할지 처음에는 어떤 class명으로 시작하면 좋을지
계속 class 명을 바꾸는데 바꾸면 바꿀 수록 계속 더 좋은 이름들이 생겨서 끊임없는 뫼비우스의 굴레같다.

함수를 어떻게 하면 간략화 할까?

맨 처음 함수형으로 작성하지않고 줄줄이 나열했다. 그러면 재 사용성도 안좋고, 3자 입장에서 보았을때도 무슨 기능을 하는지 한참을 봐야해서 가독성이 많이 떨어졌다.(지금은 코드가 별로 없어서 코드를 약간만 봐도 알게 되겠지만, 코드가 더 많아지면 가독성이 정말 현저히 떨어질 거 같다)

처음에는 함수 안에도 querySelctor을 다 집어넣었다. 그렇지만, dimmedSidebar나 clearDimmedSidebar를 같은 class를 사용하기 때문에 중복된 코드를 어떻게 하면 간략화 할 수 있을까 생각해 보았다.

그래서 고민을 하다가 이런 식으로 어떤 기능에 어떤 querySelector인지 정리를 해서 모듈로 제작하여 다른 js에는 변수명만 가져와서 사용할 수 있게 제작하였다. 그러다보니, 전과 비교했을때는 깔끔해졌다. 그렇지만, 이름을 _이런 식으로 분리를 안해서 가독성이 현저히 떨어져서, 분리를 하면서 다시 작성하고 있다.(이러다가 리팩토링만 하다가… 미션 구현을 못할 거 같다)

const NAV = {
  LOGINMENU: document.querySelector(".nav__login"),
  LOGIN_POPUP: document.querySelector(".nav__login_popup"),
  SHIPPINGMENU: document.querySelector(".nav__shipping"),
  SHIPPINGPOPUP: document.querySelector(".nav__shipping_popup"),
  LOGINEXTENSION: document.querySelector(".nav__login_popup_extension"),
  LOGIN_EXTENSION_LEFT: document.querySelector(".login_extension-left"),
  LOGIN_EXTENSION_RIGHT: document.querySelector(".login_extension-right"),
};
const SIDEBAR = {
  ALL: document.querySelector(".sidebar"),
  CLOSEBUTTON: document.querySelector(".sidebar__btn_close"),
  MENUDETAIL: document.querySelector(".sidebar__all-menu_extend"),
  MENUALLBUTTON: document.querySelector(".sidebar__menu-all"),
  MAIN_MENU_DETAIL: document.querySelector(".sidebar__menu_detail"),
};

const SUBMENU = {
  ALLMENU: document.querySelector(".sub__all-menu"),
};
const COMMON = {
  DIM: document.querySelector(".dim-layer"),
};

export { NAV, SIDEBAR, SUBMENU, COMMON };

좀 더 간략화하면서 무슨 기능을 하고 있는지 한 눈에 확인이 가능하면 eventListener에서도 중복된 요소를 합쳤다. 하지만, 점점 고칠 수로 계속해서 리팩토링 할게 보여진다. 리팩토링 늪에 빠진 기분이다… 애초에 설계를 구체적으로 잘하자 ㅠㅠ

import { COMMON, SIDEBAR, SUBMENU } from "../all/allQuery.js";

const dimmedSidebar = () => {
const
  COMMON.DIM.classList.add("show_opacity", "sidebar_index");
};
const clearDimmedSidebar = () => {
  COMMON.DIM.classList.remove("show_opacity", "sidebar_index");
};

const showSidebar = () => SIDEBAR.ALL.classList.add("show_display");
const closeSidebar = () => SIDEBAR.ALL.classList.remove("show_display");

const sidebarEventListener = () => {
  SUBMENU.ALLMENU.addEventListener("click", () => {
    dimmedSidebar();
    showSidebar();
  });
  SIDEBAR.CLOSEBUTTON.addEventListener("click", () => {
    clearDimmedSidebar();
    closeSidebar();
  });
};

sidebarEventListener();

JS는 기능 제어로, 스타일은 CSS로

//개선 전 코드
const showSidebar = () => {
  ALL_SELECTORS.sidebar.style.display = "block";
};
//개선 후 코드
const showSidebar = () => SIDEBAR.ALL.classList.add("show_display");

이런 식으로 맨처음에 js에서도 css를 제어하게 제작하였다. 하지만, js에서는 기능을 제어하고 css에서만 스타일을 제어한다고 그래서 css 따로 class를 만들어서 제어하는 방향으로 다시 제작하였다.