๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

์ „์ฒด ๊ธ€

(38)
[javascript] ๊ณต์ง€์‚ฌํ•ญ ์Šฌ๋ผ์ด๋“œ๋กœ ๋งŒ๋“ค๊ธฐ (์ˆ˜์ง ์Šฌ๋ผ์ด๋“œ) ์Šคํƒ€๋ฒ…์Šค ํ™ˆํŽ˜์ด์ง€๋ฅผ ๋ณด๋ฉด ๊ณต์‹œ์‚ฌํ•ญ ๋‚ด์šฉ๋“ค์ด ์Šฌ๋ผ์ด๋“œ ์‹์œผ๋กœ ํ•˜๋‚˜์”ฉ ๋…ธ์ถœ๋œ๋‹ค. ์œ„ ์ด๋ฏธ์ง€์™€ ๊ฐ™์€ ์ด๋ฒคํŠธ๋ฅผ ๊ตฌํ˜„ํ•  ๋•Œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ swiper ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•˜๋ฉด ํŽธ๋ฆฌํ•˜๋‹ค. ๋จผ์ € html์˜ head ์˜์—ญ์— ๊ฐ script ์ฝ”๋“œ๋ฅผ ์ ์šฉ์‹œํ‚จ๋‹ค. ์ด๋•Œ ๋ฐ˜๋“œ์‹œ main ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ ์œ„์— ์ ์šฉ์‹œ์ผœ์•ผ ํ•œ๋‹ค. (*swiper ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” link ์ฝ”๋“œ์™€ script ์ฝ”๋“œ ๋‘˜ ๋‹ค ์ ์šฉํ•ด์•ผํ•œ๋‹ค!) html์˜ body ์˜์—ญ์—” ์•„๋ž˜์™€ ๊ฐ™์€ ํด๋ž™์Šค๋ฅผ ๊ฐ€์ง„ ์ฝ”๋“œ๋“ค์ด ์žˆ์–ด์•ผ ๋™์ž‘ํ•œ๋‹ค. .swiper-container / .swiper-wrapper / .swiper-slide (***๊ทธ ์™ธ์— ๋‹ค๋ฅธ ๊ธฐ๋Šฅ์€ swiper ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ฐธ๊ณ ํ•˜๊ธฐ!!) ๋‚ด์šฉ1 ๋‚ด์šฉ1 ๋‚ด์šฉ3 ๋‚ด์šฉ4 ๊ทธ ํ›„ ์•„๋ž˜์™€ ๊ฐ™์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์— ์•„๋ž˜์˜ ์ฝ”๋“œ๋ฅผ ์ ..
[javascript] ์Šคํฌ๋กค ์‹œ ๋ฑƒ์ง€ ์•ˆ๋ณด์ด๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ• ์Šคํƒ€๋ฒ…์Šค ํ™ˆํŽ˜์ด์ง€๋ฅผ ๋ณด๋ฉด ์šฐ์ธก์— ๋ฑƒ์ง€๊ฐ€ ๋ณด์ธ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ๋ฒณ์ง€๋Š” ์ผ์ •๋ถ€๋ถ„ ์•„๋ž˜๋กœ ์Šคํฌ๋กค ํ•˜๊ฒŒ๋˜๋ฉด ์ ์ฐจ ํˆฌ๋ช…ํ•ด์ง€๋ฉด์„œ ์‚ฌ๋ผ์ง€๊ฒŒ ๋œ๋‹ค. ์œ„ ์ด๋ฏธ์ง€์™€ ๊ฐ™์€ ์ด๋ฒคํŠธ๋ฅผ ๊ตฌํ˜„ํ•  ๋•Œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ lodash ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ gsap ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•˜๋ฉด ํŽธ๋ฆฌํ•˜๋‹ค. ๋จผ์ € html์˜ head ์˜์—ญ์— ๊ฐ script ์ฝ”๋“œ๋ฅผ ์ ์šฉ์‹œํ‚จ๋‹ค. ์ด๋•Œ ๋ฐ˜๋“œ์‹œ main ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ ์œ„์— ์ ์šฉ์‹œ์ผœ์•ผ ํ•œ๋‹ค. ๊ทธ ํ›„ main ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์— ์•„๋ž˜์˜ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•œ๋‹ค. (์ฐธ๊ณ ๋กœ badgeEl ์š”์†Œ๋Š” ์ด๋ฏธ์ง€๊ฐ€ ๋‹ด๊ธด div ์š”์†Œ์ด๋‹ค.) const badgeEl = document.querySelector('.badges'); window.addEventListener('scroll', _.throttle(function () { if (wi..
[css] ๊ฐ€์šด๋ฐ ๋ฐฐ์น˜ ์œ„์™€ ๊ฐ™์ด ๋‘๊ฐœ์˜ ์ƒ์ž๊ฐ€ ์žˆ์„ ๋•Œ item ๋ฐ•์Šค๋ฅผ container ๋ฐ•์Šค ์•ˆ์˜ ๊ฐ€์šด๋ฐ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฒ•์„ ์•Œ์•„๋ณด์ž. 1. ์„ธ๋กœ ๊ฐ€์šด๋ฐ ๋ฐฐ์น˜ /* css ์ฝ”๋“œ */ .container { position: relative; width: 100%; height: 100px; background-color: blue; } .item { position: absolute; top: 0; bottom: 0; margin: auto 0; width: 50px; height: 50px; background-color: orange; } item ๋ฐ•์Šค์— ๋จผ์ € position: absolute; ๊ฐ’์„ ์ฃผ์–ด ํ•ด๋‹น ๋ฐ•์Šค๋ฅผ ๋ฐฐ์น˜ํ•  ๊ฒƒ์ž„์„ ๋ช…์‹œํ•ด์ค€๋‹ค. ์ด๋•Œ ๋ฐฐ์น˜๋Š” container ๋ฐ•์Šค๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•  ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— container..
[์ž๋ฐ”ํฌ์Šค๋ฆฝํŠธ ์ด๋ก ] ์Šค์ฝ”ํ”„ ์Šค์ฝ”ํ”„๋ž€? ๋ชจ๋“  ์‹๋ณ„์ž(๋ณ€์ˆ˜ ์ด๋ฆ„, ํ•จ์ˆ˜ ์ด๋ฆ„, ํด๋ž˜์Šค ์ด๋ฆ„ ๋“ฑ)๋Š” ์ž์‹ ์ด ์„ ์–ธ๋œ ์œ„์น˜์— ์˜ํ•ด ๋‹ค๋ฅธ ์ฝ”๋“œ๊ฐ€ ์‹๋ณ„์ž ์ž์‹ ์„ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋Š” ์œ ํšจ๋ฒ”์œ„๊ฐ€ ๊ฒฐ์ •๋˜๋Š”๋ฐ, ์ด๋ฅผ ์Šค์ฝ”ํ”„๋ผ ํ•œ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ์Šค์ฝ”ํ”„๋ฅผ ํ†ตํ•ด ์–ด๋–ค ๋ณ€์ˆ˜๋ฅผ ์ฐธ์กฐํ•ด์•ผํ•  ๊ฒƒ์ธ์ง€ ์‹๋ณ„์ž๋ฅผ ๊ฒฐ์ •ํ•œ๋‹ค. let x = 'global'; function foo(){ let x = 'local'; console.log(x); } foo(); console.log(x); //local //global ๋งŒ์•ฝ ์Šค์ฝ”ํ”„ ๊ฐœ๋…์ด ์—†๋‹ค๋ฉด ๊ฐ™์€ ์ด๋ฆ„์„ ๊ฐ–๋Š” ๋ณ€์ˆ˜๋Š” ์ถฉ๋Œ์„ ์ผ์œผํ‚ค๋ฏ€๋กœ ํ”„๋กœ๊ทธ๋žจ ์ „์ฒด์—์„œ ํ•˜๋‚˜๋ฐ–์— ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค. ๋”ฐ๋ผ์„œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ๋Š” ์Šค์ฝ”ํ”„(์œ ํšจ๋ฒ”์œ„)๋ฅผ ํ†ตํ•ด ์‹๋ณ„์ž์ธ ๋ณ€์ˆ˜ ์ด๋ฆ„์˜ ์ถฉ๋Œ์„ ๋ฐฉ์ง€ํ•˜์—ฌ ๊ฐ™์€ ์ด๋ฆ„์˜ ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค. ์Šค..
[ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค] ํฐ์ผ“๋ชฌ ๋ฌธ์ œ) ๋‹น์‹ ์€ ํฐ์ผ“๋ชฌ์„ ์žก๊ธฐ ์œ„ํ•œ ์˜ค๋žœ ์—ฌํ–‰ ๋์—, ํ™ ๋ฐ•์‚ฌ๋‹˜์˜ ์—ฐ๊ตฌ์‹ค์— ๋„์ฐฉํ–ˆ์Šต๋‹ˆ๋‹ค. ํ™ ๋ฐ•์‚ฌ๋‹˜์€ ๋‹น์‹ ์—๊ฒŒ ์ž์‹ ์˜ ์—ฐ๊ตฌ์‹ค์— ์žˆ๋Š” ์ด N ๋งˆ๋ฆฌ์˜ ํฐ์ผ“๋ชฌ ์ค‘์—์„œ N/2๋งˆ๋ฆฌ๋ฅผ ๊ฐ€์ ธ๊ฐ€๋„ ์ข‹๋‹ค๊ณ  ํ–ˆ์Šต๋‹ˆ๋‹ค. ํ™ ๋ฐ•์‚ฌ๋‹˜ ์—ฐ๊ตฌ์‹ค์˜ ํฐ์ผ“๋ชฌ์€ ์ข…๋ฅ˜์— ๋”ฐ๋ผ ๋ฒˆํ˜ธ๋ฅผ ๋ถ™์—ฌ ๊ตฌ๋ถ„ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๊ฐ™์€ ์ข…๋ฅ˜์˜ ํฐ์ผ“๋ชฌ์€ ๊ฐ™์€ ๋ฒˆํ˜ธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ์—ฐ๊ตฌ์‹ค์— ์ด 4๋งˆ๋ฆฌ์˜ ํฐ์ผ“๋ชฌ์ด ์žˆ๊ณ , ๊ฐ ํฐ์ผ“๋ชฌ์˜ ์ข…๋ฅ˜ ๋ฒˆํ˜ธ๊ฐ€ [3๋ฒˆ, 1๋ฒˆ, 2๋ฒˆ, 3๋ฒˆ]์ด๋ผ๋ฉด ์ด๋Š” 3๋ฒˆ ํฐ์ผ“๋ชฌ ๋‘ ๋งˆ๋ฆฌ, 1๋ฒˆ ํฐ์ผ“๋ชฌ ํ•œ ๋งˆ๋ฆฌ, 2๋ฒˆ ํฐ์ผ“๋ชฌ ํ•œ ๋งˆ๋ฆฌ๊ฐ€ ์žˆ์Œ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ์ด๋•Œ, 4๋งˆ๋ฆฌ์˜ ํฐ์ผ“๋ชฌ ์ค‘ 2๋งˆ๋ฆฌ๋ฅผ ๊ณ ๋ฅด๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด 6๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ(3๋ฒˆ), ๋‘ ๋ฒˆ์งธ(1๋ฒˆ) ํฐ์ผ“๋ชฌ์„ ์„ ํƒ ์ฒซ ๋ฒˆ์งธ(3๋ฒˆ), ์„ธ ๋ฒˆ์งธ(2๋ฒˆ) ํฐ์ผ“๋ชฌ์„ ์„ ํƒ ์ฒซ ๋ฒˆ..
[ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค] ๋‚ด์  ๋ฌธ์ œ) ๊ธธ์ด๊ฐ€ ๊ฐ™์€ ๋‘ 1์ฐจ์› ์ •์ˆ˜ ๋ฐฐ์—ด a, b๊ฐ€ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ฃผ์–ด์ง‘๋‹ˆ๋‹ค. a์™€ b์˜ ๋‚ด์ ์„ return ํ•˜๋„๋ก solution ํ•จ์ˆ˜๋ฅผ ์™„์„ฑํ•ด์ฃผ์„ธ์š”.์ด๋•Œ, a์™€ b์˜ ๋‚ด์ ์€ a[0]*b[0] + a[1]*b[1] + ... + a[n-1]*b[n-1] ์ž…๋‹ˆ๋‹ค. (n์€ a, b์˜ ๊ธธ์ด) ์ œํ•œ์‚ฌํ•ญ) a, b์˜ ๊ธธ์ด๋Š” 1 ์ด์ƒ 1,000 ์ดํ•˜์ž…๋‹ˆ๋‹ค. a, b์˜ ๋ชจ๋“  ์ˆ˜๋Š” -1,000 ์ด์ƒ 1,000 ์ดํ•˜์ž…๋‹ˆ๋‹ค. *์ž…์ถœ๋ ฅ ์˜ˆ: a b result [1,2,3,4] [-3,-1,0,2] 3 [-1,0,1] [1,0,-1] -2 ๋‚ด ํ’€์ด function solution(a, b) { let answer = null; for (let i = 0; i < a.length; i++) { answer+=(a[i] * b[..
[ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค] ์™„์ฃผํ•˜์ง€ ๋ชปํ•œ ์„ ์ˆ˜ ๋ฌธ์ œ) ์ˆ˜๋งŽ์€ ๋งˆ๋ผํ†ค ์„ ์ˆ˜๋“ค์ด ๋งˆ๋ผํ†ค์— ์ฐธ์—ฌํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๋‹จ ํ•œ ๋ช…์˜ ์„ ์ˆ˜๋ฅผ ์ œ์™ธํ•˜๊ณ ๋Š” ๋ชจ๋“  ์„ ์ˆ˜๊ฐ€ ๋งˆ๋ผํ†ค์„ ์™„์ฃผํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๋งˆ๋ผํ†ค์— ์ฐธ์—ฌํ•œ ์„ ์ˆ˜๋“ค์˜ ์ด๋ฆ„์ด ๋‹ด๊ธด ๋ฐฐ์—ด participant์™€ ์™„์ฃผํ•œ ์„ ์ˆ˜๋“ค์˜ ์ด๋ฆ„์ด ๋‹ด๊ธด ๋ฐฐ์—ด completion์ด ์ฃผ์–ด์งˆ ๋•Œ, ์™„์ฃผํ•˜์ง€ ๋ชปํ•œ ์„ ์ˆ˜์˜ ์ด๋ฆ„์„ return ํ•˜๋„๋ก solution ํ•จ์ˆ˜๋ฅผ ์ž‘์„ฑํ•ด์ฃผ์„ธ์š”. ์ œํ•œ์‚ฌํ•ญ) ๋งˆ๋ผํ†ค ๊ฒฝ๊ธฐ์— ์ฐธ์—ฌํ•œ ์„ ์ˆ˜์˜ ์ˆ˜๋Š” 1๋ช… ์ด์ƒ 100,000๋ช… ์ดํ•˜์ž…๋‹ˆ๋‹ค. completion์˜ ๊ธธ์ด๋Š” participant์˜ ๊ธธ์ด๋ณด๋‹ค 1 ์ž‘์Šต๋‹ˆ๋‹ค. ์ฐธ๊ฐ€์ž์˜ ์ด๋ฆ„์€ 1๊ฐœ ์ด์ƒ 20๊ฐœ ์ดํ•˜์˜ ์•ŒํŒŒ๋ฒณ ์†Œ๋ฌธ์ž๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฐธ๊ฐ€์ž ์ค‘์—๋Š” ๋™๋ช…์ด์ธ์ด ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. *์ž…์ถœ๋ ฅ ์˜ˆ: participant completion return ["leo", "ki..
[P ๋ฌธ์ œํ’€๊ธฐ] ๋‘ ๊ฐœ ๋ฝ‘์•„์„œ ๋”ํ•˜๊ธฐ ๋ฌธ์ œ) ์ •์ˆ˜ ๋ฐฐ์—ด numbers๊ฐ€ ์ฃผ์–ด์ง‘๋‹ˆ๋‹ค. numbers์—์„œ ์„œ๋กœ ๋‹ค๋ฅธ ์ธ๋ฑ์Šค์— ์žˆ๋Š” ๋‘ ๊ฐœ์˜ ์ˆ˜๋ฅผ ๋ฝ‘์•„ ๋”ํ•ด์„œ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“  ์ˆ˜๋ฅผ ๋ฐฐ์—ด์— ์˜ค๋ฆ„์ฐจ์ˆœ์œผ๋กœ ๋‹ด์•„ return ํ•˜๋„๋ก solution ํ•จ์ˆ˜๋ฅผ ์™„์„ฑํ•ด์ฃผ์„ธ์š”. *์ž…์ถœ๋ ฅ ์˜ˆ: numbers result [2,1,3,4,1] [2,3,4,5,6,7] [5,0,2,7] [2,5,7,9,12] ๋‚ด ํ’€์ด) function solution(number) { let answer= []; number.sort(function(a,b){ return a-b; }); for(let i=0; i