post-thumbnail

[WEB] ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๊ณผ์ •

์›น ๋ธŒ๋ผ์šฐ์ €์— URL ์ž…๋ ฅ์ฃผ์†Œ์ฐฝ์— ์ž…๋ ฅํ•œ URI์˜ host Name์ด DNS๋ฅผ ํ†ตํ•ด ip ์ฃผ์†Œ๋กœ ๋ณ€ํ™˜๋˜๊ณ , ํ•ด๋‹น IP๋ฅผ ๊ฐ€์ง„ ์„œ๋ฒ„์— GET ์š”์ฒญ์„ ๋ณด๋‚ธ๋‹ค.(์‚ฌ์ง„2. ์ „๋ฐ˜์ ์ธ ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๊ณผ์ •)์„œ๋ฒ„์—์„œ ์‘๋‹ต๋ฐ›์€ HTML ํŒŒ์ผ ํŒŒ์‹ฑ์„œ๋ฒ„์— ์กด์žฌํ•˜๋˜ HTML ํŒŒ์ผ์ด ๋ธŒ๋ผ์šฐ

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

[GIT] degit

degit์€ ๊นƒ ์ €์žฅ์†Œ์˜ ๋ณต์‚ฌ๋ณธ์„ ๋งŒ๋“ ๋‹ค.์ „์ฒด git ๊ธฐ๋ก์„ ๋‹ค์šด๋กœ๋“œ ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ, ์ตœ์‹  ์ปค๋ฐ‹์„ ์ฐพ์•„ ๋‹ค์šด๋กœ๋“œํ•˜๊ธฐ ๋•Œ๋ฌธ์— git clone๋ณด๋‹ค ํ›จ์”ฌ ๋น ๋ฅด๋‹ค.๋จผ์ € ์•„๋ž˜ ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด degit์„ ์„ค์น˜ํ•ด์ค€๋‹ค.๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ์‚ฌ์šฉ๋ฒ•์€ ํ•ด๋‹น ์ €์žฅ์†Œ์˜ ๋ฉ”์ธ ๋ธŒ๋žœ์น˜๋ฅผ ๋‹ค์šด๋กœ๋“œํ•œ

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

[REACT] Virtual DOM

UI(user interface)๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•œ ์„ ์–ธ์ ์ด๊ณ  ํšจ์œจ์ ์ด๋ฉฐ ์œ ์—ฐํ•œ javascript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌReact ๊ณต์‹ ๋ฌธ์„œ - React๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”?(https://ko.reactjs.org/tutorial/tutorial.htmlreact๋Š” DOM์„

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

[WEB] Cookie

http๋Š” stateless ํ”„๋กœํ† ์ฝœ์ด๊ธฐ ๋•Œ๋ฌธ์— ์š”์ฒญ๊ณผ ์‘๋‹ต์˜ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜์ง€ ์•Š๋Š”๋‹ค. ์ฆ‰, ๊ณผ๊ฑฐ ์ƒํƒœ๋ฅผ ๊ทผ๊ฑฐ๋กœ ํ˜„์žฌ ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์—†๋‹ค.์ธ์ฆ์ด ํ•„์š”ํ•œ ์›น ํŽ˜์ด์ง€์—์„œ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ธ์ฆํ–ˆ์„ ๋•Œ์˜ ์ƒํƒœ๋ฅผ ๊ธฐ์–ตํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค.์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์ฟ 

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

[WEB] CORS

๋™์ผ ์ถœ์ฒ˜ ์ •์ฑ…protocol(scheme), host, port๊ฐ€ ์ผ์น˜ํ•˜๋ฉด ๋™์ผํ•œ ์ถœ์ฒ˜(origin)๋กœ ๋ณธ๋‹ค. \- path ์ดํ›„๊ฐ€ ๋‹ค๋ฅธ ๊ฒƒ์€ ๋™์ผํ•œ ์ถœ์ฒ˜๋กœ ๋ณธ๋‹ค.๋ฌธ์„œ๋‚˜ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋‹ค๋ฅธ ์ถœ์ฒ˜์—์„œ ๊ฐ€์ ธ์˜จ ๋ฆฌ์†Œ์Šค์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” ๊ฒƒ์„ ์ œํ•œํ•˜๋Š” ์ค‘์š”ํ•œ ๋ณด์•ˆ ๋ฐฉ์‹์ด๋‹ค.์ž ์žฌ์ 

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

[JS] Debounce, Throttle

๋””๋ฐ”์šด์Šค๋Š” ์งฆ์€ ์‹œ๊ฐ„ ๊ฐ„๊ฒฉ์œผ๋กœ ์ด๋ฒคํŠธ๊ฐ€ ์—ฐ์†ํ•ด์„œ ๋ฐœ์ƒํ•˜๋ฉด ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ํ˜ธ์ถœํ•˜์ง€ ์•Š๋‹ค๊ฐ€ ์ผ์ • ์‹œ๊ฐ„์ด ๊ฒฝ๊ณผํ•œ ์ดํ›„์— ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๊ฐ€ ํ•œ ๋ฒˆ๋งŒ ํ˜ธ์ถœ๋˜๋„๋ก ํ•œ๋‹ค.debounce์Šค๋กœํ‹€์€ ์งง์€ ์‹œ๊ฐ„ ๊ฐ„๊ฒฉ์œผ๋กœ ์ด๋ฒคํŠธ๊ฐ€ ์—ฐ์†ํ•ด์„œ ๋ฐœ์ƒํ•˜๋”๋ผ๋„ ์ผ์ • ์‹œ๊ฐ„ ๊ฐ„๊ฒฉ์œผ๋กœ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๊ฐ€ ์ตœ

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

[JS] event ์ „ํŒŒ

DOM ํŠธ๋ฆฌ ์ƒ์— ์กด์žฌํ•˜๋Š” DOM ์š”์†Œ ๋…ธ๋“œ์—์„œ ๋ฐœ์ƒํ•œ ์ด๋ฒคํŠธ๊ฐ€ DOM ํŠธ๋ฆฌ๋ฅผ ํ†ตํ•ด ์ „ํŒŒ๋˜๋Š” ๊ฒƒ์ด๋ฒคํŠธ ์ „ํŒŒ๋Š” ์ด๋ฒคํŠธ ๊ฐ์ฒด๊ฐ€ ์ „ํŒŒ๋˜๋Š” ๋ฐฉํ–ฅ์— ๋”ฐ๋ผ 3๋‹จ๊ณ„๋กœ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ์Œ์ด๋ฒคํŠธ ์ „ํŒŒ<span style="color:: window์—์„œ ์‹œ์ž‘ํ•ด์„œ ์ด๋ฒคํŠธ ํƒ€๊นƒ ๋ฐฉํ–ฅ์œผ๋กœ

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

[JS] async attribute, defer attribute

๋ธŒ๋ผ์šฐ์ €๋Š” ๋™๊ธฐ์ ์œผ๋กœ ์‹คํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์— ์œ„์—์„œ ์•„๋ž˜ ๋ฐฉํ–ฅ์œผ๋กœ ์ˆœ์ฐจ์ ์œผ๋กœ ํŒŒ์‹ฑํ•˜๊ณ  ์‹คํ–‰๋œ๋‹ค. ๋”ฐ๋ผ์„œ ํŒŒ์ผ ํฌ๊ธฐ๊ฐ€ ํฐ javascript ํŒŒ์ผ์ด body ํƒœ๊ทธ ์ƒ์œ„์— ์œ„์น˜ํ•œ๋‹ค๋ฉด DOM ์ƒ์„ฑ์ด ์ง€์—ฐ๋  ์ˆ˜ ์žˆ๋‹ค.javascript ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œ ๋ฐ›๊ณ  ์‹คํ–‰๋˜๊ธฐ๊นŒ์ง€ script

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

[JS] ํ”„๋กœํ† ํƒ€์ž…

ํ”„๋กœํ† ํƒ€์ž…์€ ์–ด๋–ค ๊ฐ์ฒด์˜ ์ƒ์œ„ ๊ฐ์ฒด ์—ญํ• ์„ ํ•˜๋Š” ๊ฐ์ฒด์ด๋‹ค. ์–ด๋–ค ๊ฐ์ฒด์˜ ์–ด๋–ค ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ ๋˜๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ๋‹ค๋ฅธ ๊ฐ์ฒด๊ฐ€ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ”„๋กœํ† ํƒ€์ž…์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์ƒ์†์„ ๊ตฌํ˜„ํ•œ๋‹ค. ์–ด๋–ค ๊ฐ์ฒด์˜ ์ƒ์œ„ ๊ฐ์ฒด์˜ ์—ญํ• ์„ ํ•˜๋Š” ๊ฐ์ฒด๋กœ์„œ ๋‹ค๋ฅธ ๊ฐ์ฒด์—

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

[JS] IIFE; ์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜

์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜๋ž€ ?์ •์˜๋˜์ž๋งˆ์ž ์ฆ‰์‹œ ์‹คํ–‰๋˜๋Š” ํ•จ์ˆ˜ (Self-Executing Anonymous Function)์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜๋Š” ํฌ๊ฒŒ <span style="color:์ต๋ช… ํ•จ์ˆ˜(Anonymous Function)๋Š” ์ „์—ญ ์Šค์ฝ”ํ”„์— ๋ถˆํ•„์š”ํ•œ ๋ณ€์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•ด์„œ ์˜ค์—ผ

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

[HTML/CSS] Web vitals

: ํ’ˆ์งˆ ์ง€ํ‘œ์— ๋Œ€ํ•œ ํ†ตํ•ฉ์  ์ง€์นจ์„ ์ œ์‹œChrome UX Report : ์‹ค์ œ Chrome ์‚ฌ์šฉ์ž๊ฐ€ ๊ฒฝํ—˜ํ•˜๋Š”๋Œ€๋กœ, ๊ฐ Web Vital์— ๋Œ€ํ•ด ์‚ฌ์ดํŠธ์˜ ์„ฑ๋Šฅ์„ ๋น ๋ฅด๊ฒŒ ํ‰๊ฐ€ํ•  ์ˆ˜ ์žˆ์Œ: ํ•ต์‹ฌ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ์š”๊ตฌ์‚ฌํ•ญ. ๋ชจ๋“  ์›น ๊ฒฝํ—˜์—์„œ ์ค‘์š”ํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์˜ ๊ณตํ†ต ์ง‘ํ•ฉ\[ht

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

[HTML/CSS] WCAG

์‹œ๊ฐ, ์ฒญ๊ฐ, ์‹ ์ฒด, ์–ธ์–ด, ์ธ์ง€, ํ•™์Šต ๋ฐ ์‹ ๊ฒฝ ์žฅ์•  ๋“ฑ ๊ด‘๋ฒ”์œ„ํ•œ ์žฅ์• ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋…ธํ™”๋กœ ์ธํ•ด ์‹ ์ฒด ๋Šฅ๋ ฅ์ด ๋ณ€ํ•˜๋Š” ๋…ธ์ธ์„ ๋น„๋กฏํ•œ ๋น„์žฅ์• ์ธ๋“ค์˜ ์ ‘๊ทผ์„ฑ์„ ์ฆ์ง„์‹œํ‚ค๋Š” ๋ฐฉ๋ฒ•์„ ์ •์˜ํ•œ๋‹ค.์›น ์ ‘๊ทผ์„ฑ์€ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ์ฝ˜ํ…์ธ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์›น ๋ธŒ๋ผ์šฐ์ € ๋ฐ ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž ์—์ด์ „ํŠธ๋“ค์—๋„ ์˜ํ–ฅ

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

[HTML/CSS] A11Y

๊ฐ€๋Šฅํ•œ ๋งŽ์€ ์‚ฌ๋žŒ์ด ์›น ์‚ฌ์ดํŠธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๋ฐฉ๋ฒ•ํ†ต์ƒ์ ์œผ๋กœ ์žฅ์• ์ธ๋งŒ์„ ๋Œ€์ƒ์œผ๋กœ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ ์‹ค์ œ๋กœ๋Š” ๋ชจ๋ฐ”์ผ ์žฅ์น˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ์ด๋‚˜ ๋Š๋ฆฐ ๋„คํŠธ์›Œํฌ ์—ฐ๊ฒฐ์„ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค๋„ ํฌํ•จํ•˜์—ฌ ๋ชจ๋“  ์‚ฌ์šฉ์ž๋ฅผ ๋Œ€์ƒ์œผ๋กœ ํ•จ์‹œ๋งจํ‹ฑํ•œ HTML์€ \*SEO ํ–ฅ์ƒ์‹œํ‚ด์ ‘๊ทผ์„ฑ์—

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

[HTML/CSS] grid

์›นํŽ˜์ด์ง€๋ฅผ ์œ„ํ•œ ์ด์ฐจ์› ๋ ˆ์ด์•„์›ƒ ์‹œ์Šคํ…œ (flex๋Š” ์ผ์ฐจ์›) ์ฝ˜ํ…์ธ ์˜ ํ–‰๊ณผ ์—ด ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ์Œgutters or gaps : ๊ฐ ํ–‰๊ณผ ์—ด ์‚ฌ์ด ๊ณต๋ฐฑtable vs gridํ˜•ํƒœ๋Š” ๊ฐ™์œผ๋‚˜ grid๋Š” ๋ ˆ์ด์•„์›ƒ์— ์‚ฌ์šฉtable์€ ๋ฐ์ดํ„ฐ์— ๊ด€ํ•œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ๋•Œ ์‚ฌ์šฉ (t

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

[HTML/CSS] ์• ๋‹ˆ๋ฉ”์ด์…˜, flexbox

1\. CSS CH 6-910์›” 04์ผ ZEROBASE NKLCB 6์ผ์ฐจ๐Ÿฃtransition โžก user์˜ ํŠน์ • action์— ๋”ฐ๋ผ ํšจ๊ณผ๊ฐ€ ์ ์šฉ๋จanimation โžก ์ž๋™์œผ๋กœ ์š”์†Œ๊ฐ€ ์›€์ง์ด๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Œ ๋‹ค์ˆ˜์˜ ์Šคํƒ€์ผ์— ๋Œ€ํ•ด์„œ๋„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Œ keyframe์„

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

[HTML/CSS] ๋ ˆ์ด์•„์›ƒ, ์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ, transform, transition

inline์š”์†Œ์™€ block์š”์†Œ๋ฅผ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Œinlinewidth, height, margin, padding์„ ์ง€์ •ํ•  ์ˆ˜ ์—†์Œ์—ฌ๋Ÿฌ ์š”์†Œ๊ฐ€ ๊ฐ€๋กœ ๋ฐฐ์น˜๋จblockwidth๋ฅผ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ๊ฐ€๋กœ ์ „์ฒด๋ฅผ ์ฐจ์ง€ํ•จwidth, height, margin, padding์„ ์ง€์ •

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

[GIT/GITHUB] revert

mv๋กœ ์ด๋ฆ„์„ ๋ฐ”๊พธ๊ฑฐ๋‚˜ ์ด๋™์„ ์‹œ์ผฐ์„ ๋•Œmv๋ฅผ ํ•˜๋ฉด ํ˜„์žฌ ์œ„์น˜์˜ file์„ ์‚ญ์ œ ํ›„, ์ƒˆ ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๊ธฐ ๋•Œ๋ฌธ์ด ๊ฒฝ์šฐ, ๋‹ค์‹œ ์›๋ž˜ ์ด๋ฆ„์œผ๋กœ ๋˜๋Œ๋ฆฌ๊ฑฐ๋‚˜, ์ด๋™์‹œํ‚ค๋ฉด ๋จ์™œ๋ƒํ•˜๋ฉด, ์ด์ „ ์ƒํƒœ์™€ ๊ฐ€์žฅ ๋งˆ์ง€๋ง‰ ์ƒํƒœ๋งŒ ๋น„๊ตํ•˜๊ธฐ ๋•Œ๋ฌธ์— ! (์ด๋ฆ„์ด ๊ฐ™์•„์ ธ์„œ ๋น„๊ตํ•  ๋•Œ๋Š” ์ด์ „๊ณผ ๊ฐ™์€

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

[GIT/GITHUB] git flow feature

clone && initdevelop์—์„œ feature branch ์ƒ์„ฑ ํ›„, ํ•ด๋‹น branch์—์„œ ์ž‘์—…์ž‘์—…์ด ์ข…๋ฃŒ๋˜๋ฉด ๋‹ค์‹œ develop ์œผ๋กœ ๋Œ์•„๊ฐ๐Ÿ™†โ€โ™€๏ธ develop์—์„œ ์ž๋™์œผ๋กœ feature branch ๋‚ด์šฉ์„ merge ํ•จremove feature bra

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

[GIT/GITHUB] github.io

1) install && posting2) themes๐Ÿ™†โ€โ™€๏ธ ์›น ์ƒˆ๋กœ๊ณ ์นจctrl+ shift + r3) custom4) deployHEXOtheme

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

[GIT/GITHUB] git ๊ธฐ์ดˆ

initclonebranch rename๋ฐ”๊ฟ€ ๋ธŒ๋žœ์น˜ ์œ„์น˜์—์„œ $ git branch -M \[๋ฐ”๊ฟ€ ๋ธŒ๋žœ์น˜ ๋ช…]create remote$ git remote add \[remote-name] \[git-repo-address]first push$ git push -u \

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