2020.12.09 TIL

Today I Learned

💎 기술

✔ QR Code Generate

• 간단한 외주 작업을 받게 되어 큐알코드 생성기 api를 받아와 웹 서버에 띄우는 작업을 했다. Eclipse로 하다가 너무 눈아파서 IntelliJ로 넘어가서 다시 짰는데, 해당 작업을 해보면서 Spring MVC에 대한 이해를 약간 할 수 있었다. 아직 로컬에서만 돌려봤는데, 외주 여부가 결정되면 네이버클라우드플랫폼에 파놨던 무료 서버를 이거를 돌리기 위해 사용해야할 듯.
• 사용한 API : QR Code Generator
• 사용 : IDE IntelliJ, SpringBoot, javascript, html
• 구조
  1. 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";
    }
  

  1. template에서 spring에서 모델을 타고 넘어온 변수 {name}을 사용하여 javascript로 api의 create-qr-code 링크에 data로 갖다붙힌다. 이후 이를 document.getElementById로 이미지 소스에 넣어주고 출력.

  <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 정도 읽음.