๐ป Web
-
*Open Graph tag : og tag ์นด์นด์คํก์ด๋ ํ์ด์ค๋ถ๊ณผ ๊ฐ์ sns๋ฑ์์ ์น์ฌ์ดํธ์ ๋งํฌ๋ฅผ ๊ณต์ ํ ๋ ์ฌ์ง๊ณผ ๊ฐ๋ตํ ์ค๋ช ์ด ๋จ๊ฒ๋๋ค. ์นด์นด์คํก์ผ๋ก ์๋ฅผ ๋ค๋ฉด, ์ฌ์ฉ์๊ฐ ์ฑํ ์ฐฝ์ ์น์ฌ์ดํธ์ ์ฃผ์๋ฅผ ์ ๋ ฅํ๊ฒ๋๋ฉด, ์นด์นด์คํก์ ํฌ๋กค๋ฌ๊ฐ ๋ฏธ๋ฆฌ ์ฌ์ดํธ์ ๋ฐฉ๋ฌธํ์ฌ OG tag๋ฅผ ์์งํ๋ค. ์๋ ์ฌ์ง์์ ํ์ธ ๊ฐ๋ฅํ๋ฏ์ด, og graph ์ด๋ฏธ์ง, ์ค๋ช , ๊ทธ๋ฆฌ๊ณ ์ ๋ชฉ์ ์์งํ์ฌ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํ๋ฉด์ ์์ฑํ๊ฒ ๋๋ค. ์ ๋ชฉ , ์ค๋ช , ์ด๋ฏธ์ง๋ ๊ฐ๊ฐ ๋ค์์ ํด๋น๋๋ค. -> og:title, og:description, og:image * og ํ๊ทธ ์ฌ์ฉ
(OG Tag) ์นด์นด์คํก, ํ์ด์ค๋ถ ๋ฏธ๋ฆฌ๋ณด๊ธฐ + ์์ ์ ์ฉ ์๋ ๋ ์ด๊ธฐํํ๊ธฐ !*Open Graph tag : og tag ์นด์นด์คํก์ด๋ ํ์ด์ค๋ถ๊ณผ ๊ฐ์ sns๋ฑ์์ ์น์ฌ์ดํธ์ ๋งํฌ๋ฅผ ๊ณต์ ํ ๋ ์ฌ์ง๊ณผ ๊ฐ๋ตํ ์ค๋ช ์ด ๋จ๊ฒ๋๋ค. ์นด์นด์คํก์ผ๋ก ์๋ฅผ ๋ค๋ฉด, ์ฌ์ฉ์๊ฐ ์ฑํ ์ฐฝ์ ์น์ฌ์ดํธ์ ์ฃผ์๋ฅผ ์ ๋ ฅํ๊ฒ๋๋ฉด, ์นด์นด์คํก์ ํฌ๋กค๋ฌ๊ฐ ๋ฏธ๋ฆฌ ์ฌ์ดํธ์ ๋ฐฉ๋ฌธํ์ฌ OG tag๋ฅผ ์์งํ๋ค. ์๋ ์ฌ์ง์์ ํ์ธ ๊ฐ๋ฅํ๋ฏ์ด, og graph ์ด๋ฏธ์ง, ์ค๋ช , ๊ทธ๋ฆฌ๊ณ ์ ๋ชฉ์ ์์งํ์ฌ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํ๋ฉด์ ์์ฑํ๊ฒ ๋๋ค. ์ ๋ชฉ , ์ค๋ช , ์ด๋ฏธ์ง๋ ๊ฐ๊ฐ ๋ค์์ ํด๋น๋๋ค. -> og:title, og:description, og:image * og ํ๊ทธ ์ฌ์ฉ
2020.08.08 -
jQuery ๋ ? HTML ์์๋ค์ ํธํ๊ฒ ์ฌ์ฉํ ์ ์๋๋ก ๋ง๋ค์ด ๋์ javascript๋ก ์์ฑ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ. *import(์ํฌํธ) headํ๊ทธ ๋ด๋ถ์ CND(๋งํฌ๋ฅผ ํตํด ์ํฌํธ)์ ํ์ค ์ถ๊ฐ์์ผ์ฃผ๋ฉด ์ฌ์ฉํ ์ ์๋ค. /// jQuery๋ก data ๊ฐ์ ธ์ค๊ธฐ submit ๋์ถฉ inputํ๊ทธ๋ก ์ ๋ ฅ์์์ ๋ง๋ค์ด์ค๋ค ์ด๋ฐ์์ผ๋ก ์ฌ์ฉํ๋ค. ์์ฝ๋๋๋ก๋ผ๋ฉด ์ฝ์์ฐฝ์ ์ ๋ ฅํ ๊ฐ์ด ์ฐํ๊ฒ ๋๋ค.
jQuery๋ ? selector (์ ํ์) , val (๊ฐ ๊ฐ์ ธ์ค๊ธฐ) , ๊ฐ๋จ ์์ , ์ฌ์ฉ๋ฒjQuery ๋ ? HTML ์์๋ค์ ํธํ๊ฒ ์ฌ์ฉํ ์ ์๋๋ก ๋ง๋ค์ด ๋์ javascript๋ก ์์ฑ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ. *import(์ํฌํธ) headํ๊ทธ ๋ด๋ถ์ CND(๋งํฌ๋ฅผ ํตํด ์ํฌํธ)์ ํ์ค ์ถ๊ฐ์์ผ์ฃผ๋ฉด ์ฌ์ฉํ ์ ์๋ค. /// jQuery๋ก data ๊ฐ์ ธ์ค๊ธฐ submit ๋์ถฉ inputํ๊ทธ๋ก ์ ๋ ฅ์์์ ๋ง๋ค์ด์ค๋ค ์ด๋ฐ์์ผ๋ก ์ฌ์ฉํ๋ค. ์์ฝ๋๋๋ก๋ผ๋ฉด ์ฝ์์ฐฝ์ ์ ๋ ฅํ ๊ฐ์ด ์ฐํ๊ฒ ๋๋ค.
2020.05.26 -
HTTP๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ํ ๊ฐ์ ๊ฐ์ง์ง ์๋ ํ๋กํ ์ฝ์ด๋ค. ๋ฐ๋ผ์ ๋ก๊ทธ์ธ, ์ฅ๋ฐ๊ตฌ๋์ ๊ฐ์ ๊ธฐ๋ฅ์ ๊ตฌํํ ๋ ์ฟ ํค(cookie) ์ ์ธ์ (session)์ ์ด์ฉํ๋๋ฐ, ํด๋ผ์ด์ธํธ์ ์๋ฒ ๊ฐ์ ์ํ ๊ฐ์ ์ ์ฅํ๋ ๊ฒ์ ๋งํ๋ค. ์ฝ๊ฒ๋งํ๋ฉด ์๋ฒ์ ํด๋ผ์ด์ธํธ๋ ๊ณ์ ์ฐ๊ฒฐ๋์ด์ ๋ ์ํ๊ฐ ์๋๋ค. ์ด๊ฒ์ด HTTP์ ๋จ์ ์ด๊ณ , ์ด๋ฅผ ๋ณด์ํ๊ธฐ ์ํด ์ฟ ํค์ ์ธ์ ์ ์ด์ฉํ๋ค๊ณ ํ๋ค. *์ฟ ํค(cookie) HTTP์ header์ ํฌํจ๋๋ค. key์ value๋ก(ํค์ ๊ฐ) ํํ๋๋ค. ์๋ฒ๋ก๋ถํฐ ์ฟ ํค๋ฅผ ๋ฐ์ ํด๋ผ์ด์ธํธ(์น ๋ธ๋ผ์ฐ์ )๋ ๊ฐ์ ์น ์๋ฒ์ ์ ์ํ ๋ ์ด์ ์ ์ ์ฅ๋ ์ฟ ํค๋ฅผ HTTP header์ ๋ด์ ๋ณด๋ด๋ ๊ณผ์ ์ ํตํด ์๋ฒ๋ ํ์ฌ ์ํ๊ฐ์ ์ ์ ์๊ฒ๋๋ค. ์ด๋ ๊ฒ ์์๋ธ ์ํ๊ฐ์ ํตํด, ํ์ด์ง๋ฅผ ์ฎ๊ฒจ๋ค๋ ๋ ๋ก๊ทธ์ธ..
์ฟ ํค์ ์ธ์ (cookie session)HTTP๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ํ ๊ฐ์ ๊ฐ์ง์ง ์๋ ํ๋กํ ์ฝ์ด๋ค. ๋ฐ๋ผ์ ๋ก๊ทธ์ธ, ์ฅ๋ฐ๊ตฌ๋์ ๊ฐ์ ๊ธฐ๋ฅ์ ๊ตฌํํ ๋ ์ฟ ํค(cookie) ์ ์ธ์ (session)์ ์ด์ฉํ๋๋ฐ, ํด๋ผ์ด์ธํธ์ ์๋ฒ ๊ฐ์ ์ํ ๊ฐ์ ์ ์ฅํ๋ ๊ฒ์ ๋งํ๋ค. ์ฝ๊ฒ๋งํ๋ฉด ์๋ฒ์ ํด๋ผ์ด์ธํธ๋ ๊ณ์ ์ฐ๊ฒฐ๋์ด์ ๋ ์ํ๊ฐ ์๋๋ค. ์ด๊ฒ์ด HTTP์ ๋จ์ ์ด๊ณ , ์ด๋ฅผ ๋ณด์ํ๊ธฐ ์ํด ์ฟ ํค์ ์ธ์ ์ ์ด์ฉํ๋ค๊ณ ํ๋ค. *์ฟ ํค(cookie) HTTP์ header์ ํฌํจ๋๋ค. key์ value๋ก(ํค์ ๊ฐ) ํํ๋๋ค. ์๋ฒ๋ก๋ถํฐ ์ฟ ํค๋ฅผ ๋ฐ์ ํด๋ผ์ด์ธํธ(์น ๋ธ๋ผ์ฐ์ )๋ ๊ฐ์ ์น ์๋ฒ์ ์ ์ํ ๋ ์ด์ ์ ์ ์ฅ๋ ์ฟ ํค๋ฅผ HTTP header์ ๋ด์ ๋ณด๋ด๋ ๊ณผ์ ์ ํตํด ์๋ฒ๋ ํ์ฌ ์ํ๊ฐ์ ์ ์ ์๊ฒ๋๋ค. ์ด๋ ๊ฒ ์์๋ธ ์ํ๊ฐ์ ํตํด, ํ์ด์ง๋ฅผ ์ฎ๊ฒจ๋ค๋ ๋ ๋ก๊ทธ์ธ..
2020.05.10 -
RESTful Api๋ฅผ ์ฌ์ฉํ๋ ์ด์ ์ฑ์์ ์ฌ์ฉ๋๋ ๋๋์ ๋ฐ์ดํฐ๋ ํ์ผ์ ๋ฐ๋ก ๊ตฌ์ฑํ์ฌ ์ฑ ๋ด๋ถ์ ๋ฃ์ด๋๊ณ , ์ด ํ์ผ์ ์ฝ๋ ๋ฐฉ์์ผ๋ก ์ฒ๋ฆฌ๋๋ค. ์ฝํ ์ธ ์๋น์ค ์ฑ์ ์ต์ ์ ๋ฐ์ดํฐ๊ฐ ํต์ฌ์์์ด๋ค. ํ์ง๋ง ๋ฐ์ดํฐ๋ฅผ ํ์ผ์ ์ ์ฅํ๋ ๋ฐฉ์์ผ๋ก ์ฒ๋ฆฌํ๊ฒ ๋๋ค๋ฉด ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ์ถ๊ฐํ ๋ ๋ง๋ค ์ฌ์ฉ์๋ ์ฑ ์ ๋ฐ์ดํธ๋ฅผ ๋ฐ์์ผํ๊ณ , ๊ทธ๋ด์๋ก ์ฌ์ฉ์ ๊ฒฝํ์ ์ ์ ๋๋น ์ง๊ฒ๋๋ค. ๋ฐ๋ผ์ ๋ฐ์ดํฐ๋ฅผ ์๋ฒ์ ๋๊ณ , ์๋ฒ๋ก๋ถํฐ ๋ค์ด๋ฐ์ ์ฌ์ฉํ๋ค๋ฉด ์ด๋ฅผ ํด๊ฒฐ ํ ์ ์๋ค. ์๋ฒ์ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ์ ๋ก๋ํ๊ณ , ์ฑ์ ์ด ์๋ฒ๋ก๋ถํฐ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์๋ด๋ฉด ์ฌ์ฉ์๋ ์ฑ์๋ํ ์ ๋ฐ์ดํธ ์์ด ์ต์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ์ ์๋ค. ๋น์ฐ๊ฒฐ์ฑ ์งํฅ ํต์ ๋ฒ์ฉ์ ์ธ ๋ชจ๋ฐ์ผ ํต์ ์์ ๋ง์ด ์ฌ์ฉ๋๋ ๋ฐฉ์์ ๋น์ฐ๊ฒฐ์ฑ ์งํฅ ํต์ (HTTP / HTTPS ํ๋กํ ์ฝ)์ด๋ค...
RESTful API, ์น์๋น์ค(Web Service)RESTful Api๋ฅผ ์ฌ์ฉํ๋ ์ด์ ์ฑ์์ ์ฌ์ฉ๋๋ ๋๋์ ๋ฐ์ดํฐ๋ ํ์ผ์ ๋ฐ๋ก ๊ตฌ์ฑํ์ฌ ์ฑ ๋ด๋ถ์ ๋ฃ์ด๋๊ณ , ์ด ํ์ผ์ ์ฝ๋ ๋ฐฉ์์ผ๋ก ์ฒ๋ฆฌ๋๋ค. ์ฝํ ์ธ ์๋น์ค ์ฑ์ ์ต์ ์ ๋ฐ์ดํฐ๊ฐ ํต์ฌ์์์ด๋ค. ํ์ง๋ง ๋ฐ์ดํฐ๋ฅผ ํ์ผ์ ์ ์ฅํ๋ ๋ฐฉ์์ผ๋ก ์ฒ๋ฆฌํ๊ฒ ๋๋ค๋ฉด ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ์ถ๊ฐํ ๋ ๋ง๋ค ์ฌ์ฉ์๋ ์ฑ ์ ๋ฐ์ดํธ๋ฅผ ๋ฐ์์ผํ๊ณ , ๊ทธ๋ด์๋ก ์ฌ์ฉ์ ๊ฒฝํ์ ์ ์ ๋๋น ์ง๊ฒ๋๋ค. ๋ฐ๋ผ์ ๋ฐ์ดํฐ๋ฅผ ์๋ฒ์ ๋๊ณ , ์๋ฒ๋ก๋ถํฐ ๋ค์ด๋ฐ์ ์ฌ์ฉํ๋ค๋ฉด ์ด๋ฅผ ํด๊ฒฐ ํ ์ ์๋ค. ์๋ฒ์ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ์ ๋ก๋ํ๊ณ , ์ฑ์ ์ด ์๋ฒ๋ก๋ถํฐ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์๋ด๋ฉด ์ฌ์ฉ์๋ ์ฑ์๋ํ ์ ๋ฐ์ดํธ ์์ด ์ต์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ์ ์๋ค. ๋น์ฐ๊ฒฐ์ฑ ์งํฅ ํต์ ๋ฒ์ฉ์ ์ธ ๋ชจ๋ฐ์ผ ํต์ ์์ ๋ง์ด ์ฌ์ฉ๋๋ ๋ฐฉ์์ ๋น์ฐ๊ฒฐ์ฑ ์งํฅ ํต์ (HTTP / HTTPS ํ๋กํ ์ฝ)์ด๋ค...
2020.05.10 -
* ๋ฌธ์์ด๊ณผ ๊ด๋ จ๋ ํจ์๋ค ์๋ฌธ์์ธ ๋ฌธ์์ด ๋๋ฌธ์๋ก ๋ฐ๊พธ๊ธฐ. str.toUpperCase() str.toUpperCase() ex) "abcd".toUpperCase() >>> "ABCD" ๋๋ฌธ์์ธ ๋ฌธ์์ด ์๋ฌธ์๋ก ๋ฐ๊พธ๊ธฐ. str.toLowerCase() str.toLowerCase() ํน์ ๋ฌธ์์ ์ธ๋ฑ์ค ์ฐพ๊ธฐ (std.indexOf) str.indexOf('์ฐพ์๋ฌธ์') ex ) a = 'Hello World" str.indexOf("W") >>> 6 ๋ฌธ์ ์, ๋ค์ ๊ณต๋ฐฑ ์ ๊ฑฐํ๊ธฐ str.trim() str.trim() ex) a = " H e l l o " a.trim() >>>> "H e l l o" *HTML์ ๋ค๋ฃจ๋ Javascript document.querySelector('์ ๋ ํฐ) / ๋ฐํ๊ฐ..
(Javascript) - ํจ์๋ค* ๋ฌธ์์ด๊ณผ ๊ด๋ จ๋ ํจ์๋ค ์๋ฌธ์์ธ ๋ฌธ์์ด ๋๋ฌธ์๋ก ๋ฐ๊พธ๊ธฐ. str.toUpperCase() str.toUpperCase() ex) "abcd".toUpperCase() >>> "ABCD" ๋๋ฌธ์์ธ ๋ฌธ์์ด ์๋ฌธ์๋ก ๋ฐ๊พธ๊ธฐ. str.toLowerCase() str.toLowerCase() ํน์ ๋ฌธ์์ ์ธ๋ฑ์ค ์ฐพ๊ธฐ (std.indexOf) str.indexOf('์ฐพ์๋ฌธ์') ex ) a = 'Hello World" str.indexOf("W") >>> 6 ๋ฌธ์ ์, ๋ค์ ๊ณต๋ฐฑ ์ ๊ฑฐํ๊ธฐ str.trim() str.trim() ex) a = " H e l l o " a.trim() >>>> "H e l l o" *HTML์ ๋ค๋ฃจ๋ Javascript document.querySelector('์ ๋ ํฐ) / ๋ฐํ๊ฐ..
2020.05.05 -
* Javascript์ Data Types Boolean Null , Undefined Number String Symbol (new in ECMAScript 6) + ๊ฐ์ฒด (object) * Javascript ์ฐ์ ์ฐ์ฐ์ ์ฌ์น์ฐ์ฐ (+ , - , / , * ) ์ ํ ์ธ์ด์ ๊ฐ๋ค. ๋๋จธ์ง : % ๊ฑฐ๋ญ์ ๊ณฑ : ** ์ฆ๊ฐ : ++ , -- ๋จํญ ์๋ถํธ, ๋จํญ ์๋ถํธ : + , - *๋จํญ ์๋ถํธ, ๋จํญ ์๋ถํธ๋ฅผ ๋ฌธ์์ด์ด๋, True, false, null ๋ฑ ์ซ์ํ์ด ์๋ ๊ฐ๋ค์ ๋ถ์ด๊ฒ๋๋ฉด ์ซ์ํ์ผ๋ก ๋ณํ๋๋ค. ๋จํญ ์๋ถํธ ์์ a = "100" b = 7 a+b = 1007 >>> a ์์ ๋จํญ๋ถํธ๋ฅผ ์๋ถ์์ผ๋ฏ๋ก ๋ฌธ์์ด "100" + 7 = 1007์ด ๋์๋ค. +a +b = 107 >>> a์์ ๋จํญ์..
(Javascript) ๋ฐ์ดํฐ ํ์ (Data type) - ๋ฌธ์์ด , ์ซ์* Javascript์ Data Types Boolean Null , Undefined Number String Symbol (new in ECMAScript 6) + ๊ฐ์ฒด (object) * Javascript ์ฐ์ ์ฐ์ฐ์ ์ฌ์น์ฐ์ฐ (+ , - , / , * ) ์ ํ ์ธ์ด์ ๊ฐ๋ค. ๋๋จธ์ง : % ๊ฑฐ๋ญ์ ๊ณฑ : ** ์ฆ๊ฐ : ++ , -- ๋จํญ ์๋ถํธ, ๋จํญ ์๋ถํธ : + , - *๋จํญ ์๋ถํธ, ๋จํญ ์๋ถํธ๋ฅผ ๋ฌธ์์ด์ด๋, True, false, null ๋ฑ ์ซ์ํ์ด ์๋ ๊ฐ๋ค์ ๋ถ์ด๊ฒ๋๋ฉด ์ซ์ํ์ผ๋ก ๋ณํ๋๋ค. ๋จํญ ์๋ถํธ ์์ a = "100" b = 7 a+b = 1007 >>> a ์์ ๋จํญ๋ถํธ๋ฅผ ์๋ถ์์ผ๋ฏ๋ก ๋ฌธ์์ด "100" + 7 = 1007์ด ๋์๋ค. +a +b = 107 >>> a์์ ๋จํญ์..
2020.05.05