Welcome To

ํ›„๋‹ˆ's Blog

Hello World
Let's Focus On
React ES6 (3) - ๊ฐ์ฒด ํ™•์žฅ ํ‘œํ˜„์‹, ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์˜์กด์„ฑ ๊ด€๋ฆฌ
ยท
React/ES6
๊ฐ์ฒด ํ™•์žฅ ํ‘œํ˜„์‹ ๊ธฐ์กด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ฐ์ฒด ํ™•์žฅ ํ‘œํ˜„์‹ : ๊ธฐ์กด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๊ฐ์ฒด์™€ ๊ฐ์ฒด์˜ ๊ฐ’์„ ์„ ์–ธํ•˜๊ธฐ ์œ„ํ•ด ํ‚ค ์ด๋ฆ„๊ณผ ๊ฐ’์„ ๊ฐ๊ฐ ํ• ๋‹นํ–ˆ์Œ var a = 1; var b = 2; var obj = { x: x, y: y }; // โ“ var key = 'key'; var combine = {}; combine['one' + key] = 'val'; // โ“‘ var obj2 = { // โ“’ x: x, A : function() { console.log('A'); }, B : function() { return 0; } };โ€‹ โ”Œ โ“ : ํ‚ค ์ด๋ฆ„๊ณผ ํ‚ค ๊ฐ’์ด ๋™์ผํ•จ โ”œ โ“‘ : ์—ฐ์‚ฐ ๊ฒฐ๊ณผ๋กœ ํ‚ค๊ฐ’์„ ๋Œ€์ž…ํ•  ๋•Œ๋Š” ํ‚ค๊ฐ’์„ ์ง€์ •ํ•  ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€๋กœ ์ž‘์„ฑํ•ด์•ผ ํ•จ โ”” โ“’ : ๊ฐ์ฒด์— ํ•จ์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•  ๋•Œ๋Š” ๋ณ€์ˆ˜์— ํ•จ์ˆ˜๋ฅผ ํ• ๋‹น..
React ES6 (2) - ํด๋ž˜์Šค, ํ™”์‚ดํ‘œ ํ•จ์ˆ˜
ยท
React/ES6
ํด๋ž˜์Šค๊ธฐ์กด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์€ ํด๋ž˜์Šค ํ‘œํ˜„์‹์ด ์—†์–ด์„œ prototype์œผ๋กœ ํด๋ž˜์Šค๋ฅผ ํ‘œํ˜„ํ•˜์˜€์ŒES6๋Š” ํด๋ž˜์Šค๋ฅผ ์ •์˜ํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ ๊ธฐ์กด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํด๋ž˜์Šค :ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑ์ž ํ˜•ํƒœ๋กœ ์„ ์–ธํ•œ ๋‹ค์Œ ์ƒ์†์ด ํ•„์š”ํ•œ ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜๋ฅผ prototype ๊ฐ์ฒด์— ํ• ๋‹นํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ–ˆ์Œprototype ๊ฐ์ฒด๋Š” new ์—ฐ์‚ฐ์ž๋กœ ์ƒ์„ฑ๋˜๋Š” ๊ฐ์ฒด ์•ˆ์—์„œ this ์—ฐ์‚ฐ์ž์˜ ํ•จ์ˆ˜ ๋ฐ ๋ณ€์ˆ˜ ์„ ์–ธ ์œ„์น˜๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋Š” ์š”์†Œ์ž„์˜ˆ์‹œ 1 :function Shape (x, y) { this.name = 'Shape'; this.move(x, y);}// static ํ•จ์ˆ˜๋ฅผ ์„ ์–ธShape.create = function(x, y) { return new Shape(x, y); };// ์ธ์Šคํ„ด์Šค ํ•จ์ˆ˜๋ฅผ ์„ ์–ธShape. pro..
React ES6 (1) - ํ…œํ”Œ๋ฆฟ ๋ฌธ์ž์—ด, ์ „๊ฐœ ์—ฐ์‚ฐ์ž, ๊ฐ€๋ณ€ ๋ณ€์ˆ˜ & ๋ถˆ๋ณ€ ๋ณ€์ˆ˜
ยท
React/ES6
ํ…œํ”Œ๋ฆฟ ๋ฌธ์ž์—ด JavaScript์˜ ๋ฌธ์ž์—ด : var string1 ='์•ˆ๋…•ํ•˜์„ธ์š”' var string2 ='ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค' var welcome = string1 + ' ' + string2; // โ“ var product = { name: '์ฑ…', price: '5000์›' }; var message = '์ œํ’ˆ' + product.name + '์˜ ๊ฐ€๊ฒฉ์€' + product.price + '์ž…๋‹ˆ๋‹ค'; // โ“‘ var multiLine = '๋ฌธ์ž์—ด1\n๋ฌธ์ž์—ด2'; // โ“’ var value1 = 1; var value2 = 2; var boolValue = false; var operator1 = '๊ณฑ์…ˆ๊ฐ’์€ ' + (value1 * value2) + '์ž…๋‹ˆ๋‹ค.'; // โ““ var operator2 = '๋ถˆ..
๋ ˆ์ด์•„์›ƒ ๋งŒ๋“ค๊ธฐ
ยท
Web Basic/CSS
๋ฐฐ์น˜ ๋ฐฉ๋ฒ• ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ display ์†์„ฑ display ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์™€ ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ์š”์†Œ๋ฅผ ์„œ๋กœ ๋ฐ”๊ฟ”์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅ ์ฃผ๋กœ ์›น ๋ฌธ์„œ์˜ ๋‚ด๋น„๊ฒŒ์ด์…˜์„ ๋งŒ๋“ค๋ฉด์„œ ๋ฉ”๋‰ด ํ•ญ๋ชฉ์„ ๊ฐ€๋กœ๋กœ ๋ฐฐ์น˜ํ•  ๋•Œ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ณ , ์ด๋ฏธ์ง€๋ฅผ ํ‘œ ํ˜•ํƒœ๋กœ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ์Œ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” display ์†์„ฑ๊ฐ’ block : ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ์š”์†Œ๋ฅผ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋กœ ๋งŒ๋“ฆ inline : ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋ฅผ ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ์š”์†Œ๋กœ ๋งŒ๋“ฆ inline-block : ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ์š”์†Œ์™€ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์˜ ์†์„ฑ์„ ๋ชจ๋‘ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ ๋งˆ์ง„๊ณผ ํŒจ๋”ฉ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Œ none : ํ•ด๋‹น ์š”์†Œ๋ฅผ ํ™”๋ฉด์— ํ‘œ์‹œํ•˜์ง€ ์•Š์Œ -(์˜ˆ์‹œ) : ์˜ˆ์‹œ 1 ์˜ˆ์‹œ 2 ์˜ˆ์‹œ 3 ์˜ˆ์‹œ 4 -(๊ฒฐ๊ณผ) : ์™ผ์ชฝ์ด๋‚˜ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ๋ฐฐ์น˜ํ•˜๋Š” ์†์„ฑ float ์†์„ฑ ํƒœ๊ทธ๋Š” ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ..
๋ฐ•์Šค๋ชจ๋ธ ์—ฌ๋ฐฑ ์กฐ์ ˆํ•˜๊ธฐ
ยท
Web Basic/CSS
์š”์†Œ ์ฃผ๋ณ€์˜ ์—ฌ๋ฐฑ์„ ์„ค์ •ํ•˜๋Š” ์†์„ฑ margin ์†์„ฑ ์š”์†Œ์™€ ์š”์†Œ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์„ ์กฐ์ ˆ ํ•  ์ˆ˜ ์žˆ์Œ 4๊ฐœ ๋ฐฉํ–ฅ์— ๋˜‘๊ฐ™์ด ์ง€์ •ํ•  ์ˆ˜ ์žˆ๊ณ , margin ๋‹ค์Œ์— ํ•˜์ดํ”ˆ(-)์„ ๋„ฃ๊ณ  ์œ„์น˜๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์˜ˆ์•ฝ์–ด๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํŠน์ • ๋ฐฉํ–ฅ์—๋งŒ ์ง€์ •ํ•  ์ˆ˜๋„ ์žˆ์Œ ๊ธฐ๋ณธํ˜• : margin: | | auto margin ์†์„ฑ๊ฐ’ : ๋„ˆ๋น„๊ฐ’์ด๋‚˜ ๋†’์ด๊ฐ’์„ px์ด๋‚˜ em ๊ฐ™์€ ๋‹จ์œ„์™€ ํ•จ๊ป˜ ์ˆ˜์น˜๋กœ ์ง€์ •ํ•จ : ๋ฐ•์Šค ๋ชจ๋ธ์„ ํฌํ•จํ•œ ๋ถ€๋ชจ ์š”์†Œ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋„ˆ๋น„๊ฐ’์ด๋‚˜ ๋†’์ด๊ฐ’์„ ํผ์„ผํŠธ(%)๋กœ ์ง€์ •ํ•จ auto : display ์†์„ฑ์—์„œ ์ง€์ •ํ•œ ๊ฐ’์— ๋งž๊ฒŒ ์ ์ ˆํ•œ ๊ฐ’์„ ์ž๋™์œผ๋กœ ์ง€์ •ํ•จ ๋งˆ์ง„ ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ์›น ๋ฌธ์„œ๋ฅผ ๊ฐ€์šด๋ฐ ์ •๋ ฌํ•˜๊ธฐ margin ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ์›น ๋ฌธ์„œ์˜ ๋‚ด์šฉ์„ ํ™”๋ฉด ์ค‘์•™์— ๋ฐฐ์น˜ํ•˜๋ ค๋ฉด ๋ฐฐ์น˜ํ•  ์š”์†Œ์˜ ๋„ˆ๋น„๊ฐ’์ด ์ •ํ•ด์ ธ ์žˆ์–ด์•ผ ํ•จ margin-l..
๋ฐ•์Šค ๋ชจ๋ธ ํ…Œ๋‘๋ฆฌ ์ง€์ •ํ•˜๊ธฐ
ยท
Web Basic/CSS
๋ฐ•์Šค ๋ชจ๋ธ์˜ ๋ฐฉํ–ฅtop : ์œ— ๋ถ€๋ถ„right : ์˜ค๋ฅธ์ชฝbottom : ์•„๋žซ ๋ถ€๋ถ„left : ์™ผ์ชฝํ…Œ๋‘๋ฆฌ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•˜๋Š” ์†์„ฑborder-style ์†์„ฑ๊ธฐ๋ณธ๊ฐ’์€ noneborder-style ์†์„ฑ๊ฐ’noneํ…Œ๋‘๋ฆฌ๊ฐ€ ์—†์Œ / ๊ธฐ๋ณธ๊ฐ’hiddenํ…Œ๋‘๋ฆฌ๋ฅผ ๊ฐ์ถค / ํ‘œ์—์„œ border-collapse: collapse์ผ ๊ฒฝ์šฐ ๋‹ค๋ฅธ ํ…Œ๋‘๋ฆฌ๋„ ํ‘œ์‹œ๋˜์ง€ ์•Š์Œsolidํ…Œ๋‘๋ฆฌ๋ฅผ ์‹ค์„ ์œผ๋กœ ํ‘œ์‹œํ•จdottedํ…Œ๋‘๋ฆฌ๋ฅผ ์ ์„ ์œผ๋กœ ํ‘œ์‹œํ•จdashedํ…Œ๋‘๋ฆฌ๋ฅผ ์งง์€ ์ง์„ ์œผ๋กœ ํ‘œ์‹œํ•จdoubleํ…Œ๋‘๋ฆฌ๋ฅผ ์ด์ค‘์„ ์œผ๋กœ ํ‘œ์‹œํ•จ / ๋‘ ์„  ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์ด border-width ๊ฐ’์ด ๋จgrooveํ…Œ๋‘๋ฆฌ๋ฅผ ์ฐฝ์— ์กฐ๊ฐํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ํ‘œ์‹œํ•จ / ํ™ˆ์ด ํŒŒ์ธ ๋“ฏ ์ž…์ฒด ๋А๋‚Œinsetํ‘œ์—์„œ border-collapse: seperate์ผ ๊ฒฝ์šฐ ์ „์ฒด ๋ฐ•์Šค ํ…Œ๋‘๋ฆฌ๊ฐ€ ์ฐฝ์— ๋ฐ•ํ˜€..
CSS ๋ฐ•์Šค ๋ชจ๋ธ
ยท
Web Basic/CSS
๋ฐ•์Šค ๋ชจ๋ธ์€ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์ธ์ง€ ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ์š”์†Œ์ธ์ง€์— ๋”ฐ๋ผ ๋‚˜์—ด ๋ฐฉ๋ฒ•์ด ๋‹ฌ๋ผ์ง๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ด ์š”์†Œ๋ฅผ ์‚ฝ์ž…ํ–ˆ์„ ๋•Œ ํ˜ผ์ž ํ•œ ์ค„์„ ์ฐจ์ง€ํ•˜๋Š” ๊ฒƒํ•œ ์ค„์„ ์ฐจ์ง€ํ•œ๋‹ค = ํ•ด๋‹น ์š”์†Œ์˜ ๋„ˆ๋น„๊ฐ€ 100%โˆด ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์˜ ์™ผ์ชฝ์ด๋‚˜ ์˜ค๋ฅธ์ชฝ์— ๋‹ค๋ฅธ ์š”์†Œ๊ฐ€ ์˜ฌ ์ˆ˜ ์—†์Œ๋Œ€ํ‘œ์ ์ธ ํƒœ๊ทธ๋กœ , , ๋“ฑ์ด ์žˆ์Œ-(์˜ˆ์‹œ) : ์˜ˆ์ œ ์˜ˆ์‹œ 1 ์˜ˆ์‹œ 2 ์˜ˆ์‹œ 3 ์˜ˆ์‹œ 4์˜ˆ์‹œ 5 -(๊ฒฐ๊ณผ) :์ธ๋ผ์ธ ๋ ˆ๋ฒจ ์š”์†Œ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ์š”์†Œํ•œ ์ค„์„ ์ฐจ์ง€ํ•˜์ง€ ์•Š์Œ์ฝ˜ํ…์ธ ๋งŒํผ๋งŒ ์˜์—ญ์„ ์ฐจ์ง€ํ•˜๊ณ  ๋‚˜๋จธ์ง€ ๊ณต๊ฐ„์—๋Š” ๋‹ค๋ฅธ ์š”์†Œ๊ฐ€ ์˜ฌ ์ˆ˜ ์žˆ์Œโˆด ํ•œ ์ค„์— ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ์š”์†Œ๋ฅผ ์—ฌ๋Ÿฌ ๊ฐœ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์Œ๋Œ€ํ‘œ์ ์ธ ํƒœ๊ทธ๋กœ , , ๋“ฑ์ด ์žˆ์Œ-(์˜ˆ์‹œ) : ์˜ˆ์ œ ์˜ˆ์‹œ 1 ์˜ˆ์‹œ 2 ์˜ˆ์‹œ 3 ์˜ˆ์‹œ 4 ์˜ˆ์‹œ 5 -(๊ฒฐ๊ณผ) :๋ฐ•์Šค ๋ชจ๋ธ๋ฐ•์Šค ๋ชจ๋ธ์Šคํƒ€์ผ ์‹œํŠธ..
ํ‘œ ์Šคํƒ€์ผ
ยท
Web Basic/CSS
ํ‘œ ์ œ๋ชฉ์˜ ์œ„์น˜๋ฅผ ์ •ํ•ด ์ฃผ๋Š” ์†์„ฑ caption-side ์†์„ฑ ์บก์…˜์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ํ‘œ ์œ„์ชฝ์— ํ‘œ์‹œ๋˜์ง€๋งŒ caption-side ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋ฉด ํ‘œ ์•„๋ž˜์ชฝ์œผ๋กœ ์˜ฎ๊ธธ ์ˆ˜ ์žˆ์Œ ๊ธฐ๋ณธํ˜• : caption-side: top | bottom โ”Œ top : ์บก์…˜์„ ํ‘œ ์œ—๋ถ€๋ถ„์— ํ‘œ์‹œํ•จ / ๊ธฐ๋ณธ๊ฐ’ โ”” bottom : ์บก์…˜์„ ํ‘œ ์•„๋žซ๋ถ€๋ถ„์— ํ‘œ์‹œํ•จ ํ‘œ์— ํ…Œ๋‘๋ฆฌ๋ฅผ ๊ทธ๋ ค ์ฃผ๋Š” ์†์„ฑ border ์†์„ฑ ํ‘œ ๋ฐ”๊นฅ ํ…Œ๋‘๋ฆฌ์™€ ์…€ ํ…Œ๋‘๋ฆฌ๋ฅผ ๊ฐ๊ฐ ์ง€์ •ํ•จ -(์˜ˆ์‹œ) : ์˜ˆ์ œ ์˜ˆ์ œ ์˜ˆ์‹œ 1 ์˜ˆ์‹œ 2 ์˜ˆ์‹œ 3 ์˜ˆ์‹œ 4 A B C D ๊ฐ€ ๋‚˜ ๋‹ค ๋ผ -(๊ฒฐ๊ณผ) : ์…€ ์‚ฌ์ด์˜ ์—ฌ๋ฐฑ์„ ์ง€์ •ํ•˜๋Š” ์†์„ฑ border-spacing ์†์„ฑ ์…€๊ณผ ์…€ ์‚ฌ์ด์˜ ์—ฌ๋ฐฑ์„ ์กฐ์ ˆํ•  ์ˆ˜ ์žˆ์Œ ์ˆ˜ํ‰ ๊ฑฐ๋ฆฌ์˜ ๊ฐ’๊ณผ ์ˆ˜์ง ๊ฑฐ๋ฆฌ์˜ ๊ฐ’์„ ๊ณต๋ฐฑ์œผ๋กœ ๊ตฌ๋ณ„ํ•ด์„œ ๋‚˜ํƒ€๋‚ด๋Š”๋ฐ, ๋‘ ๊ฐ’์ด ๊ฐ™๋‹ค๋ฉด 1..