ABBO 기술 블로그

주소를 검색해서 우편번호를 입력하여야 하는 API를 찾아보다가 카카오에서 제공해주는 것을 확인하여 적용해봤습니다. 먼저 우편번호 서비스를 제공해주는 오픈 소스에 대한 명세입니다. https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 그리고 우편번호와 관련된 Q&A는 깃헙에서 또 받고 있더라구요, 아무래도 개발자들을 위한 편의성을 제공해주기 위한 다음카카오 측의 배려라고 생각이 들었습니다. 그 다음으로는 제가 작성한 코드를 올려볼까합니다. index.html i..

HTML5의 URL과 URLSearchParams 객체에 대해 알아보겠습니다. IE에서는 안 되지만, 모던 브라우저에서는 사용할 수 있는 기능입니다. 웹은 주소를 기반으로 동작하기 때문에 주소를 자유자재로 다룰 수 있으면 좋습니다. 특히, 쿼리스트링을 파싱하는 것과 같은 귀찮은 작업을 간단히 처리할 수 있어 편리합니다. 노드의 url 모듈과도 비슷합니다. 사용 예시를 봅시다. URL 생성자에 주소를 넣어 인스턴스화하면 됩니다. const url = new URL('https://www.abbo.com:8080/category/HTML'); url.href; // https://www.abbo.com:8080/category/HTML url.origin; // https://www.abbo.com:8080..

Author: 니용 자바스크립트를 사용하면서 함수를 커스터마이징해서 사용하는 개발자분들이 꽤 많을 것입니다. 자바스크립트 문서에서 많은 함수를 제공해주지만, 일부는 제공하지 않거나 같은 함수명을 가져 호출하였을 때 컴파일러가 인식하기 모호한 함수도 존재하거든요. 그래서 이번 글에서는 특정 타입에 대해 함수를 설정하고 직접 호출해서 사용해도 무리가 없는 방법을 알려드리려 합니다. 그 전에 알아두어야 할 사전 지식이 있는데요, 바로 Prototype이라는 것입니다. Prototype 보통 Java의 Class와 비교를 많이 합니다. Java에는 Class를 기반으로 객체지향언어가 선언되어 있다면 JavaScript는 Prototype 기반의 언어라고 하여도 됩니다. Java는 Class에 지정되어 있는 메소..

Author: 니용 안녕하세요! 블로그 담당자 니용입니다. 오늘부터 개발자 일상이라는 카테고리를 오픈하여 개발하면서 겪은 불편한 일들이나 갖가지 이슈, 일상등을 기록해보려고 해요. 잡다한 이야기가 될 수도 있지만 이러한 실수가 쌓이고 쌓여서 나중에 저의 재산이 될 것이라 생각하려고 합니다. 본격적인 이야기는 계속 적어나가겠습니다 :)

Author: 니용 이전 글에서 Thymeleaf의 기본적인 문법을 확인하였다면, 이번 글에서는 Thymeleaf를 더 심도 있게 활용할 수 있는 방법을 알려드리려고 합니다. Thymeleaf는 Utility Object라고 하는 함수를 기본적으로 내장하고 있습니다. 흔히 우리가 사용하는 자바 언어의 String 내에 기본 내장되어 있는 함수와 이를 응용해서 쓸 수 있는 java.lang.common3.StringUtils와 같은 클래스들이 이러한 예시라고 생각하면 좋습니다. 대표적으로 사용하는 유틸리티들을 아래에 나열하였습니다. 사용 방법은 ${#...}로 사용합니다. 1. Strings Grammar (Method) Description ${#strings.toString(obj)} Object ob..

Author: 니용 오늘은 Thymeleaf를 사용하는 문법에 대해 글을 작성해보려 합니다. Thymeleaf는 템플릿 엔진이라고 하여 웹페이지 내에서 html 태그만을 사용하여 화면을 그려주는 용도로 사용하는 문법입니다. Thymeleaf를 사용하면서 장점은 몇 가지가 있는데요. 아래에 더 자세히 설명하도록 하겠습니다. 1. JavaScript의 역할을 부분적으로 도와준다. 자바스크립트의 경우 대표적으로 화면이 움직이는 모션에 대해 많은 처리를 하는 부분이 있습니다. 또 문법도 어렵지 않게 if, for문을 그대로 사용하여 백엔드에서 구분하기 어려웠던 문법도 쉽게 풀 수 있습니다. Thymeleaf는 태그 안에서 사용가능하도록 앞에 타임리프의 문법인 'th:'를 먼저 넣습니다. th:if로 시작하면 J..

앞에서 기본적인 자바스크립트 문법으로 작성을 해보았다면 여기서는 스크립트의 파일을 어떻게 나눌지와 각각 분리되어 있는 여러 가지 파일을 가져와 사용하는 방법을 작성해보려고 합니다. 다시 말해, 디자인 패턴 구조를 상세히 시키는 것입니다. 이전에 알아두어야 하는 것은 React 컴포넌트를 구분하는 방법입니다. 컴포넌트를 구분하는 방법에는 4가지가 있습니다. 1. Container vs Presentational 2. Stateful vs Stateless 3. Smart vs Dumb 4. Pure vs Unpure 사실 이러한 방식은 몰라도 개발에 전혀 문제가 없습니다. 하지만 React의 특성상 컴포넌트이 재사용성이 매우 뛰어난 것에 비해 활용을 하지 못한다면 기존의 자바스크립트를 그대로 사용하는 것이..

지난 글에서 Component를 만드는 방법을 알아보았다면 이번 글에서는 본격적으로 JavaScript가 어떻게 적용되는지 살펴보려고 합니다. 가장 먼저 WatchBody부분에 div를 하나 추가하여 시계가 들어갈 위치를 설정합니다. 클래스명을 js-clock으로 추가한 후 위의 div를 선택할 수 있는 선택자를 생성합니다. 이제 선택자를 추가하였다면 스크립트에서 시간에 해당하는 함수를 넣어주어야 합니다. 이전에 JavaScript의 기본 문법에서 확인할 수 있듯이 document.querySelector는 아래와 같습니다. querySelector(".className") : 클래스명이 className으로 정의된 태그를 선택 ( == getElementByClassName와 같은 역할) querySe..