Today I Learned
๐ ๊ธฐ์
โ QR Code Generate
- ๊ฐ๋จํ ์ธ์ฃผ ์์ ์ ๋ฐ๊ฒ ๋์ด ํ์์ฝ๋ ์์ฑ๊ธฐ api๋ฅผ ๋ฐ์์ ์น ์๋ฒ์ ๋์ฐ๋ ์์ ์ ํ๋ค. Eclipse๋ก ํ๋ค๊ฐ ๋๋ฌด ๋์ํ์ IntelliJ๋ก ๋์ด๊ฐ์ ๋ค์ ์งฐ๋๋ฐ, ํด๋น ์์ ์ ํด๋ณด๋ฉด์ Spring MVC์ ๋ํ ์ดํด๋ฅผ ์ฝ๊ฐ ํ ์ ์์๋ค. ์์ง ๋ก์ปฌ์์๋ง ๋๋ ค๋ดค๋๋ฐ, ์ธ์ฃผ ์ฌ๋ถ๊ฐ ๊ฒฐ์ ๋๋ฉด ๋ค์ด๋ฒํด๋ผ์ฐ๋ํ๋ซํผ์ ํ๋จ๋ ๋ฌด๋ฃ ์๋ฒ๋ฅผ ์ด๊ฑฐ๋ฅผ ๋๋ฆฌ๊ธฐ ์ํด ์ฌ์ฉํด์ผํ ๋ฏ.
- ์ฌ์ฉํ API : QR Code Generator
- ์ฌ์ฉ : IDE IntelliJ, SpringBoot, javascript, html
- ๊ตฌ์กฐ
- Controller์์
@RequestMapping
์ผ๋ก make-qr-code/{๋ณ์๋ช }์ ๋ฐ์ model์ ์ฝ์ ํ๊ณ , hello-template.html์ view๋ก ๋์ด๋ค.
@RequestMapping(value="make-qr-code/{name}", method = RequestMethod.GET) public String getQR(@PathVariable String name, Model model) { model.addAttribute("name", name); return "hello-template"; }
- template์์ spring์์ ๋ชจ๋ธ์ ํ๊ณ ๋์ด์จ ๋ณ์ {name}์ ์ฌ์ฉํ์ฌ javascript๋ก api์ create-qr-code ๋งํฌ์ data๋ก ๊ฐ๋ค๋ถํ๋ค. ์ดํ ์ด๋ฅผ
document.getElementById
๋ก ์ด๋ฏธ์ง ์์ค์ ๋ฃ์ด์ฃผ๊ณ ์ถ๋ ฅ.
- Controller์์
<script th:inline="javascript">
/*<![CDATA[*/
var input_text = /*[[${name}]]*/ 'default';
function make_qr() {
var img_src;
img_src = "..๊ธฐ์กด๋งํฌ..." + input_text;
return img_src;
}
/*]]>*/
</script>
<div class="qr_img">
<img id="qrCode" src="">
<script> document.getElementById('qrCode').src=make_qr()</script>
</div>
์ CDATA๋ถ๋ถ์ ์ ํ ์ดํดํ์ง ๋ชปํ๋ค. {$name}์ผ๋ก ๋ฐ์ผ๋ฉด ๋ ์ค ์์๋๋ฐ ๋ณ์๊ฐ์ด {$name}์ผ๋ก ๊ทธ๋๋ก ์ถ๋ ฅ๋์์๋ค. ์คํ์ค๋ฒํ๋ก์ฐ๋ฅผ ์ฐพ์๋ณด๋ ์ ๋ ๊ฒ ์ฝ๋๋ฅผ ๋ฐ๊ฟ์ฃผ๋ฉด ๋๋ค๊ณ ํ๋๋ฐ, ์ฌ์ค์ ์ ๋์ํ๋ ๊ฑด์ง ์ดํดํ ์ ์๋ค.
โ IntelliJ ์ ์
- ์ ๋ฃ๋ฒ์ ์ ์ด ์ ์๋ ์ทจ์ค์์ ์ดํด๋ฆฝ์ค๋ฅผ ์ฐ์ง๋ง, ์ค๋ฌด์์๋ ์ธํ ๋ฆฌ์ ์ด๋ฅผ ์ฃผ๋ก ์ด๋ค๋ ๋ง์ ์ธํ ๋ฆฌ์ ์ด ๋จ์ถํค๋ฅผ ์ฌ๋ฌ๊ฐ ์์๋์์๋ค. ์ฐ๋ค๋ณด๋ ๋๋ฌด ํธํ๋ค.. import๋ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ํ ์ ์๊ณ , ๊ธฐ๋ถ ํ์ธ์ง ๋ชจ๋ฅด๊ฒ ์ง๋ง ์๊ธด ๊ฒ๋ ์๋ฆ๋ต๋ค.
์ค๋์ ์ด๊ฑธ ํ๋๋ผ ๋ค๋ฅธ ๊ณต๋ถ๋ฅผ ํ์ง ๋ชปํ๋ค. ์ญ์ ๋ชจ๋ ์์ ์ ์๊ฐํ ๊ฒ๋ณด๋ค ์๊ฐ์ด ์ค๋ ๊ฑธ๋ฆฌ๋ ๋ฒ์ด๋คโฆ ๊ทธ๋๋ ์ค๋ ์์ ๋์ถฉ ๋ง๋ฌด๋ฆฌ์ง์ ๋ฏ ํด์ ๋คํ์ด๋ค. ๋ค์ด๋ฒํด๋ผ์ฐ๋ํ๋ซํผ ์๋ฒ์ ์น์๋ฒ๋ฅผ ๋ฐฐํฌํด์ ์ ๊ฑธ ๋๋ฆด ์ ์๊ฒ ํด์ผํ ๋ฏ..
๐ ์์ฐ
- ์ ์ฌ ์ ๋ : ๋ญ๊ฐ์ด์ด (๋ถ๋ญ๋ง, ์นด๋ ๋ง) + ๊ณค์ฝ์จ์ํธ๋ก (ํธ๋ก์ ์ด๋ ๋ถ๋ถ์ด ๊ณค์ฝ์ธ๊ฑด์ง ์ดํดํ ์ ์์๋ค)
- ๋ ์ : ๋ฆฌ์ผ๋ฆฌํฐ ํธ๋์ํ2 5p ์ ๋ ์ฝ์.