๐ป Web
-
*Fetch ๋? Ajax๋ฅผ ๊ตฌํํ ์ ์๋ ๋น๊ต์ ์ต๊ทผ์ ๋์จ ๊ธฐ์ . jQuery.ajax()์ ๋ค๋ฅธ์ ์ (1) fetch๋ก๋ถํฐ ๋ฐํ๋๋ ๊ฐ์ฒด๋ HTTP error์ํ๋ฅผ rejectํ์ง ์๋๋ค. (2) ์ฟ ํค๋ฅผ ๋ณด๋ด๊ฑฐ๋ ๋ฐ์ง ์๋๋ค๋์ . ์นํ์ด์ง ์ ์ฒด๋ฅผ ๋ฆฌ๋ก๋ฉ(re-loading)ํ์ง ์๊ณ , ์ผ๋ถ๋ถ๋ง ๋ค๋ฅธ ๋ฐ์ดํฐ๋ก ๊ต์ฒด(๊ฐฑ์ )ํ๋ ๊ธฐ๋ฅ์ ํ๋ค. Promise ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ ๋น๋๊ธฐ ํต์ ์ ํ๋ค. *๋น๋๊ธฐ ์ฒ๋ฆฌ : ์ผ๋ฐ์ ์ผ๋ก ์ด๋ ํ ํน์ ๋ช ๋ น์ด๊ฐ ์์ผ๋ฉด, ๊ทธ๊ฒ์ด ์๋ฃ๋ ํ์ ๋ค์ ๋ช ๋ น์ด๋ฅผ ์ํํ์ง๋ง, ๋น๋๊ธฐ์ฒ๋ฆฌ๋ ํน์ ์ฝ๋๋ฅผ ์คํํ๊ณ , ๊ทธ ์ฝ๋๊ฐ ์๋ฃ๋๊ธฐ ์ ์ ๋ค์์ฝ๋๋ฅผ ์ด์ด์ ์ํํ๋๊ฒ์ ๋งํ๋ค. *Promise(ํ๋ก๋ฏธ์ค) : ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ํ์ฉ๋๋ ๊ฐ์ฒด๋ฅผ ๋งํ๋ค. *Fetch ๊ฐ๋จํ ์์ ..
Fetch API ์ ์ฌ์ฉ ๋ฐ ๊ฐ๋จํ ์์ ( ๊ฐ๋ , ๋น๋๊ธฐ ์ฒ๋ฆฌ , ajax )*Fetch ๋? Ajax๋ฅผ ๊ตฌํํ ์ ์๋ ๋น๊ต์ ์ต๊ทผ์ ๋์จ ๊ธฐ์ . jQuery.ajax()์ ๋ค๋ฅธ์ ์ (1) fetch๋ก๋ถํฐ ๋ฐํ๋๋ ๊ฐ์ฒด๋ HTTP error์ํ๋ฅผ rejectํ์ง ์๋๋ค. (2) ์ฟ ํค๋ฅผ ๋ณด๋ด๊ฑฐ๋ ๋ฐ์ง ์๋๋ค๋์ . ์นํ์ด์ง ์ ์ฒด๋ฅผ ๋ฆฌ๋ก๋ฉ(re-loading)ํ์ง ์๊ณ , ์ผ๋ถ๋ถ๋ง ๋ค๋ฅธ ๋ฐ์ดํฐ๋ก ๊ต์ฒด(๊ฐฑ์ )ํ๋ ๊ธฐ๋ฅ์ ํ๋ค. Promise ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ ๋น๋๊ธฐ ํต์ ์ ํ๋ค. *๋น๋๊ธฐ ์ฒ๋ฆฌ : ์ผ๋ฐ์ ์ผ๋ก ์ด๋ ํ ํน์ ๋ช ๋ น์ด๊ฐ ์์ผ๋ฉด, ๊ทธ๊ฒ์ด ์๋ฃ๋ ํ์ ๋ค์ ๋ช ๋ น์ด๋ฅผ ์ํํ์ง๋ง, ๋น๋๊ธฐ์ฒ๋ฆฌ๋ ํน์ ์ฝ๋๋ฅผ ์คํํ๊ณ , ๊ทธ ์ฝ๋๊ฐ ์๋ฃ๋๊ธฐ ์ ์ ๋ค์์ฝ๋๋ฅผ ์ด์ด์ ์ํํ๋๊ฒ์ ๋งํ๋ค. *Promise(ํ๋ก๋ฏธ์ค) : ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ํ์ฉ๋๋ ๊ฐ์ฒด๋ฅผ ๋งํ๋ค. *Fetch ๊ฐ๋จํ ์์ ..
2020.05.03 -
parseInt() ๋ฌธ์์ด์ ์ ์ํ์ผ๋ก ๋ฐ๊ฟ๋๋ค. (๋ฐ๋ผ์ ์์์ ์ ๋ฒ๋ฆฌ๊ฒ ๋ฉ๋๋ค.) parseInt(string , n) // string์ n์ง์๋ก ์ฝ์ด์, 10์ง์๋ก ๋ฐํํฉ๋๋ค. parseInt(string) // n์์ด string๋ง ์ฐ๋ฉด, 10์ง์๋ก ์ฝ์ด 10์ง์๋ก ๋ฐํํฉ๋๋ค. parseFloat() ๋ฌธ์์ด์ ์ค์ํ์ผ๋ก ๋ฆฌํดํฉ๋๋ค. parseFloat(string) isNaN() - is Not a Number isNaN(value) value๊ฐ ์ซ์๋ผ๋ฉด true๋ฅผ ๋ฆฌํดํฉ๋๋ค. ์ซ์๊ฐ ์๋๋ฉด false๋ฅผ ๋ฆฌํดํฉ๋๋ค. eval () eval(exp) exp์ ๋ค์ด๊ฐ ์์ ๊ณ์ฐํ์ฌ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํฉ๋๋ค. exp์๋ ๋ฌธ์์ดํํ๋ก ๋ฃ์ด์ผํฉ๋๋ค.
JavaScript - eval( ) , parseInt( ) , isNaN( )parseInt() ๋ฌธ์์ด์ ์ ์ํ์ผ๋ก ๋ฐ๊ฟ๋๋ค. (๋ฐ๋ผ์ ์์์ ์ ๋ฒ๋ฆฌ๊ฒ ๋ฉ๋๋ค.) parseInt(string , n) // string์ n์ง์๋ก ์ฝ์ด์, 10์ง์๋ก ๋ฐํํฉ๋๋ค. parseInt(string) // n์์ด string๋ง ์ฐ๋ฉด, 10์ง์๋ก ์ฝ์ด 10์ง์๋ก ๋ฐํํฉ๋๋ค. parseFloat() ๋ฌธ์์ด์ ์ค์ํ์ผ๋ก ๋ฆฌํดํฉ๋๋ค. parseFloat(string) isNaN() - is Not a Number isNaN(value) value๊ฐ ์ซ์๋ผ๋ฉด true๋ฅผ ๋ฆฌํดํฉ๋๋ค. ์ซ์๊ฐ ์๋๋ฉด false๋ฅผ ๋ฆฌํดํฉ๋๋ค. eval () eval(exp) exp์ ๋ค์ด๊ฐ ์์ ๊ณ์ฐํ์ฌ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํฉ๋๋ค. exp์๋ ๋ฌธ์์ดํํ๋ก ๋ฃ์ด์ผํฉ๋๋ค.
2020.03.24 -
* ์๋ณ์ ๋ณ์ , ๋ฆฌํฐ๋ด(์์), ํจ์ ๋ฑ์ ์ด๋ฆ์ ๋๋ค. ์ด๋ฌํ ์๋ณ์๋ฅผ ๋ง๋ค๋๋ ๊ท์น์ด ์๋๋ฐ ๋ค์๊ณผ ๊ฐ์ต๋๋ค. 1. ์ซ์๋ก ์์ํ ์ ์์ต๋๋ค. 2. ์์ฝ์ด (if, True , False)๋ฑ์ ์ฌ์ฉ ๋ถ๊ฐํฉ๋๋ค. 3. ๋๋ฌธ์ ์๋ฌธ์๋ฅผ ๊ตฌ๋ถํฉ๋๋ค. ( X๋ x์ ๋ค๋ฅธ ์๋ณ์์ด๋ค) * ๋ฐ์ดํฐ ํ์ ์๋ฐ์คํฌ๋ฆฝํธ์๋ ๋ณ์์ ๋ฐ์ดํฐ ํ์ ์ด ๋ฐ๋ก ์๋ค. ๋ฐ๋ผ์ ๋ค์๊ณผ ๊ฐ์ด ๋ณ์๋ฅผ ์ ์ธํ๋ฉด ๋๋ค. ๋ณ์ ์ ์ธ var sum =1 ; // var๋ฅผ ์ด์ฉํ์ฌ ์ ์ธ๊ฐ๋ฅ var a, b, c ; // ์ฌ๋ฌ๊ฐ์ง๋ฅผ ๋์์ ์ ์ธํด๋ ๋จ data = 9; // var ์์ด ์ ์ธํ์ฌ๋ ๋ฌด๋ฐฉ string = "hello world" ; // ๋ฐ์ดํฐํ์ ์ด ๋ฐ๋ก ์์ผ๋ฏ๋ก ๋ฌธ์์ด๋ ์ ์ฅ๊ฐ๋ฅ. var๋ฅผ ์ด์ฉํ์ฌ ์ ์ธํด๋ ๋๊ณ , ์ฌ๋ฌ๊ฐ์ ๋ณ..
JavaScript ๋ฌธ๋ฒ - ๋ณ์, ์กฐ๊ฑด๋ฌธ, ๋ฐ๋ณต๋ฌธ , ํจ์* ์๋ณ์ ๋ณ์ , ๋ฆฌํฐ๋ด(์์), ํจ์ ๋ฑ์ ์ด๋ฆ์ ๋๋ค. ์ด๋ฌํ ์๋ณ์๋ฅผ ๋ง๋ค๋๋ ๊ท์น์ด ์๋๋ฐ ๋ค์๊ณผ ๊ฐ์ต๋๋ค. 1. ์ซ์๋ก ์์ํ ์ ์์ต๋๋ค. 2. ์์ฝ์ด (if, True , False)๋ฑ์ ์ฌ์ฉ ๋ถ๊ฐํฉ๋๋ค. 3. ๋๋ฌธ์ ์๋ฌธ์๋ฅผ ๊ตฌ๋ถํฉ๋๋ค. ( X๋ x์ ๋ค๋ฅธ ์๋ณ์์ด๋ค) * ๋ฐ์ดํฐ ํ์ ์๋ฐ์คํฌ๋ฆฝํธ์๋ ๋ณ์์ ๋ฐ์ดํฐ ํ์ ์ด ๋ฐ๋ก ์๋ค. ๋ฐ๋ผ์ ๋ค์๊ณผ ๊ฐ์ด ๋ณ์๋ฅผ ์ ์ธํ๋ฉด ๋๋ค. ๋ณ์ ์ ์ธ var sum =1 ; // var๋ฅผ ์ด์ฉํ์ฌ ์ ์ธ๊ฐ๋ฅ var a, b, c ; // ์ฌ๋ฌ๊ฐ์ง๋ฅผ ๋์์ ์ ์ธํด๋ ๋จ data = 9; // var ์์ด ์ ์ธํ์ฌ๋ ๋ฌด๋ฐฉ string = "hello world" ; // ๋ฐ์ดํฐํ์ ์ด ๋ฐ๋ก ์์ผ๋ฏ๋ก ๋ฌธ์์ด๋ ์ ์ฅ๊ฐ๋ฅ. var๋ฅผ ์ด์ฉํ์ฌ ์ ์ธํด๋ ๋๊ณ , ์ฌ๋ฌ๊ฐ์ ๋ณ..
2020.03.24 -
* ์ (RGB) CSS์์ ์ ํํ๋ฒ์ ์ฌ๋ฌ๊ฐ์ง๊ฐ ์์ง๋ง, ์ผ๋ฐ์ ์ธ ๋ฐฉ๋ฒ์ RGB(๋นจ๊ฐ, ํ๋, ์ด๋ก์ ๋น์จ)๋ก ๋ํ๋ด๋ ๋ฐฉ๋ฒ์ ๋๋ค. color - property (์์ฑ) div{ color: ํ ์คํธ ์; background-color : ๋ฐฐ๊ฒฝ์ border_color :ํ ๋๋ฆฌ ์ } 16์ง์ ํํ๋ฒ (hex) #RR GG BB ๊ฐ ์ฑ๋ถ (R,G,B)๋ 8๋นํธ(0๋ถํฐ 255)์ ์ ์์ด๋ฉฐ, ์ด๊ฒ์ 16์ง์๋ก ๋ฃ์ด ๋ํ๋ ๋๋ค. ex ) #FF0000 : ๋นจ๊ฐ์ , #00FF00 : ์ด๋ก์ , #0000FF ํ๋์ div{color : #2A2BFF;} 10์ง์ ํํ๋ฒ rgb(Red,Green,Blue) ๋ง์ฐฌ๊ฐ์ง๋ก 0๋ถํฐ 255์ ์๋ฅผ 10์ง์๋ก ๋ฃ์ด์ฃผ๋ฉด ๋ฉ๋๋ค. p{color : rgb(121,23,59..
CSS ๋ฒผ๋ฝ์น๊ธฐ 2 - ํ ์คํธ, ์ , ํฐํธ , ๋ฐ์ค* ์ (RGB) CSS์์ ์ ํํ๋ฒ์ ์ฌ๋ฌ๊ฐ์ง๊ฐ ์์ง๋ง, ์ผ๋ฐ์ ์ธ ๋ฐฉ๋ฒ์ RGB(๋นจ๊ฐ, ํ๋, ์ด๋ก์ ๋น์จ)๋ก ๋ํ๋ด๋ ๋ฐฉ๋ฒ์ ๋๋ค. color - property (์์ฑ) div{ color: ํ ์คํธ ์; background-color : ๋ฐฐ๊ฒฝ์ border_color :ํ ๋๋ฆฌ ์ } 16์ง์ ํํ๋ฒ (hex) #RR GG BB ๊ฐ ์ฑ๋ถ (R,G,B)๋ 8๋นํธ(0๋ถํฐ 255)์ ์ ์์ด๋ฉฐ, ์ด๊ฒ์ 16์ง์๋ก ๋ฃ์ด ๋ํ๋ ๋๋ค. ex ) #FF0000 : ๋นจ๊ฐ์ , #00FF00 : ์ด๋ก์ , #0000FF ํ๋์ div{color : #2A2BFF;} 10์ง์ ํํ๋ฒ rgb(Red,Green,Blue) ๋ง์ฐฌ๊ฐ์ง๋ก 0๋ถํฐ 255์ ์๋ฅผ 10์ง์๋ก ๋ฃ์ด์ฃผ๋ฉด ๋ฉ๋๋ค. p{color : rgb(121,23,59..
2020.03.22 -
* CSS : Cascading Style Sheet HTML์ ์ธ๊ด๊ณผ ๊ด๋ จ๋์ด์๋ค. ํฐํธ์ ์, ๋ฐฐ๊ฒฝ์, ์ถ๋ ฅ ์์น, ๋ ์ด์์ ๋ฑ HTML์ ๊พธ๋ฏธ๋ ์ธ์ด์ ๋๋ค. div { color : red ; font-size : 20px ;} div : ์ ๋ ํฐ(์ ํ์) ๋ผ๊ณ ๋ถ๋ฆ ๋๋ค. CSS๊ฐ ์ ์ฉ๋ HTML์ ์์๋ฅผ ์ ํํฉ๋๋ค. color , font-size : ํ๋กํผํฐ(property) ๋ผ๊ณ ๋ถ๋ฅธ๋ค. ์์ฑ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋ฉ๋๋ค. red, 20px : ๊ฐ (value)์ ๋๋ค. * CSS ๋ฌธ๋ฒ ๊ท์น 1. CSS3 ์คํ์ผ ์ํธ๋ { } ์ค๊ดํธ๋ฅผ ์ด์ฉํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋.์๋ฌธ์์ ๊ตฌ๋ถ์ด ์์ต๋๋ค. 2. ํ๋กํผํฐ:๊ฐ ๋ค์๋ ;(์ธ๋ฏธ์ฝ๋ก )์ ๋ถ์ฌ ๋ถ๋ฆฌ์์ผ์ฃผ์ด์ผ ํฉ๋๋ค. 3. ์ ๋ ํฐ์ ๊ฐ์ ๋ชจ๋ HTML ํ๊ทธ์๋ ์คํ์ผ ..
CSS ๋ฒผ๋ฝ์น๊ธฐ 1 - ๊ธฐ์ด ๊ตฌ์ฑ(์ํธ) , CSS์ ์ฉ ๋ฐฉ๋ฒ , ์ ๋ ํฐ (์ ํ์, Selector)* CSS : Cascading Style Sheet HTML์ ์ธ๊ด๊ณผ ๊ด๋ จ๋์ด์๋ค. ํฐํธ์ ์, ๋ฐฐ๊ฒฝ์, ์ถ๋ ฅ ์์น, ๋ ์ด์์ ๋ฑ HTML์ ๊พธ๋ฏธ๋ ์ธ์ด์ ๋๋ค. div { color : red ; font-size : 20px ;} div : ์ ๋ ํฐ(์ ํ์) ๋ผ๊ณ ๋ถ๋ฆ ๋๋ค. CSS๊ฐ ์ ์ฉ๋ HTML์ ์์๋ฅผ ์ ํํฉ๋๋ค. color , font-size : ํ๋กํผํฐ(property) ๋ผ๊ณ ๋ถ๋ฅธ๋ค. ์์ฑ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋ฉ๋๋ค. red, 20px : ๊ฐ (value)์ ๋๋ค. * CSS ๋ฌธ๋ฒ ๊ท์น 1. CSS3 ์คํ์ผ ์ํธ๋ { } ์ค๊ดํธ๋ฅผ ์ด์ฉํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋.์๋ฌธ์์ ๊ตฌ๋ถ์ด ์์ต๋๋ค. 2. ํ๋กํผํฐ:๊ฐ ๋ค์๋ ;(์ธ๋ฏธ์ฝ๋ก )์ ๋ถ์ฌ ๋ถ๋ฆฌ์์ผ์ฃผ์ด์ผ ํฉ๋๋ค. 3. ์ ๋ ํฐ์ ๊ฐ์ ๋ชจ๋ HTML ํ๊ทธ์๋ ์คํ์ผ ..
2020.03.20 -
* form , ํผ ์น ํ์ด์ง์์, ์ฌ์ฉ์์๊ฒ ์ ๋ ฅ์ ๋ฐ๊ธฐ ์ํ ์์์ ํผ์ด๋ผ๊ณ ํฉ๋๋ค. ์๋ฅผ๋ค์ด ํ์๊ฐ์ , ๋ก๊ทธ์ธ, ๊ฒ์ ๋ฑ.... ์์ ํผ์ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์์ ์ ๋ ฅ์ ๋ฐ๊ฒ ๋ฉ๋๋ค. ํผ์ ๋ง๋ค๊ธฐ ์ํ ๋ค์ํ ํ๊ทธ๋ค์ด ์กด์ฌํ๋ฉฐ, ๊ทธ๋ฌํ ํ๊ทธ๋ค์ ํผ ์์(form element) ๋ผ๊ณ ํฉ๋๋ค. *ํ ์คํธ ์ ๋ ฅ, ์ ์ถ ๋ฒํผ , ์ด๊ธฐํ ๋ฒํผ ์ ์ฒด๋ฅผ ํ๊ทธ๋ก ๊ฐ์ธ๊ณ , ์์ input์์๋ฅผ ๋ฃ์ด์ค๋๋ค. text : ํ ์คํธ ์ ๋ ฅ์นธ์ ๋๋ค. submit : ์ ์ถ๋ฒํผ์ด ๋ฑ์ฅํฉ๋๋ค. (ํ์ง๋ง ์ฌ๊ธฐ์ ๋ฒํผ์ form ํ๊ทธ์ action์ ์ง์ ํ์ง ์์์ ๊ธฐ๋ฅ์ ํ์ง ์์ต๋๋ค.) password : ๋ ***์๊ฐ์ด ์ ๋ ฅํ ๋ฌธ์๋ฅผ ๊ฐ๋ ค์ฃผ๊ฒ ๋ฉ๋๋ค. reset : ์ ๋ ฅ๋ ์์์ ์ฒ์ ์ํ๋ก ์ด๊ธฐํํฉ๋๋ค. paceholder : in..
HTML - web form , ํผ , input* form , ํผ ์น ํ์ด์ง์์, ์ฌ์ฉ์์๊ฒ ์ ๋ ฅ์ ๋ฐ๊ธฐ ์ํ ์์์ ํผ์ด๋ผ๊ณ ํฉ๋๋ค. ์๋ฅผ๋ค์ด ํ์๊ฐ์ , ๋ก๊ทธ์ธ, ๊ฒ์ ๋ฑ.... ์์ ํผ์ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์์ ์ ๋ ฅ์ ๋ฐ๊ฒ ๋ฉ๋๋ค. ํผ์ ๋ง๋ค๊ธฐ ์ํ ๋ค์ํ ํ๊ทธ๋ค์ด ์กด์ฌํ๋ฉฐ, ๊ทธ๋ฌํ ํ๊ทธ๋ค์ ํผ ์์(form element) ๋ผ๊ณ ํฉ๋๋ค. *ํ ์คํธ ์ ๋ ฅ, ์ ์ถ ๋ฒํผ , ์ด๊ธฐํ ๋ฒํผ ์ ์ฒด๋ฅผ ํ๊ทธ๋ก ๊ฐ์ธ๊ณ , ์์ input์์๋ฅผ ๋ฃ์ด์ค๋๋ค. text : ํ ์คํธ ์ ๋ ฅ์นธ์ ๋๋ค. submit : ์ ์ถ๋ฒํผ์ด ๋ฑ์ฅํฉ๋๋ค. (ํ์ง๋ง ์ฌ๊ธฐ์ ๋ฒํผ์ form ํ๊ทธ์ action์ ์ง์ ํ์ง ์์์ ๊ธฐ๋ฅ์ ํ์ง ์์ต๋๋ค.) password : ๋ ***์๊ฐ์ด ์ ๋ ฅํ ๋ฌธ์๋ฅผ ๊ฐ๋ ค์ฃผ๊ฒ ๋ฉ๋๋ค. reset : ์ ๋ ฅ๋ ์์์ ์ฒ์ ์ํ๋ก ์ด๊ธฐํํฉ๋๋ค. paceholder : in..
2020.03.19