22.07.03 - 22.07.07 ( VSCode 단축키, Prettier - Code formater, getElementsById VS querySelector(), addEventListener() )

HaByungNo·2022년 7월 7일
0

개발일지

목록 보기
4/4

개발환경

HW : Windows10 64bits
개발툴 : Visual Studio Code


Pycharm 유료버전인 Pycharm Professional을 사용중이긴 하지만
그래도 구관이 명관이라고
원래 써본적이 있던 VSCode도 사용해 보기로 했다.

자주쓰는 VSCode 단축키 모음

ctrl + x : 커서가 위치한 행 잘라내기, 삭제
ctrl + c : 커서가 위치한 행 복사
ctrl + Enter : 커서 아래 행 빈줄 생성
ctrl + Shift + Enter : 커서 위행 빈줄 생성
ctrl + alt + or : 다중선택해서 동시에 수정
ctrl + l : 주석
ctrl + k c : 블럭 주석
ctrl + f : 찾기
ctrl + h : 현재페이지 문자열 수정
ctrl + Shift +h : 폴더 내 모든 문자열 수정
alt + shift + or : 위,아래에 해당 행 복사
alt + l o : Live Server ON

Extension 추가

Prettier - Code formater
자동으로 코드를 정리해주는 Extension

인스톨 한 후 직접 단축키를 지정해줘야 한다
나는 파이참과 동일하게
ctrl + alt + l 로 했다.

몇가지 설정만 바꿔준다
Prettier는 들여쓰기 초기값이 2칸 공백이라
탭공백에 익숙한 내가 쓰기엔 좀 불편하다

2를 4로 바꿔주고

한줄 제한은 80에서 160으로 늘려준다.
이렇게 자기 입맛에 맞게 설정해서 쓰면 된다.


getElementsById VS querySelector()

  <body>
    <div id="titleBox">
      <h1 id="title" class="nice_font">나는 제목이야!</h1>
    </div>
  </body>

위와 같은 코드에서 제목을 가져와서 이를 title 이라는 변수에 할당하려 한다.

getElementsById 로 하면

const title = document.getElementsById('title').innerText;
//id를 통해 엘리먼트를 반환한다. 
//만약 document에 구체적인 ID의 엘리먼트가 없다면 null을 반환한다.

querySelector 로 하면

const title = document.querySelector("#title").innerText;
// selector의 구체적인 그룹과 일치하는 document안 첫번째 엘리먼트를 반환한다. 
// 일치하는게 없으면 null을 반환한다.

querySelectorAll 은 selector와 일차하는 모든 elements를 가져온다.


addEventListener()

// 구문
addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

문법 참고

  • 사용 예시
const title = document.querySelector("#title").innerText;
// 위에서 원하는 element를 가져와서 title이라는 변수에 할당했다.

// 함수를 정의한다.
function handleTitleClick() {
    if (title.className === 'colorChanges') {
        title.className = ''
    } else {
        title.className = 'colorChanges'
    }
}
// title object에 className을 가져와서 
//'colorChanges'와 같으면 그대로 두고 다르면 
//'colorChanges'로 바꾸는 함수를 정의 하였다.

css는 아래와 같이 작성한다

h1 {
    color: darkblue;
}
.colorChanges {
    color: cornflowerblue;
}

addEventListener()의 일반적인 대상은 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체가 대상이 될 수 있다.

여기서는 title이라는 element를 대상으로 한다.

title.addEventListener("click", handleTitleClick);
// title element 를 클릭 할때 handleTitleClick 함수를 실행한다.
// 주의사항) 함수 옆에 괄호()를 붙이지 않는다.


이와같이 동작한다.
클릭할 때마다 class가 바뀌는걸 볼 수 있다.



코드 간략화 하기

에러위험 줄이기
위에 작성한 addEventListener()의 사용 예시 처럼 해도 잘 동작하지만 단점이 있다.

  • 클래스명에서 사소한 오타만 나도 동작이 되지 않는다.
  • 만약 CSS가 수정된다면 JS 코드까지 모두 수정해야한다.

결론적으로 유지보수의 편의를 위해선
코드를 다음과 같이 수정하는것이 좋을 것 같다.

1. 변수에 클래스명을 미리 할당한다.

function handleTitleClick() {
    const clickedClass = 'colorChanges';
    if (title.className === clickedClass) {
        title.className = '';
    } else {
        title.className = clickedClass;
    }
}
// 이렇게 하면 클래스명을 수정해야 할때 변수만 수정해주면 된다.

1-1) 하지만 이미 기존 class 가 존재하는 상황에서 기존 class를 남기고 다른 class 를 추가 하고 싶은 경우엔 어떻게 할까?

  <body>
    <div id="titleBox">
      <h1 id="title" class="nice_font">나는 제목이야!</h1>
    </div>
  </body>

"nice_font" CSS 는 아래와 같다.

.nice_font {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

위 코드에 "nice_font" 라는 클래스를 유지하면서 'colorChanges'라는 클래스를 추가 하고 싶다면

function handleTitleClick() {
    const clickedClass = 'colorChanges nice_font' ;
    if (title.className === clickedClass) {
        title.className = 'nice_font';
    } else {
        title.className = clickedClass;
    }
}
// 이렇게 변수에 'colorChanges nice_font' 함께 할당하는 방법도 있지만
// 좋은 방법은 아니다.

더 좋은 방법은
classList 객체를 사용하는 방법이다.

function handleTitleClick() {
    const clickedClass = 'colorChanges' ;
    if (title.classList.contains(clickedClass)) { // 만약 clickedClass라는 변수에 할당된 문자열이 class 명에 포함되어 있다면
        title.classList.remove(clickedClass); // 제거해라
    } else { // 그게 아니면 clickedClass라는 변수에 할당된 문자열을 해당 클래스에 추가해라
        title.classList.add(clickedClass);
    }
}

라는 코드가 되겠다.
이렇게 class 를 추가, 제거, 찾기가 가능하지만
이거보다 더더더 좋은 방법이 있다.


최종코드

위 방법보다 더 코드를 간략화 할 수 있다.
바로 toggle 객체를 사용하는 것

function handleTitleClick() {
    title.classList.toggle('colorChanges')
}

title.addEventListener("click", handleTitleClick);
// toggle 은 title의 classList 에 colorChanges 라는 class가 있는지 확인하고 만약에 있다면 제거한다.

이렇게 코드 한줄로 끝난다.

최종 동작 모습
최종 동작 모습

profile
프라고

0개의 댓글