bmyu

bmyu

What do USERS think?

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 17회차 미션 - 29강 html과 js연동

1 minute read

보통 html에서 인터렉션이 많을 경우에는 js에서도 react, vue, angular등을 쓰는 편이다.
그렇지만 기본적으로 vanilla JS로도 어떻게 구현할 수 있는지 기초는 알아두어야 활용이 원활하다.

증감버튼 만들기

그럼 먼저 + / - 버튼을 클릭하면 수량을 증감시키는 UI를 vanilla JS로 만들어보자. 증감버튼

<!DOCTYPE html>
<html>
  <head>
    <title>증감버튼 만들기</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2 id="number">0</h2>
    <div>
      <button id="increase">+1</button>
      <button id="decrease">-1</button>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

const number = document.getElementById('number');
const increase = document.getElementById('increase');
const decrease = document.getElementById('decrease');

increase.onclick = () => { //dom이름.on이벤트명 = () => {} 형태로 진행.
const current = parseInt(number.innerText, 10); //parseInt 문자열을 숫자로 변환, 10진수
number.innerText = current + 1;  
}
decrease.onclick = () => {
const current = parseInt(number.innerText, 10);
number.innerText = current - 1;  
}

이렇게 하면 버튼을 클릭하면 숫자 증감이 되는 UI를 금방 만들 수 있다. 위에서는 getElementById로 dom을 불러와줬는데 여기서 id가 없는 dom일 경우 querySelectorAll을 쓸 수도 있다.

const number = document.getElementById("number");
const buttons = document.querySelectorAll("button"); //buttons에 배열형태로 두개의 버튼이 들어가 있음.
const [increase, decrease] = buttons; 
//배열 비구조화 할당으로 꺼내줌.
//얘네는 결국 const increase = buttons[0]; const decrease = buttons[1];과 같음.

윗부분에 변수 선언 부분을 저렇게 배열 비구조화 할당을 통해 바꿔줄 수도 있다. 훨씬 간편하고 깔끔하다. 그럼 이번엔 html모달 만들기로 넘어가보자.

모달 만들기

아래같은 인터페이스를 모달이라 부른다. 이걸 js로 구동시켜 보자.
모달

위의 코드샌드박스 링크를 참고하도록 한다.
간단하게 display를 flex에서 none으로 바꾸는 방식으로 모달을 구현했다. 여기서 궁금한건 계속 반복적으로 modal이란 클래스를 한 페이지의 여러 군데서 쓰고 싶은데.. forEach를 쓰면 가능하려나? 제이쿼리에선 너무나도 당연하게 됐던 것들이 바닐라JS에선 안되서 종종 당황스럽다. 이 부분은 차차 프로젝트를 진행해나가며 해결해보도록 하자.

마치면서

고생했다.. 드디어 JS가 끝났다!! 이제 드디어 리액트 들어갈 수 있어….
오늘은 여기까지..
시청 영상 29강 1~3까지 수강인증이미지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp

Comments

You May Also Enjoy