[코딩애플] JavaScript 강의 정리 (Level3 3강 ~ 4강)

이언덕·2024년 5월 2일
스터디코딩애플프론트엔드

코딩애플

목록 보기
15/37
post-thumbnail

3강 / 데이터바인딩 숙제 & 문자중간에 변수넣는 법

문자 중간에 변수 쉽게넣기

console.log(1 + '2');// '12'출력됨

자바스크립트에서 덧셈기호 쓰면 문자이어붙이기가 쉽게 가능하다.
숫자 + 숫자는 숫자 덧셈해주는데
문자 + 숫자처럼 적어도 1개가 문자면 문자 덧셈을 해준다.
(문자덧셈은 그냥 문자2개 이어붙여준다.)

let a = '안녕';
console.log('문자' + a + '문자');// '문자안녕문자'출력됨

그래서 문자중간에 변수넣고 싶으면 덧셈기호를 활용하면 된다.


let a = '안녕';
console.log(`문자 ${a} 문자`);// '문자안녕문자'출력됨

새로운 방법을 알아보자면
백틱기호를 사용하는 방법이다.
백틱기호도 문자만들어주는데

  1. 문자 중간에 엔터키 칠 수 있다.
  2. 중간에 ${ 변수명 } 문법을 이용가능하다.

${ } 이건 문자안에 변수넣어주는 간단한 문법이다.
일반 따옴표안에선 사용불가능하다.

한번 list.js 고쳐보자

const cardTitle = document.querySelectorAll(".title");
const cardPrice = document.querySelectorAll(".price");

let products = [
  { id: 0, price: 70000, title: "Blossom Dress" },
  { id: 1, price: 50000, title: "Springfield Shirt" },
  { id: 2, price: 60000, title: "Black Monastery" },
];

cardTitle[0].innerHTML = products[0].title;
cardTitle[1].innerHTML = products[1].title;
cardTitle[2].innerHTML = products[2].title;

cardPrice[0].innerHTML = `가격 : ${products[0].price}`;
cardPrice[1].innerHTML = `가격 : ${products[1].price}`;
cardPrice[2].innerHTML = `가격 : ${products[2].price}`;

위와 같이 ${ } 방법을 사용해 보아도 결과는 똑같을 것을 볼 수 있다.



4강 / Select 인풋 다루기

select 들어간 폼을 만들어봅시다

index.html에 아래코드를 넣고 시작하자 (Bootstrap이 설치되어있으면 이쁘게 나옴!)

<form class="container my-5 form-group">
    <p>상품선택</p>
    <select class="form-select mt-2">
      <option>모자</option>
      <option>셔츠</option>
    </select>
</form>

<select> 는 <input> 이랑 똑같은데
사용자가 고를 수 있는 선택지를 드랍다운 메뉴로 제공하는 <input> 이다.
선택지는 <option>으로 넣으면 된다.

  • <select> 태그도 선택시 input, change 이벤트가 발생한다.
  • <select> 태그도 .value로 유저가 입력한 값을 가져올 수 있다.

셔츠고르면 밑에 <select> 더 보여주기


▲ 유저가 셔츠를 선택하면 하단에 95, 100 을 선택할 수 있는 <select>를 하나 더 만들어보자.
이제 우리가 배웠던 방법을 이용해서 UI를 만들어보자


어떻게 만들었냐면

미리 <select> 하나 더 추가했고 form-hide 클래스에는 display : none 주었다.

index.html

    <form class="container my-5 form-group">
      <p>상품선택</p>
      <select class="form-select mt-2">
        <option>모자</option>
        <option>셔츠</option>
      </select>
      <select class="form-select mt-2 form-hide">
        <option>95</option>
        <option>100</option>
      </select>
    </form>

index.css

.form-hide {
  display: none;
}

이제 "유저가 셔츠선택하면 form-hide 제거해주세요~" 라고 코드짜면 완성이다.

select 요소 변수로 지정

const formSelect = document.querySelectorAll(".form-select");

select의 선택한 값 가져오기 & 실험

let value = formSelect[0].value;
console.log(value);


모자가 콘솔에 잘 가져와지는 것을 볼 수 있다. (하지만 셔츠를 클릭했을 땐 콘솔에 나오지 않는다?)

유저가 셔츠를 가져왔다면 form-hide 클래스제거

if (value == "셔츠") {
  formSelect[1].classList.remove(".form-hide");
}

위처럼 코드를 완성시켜도 작동이 되지않는다. 무엇이 문제일까?


<script> 안에 대충 적은 코드는 페이지 로드시 1회 실행됨

지금 내용은 중요한 내용이기 때문에 기억해놓자
지금 "유저가 셔츠선택하면 form-hide 제거해주세요~" 라고 코드짰는데
이 코드는 <script> (js) 안에 적었기 때문에 그냥 페이지 로드시 1회 실행되고 다시는 실행되지 않는다.

그래서 저 코드를 <select> 조작할 때 마다 실행한다면 의도대로 잘 동작하지 않을까?
그렇다면 한번 이벤트리스너를 추가시켜보자

const formSelect = document.querySelectorAll(".form-select");
let value = formSelect[0].value;

formSelect[0].addEventListener("input", handleSelect);

function handleSelect() {
  if (value == "셔츠") {
    formSelect[1].removeClass("form-hide");
  }
}

<input>이나 <select> 조작할 때 input 이벤트가 발생하기 때문에 이벤트리스너를 부착해보았다.

결과가 잘 나오는 것을 볼 수 있다.


(응용)

1. '모자'를 선택했을 때 <select>를 다시 숨기는 기능도 만들어보자.

const formSelect = document.querySelectorAll(".form-select");

formSelect[0].addEventListener("input", handleSelect);

function handleSelect() {
  let value = formSelect[0].value;

  if (value == "셔츠") {
    formSelect[1].classList.remove("form-hide");
  } else {
    formSelect[1].classList.add("form-hide");
  }
}

classList.add를 활용해 '셔츠'가 아니라면 form-hide 클래스를 추가시켜 없앴다.


2. e.currentTarget아니면this`를 사용하려면 어떻게 바꾸어야할까?

const formSelect = document.querySelectorAll(".form-select");

formSelect[0].addEventListener("input", handleSelect);

function handleSelect(e) {
  let value = e.currentTarget.value;

  if (value == "셔츠") {
    formSelect[1].classList.remove("form-hide");
  } else {
    formSelect[1].classList.add("form-hide");
  }
}

value부분을 특정하지 않고 e.currentTarget 요소에 대한 값을 가져오는 방식을 통해 코드를 수정해보았다.

결과는 똑같이 정상적으로 기능되어졌다.


index 전체코드

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./index.css" />
    <title>Level3</title>
  </head>
  <body>
    <!-- <div class="container mt-3">
      <div class="card p-3">
        <span class="product">상품명</span>
        <span class="price">가격</span>
      </div>
    </div> -->

    <form class="container my-5 form-group">
      <p>상품선택</p>
      <select class="form-select mt-2">
        <option>모자</option>
        <option>셔츠</option>
      </select>
      <select class="form-select mt-2 form-hide">
        <option>95</option>
        <option>100</option>
      </select>
    </form>

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

index.js

// const product = document.querySelector(".product");
// const price = document.querySelector(".price");

// let car2 = { name: "소나타", price: [50000, 3000, 4000] };

// product.innerHTML = car2.name;
// price.innerHTML = car2.price[0];

const formSelect = document.querySelectorAll(".form-select");

formSelect[0].addEventListener("input", handleSelect);

function handleSelect(e) {
  let value = e.currentTarget.value;

  if (value == "셔츠") {
    formSelect[1].classList.remove("form-hide");
  } else {
    formSelect[1].classList.add("form-hide");
  }
}

index.css

.form-hide {
  display: none;
}
profile
이언덕
이전 포스트

[코딩애플] JavaScript 강의 정리 (Level3 1강 ~ 2강)

다음 포스트

[코딩애플] JavaScript 강의 정리 (Level3 5강 ~ 6강)

0개의 댓글