[JavaScript] ๐คณ JavaScript๋ก ์ ๊ทํํ์์ ์ด์ฉํ ๊ฒ์์ฐฝ ๊ตฌํํ๊ธฐ
๐คณ Day6 - JavaScript๋ก ์ ๊ทํํ์์ ์ด์ฉํ ๊ฒ์์ฐฝ ๊ตฌํํ๊ธฐ
JavaScript 30์ ์ฌ์ฏ ๋ฒ์งธ ํ๋ก์ ํธ๋ ์ ๊ทํํ์์ ์ด์ฉํ์ฌ ๊ฒ์์ฐฝ์ ๊ตฌํํ๋ ํ๋ก์ ํธ์ ๋๋ค.
๐ HTML ์ฝ๋
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Type Ahead ๐</title> <link rel="stylesheet" href="main.css" /> </head> <body> <form class="search-form"> <input type="text" class="search" placeholder="City or State" /> <ul class="suggestions"> <li>Filter for a city</li> <li>or a state</li> </ul> </form> <script src="main.js"></script> </body> </html> | cs |
๐ CSS ์ฝ๋
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | html { box-sizing: border-box; background: #ffc600; font-family: "helvetica neue"; font-size: 20px; font-weight: 200; } *, *:before, *:after { box-sizing: inherit; } input { width: 100%; padding: 20px; } .search-form { max-width: 400px; margin: 50px auto; } input.search { margin: 0; text-align: center; outline: 0; border: 10px solid #f7f7f7; width: 120%; left: -10%; position: relative; top: 10px; z-index: 2; border-radius: 5px; font-size: 40px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); } .suggestions { margin: 0; padding: 0; position: relative; /*perspective: 20px;*/ } .suggestions li { background: white; list-style: none; border-bottom: 1px solid #d8d8d8; box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); margin: 0; padding: 20px; transition: background 0.2s; display: flex; justify-content: space-between; text-transform: capitalize; } .suggestions li:nth-child(even) { transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); background: linear-gradient(to bottom, #ffffff 0%, #efefef 100%); } .suggestions li:nth-child(odd) { transform: perspective(100px) rotateX(-3deg) translateY(3px); background: linear-gradient(to top, #ffffff 0%, #efefef 100%); } span.population { font-size: 15px; } .hl { background: #ffc600; } | cs |
CSS๋ ์ ์ฝ๋๊ฐ ์ด๋ป์ ๊ทธ๋๋ก ๋๋์ต๋๋ค. transform๊ณผ linear-gradient๋ฅผ ์ด์ฉํ์ฌ ์ ์ฒด๊ฐ์ ์ด๋ ธ์ต๋๋ค.
๐ JavaScript ์ฝ๋
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | const endpoint = "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json"; const cities = []; fetch(endpoint) .then(blob => blob.json()) .then(data => cities.push(...data)); findMatches = (wordToMatch, cities) => cities.filter(place => { // ์ด ๊ณณ์์ ๊ฒ์์ด์ ๋งค์น ๋๋ ์ง๋ฅผ ํ์ธํด์ผ ํฉ๋๋ค const regex = new RegExp(wordToMatch, "gi"); return place.city.match(regex) || place.state.match(regex); }); numberWithCommas = x => { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }; displayMatches = e => { const word = e.target.value; const matchArray = findMatches(word, cities); const html = matchArray .map(place => { const regex = new RegExp(word, "gi"); const cityName = place.city.replace( regex, `<span class="hl">${word}</span>` ); const stateName = place.state.replace( regex, `<span class="hl">${word}</span>` ); return ` <li> <span class="name">${cityName}, ${stateName}</span> <span class="population">${numberWithCommas( place.population )}</span> </li> `; }) .join(""); suggestions.innerHTML = html; }; const searchInput = document.querySelector(".search"); const suggestions = document.querySelector(".suggestions"); searchInput.addEventListener("change", displayMatches); searchInput.addEventListener("keyup", displayMatches); | cs |
์ฐ์ ๊ธฐ์กด์ ์๋ api
์ endpoint
๋ฅผ ์ด์ฉํ์ฌ ๋ฐ์ดํฐ๋ฅผ cities
์ ์ ์ฅํฉ๋๋ค.
๊ทธ ๋ค์ findMatches
๋ผ๋ cities
๋ฐฐ์ด์์ ํน์ ๋จ์ด๋ฅผ ์ฐพ๋ ํจ์๋ฅผ ๊ตฌํํฉ๋๋ค. ์ฌ๊ธฐ์ new RegExp(wordToMatch, "gi")
๋ฅผ ์ด์ฉํด ์ ์ฒด์์ wordToMatch
์ ๋น๊ตํ์ฌ ๋์๋ฌธ์ ๊ตฌ๋ถ์์ด ๊ฐ์ ๋จ์ด๊ฐ ์๋ ๊ณณ์ ์ฐพ๋ ์ ๊ท ํํ์์ ๋ง๋ค๊ณ , cities
์ ๊ฐ place
๋ณ city
์ state
์ ๋งค์น๋๋ ๋ถ๋ถ์ด ์๋ ์ง ํ์ธํฉ๋๋ค.
๋ค์์ ๊ฒ์์ฐฝ์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ์ฝ๋๋ฅผ ๊ตฌํํฉ๋๋ค. search
ํด๋์ค์ ํด๋นํ๋ input
์ searchInput
์ด๋ผ ํ๊ณ change
์ keyup
์ ์ด๋ฒคํธ์ ์ค์ ๋ถ๋ฌ์ฌ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ displayMatches
๋ฅผ ์ถ๊ฐํฉ๋๋ค.
displayMatches
๋ ์ฐ์ ์์์ ๊ตฌํํ findMatches
๋ฅผ ์ด์ฉํด ์ถ์ฒ ๊ฒ์์ด๋ฅผ ๊ฐ์ ธ์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ํด๋น ๊ฒ์์ด๊ฐ ์ถ์ฒ ๊ฒ์์ด์ ์ด๋ ๋ถ๋ถ๊ณผ ๊ฐ์ ์ง ๋ณด์ฌ์ฃผ๊ธฐ ์ํด replace
๋ฅผ ์ด์ฉํ์ฌ ๋งค์น๋๋ ๋จ์ด๋ฅผ ํ์ด๋ผ์ดํธ ํ๊ทธ๋ก ๊ฐ์ผ ๋จ์ด๋ก ๋ฐ๊ฟ์ค๋๋ค. ๋ง์ง๋ง์ผ๋ก ํ์ด๋ผ์ดํธ ๋ ๋จ์ด๋ค์ ํฌํจํ ์ ์ฒด ์ถ์ฒ ๊ฒ์์ด์ ํด๋นํ๋ html ํ๊ทธ๋ฅผ ๋ฐํํด์ค๋๋ค.
๋งํฌ
'Web > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๋๊ธ
์ด ๊ธ ๊ณต์ ํ๊ธฐ
-
๊ตฌ๋
ํ๊ธฐ
๊ตฌ๋ ํ๊ธฐ
-
์นด์นด์คํก
์นด์นด์คํก
-
๋ผ์ธ
๋ผ์ธ
-
ํธ์ํฐ
ํธ์ํฐ
-
Facebook
Facebook
-
์นด์นด์ค์คํ ๋ฆฌ
์นด์นด์ค์คํ ๋ฆฌ
-
๋ฐด๋
๋ฐด๋
-
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
-
Pocket
Pocket
-
Evernote
Evernote
๋ค๋ฅธ ๊ธ
-
์๋ฐ์คํฌ๋ฆฝํธ ์์ง(JavaScript Engine)๊ณผ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐํ์(Javascript Runtime)์ ์ฐจ์ด
์๋ฐ์คํฌ๋ฆฝํธ ์์ง(JavaScript Engine)๊ณผ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐํ์(Javascript Runtime)์ ์ฐจ์ด
2019.02.10 -
์น ์ฌ์ดํธ(website)์ ์น ์ ํ๋ฆฌ์ผ์ด์ (webapplication) ๋ญ๊ฐ ๋ค๋ฅผ๊น?
์น ์ฌ์ดํธ(website)์ ์น ์ ํ๋ฆฌ์ผ์ด์ (webapplication) ๋ญ๊ฐ ๋ค๋ฅผ๊น?
2019.02.10 -
[JavaScript] ๐ผ๏ธ JavaScript๋ก Flexbox๋ฅผ ์ด์ฉํ ์ด๋ฏธ์ง ๊ฐค๋ฌ๋ฆฌ ๋ง๋ค๊ธฐ
[JavaScript] ๐ผ๏ธ JavaScript๋ก Flexbox๋ฅผ ์ด์ฉํ ์ด๋ฏธ์ง ๊ฐค๋ฌ๋ฆฌ ๋ง๋ค๊ธฐ
2019.02.05 -
[JavaScript] ๐ช Array๊ด๋ จ Method ์์ ์ ๋ณต 1ํ
[JavaScript] ๐ช Array๊ด๋ จ Method ์์ ์ ๋ณต 1ํ
2019.02.05