Dev's

Jackson Annotations을 사용하며 아래와 같은 에러가 발생하였습니다. com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException: Unrecognized field "paper_title1" 해당 에러는 JSON 데이터에는 특정 property가 존재하나, Class에는 해당 field가 존재하지 않아서 데이터를 맵핑시키지 못하여 발생하는 현상입니다. 해결책 Class 단위에서 해결하는 방법 Class에 @JsonIgnoreProperties를 선언하여 무시하도록 처리합니다. @JsonIgnoreProperties(ignoreUnknown = true) public class A { ... }ObjectMapper에서 Unknown F..

자바스크립트(Javascript)는 올림, 내림, 반올림과 같은 수학적 처리를 위하여 Math 내장 객체를 제공합니다. 또한 Math는 Number 자료형만 지원하며 ES2020에서 추가된 BigInt와는 사용할 수 없습니다. Math는 다음과 같은 상수와 메서드를 제공합니다. 메서드 Math는 정말 많은 수학적 메서드를 제공합니다. 여기서는 모든 메서드를 설명하지 않고 주로 사용하는 메서드만을 설명하겠습니다. Math.abs(x) x의 절댓값을 반환합니다. Math.abs(-1) // 1 Math.abs(1) // 1 Math.ceil(x) x보다 크거나 같은 수 중에서 가장 작은 정수를 반환합니다.(올림 처리) Math.ceil(1.234) // 2 Math.ceil(1.567) // 2 Math.f..

HTML5에서 제공하는 Geolocation API을 사용하여 사용자의 위치정보를 가지고 올 수 있다. 모바일 단말에서는 GPS를 이용하여 사용자 위치를 가지고 올 수 있으나, GPS보다는 정확하지 않아도 GPS를 이용할 수 없는 환경에서는 Geolocation API를 이용하여 사용자 위치 정보를 가지고 올 수 있으며, 해당 API는 HTTPS에서 작동한다. 브라우저별 지원 여부 Geolocation API를 지원하는 브라우저별 지원 여부는 아래와 같다 위치정보 getCurrentPosition()를 사용하여 사용자의 위치를 가지고 올 수 있다. const display = document.getElementById("display"); function showPosition(position) { di..

Promise.all vs Promise.allSettled 기존의 Promise.all과 병렬적으로 Promise를 처리할 수 있다는 공통점을 가지고 있습니다. 그러나 Promise.all을 통하여 실행시 Promise의 resolve 상태에서만 값(value)을 반환하지만, Promise.allSettled을 사용시에는 값(value)와 resolve rejected와 같은 상태(status)를 객체형식으로 반환하게 됩니다. Promise.all([Promise.resolve(1), Promise.resolve(2)]) .then(console.log); // [1, 2] Promise.allSettled([Promise.resolve(1), Promise.resolve(2)]) .then(conso..

a.indexOf is not a function 에러가 발생할 때 발생원인 Uncaught TypeError: a.indexOf is not a function at r.fn.init.r.fn.load 에러 발생하여 확인해보니, jQuery 1.8 버전 이후로 load() unload() error()가 deprecated 되었으며, jQuery 3.0 버전 이후 해당 기능은 제거되어 발생하는 현상이다. load(), error(), unload()의 자세한 내용은 jQuery 페이지에서 API Documentation에 가서 자세한 내용을 확인할 수 있다. 문제해결 해당 에러 발생한다면 현재 사용하고 있는 jQuery 버전을 확인 후 jQuery 3.0 미만 버전으로 변경하거나, jQuery 3.0 ..

모바일 단말기에서 웹페이지 접근하여 Input 태그와 같이 값을 입력시 emoji를 사용하곤 합니다. 그러나 emoji를 사용하여 글을 작성하여 저장할 때 문제를 발생시키거나, 또는 해당유니코드를 지원하지 않아 깨진문자로 보여지곤 합니다. 이러한 문제를 해결할 수 있는 방법도 있으나, 텍스트값 입력시 emoji문자를 제거하여 emoji를 사용하지 못하도록 처리할 수 있습니다. function removeEmojis (str) { const regex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c..

Key 속성에 따른 재사용성 Each child in an array should have a unique "key" prop. Check the render method of Component. List 형태 등의 데이터를 통해 컴포넌트를 구성하다 보면 위의 경고 메시지를 보신 적이 있을 것입니다. 해당 경고 메시지는 각각의 컴포넌트에 고유 'key'값을 가져야 하기 때문에 컴포넌트를 확인해달라는 내용으로써, 컴포넌트에 key 속성 값을 고윳값으로 가지도록 수정한다면 해당 경고 메시지를 해결할 수 있습니다. key 속성에 고유의 값을 부여하면 이 데이터는 어떻게 쓰일까요? 부여받은 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인하는 값으로 사용하고 있다고 합니다. Duke Villano..

Input 태그를 통해 문자열 입력시 또는 어느 특정 문자열에서 한글, 영문자가 포함되어야 하는지 확인해야 하는 경우가 있습니다. 아래는 정규식을 이용하여 문자열에 한글, 영문자가 포함되어 있는지 확인하는 함수입니다. 한글 포함 확인 function checkKorean(str) { const regx = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; return regx.test(str); } checkKorean('한글abc'); // true checkKorean('abcdef'); // false checkKorean('@!@##$'); // false checkKorean('abc@!ㄱㄴde'); // true영문자 포함 확인 function checkE..

Async/Await는 ES2017(ES8)에서 추가된 비동기작업을 처리하기 위한 방식중 하나입니다. aysnc/await async 함수에 aysnc가 붙여 선언하게 되면, 선언된 함수는 Promise를 반환하는 함수입니다. async function Foo() { return '1'; } Foo(); // Promise {: "1"}await Promise 함수와 같이 사용할 경우 결과값을 반환 할 때까지 기다리며, 반환된 값을 전달합니다. async function Foo() { return '1'; } await Foo(); // "1"사용법 1초후에 Hello World 로그를 출력하는 Promise를 반환하는 함수를 선언하였습니다. 그리고 async함수에 Hello..

정규식을 이용하여 문자열이 MacAddress 형식에 맞는지 체크하는 기능을 가진 함수입니다. function checkValidMacAddress(addr) { const regx = /^([0-9A-F]{2}[:-]){5}([0-9A-F]{2})$/; return regx.test(addr); } checkValidMacAddress('72:9D:F3:8B:2B:71'); // true checkValidMacAddress('72:9D:F3:8B:2B'); // false checkValidMacAddress('macaddress'); // false참고자료 https://stackoverflow.com/questions/12010552/jquery-java..