โœ๏ธ TIL

์˜ค๋Š˜๋ถ€ํ„ฐ 3์ผ๊ฐ„ SQL ์ˆ˜์—… ์‹œ์ž‘! SELECT : SELECT ๋ฌธ์€ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์—์„œ ํŠน์ • ์—ด์˜ ๊ฐ’์„ ๊ฒ€์ƒ‰ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•˜๋ฉฐ, ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ชจ๋“  ํ–‰์„ ์„ ํƒํ•˜๊ณ  ํŠน์ • ์—ด์˜ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. SELECT column1, column2 FROM table_name; SELECT DESTINCT : ์ค‘๋ณต๋œ ๊ฐ’์„ ์ œ์™ธํ•˜๊ณ  ๊ณ ์œ ํ•œ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜์—ฌ, ์ค‘๋ณต๋œ ํ–‰์ด ์žˆ์„ ๋•Œ, ์ค‘๋ณต๋œ ๊ฐ’์„ ํ•˜๋‚˜๋งŒ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. SELECT DISTINCT column1 FROM table_name; COUNT : ํŠน์ • ์ฟผ๋ฆฌ ์กฐ๊ฑด์— ๋งž๋Š” ์ž…๋ ฅ ํ–‰์˜ ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. (table์˜ ํŠน์„ฑ ์ƒ ์•„๋ฌดrow๋‚˜ ์ž…๋ ฅํ•ด๋„ ๊ฐ’์€ ๋™์ผํ•˜๋‹ค) SELECT COUNT (DISTINCT name) โ—๏ธํŠน์ • ๋Œ€์ƒ์— ์ž‘์šฉํ•˜๋Š” ํ•จ์ˆ˜์ด๊ธฐ ๋•Œ๋ฌธ์—, ๊ด„ํ˜ธ๋Š” ํ•„์ˆ˜์ด๋‹ค! WHERE ..
์ด์–ด์ œ์— ์ด์–ด์„œ ๋ฆฌ์•กํŠธ ํ•™์Šต์„ ํ•˜์˜€๋‹ค! ๋‹จ๊ธฐํŠน๊ฐ• ์ฝ”์Šค๋กœ ๋“ฃ๋‹ค๋ณด๋‹ˆ, ํ•™์Šต์˜ ์–‘์ด ์ข€ ๋งŽ์•˜๋‹ค! ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง ๋‹ค์–‘ํ•œ ๋ฐฉ์‹์œผ๋กœ ์กฐ๊ฑด์— ๋”ฐ๋ผ ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋ง์„ ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ์ง€๊ธˆ๊ณผ ๊ฐ™์ด true ๊ฒฝ์šฐ์—๋งŒ ๋ Œ๋”๋งํ• ๋•, &&์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค! 3ํ•ญ ์—ฐ์‚ฐ์ž {ModalIsVisible ? ( ) : null} false์ผ๋• null &&์—ฐ์‚ฐ์ž {ModalIsVisible && ( )} ๋ณ€์ˆ˜ ์‚ฌ์šฉ let modalContent; if (ModalIsVisible) { modalContent = ( ); } return ( {modalContent} ); } ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ด€๋ฆฌํ• ๋•Œ, ์ข€ ๋” ํšจ์œจ์ ์ธ ๊ฒฝ์šฐ๊ฐ€ ์žˆ์ง€๋งŒ ์ง€๊ธˆ๊ณผ ๊ฐ™์ด ๋‹จ์ˆœํ•œ ๊ฒฝ์šฐ์—๋Š” ์ง€์–‘ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. useState์˜ ์ƒํƒœ ์—…๋ฐ์ดํŠธ ํ•จ์ˆ˜ con..
์–ด๋Š๋ง ํ”„๋ก ํŠธ VOD๊ฐ€ ๋๋‚˜๊ฐ€๊ณ  ์žˆ๋‹ค.. ์˜ค๋Š˜๋ถ€ํ„ฐ ๋ฆฌ์•กํŠธ ํ•™์Šต์„ ์‹œ์ž‘ํ–ˆ๋‹ค! React vs Javascript ๋ฆฌ์•กํŠธ๋Š” HTML๊ณผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ˜ผํ•ฉํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” JSX๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ, ๋ช…๋ นํ˜•์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€๋Š” ๋‹ฌ๋ฆฌ, ์„ ์–ธํ˜•์œผ๋กœ์จ UI state๋งŒ ์„ค์ •ํ•ด์ฃผ๋ฉด, ๊ณผ์ •์€ ์•Œ์•„์„œ ํ•ด์ค€๋‹ค! JSX JSX(JavaScript XML)๋Š” ๋ฆฌ์•กํŠธ(React)์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ™•์žฅ ๋ฌธ๋ฒ•์ด๋‹ค. HTML๊ณผ ๋น„์Šทํ•˜๊ฒŒ ์ƒ๊ฒผ์ง€๋งŒ, ์‹ค์ œ๋กœ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋ณ€ํ™˜๋˜์–ด ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค. JSX๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ฐ”๋กœ ์ฝ์„ ์ˆ˜ ์—†๋Š”๋ฐ, ๋ธŒ๋ผ์šฐ์ €์— ๋„๋‹ฌํ•˜๊ธฐ ์ „์— ๊ฐœ๋ฐœ์„œ๋ฒ„์—์„œ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜๋œ๋‹ค. JSX๋Š” ํŠธ๋ฆฌ ๋ชจ์–‘์˜ ์ฝ”๋“œ ๊ตฌ์กฐ๋กœ ๋ฆฌ์•กํŠธ์—๊ฒŒ ๊ฐ ์ปดํฌ๋„ŒํŠธ๋“ค์ด ์–ด๋–ป๊ฒŒ ์—ฐ๊ด€๋˜์–ด ์žˆ๊ณ , UI๋Š” ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ ธ์•ผ ํ•˜๋Š”์ง€ ์•Œ๋ ค์ค€๋‹ค. ๊ทธ๋ฆฌ๊ณ ,..
Javascript ํ•™์Šต ๋งˆ์ง€๋ง‰๋‚ ! CSS framework๋„ ๋งˆ์ง€๋ง‰์— ์‚ด์ง ๋‹ค๋ฃจ์—ˆ๋‹ค. Javascript ๋™๋“ฑ ์—ฐ์‚ฐ์ž (== vs ===) โœ“ == (Equality) : ๊ฐ’๋งŒ ๋น„๊ต โ—๏ธ์•”๋ฌต์ ์œผ๋กœ,ํ˜•๋ฒˆํ™˜(type casting)์ด ์ผ์–ด๋‚˜๊ธฐ ๋•Œ๋ฌธ์—, ์ž์นซ ์œ„ํ—˜ํ•  ์ˆ˜ ์žˆ๋‹ค! '1'==1 //true 1==true //true 0==false โœ“ === Strict Equality :ํƒ€์ž…, ๊ฐ’ ๋ชจ๋‘ ๋น„๊ต '1'==1 //false 1==true //false ํ˜•๋ณ€ํ™˜์œผ๋กœ ์™„๋ฒฝํ•˜๊ฒŒ ํ•˜๋Š”๊ฒƒ์ด ์•ˆ์ •์ ์ด๋‹ค! Truthy / Falsy ์กฐ๊ฑด๋ฌธ์ด๋‚˜ ๋…ผ๋ฆฌ ์—ฐ์‚ฐ์—์„œ ์‚ฌ์šฉ๋˜๋ฉฐ, ํŠน์ • ๊ฐ’์ด ์ฐธ๊ณผ ๊ฑฐ์ง“์œผ๋กœ ๊ฐ„์ฃผ๋˜๋Š” ์กฐ๊ฑด์„ ๋‚˜ํƒ€๋‚ธ๋‹ค. โœ“ Truthy : true, "0", "false", infinity, -infinity, {}..
์˜ค๋Š˜ ๋“œ๋””์–ด ๊ธธ๊ณ  ๊ธธ์—ˆ๋˜ CSS ํ•™์Šต์„ ๋งˆ์น˜๊ณ , javascript์— ๋Œ€ํ•ด ํ•™์Šตํ•˜์˜€์Šต๋‹ˆ๋‹ค! ๐Ÿ™‚ ์–ด์ œ ๋ฐฐ์šด Form ํ•™์Šต์„ ๊ธฐ๋ฐ˜์œผ๋กœ, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋Š” ์ฑŒ๋ฆฐ์ง€๋ฅผ ์ง„ํ–‰ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๐Ÿค” ์˜ค๋Š˜์˜ ์ฑŒ๋ฆฐ์ง€๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ CSS์—์„œ ์–ด๋ ค์›€์„ ๊ฒช์—ˆ๋˜ ๋ถ€๋ถ„์ด๋‹ค. radio , checkbox์˜ ํํŠธ๋Ÿฌ์ง„ ์ •๋ ฌ์„ ์œ„ํ•ด, flex box๋กœ ๋งŒ๋“ค๊ณ , ์ˆ˜์ง์ •๋ ฌ์„ ๋งž์ถ”๋ฉด ๋˜๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค. ๋˜ ๋‹ค๋ฅธ ๋ฌธ์ œ๋Š”, input์š”์†Œ๊ฐ€ label ์•ž์ด ์•„๋‹Œ ๋’ค๋กœ ์ด๋™ํ•ด๋ฒ„๋ฆฌ๋Š” ๋ฌธ์ œ์˜€๋‹ค.. ๐Ÿ’ก .inline-control { display: flex; } .inline-control input { width: auto; } .inline-control label { margin: 0; margin-left: 0.5rem; } ์•ž์„œ, i..
์˜ค๋Š˜์€ ์›น์‚ฌ์ดํŠธ์—์„œ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” form HTML์— ๋Œ€ํ•ด์„œ ํ•™์Šตํ•˜์˜€๋‹ค. ๋Œ€ํ‘œ์ ์œผ๋กœ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ๋“ค๊ณผ ์†์„ฑ๋“ค์„ ์ •๋ฆฌํ•ด๋ณด๊ณ ์ž ํ•œ๋‹ค. inherit โœ“ html HTML ๋ฌธ์„œ์˜ ์ตœ์ƒ์œ„ ์š”์†Œ โœ“ :root ๋ฌธ์„œ์˜ ์ตœ์ƒ์œ„ ์š”์†Œ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์˜์‚ฌ ํด๋ž˜์Šค์ž…๋‹ˆ๋‹ค โœ“ * ๋ชจ๋“  ์š”์†Œ๋ฅผ ์„ ํƒํ•˜๋Š” ์œ ๋‹ˆ๋ฒ„์„ค ์„ ํƒ์ž์ž…๋‹ˆ๋‹ค. html,root์„ ํƒ์ž๋Š” ํ•˜์œ„๋กœ ์ƒ์†๋˜์–ด ์ ์šฉ๋˜๊ณ , * ์„ ํƒ์ž๋Š” ๋ฐ”๋กœ ๋ชจ๋“  ์š”์†Œ์— ์ ์šฉ๋œ๋‹ค! transition ์š”์†Œ์˜ ํŠน์ • ์†์„ฑ์ด ๋ณ€ํ•  ๋•Œ ํ•ด๋‹น ๋ณ€ํ™”๋ฅผ ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•œ๋‹ค. transform ์š”์†Œ์˜ ๋ณ€ํ™˜(์ด๋™, ํšŒ์ „, ํฌ๊ธฐ ์กฐ์ ˆ ๋“ฑ)์„ ์ง€์ •ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•œ๋‹ค. 2D, 3D ๋ณ€ํ™˜ ๋ชจ๋‘ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋‹ค! โญ๏ธ ์ „ํ™˜์„ ๊ตฌํ˜„ํ•˜๋Š” ์ฝ”๋“œ๋Š” transtition์„ ํŠธ๋ฆฌ๊ฑฐํ•˜๋Š” ์ด๋ฒคํŠธ๊ฐ€ ์•„๋‹ˆ๋ผ, ์š”์†Œ์˜ ์ดˆ๊ธฐ ์ƒ..
์˜ค๋Š˜์€ ๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ์— ๋Œ€ํ•ด ๋ฐฐ์› ๋‹ค. ์ด ๋˜ํ•œ ์ค‘์š”ํ•œ ๊ฐœ๋…๋“ค์ด ๋งŽ์œผ๋‹ˆ ํ•œ๋ฒˆ ์ •๋ฆฌํ•ด๋ณด์ž ๋ฐ์Šคํฌํƒ‘ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํƒœ๋ธ”๋ฆฟ, ์Šค๋งˆํŠธํฐ ๋“ฑ ๋‹ค์–‘ํ•œ ๊ธฐ๊ธฐ์—์„œ ์ ‘์†ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ธฐ๊ธฐ์˜ ํ™”๋ฉด์— ๋งž์ถฐ ์œ ๋™์ ์œผ๋กœ ์›น ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•ด์•ผํ•œ๋‹ค. ์ด๋ ‡๊ฒŒ ๋งŒ๋“œ๋Š”๊ฒƒ์ด ๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ์ด๋‹ค! Unit ์ €๋ฒˆ ์‹œ๊ฐ„๊นŒ์ง€๋งŒํ•ด๋„ ๊ณ ์ •์ ์ธ px๋‹จ์œ„๋ฅผ ์‚ฌ์šฉํ•˜์˜€๋‹ค. ๋ฐ˜์‘ํ˜• ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๋•, ๊ณ ์ •๊ฐ’์ธ px์€ ๋ณ„๋กœ ์ ํ•ฉํ•œ ๋ฐฉ๋ฒ•์€ ์•„๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด, ๊ณ ์ •์ ์ธ px์€ ํ™”๋ฉด์˜ ํฌ๊ธฐ๊ฐ€ ๋ณ€ํ•˜๊ฑฐ๋‚˜, ๋ธŒ๋ผ์šฐ์ € ์„ค์ •์—์„œ ์•„๋ฌด๋ฆฌ ๊ธ€๊ผด ์„ค์ •์„ ํฌ๊ฒŒ ์ž‘๊ฒŒ ๋ณ€๊ฒฝํ•˜์—ฌ๋„ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๋Š”๋‹ค. px pt % em rem vh, vw CSS์˜ Unit์˜ ์ข…๋ฅ˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. % (ํผ์„ผํŠธ) Parent element ๊ธฐ์ค€ ์ƒ๋Œ€ ํฌ๊ธฐ ์œ ๋™๊ฐ’ Grid ์žก๊ธฐ & ๋ฏธ๋””์–ด ๊ฐœ..
์˜ค๋Š˜์€ ์ง€๊ธˆ๊นŒ์ง€ ๋ฐฐ์šด CSS ๋ ˆ์ด์•„์›ƒ, positioning์„ ์‚ฌ์šฉํ•˜์—ฌ, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋‘ ํŽ˜์ด์ง€๋ฅผ ์™„์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค. Header์˜ ๋ ˆ์ด์•„์›ƒ์ด ์กฐ๊ธˆ ์–ด๋ ต๋‹ค๊ณ  ๋Š๊ปด์„œ ๋‹ค์‹œ ํ•œ๋ฒˆ ์ •๋ฆฌํ•ด๋ณด๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. header { display: flex; justify-content: space-between; align-items: center; padding: 15px 60px; position: absolute; box-sizing: border-box; width: 100%; } ๋จผ์ €, ํ™•์‹คํžˆ ์งš๊ณ  ๋„˜์–ด๊ฐ€์•ผํ•  ๊ฒƒ์ด ์žˆ๋‹ค. width:100%๋ผ๋Š”๊ฒƒ์€ ๋ถ€๋ชจ์š”์†Œ์˜ ํฌ๊ธฐ(border,margin,padding)์„ ํฌํ•จํ•œ ๊ฐ’์ด ์•„๋‹ˆ๋ผ, content์˜ ํฌ๊ธฐ๋งŒ์„ ์ƒ์†๋ฐ›๋Š”๋‹ค. ์ด๊ฑธ ํ˜ผ๋™ํ•˜์—ฌ ์•Œ๊ณ  ์žˆ์—ˆ๋‹ค...๐Ÿ™€ ์œ„ ์‚ฌ์ง„๊ณผ ๊ฐ™์ด h..
Yuuuki
'โœ๏ธ TIL' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๊ธ€ ๋ชฉ๋ก (7 Page)