JS연습하기(user정보 화면만들기)(forEach,스프레드연산자,if문)

JS 2022. 1. 9. 03:58

function handleClick(e) {
    if (document.querySelector(".isClicked"))
    	document.querySelector(".isClicked").classList.remove("isClicked")
    e.classList.toggle("isClicked")
}

json형식의 데이터 2개를 가져와서, 스프레드 연산자를 이용해서 1개의 배열로 만들고, if문을 돌려서 해당 조건에 맞는 style로 화면 만들기

우선 데이터는

const infoList = [
        {
          name: '홍길동',
          age: 29,
          desc: '당근마켓 개발자',
          isRemoved: true,
        },
        {
          name: '임꺽정',
          age: 31,
          desc: '인프런 프론트엔드 개발자',
        },
        {
          name: '장길산',
          age: 32,
          desc: '인프런 백엔드 개발자',
        },
      ]
      const userList = [
        {
          name: '정지오',
          age: 25,
          desc: '카카오 백엔드 개발자',
          isSpecial: true,
        },
        {
          name: '주준영',
          age: 29,
          desc: '네이버 백엔드 개발자',
        },
        {
          name: '양수경',
          age: 32,
          desc: '라인 백엔드 개발자',
          isSpecial: true,
        },
      ]

.on {
        /* background-color: tomato; */
        background-color: tomato;
      }
      .off {
        background-color: #444;
        color: #fff;
        text-decoration: line-through;
      }
      .info {
        padding: 30px;
        background-color: #efefef;
        min-height: 500px;
      }
      .label {
        font-weight: bold;
        font-size: 1.2rem;
      }
      ul {
        padding: 0;
        margin: 0;
        font-size: 1rem;
        line-height: 2;
      }
      ul li {
        color: #444;
        margin-bottom: 20px;
        padding: 5px;
      }
      .isClicked {
        border: 3px solid dodgerblue;
        box-sizing: border-box;
      }
      .isSpecial {
        color: blue;
        background-color: tomato;
      }

<body>
	<div class="info">
      <h1>정보를 보여드릴게요.</h1>
      <ul id="listWrapper" style="list-style: none;">
        <!-- <li>
          <div>
            <span class="label">이름:</span>
            <span>${item.name}</span>
          </div>
          <div>
            <span class="label">나이:</span>
            <span>${item.age}</span>
          </div>
          <div>
            <span class="label">직업:</span>
            <span>${item.desc}</span>
          </div>
        </li> -->
      </ul>
    </div>
</body>

이렇게 기본형을 우선 만들고

여기서 해볼거는!

1.한개의 배열로 합치기

2.배열을 토대로 list를 forEach를 사용해서 listwrapper에 넣고

3.isRemoved 된거는 class on을 붙여주는게 아니라 아예 그려지지 않도록 처리하고

4.isSpecial은 css를 수정해서 text color는 blue background color는 lemon으로 처리하고

5.isSpeical인 리스트는 "단골 회원입니다." 라는 텍스트를 밑에 넣기

6.click한 리스트에 class를 isClicked라는 클래스를 붙여서 css 제어하기 - handleClick이라는 함수 만들어서 this로 던지기

const List = [...infoList,...userList]

2.3.4.5

const listWrapper = document.getElementById("listWrapper")
//isRemoved의 경우 ``에 아무것도 안넣어서 제거
list.forEach((i) =>
	if (item.isRemoved) {
		listWrapper.innerHTML += ``
    } else if (item.isSpecial) {
    	listWrapper.innerHTML += `
        	<li class="isSpecial">
            //isSpecial 클래스명 추가하고->css효과주기
                <div>
                  <span class="label">이름:</span>
                  <span>${item.name}</span>
                </div>
                <div>
                  <span class="label">나이:</span>
                  <span>${item.age}</span>
                </div>
                <div>
                  <span class="label">직업:</span>
                  <span>${item.desc}</span>
                </div>
                //div 태그 추가
                <div class="label">단골 회원입니다.</div>
              </li>`
    } else {
    	listWrapper.innerHTML += `
        	<li>
                <div>
                  <span class="label">이름:</span>
                  <span>${item.name}</span>
                </div>
                <div>
                  <span class="label">나이:</span>
                  <span>${item.age}</span>
                </div>
                <div>
                  <span class="label">직업:</span>
                  <span>${item.desc}</span>
                </div>
              </li>`
    }
)

4번 isSpecial인 경우 css style주는거를

처음에는

const specialText = document.querySelector(".isS")
specialText.style.cssText='color:blue; background-color:tomato';

다음과 같이 script로 줬는데 css 관련은 그냥 css에서 넣고/빼는게 최적화라는 말을 보고

class를 추가했다!

다음은 제일 어려웠던 6번...

click한 리스트에 class를 isClicked라는 클래스를 붙여서 css 제어하기 - handleClick이라는 함수 만들어서 this로 던지기

onclick을 넣기 / function handleClick 으로 classList로 클래스 붙이기 / css style추가 / this..?..?

const listWrapper = document.getElementById("listWrapper")
list.forEach((i) =>
	if (item.isRemoved) {
		listWrapper.innerHTML += ``
    } else if (item.isSpecial) {
    	listWrapper.innerHTML += `
        	<li class="isSpecial" onclick="handleClick()">
                <div>
                  <span class="label">이름:</span>
                  <span>${item.name}</span>
                </div>
                <div>
                  <span class="label">나이:</span>
                  <span>${item.age}</span>
                </div>
                <div>
                  <span class="label">직업:</span>
                  <span>${item.desc}</span>
                </div>
                //div 태그 추가
                <div class="label">단골 회원입니다.</div>
              </li>`
    } else {
    	listWrapper.innerHTML += `
        	<li onclick="handleClick()">
                <div>
                  <span class="label">이름:</span>
                  <span>${item.name}</span>
                </div>
                <div>
                  <span class="label">나이:</span>
                  <span>${item.age}</span>
                </div>
                <div>
                  <span class="label">직업:</span>
                  <span>${item.desc}</span>
                </div>
              </li>`
    }
)

function handleClick() {
	document.querySelector("li").classList.add("isClicked")
}

여기까지가 제일 처음에 생각했던 코드! this 는 여전히 사용이 어렵고 handleClick함수는 document.querySelector("li")로 받아오려했다.

<li onclick="handleClick(this)">

....


function handleClick(e) {
	e.classList.toggle("isClicked")
}

이렇게 this를 사용하면 간단하다!!

여기서 더 나아가 toggle을 넣고(on/off 가능하도록), 다른 <li>를 클릭하면 직전에 클릭했던 <li>의 style이 사라지도록 만들어보면?

function handleClick(e) {
    document.querySelector(".isClicked").classList.remove("isClicked")
    e.classList.toggle("isClicked")
}

이렇게 querySelector를 이용해서 .isClicked를 지웠는데

->>>>>>>>>>>>

이런 null 에러가 발생했다.

function handleClick(e) {
    if (document.querySelector(".isClicked"))
    	document.querySelector(".isClicked").classList.remove("isClicked")
    e.classList.toggle("isClicked")
}

이러면 완성!

저작자표시 (새창열림)

'JS' 카테고리의 다른 글

JS연습(유저정보테이블 만들기2) (0)	2022.01.09
JS연습(유저정보테이블 만들기) (0)	2022.01.09
JS연습하기6(스프레드연산자, filter) (0)	2022.01.09
JS연습하기5(split.map.filter.onload) (0)	2022.01.09
JS연습하기4(?조건문,forEach) (0)	2022.01.08

ABOUT ME

돋 돋

'JS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'JS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바