profile
์ดˆ๋ณด ๊ฐœ๋ฐœ์ž์˜ ๊ธฐ๋ก ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค ๐Ÿ˜Š
post-thumbnail

Javascript30 - slide in on scroll

์ด๋ฒˆ ์‹ค์Šต์€ scroll event๋ฅผ ํ†ตํ•ด ํŠน์ • ์œ„์น˜์— ๋„๋‹ฌํ•˜๊ฒŒ ๋˜๋ฉด ํœ™~ํ•˜๊ณ  image๋“ค์ด slide-in ๋˜๋Š” ํšจ๊ณผ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์•˜๋‹ค.

์–ด์ œ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - Custom Video Player

html video tag์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•œ๋‹ค. transition์œผ๋กœ ๊ฐ์ถ”๊ณ , hover ๋ ๋•Œ up ๋˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์žฌ์ƒ bar๋ฅผ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•ด์„œ ๊ตฌํ˜„ํ•ญ ๋ฐฉ์‹์ด ์ธ์ƒ๊นŠ์—ˆ๋‹ค.

5์ผ ์ „
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

AWS STUDY - ANOS 2๊ธฐ 2์ฃผ์ฐจ ์ •๋ฆฌ

ANOS 2์ฃผ์ฐจ ์Šคํ„ฐ๋”” ๊ฐ„๋‹จ ์š”์•ฝ์ž…๋‹ˆ๋‹ค๐Ÿ˜Ž๐Ÿ˜Ž

6์ผ ์ „
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - Sequence Key Detection

์ด๋ฒˆ ์ฑ•ํ„ฐ์—์„œ๋Š” secret key๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ํ™”๋ฉด์— ๊ท€์—ฌ์šด ์œ ๋‹ˆ์ฝ˜์ด ์ถœ๋ ฅ๋˜๋Š” ์žฌ๋ฏธ์žˆ๋Š” ์‹ค์Šต์„ ํ•ด๋ณด์•˜๋‹ค.๋‚ด๊ฐ€ ์„ค์ •ํ•œ secret Key์ธ 'fun javascript'๋ฅผ ์ž…๋ ฅ ํ•  ๋•Œ๋งˆ๋‹ค ํ™”๋ฉด์— ์œ ๋‹ˆ์ฝ˜์ด ์ถ”๊ฐ€๋œ๋‹ค๐Ÿ˜„๐Ÿ˜„์–ด๋ฆด๋•Œ 'ํ‚น์˜ค๋ธŒํŒŒ์ดํ„ฐ'๋ผ๋Š” ๊ฒŒ์ž„์—์„œ โ†โ†’โ†โ†’โ†

2021๋…„ 1์›” 20์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

React App - Youtube Clone

google์—์„œ ์ œ๊ณตํ•˜๋Š” youtube data api๋ฅผ ์ด์šฉํ•ด์„œ ์‹ค์ œ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๋Š” youtube๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์•˜๋‹ค! react hooks์„ ์ด์šฉํ•ด์„œ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ–ˆ๊ณ  ์Šคํƒ€์ผ๋ง์€ postCSS๋ฅผ ์ด์šฉํ•ด์„œ ๊ตฌํ˜„ํ•˜์˜€๋‹ค.

2021๋…„ 1์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

๐Ÿ“– ํด๋กœ์ €(Closure)

์ด๋ฒˆ ํฌ์ŠคํŒ…์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํด๋กœ์ €์— ๋Œ€ํ•ด์„œ ์ •๋ฆฌํ•ด๋ณด์ž.๐Ÿ˜ ํด๋กœ์ €๋ž€? ํด๋กœ์ €๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ•จ์ˆ˜๋ฅผ ์ผ๊ธ‰๊ฐ์ฒด๋กœ ์ทจ๊ธ‰ํ•˜๋Š” ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ ๋งŽ์ด ์“ฐ์ด๋Š” ํŠน์„ฑ์ด๋‹ค. ๋”ฐ๋ผ์„œ EcmaScript ์‚ฌ์–‘์—๋Š” ๋“ฑ์žฅํ•˜์ง€ ์•Š์œผ๋ฉฐ MDN์—์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์„ค๋ช…์„

2021๋…„ 1์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Tailwind CSS ๊ฐœ๋ฐœํ™˜๊ฒฝ ๊ตฌ์„ฑ

์ตœ๊ทผ์— ์ง„ํ–‰ํ•˜๊ฒŒ ๋œ ํŒ€ํ”„๋กœ์ ํŠธ์—์„œ UI Framework๋กœ TailwindCSS๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ํ•˜์˜€๋‹ค!์•„์ง ํ•œ๊ธ€๋กœ ๋œ ๋ฌธ์„œ๊ฐ€ ๋งŽ์ด ์—†๋Š”๊ฒƒ ๊ฐ™์•„ ๊ณต์œ  ์ฐจ์›์—์„œ ์ž‘์„ฑํ•˜์˜€๋‹ค. ๐Ÿ˜Š๐Ÿ˜Š

2021๋…„ 1์›” 10์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

AWS STUDY - ANOS 2๊ธฐ 1์ฃผ์ฐจ ์ •๋ฆฌ

1์ฃผ์ฐจ ์Šคํ„ฐ๋”” ๊ฐ„๋‹จ ์š”์•ฝ์ž…๋‹ˆ๋‹ค๐Ÿ˜Ž๐Ÿ˜Ž

2021๋…„ 1์›” 10์ผ
ยท
4๊ฐœ์˜ ๋Œ“๊ธ€

๐Ÿ“– ํ”„๋กœํ† ํƒ€์ž… - 2

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋ณธ๊ฒฉ์ ์œผ๋กœ ํ”„๋กœํ† ํƒ€์ž…์„ ์ด์šฉํ•œ ์ƒ์† ๋ฐฉ๋ฒ•๊ณผ, ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž.

2021๋…„ 1์›” 10์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - CheckBox

์ด๋ฒˆ chapter์—์„œ๋Š” html์˜ input ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด์„œ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•˜๊ณ , shift๋ฅผ ๋ˆ„๋ฅธ์ฑ„๋กœ ๋‘๊ฐœ์˜ checkbox๋ฅผ ์„ ํƒํ•˜๋ฉด ๊ทธ ์‚ฌ์ด์— ์กด์žฌํ•˜๋Š” checkbox๋“ค์„ ๋‹ค ์„ ํƒ๋œ ์ƒํƒœ๋กœ ๋งŒ๋“œ๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด ๋ณด์•˜๋‹ค! ๐Ÿ˜Ž

2021๋…„ 1์›” 9์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

AWS ์Šคํ„ฐ๋”” ์‹œ์ž‘ ๐Ÿ‘๐Ÿ‘

CloudNet@ ํŒ€์—์„œ ์ง„ํ–‰ํ•˜๋Š” AWS ๋„คํŠธ์›Œํ‚น ์Šคํ„ฐ๋””๋ฅผ ์‹œ์ž‘ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ํ•ญ์ƒ ํด๋ผ์šฐ๋“œ๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ  ์‹ถ์—ˆ๋Š”๋ฐ ๊ณต๊ณ ๋ฅผ ๋ณด๊ณ  ์ข‹์€ ๊ธฐํšŒ์ธ๊ฒƒ ๊ฐ™์•„์„œ ์ง€์›ํ•ด๋ฒ„๋ ธ๋‹ค!

2021๋…„ 1์›” 7์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - Array practice2

์ด๋ฒˆ ์‹ค์Šต์€ 3์ผ์ฐจ์— ํ–ˆ๋˜ javascript array practice์— ์ด์€ 2๋ฒˆ์งธ ์‹ค์Šต์œผ๋กœ console์ฐฝ์„ ํ™•์ธํ•˜๋ฉด ๊ฒฐ๊ณผ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

2021๋…„ 1์›” 6์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

Markup Practice!

์ตœ๊ทผ์— HTML, CSS์— ๋Œ€ํ•ด ์กฐ๊ธˆ ๋” ๊ณต๋ถ€ํ•ด ๋ณด๊ณ  ์‹ถ์–ด์„œ, ๊น€๋ฒ„๊ทธ๋‹˜์˜ ๊ฐ•์˜์ธ HTML&CSS๋Š” ์žฌ๋ฐŒ๋‹ค๋ฅผ ์ˆ˜๊ฐ•ํ•˜๊ณ  ์žˆ๋‹ค. ๋งˆํฌ์—… ์—ฐ์Šต๊ฒฐ๊ณผ๋ฅผ ํฌ์ŠคํŒ…์„ ํ†ตํ•ด ๊ณต์œ ํ•˜๋ ค ํ•œ๋‹ค!

2021๋…„ 1์›” 2์ผ
ยท
4๊ฐœ์˜ ๋Œ“๊ธ€

๐Ÿ“– ํ”„๋กœํ† ํƒ€์ž… - 1

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ”„๋กœํ† ํƒ€์ž…์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด๋ณธ๋‹ค. ํ”„๋กœํ† ํƒ€์ž…์€ ๋‚ด์šฉ์ด ๋งŽ์•„์„œ ๋‘ํŽธ ์ •๋„์— ๋‚˜๋ˆ ์„œ ํฌ์ŠคํŒ…ํ•˜๊ฒŒ ๋  ๊ฒƒ ๊ฐ™๋‹ค. ์ด๋ฒˆ ํŽธ์—์„œ๋Š” ํ”„๋กœํ† ํƒ€์ž…์„ ํ†ตํ•œ ์ƒ์† ๋Œ€ํ•ด ๊ฐ€๋ณ๊ฒŒ ์•Œ์•„๋ณด์ž! ๐Ÿ˜๐Ÿ˜

2020๋…„ 12์›” 31์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€

CSS ๋ฐ˜์‘ํ˜• ์œ ๋‹› ์ •๋ฆฌ

์˜ค๋žœ๋งŒ์— CSS ๊ด€๋ จ ํฌ์ŠคํŒ…์„ ํ•˜๋Š” ๊ฒƒ ๊ฐ™๋‹ค. ์ตœ๊ทผ์— javascript์™€ react ๊ณต๋ถ€์— ์ง‘์ค‘ํ•˜๋Š๋ผ ์ž ์‹œ ๋ฏธ๋ค„๋’€์—ˆ๋‹ค. ์˜ˆ์ „์— react๋ฅผ ๊ณต๋ถ€ํ•˜๋‹ค ๋ณด๋ฉด html,css,javascript๋กœ ์ž๊พธ ๋‹ค์‹œ ํšŒ๊ท€ํ•˜๊ฒŒ ๋œ๋‹ค๋Š” ๊ธ€์„ ๋ณธ์ ์ด ์žˆ๋Š”๋ฐ, ๋‚˜๋„ ์˜ˆ์™ธ๊ฐ€ ์•„๋‹Œ๊ฐ€๋ณด๋‹ค.๐Ÿคฃ

2020๋…„ 12์›” 27์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€

๋„คํŠธ์›Œํฌ ๊ณต๋ถ€ ์‹œ์ž‘!

์˜ค๋Š˜ ๋„คํŠธ์›Œํฌ ์„œ์ ์„ ๊ตฌ๋งคํ–ˆ๋‹ค! ์˜ฌํ•ด ํ•˜๋ฐ˜๊ธฐ ๋ถ€ํ„ฐ ๋„คํŠธ์›Œํฌ ๊ณต๋ถ€ ํ•ด๋ด์•ผ์ง€ ํ•ด๋ด์•ผ์ง€ ํ–ˆ๋Š”๋ฐ, ๋‹ค๋ฅธ ๊ฒƒ๋“ค์— ์ˆœ์œ„๊ฐ€ ๋ฐ€๋ ค... ์•ˆํ•˜๊ณ  ์žˆ์—ˆ๋‹ค.๐Ÿ˜‚๐Ÿ˜‚์–ด๋–ค ์„œ์ ์œผ๋กœ ๊ณต๋ถ€ํ• ์ง€ ๊ณ ๋ฏผํ•˜๋‹ค๊ฐ€, ์ตœ๊ทผ์— ๋‚˜์˜จ ์ฑ…์ธ IT ์—”์ง€๋‹ˆ์–ด๋ฅผ ์œ„ํ•œ ๋„คํŠธ์›Œํฌ ์ž…๋ฌธ ์ฑ…์˜ ๊ตฌ์„ฑ์ด ๋งˆ์Œ์— ๋“ค์–ด ๊ณต๋ถ€ํ•˜๋ ค ํ•œ

2020๋…„ 12์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

React App - Habit Tracker

react๋ฅผ ์ด์šฉํ•ด์„œ ์ œ์ž‘ํ•ด๋ณธ ์ฒซ Web app์ด๋‹ค!Tracking ํ•˜๊ณ ์‹ถ์€ Habit ๊ด€๋ฆฌ(์ถ”๊ฐ€, ์‚ญ์ œ)๊ฐ€ ๊ฐ€๋Šฅํ•˜๊ณ , ๊ฐ Habit๋‹น ๋ช‡๋ฒˆ ํ–ˆ๋Š”์ง€ Countํ•ด ๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ฐ„๋‹จํ•œ ์•ฑ์ด๋‹ค

2020๋…„ 12์›” 24์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

๐Ÿ“– this

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ํ•ญ์ƒ ํ—ท๊ฐˆ๋ ธ๋˜..๐Ÿ™„๐Ÿ™„ this์— ๋Œ€ํ•ด์„œ ์ •๋ฆฌ๋ฅผ ํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค. ## this ํ‚ค์›Œ๋“œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ this๋Š” ์ •๋ง! ์ •๋ง! ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ํ‚ค์›Œ๋“œ์ด๋‹ค. ๋”ฐ๋ผ์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด this์— ๋Œ€ํ•ด์„œ๋Š” ๊ผญ ์•Œ์•„๋‘์–ด์•ผ ํ•œ๋‹ค!

2020๋…„ 12์›” 22์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

๐Ÿ“– ์‹คํ–‰ ์ปจํ…์ŠคํŠธ

์ด๋ฒˆ ํฌ์ŠคํŒ…์€ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์— ๋Œ€ํ•ด ์ •๋ฆฌํ•œ๋‹ค.๋ณธ ํฌ์ŠคํŒ…์€ ์ด์›…๋ชจ๋‹˜์˜ ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ deep dive 19์žฅ์„ ์ฐธ์กฐํ•˜์—ฌ ์ž‘์„ฑ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.ECMAScript ์ŠคํŽ™์— ๋”ฐ๋ฅด๋ฉด ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผย ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๋ฅผ ํ˜•์ƒํ™”ํ•˜๊ณ  ๊ตฌ๋ถ„ํ•˜๋Š” ์ถ”์ƒ์ ์ธ ๊ฐœ๋…์ด๋ผ๊ณ  ์ •์˜ํ•œ๋‹ค. ์ข€ ๋” ์‰ฝ๊ฒŒ

2020๋…„ 12์›” 21์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

React Component

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” react component์— ๋Œ€ํ•ด ์•Œ์•„๋ณธ๋‹ค.์ด ํฌ์ŠคํŒ…์€ ๋ฆฌ์•กํŠธ ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.component๋Š” ๊ฐ€์žฅ ์ตœ์†Œ์˜ ๊ธฐ๋Šฅ์„ ํ•˜๋Š” UI๋กœ, ๋…๋ฆฝ์ ์ด๊ณ , ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๊ฒŒ ์„ค๊ณ„ํ•ด์•ผ ํ•œ๋‹ค. component๋Š” ํด๋ž˜์Šคํ˜• component์™€ ํ•จ์ˆ˜ํ˜•

2020๋…„ 12์›” 20์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€