2023_10_09 TIL [Project 코드 리뷰]

스파르타 내일배움캠프 첫 프로젝트로 팀 소개 페이지를 만들고 난 후 코드리뷰를 하며 배웠던 사실들을 적어두려고 한다.

 

모듈화의 조건

1.독립성

2. 단일 책임 원칙

3. 재사용 가능성

4. 캡슐화

 

모듈화의 조건에는 위의 네 가지가 필요하다. 

몇 가지만 추가적으로 정리해 보자면 
단일 책임의 원칙이란 모듈화를 한 파일은 명확하게 한 가지 기능만 해야 한다는 것이다.

캡슐화는 지정한 변수나 함수를 다른 파일에서 바꿀 수 없게 만드는 것이다.

 

모듈화를 하는 이유

 

'코드의 유지, 보수에 좋다'와 같은 것들을 빼고 다른 부분들을 설명하자면 다음과 같다.

1. 다른 페이지에서 할당한 변수나 함수를 또 다른 페이지에서 마음대로 가져다 쓰면 scope가 뒤죽박죽이 될 수 있기 때문에 모듈화를 하는 것이 좋다.

2. 필요한 부분만 import해서 쓰게 된다면 메모리 효율에 좋다.

 

---

 

코드리뷰에서 배운 부분

 

e.preventDefault()

function handleTeamButtonClick(e) {
  e.preventDefault();

  $("#today-area").hide();
  $("#member-button-box a.member").hide();
  $elements.cardArea.hide();
  hideElements($memberCardElements);
  otherUIElements.forEach((value) => $(value).hide());

  $elements.commentSection.show();
  showElements($teamInfoElements);
}

 

검색해보면 e.preventDefault()는 Event 인터페이스의 메서드이고 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본동작을 실행하지 않도록 지정한다고 되어 있다.

 

위의 코드만 보게 된다면 왜 이러한 Event 메서드를 사용해야 하는지 모른다. 정확히는 이 함수가 실행되는 이벤트의 실행 주소가 중요하다.

 

    $("#team-button-box a").on("click", (e) =>
      handleTeamButtonClick(e) 
    );
    $("#member-button-box a[href='#member-info']").on("click", (e) =>
      handleMemberButtonClick(e)
    );

앞서 지정한 함수는 위의 코드에서 볼 수 있듯이 #team-button-box 아래의 a 태그에 대해서 실행하게 된다.

우리가 만든 웹 페이지는 한 페이지 내에서 동작하는 페이지인데 링크를 통해 다른 페이지로 이동하는 a 태그가 붙게 될 경우 지정해주지 않은 페이지 이동을 막으려고 작성하는 코드이다.

 

 

setTimeout

 

: setTimeout((0=>function, ms) 의 형태로 사용한다. 정해둔 ms가 지난 이후 function을 실행하게 되는 비동기 메서드이다.

setTimeout 함수는 timeout id라고 불리는 숫자를 반환하는데 이는 settimeout함수를 호출할 때마다 내부적으로 생성되는 타이머 객체를 가리킨다.

 

여기서 중요한 점은 위에 적어둔 함수가 작동하지 않는 이상 setTimeout이 작동하지 않는다는 것이다.

function showWelcomeScreen() {
  $elements.welcomeScreen.show();

  setTimeout(() => {
    $elements.welcomeScreen.hide();

    $elements.todoList.show();
    $elements.cardArea.show();
    $elements.teamNameLabel.show();
  }, 2000);
}

위 코드에서 보면 $elements.welcomeScreen.show(); 가 실행되지 않으면 아래의 setTimeout은 실행되지 않는다.

 

 

clearTimeout

 

setTimeout의 timeout id 값을 cleartimeout()의 파라미터로 넣고 clearTimeout함수를 호출하면 기다렸다가 실행될 함수를 취소할 수 있다.

 

 

 

DOM tree의 효율성

const uiElementSelector = {
  welcomeScreen: "#welcome",
  todoList: ".main-box__todolist",
  memberElements: ".member",
  membersInfoContainer: ".members-info-box",
  teamInfoContainer: ".team-info-box",
  commentSection: "#comment-box",
  cardArea: ".card-container",
  memberCardsElement: ".membercard",
  introductionTexts: ".Introduction",
  crawlingDivs: ".crawling_div",
  teamNameLabel: ".team-name",
};


function getElements(selectors) {
  let elements = {};
  for (let key in selectors) {
    elements[key] = $(selectors[key]);
  }
  return elements;
}

const $elements = getElements(uiElementSelector);
const $memberCardElements = getElements(memberCardUIElementSelector);
const $teamInfoElements = getElements(teamInfoUIElementSelector);

위 코드에서 변수를 지정해주고 난 뒤에 getElement라는 함수를 통해 element로 값을 받고 다시 한 번 값을 $element에 재할당 해주는 이유가 있다. 

변수들을 재할당 할 필요 없이 그대로 써서 DOM 객체에 직접적으로 접근할 수도 있지만 변수에 재할당 해줌으로써 주소 값만 참조해서 사용하게 되면 훨씬 효율적이기 때문이다.

 

 

this

 

this는 이벤트가 실행된 주소를 객체의 형태로 가져온다.

실행되는 메서드, 함수가 없다면 this가 포함되어 있는 것의 주소를 가져온다.

(옛날에 배웠던 부분 같은데 this가 어디에도 포함되어 있지 않다면 window객체를 불러온다고 했던 것 같다.)

 

추가적으로 ' => '(화살표 함수)는 this를 반환하지 않고 전역 this를 반환한다. 따라서 상위 scope의 함수로 받아온다.

 

 

JQuery 문법

 

const $elements = getElements(uiElementSelector);

$(document).ready(function () {
  hideElements($elements);

  showWelcomeScreen();

  setupEventHandlers();

  function setupEventHandlers() {
    $("#team-button-box a").on("click", (e) =>
      handleTeamButtonClick(e)
    );
    $("#member-button-box a[href='#member-info']").on("click", (e) =>
      handleMemberButtonClick(e)
    );
    $elements.memberElements.on("click", function (e) {
      handleMembersClick.call(this, e);
    });
    $(".reset").on("click", (e) => handleResetClick(e));
  }
});

• JQuery는 기본적으로 html하단에 script 형태로 받아오면 사용할 준비가 끝난다.
• document.querySelector('') 를 $('')로 쓴다.
• $(document).ready(function(){ }) 는 JQuery가 들어간 함수를 실행할 때 사용한다. 일반적으로 JQuery를 쓸 때는 사용하지 않아도 된다.

여담으로, JQuery 안에 들어간 #team-button-box a는 teambutton-box 아래의 a태그라는 뜻이다. 

처음에는 JQuery문법인줄 알았는데 html 문법이었다. 

(css 로는 teambutton-box > a라고 썼었지...)

 

 

modal

// 버튼을 클릭했을 시 모달창이 띄워지게 하기
// document.querySelector('.turnOnModal_btn').on('click', turnOnModal);
document.querySelector('.turnOnModal_btn').addEventListener('click', turnOnModal);
document.querySelector('.close-area').addEventListener('click', turnOffModal);
document.querySelector('.modal-overlay').addEventListener('click', turnOffModal);


function turnOnModal(){
    // const element = document.getElementsByClassName('modal')
    // const style = getComputedStyle(element);
    // const display = style.display;
    // display = 'flex';
    document.getElementById('modal').style.display ='flex';
};

function turnOffModal(){
    document.getElementById('modal').style.display ='none';
};

다른 블로그 글을 참고해서 모달 창을 띄우고 없애는 것에 성공했다.

블로그 글과 조금 다른 방식으로 했지만 기능은 잘 돌아간다.(x누르면 꺼지고, 페이지 바깥부분을 클릭해도 꺼진다)

 

주석 쳐놓은 부분은 시도했다가 실패했던 부분이다. 왜 안되는지는 모르겠는데 일단 안된다.(오늘 이것도 물어봤어야 했는데...까먹었다)

 

모달 창을 띄우게 되었으니 달력의 날짜에 맞는 블로그 글을 modal창에 띄우는 것도 시도해 봐야한다. 일단 지금은 project의 div태그에 연결이 안된다...(내가 프로젝트에 임의로 div태그를 만들어 실행하면 잘 되던데..왜 안되는 걸까..)