본문 바로가기
IT/누구든 가능한 개발

HTML과 CSS로 구현한 UI와 자바스크립트 코드를 연결해보자.

by InfopediaBK 2023. 4. 19.
728x90

 

지난 포스팅에서 일상생활을 프로그래밍화 해보는 방법을 소개했었습니다. 이번에는 지난번 구현해 봤던 인스타그램 태그 목록의 UI를 HTML과 CSS로 유사하게 구현해 보고 이를 지난번 구현했던 자바스크립트 코드와 연결해보려고 합니다.

 

인스타그램 태그 목록

위 이미지에서 검색어를 입력하는 input과 탭 목록 그리고 검색한 결과를 보여주는 리스트 이 3가지를 HTML과 CSS로 먼저 구현해 보겠습니다.

index.html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>인스타그램</title>
</head>

<body>
  <div class="c_inputContainer">
    <input type="text" id="search_input"></input>
  </div>
  <div>
    <ul class="c_tabList">
      <li>인기</li>
      <li>계정</li>
      <li>오디오</li>
      <li>태그</li>
      <li>장소</li>
    </ul>
  </div>
  <div>
    <ul class="c_tagList">
    </ul>
  </div>
  <script src="index.js" />
</body>

</html>

style.css

body {
  background-color: black;
}

.c_inputContainer {
  display: flex;
  margin-bottom: 10px;
}

#search_input {
  background: gray;
  height: 30px;
  width: 100%;
  color: white;
}

.c_tabList {
  color: white;
  list-style-type: none;
  padding: 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 10px;
}

.c_tabList li{
  background: none;
  padding: 10px 15px;
  cursor: pointer;
}

.c_tagList {
  color: white;
  list-style-type: none;
  padding: 0px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.c_tagList li {
  background: none;
  padding: 10px 15px;
  cursor: pointer;
}

 

위와 같이 HTML로 뼈대를 만들고, CSS로 살을 입히면 아래와 같은 UI가 나오게 됩니다.

아래는 지난번 작성했던 자바스크립트 코드입니다.

const TAG_LIST = ["바다", "산", "바다다", "바다스타그램", "바다뷰", "산스타그램", "산티아고순례길"];

let result = [];

TAG_LIST.forEach((tag) => {
    if (tag.includes("바다")) {
        result.push(tag);
    }
})

console.log("바다가 들어간 태그 목록들:", result);

result.forEach((tag, index) => {
    console.log("바다가 들어간 태그 목록을 반복문을 돌려서 출력해보자! " + index + "번째:",tag);
})

위 코드를 아래와 같이 수정해 보겠습니다.

index.js

const TAG_LIST = ["바다", "산", "바다다", "바다스타그램", "바다뷰", "산스타그램", "산티아고순례길"];

const searchInput = document.getElementById("search_input");
const tagList = document.querySelector(".c_tagList");

function onChangeSearchInput(event) {
  let result = [];

  const inputValue = event.target.value;

  TAG_LIST.forEach((tag) => {
    if (tag.includes(inputValue)) {
      result.push(`<li>#${tag}</li>`);
    }
  })
  tagList.innerHTML = result.join('');
}

searchInput.addEventListener('input', onChangeSearchInput);

 

코드 설명

아직 자바스크립트의 문법에 대해서 제대로 배우지 않은 상태기 때문에 익숙지 않은 코드들이 보일 수 있습니다. 문법에 대해서는 추후, 자세히 다룰 예정이기 때문에 너무 신경 쓰지 마시고 저런 식으로 각각의 기능을 구현하는구나 정도로 이해하시면 됩니다.

 

1. const searchInput = document.getElementById("search_input");

document.getElementById는 HTML에서 특정 id 값을 가지는 요소를 가져오는 코드입니다. 여기서는 "search_input"이라는 id를 가진 요소를 가져오는 코드로 해석할 수 있습니다. 

 <div class="c_inputContainer">
    <input type="text" id="search_input"></input>
 </div>

여기서 input태그가 "search_input"을 id 값으로 가지기 때문에 document.getElementById("search_input"); 는 해당 input창을 가져오는 코드로 볼 수 있는 것입니다.

 

2. const tagList = document.querySelector(". c_tagList");

document.querySelector는 HTML에서 특정 id나 class 값을 가지는 요소를 가져오는 코드입니다. 여기서 ".c_tagList" class가 "c_tagList"라는 값을 가지는 요소를 가져온다고 보시면 됩니다.

 

"."은 class, "#"은 id를 바라보게 되는데요. 따라서 id값을 선택자로 갖는 1번 코드는

const searchInput = document.getElementById("#search_input");

으로 수정할 수도 있습니다.

 

3. result.push(`<li>#${tag}</li>`)

기존에는 tag값 만을 result에 넣어줬었지만, 여기서는 <ul></ul> 태그의 하위에 들어갈 요소를 결과 값으로 저장해 놔야 하기 때문에 <li></li> 태그를 넣어주어야 합니다.

 

여기서 새로운 문법이 등장하는데요. "`" 이것을 백틱이라고 합니다. 문자를 입력하는 ''이나 ""와 비슷하지만 차이점은 변수의 값을 받아 문자로 넣을 수 있다는 것입니다.

위 문법은 기존에 우리가 사용했었던 "<li>" + "#" + tag "</li>"와도 동일한 문법이라고 봐도 무방합니다.

 

4. tagList.innerHTML = result;

우리는 "바다"라는 키워드가 포함된 데이터를 <li></li> 태그로 감싸서 result에 저장해 뒀습니다. 결국, result라는 상자에는

["<li>바다</li>", "<li>바다다</li>", "<li>바다스타그램</li>", "<li>바다뷰</li>"] 라는 데이터가 들어가 있는 상태입니다.

 

innerHTML은 tagList 즉, <ul class="c_tagList"></ul> 이 HTML 태그 안에 특정 HTML 값을 넣겠다는 의미가 됩니다.

 

우리는 아래와 같은 HTML을 만드는 게 목적입니다.

<ul class="c_tagList">
    <li>#바다</li>
    <li>#바다다</li>
    <li>#바다스타그램</li>
    <li>#바다뷰</li>
</ul>

하지만 result는 목록(리스트, 배열)의 형태를 띠고 있기 때문에 이를 하나의 텍스트로 만들어줄 필요가 있습니다. 이를 위해. join('')이라는 코드를 작성하면 목록을 join안에 들어가는 값을 기준으로 하나의 텍스트로 만들어줍니다.

 

아래는 join의 이해를 돕기 위해 추가로 작성된 예시입니다.

let result = ["<li>바다</li>", "<li>바다다</li>", "<li>바다스타그램</li>", "<li>바다뷰</li>"];

const joinWithComma = result.join(',');
const joinWithBlank = result.join(' ');
const joinWithHypen = result.join('-');

console.log(joinWithComma); // 결과: <li>바다</li>,<li>바다다</li>,<li>바다스타그램</li>,<li>바다뷰</li>
console.log(joinWithBlank); // 결과: <li>바다</li> <li>바다다</li> <li>바다스타그램</li> <li>바다뷰</li>
console.log(joinWithHypen); // 결과: <li>바다</li>-<li>바다다</li>-<li>바다스타그램</li>-<li>바다뷰</li>

 

5. searchInput.addEventListener('input', onChangeSearchInput);

마지막으로 addEventListener라는 것은 말 그래도 "이벤트를 듣는 주체를 추가한다"라는 뜻입니다.

 

여기서 event는 "input창에 타이핑하는 행위", "버튼을 클릭하는 행위" 등을 말하는데요. 위에서 searchInput은 검색어를 입력하는 input창을 넣은 변수입니다. 즉, input창에 검색어를 타이핑할 때마다 onChangeSearchInput이라는 함수가 작동(실행)되는 것입니다.

 

function onChangeSearchInput(event) {
  const inputValue = event.target.value;
  console.log("현재 타이핑 한 검색어: ", inputValue);
}

searchInput.addEventListener('input', onChangeSearchInput);

만약 위와 같이 코드를 작성했을 때 어떻게 동작하는지 보여드리겠습니다.

 

위와 같이 바다라는 키워드를 검색하게 되면 아래와 같이 결과가 나오게 됩니다.

현재 타이핑 한 검색어:  ㅂ
현재 타이핑 한 검색어:  바
현재 타이핑 한 검색어:  받
현재 타이핑 한 검색어:  바
현재 타이핑 한 검색어:  바다

문자 하나하나를 칠 때마다 onChangeSearchInput이라는 함수가 실행되면서 검색창에 입력된 값이 위와 같이 출력되는 것입니다.

 

이번 포스팅은 어려우실 수 있습니다. 다만, 새로운 추가된 문법에 집중하시기보단 아직 우리는 자바스크립트 문법을 배우지 않았기 때문에 해당 문법 즉, 코드가 어떻게 동작하는지를 이해하는데 집중하시면 됩니다.

728x90

'IT > 누구든 가능한 개발' 카테고리의 다른 글

일상생활에서의 프로그래밍 - 추상화  (0) 2023.04.12
NPM(Node.js) 설치  (0) 2023.04.07
Github 계정 생성과 Git 설치  (0) 2023.04.07
VSCode 설치와 플러그인 설치  (0) 2023.04.07

관련글

댓글0

티스토리툴바