Coding/JavaScript
-
[Javascript] 유사배열 파헤치기(Feat. Object, Dictionary)Coding/JavaScript 2021. 4. 6. 17:25
Javascript에는 유사배열이(Array-Like)라는 개념이 존재한다. 이름 그대로 배열인 척 하는 객체라고 생각하면 된다. 유사배열에 대해 다루기에 앞서 Javascript의 Object 개념에 대해 자세히 파헤쳐보아야 한다. 명쾌한 설명을 위해 내 경험을 공유해보겠다. Python의 Dictionary, Java의 HashMap.. 최근에 PS와 함께 알고리즘을 공부하면서 자료구조에 대해 다룰 일이 많아졌다. Iterable한 객체의 대표격인 배열만으로도 반복되는 데이터를 다룰 수 있지만, 메모리와 시간에서 극한의 효율을 끌어내야 하는 PS에서는 Key, Value를 사용하는 Dictionary 형태의 자료구조로 Iterable을 표현해야 할 때도 많다. 고유한 Key를 통해 Value를 호출하..
-
자바스크립트의 간단하면서도 트렌디한 문법 모아보기Coding/JavaScript 2021. 1. 5. 20:44
안녕하세요. 이번 포스팅에서는 자바스크립트를 보다 더 깔끔하게 사용할 수 있게 도와주는 문법들에 대하여 포스팅합니다. 저도 자바스크립트를 사용하면서 문자열, 배열, 객체에 대하여 처리할 때 보다 더 간결하고, 트렌디하게 작성할 수 있도록 하는 문법에 대해 자주 포스팅해왔고, 시간이 지나 결과적으로 가장 자주 사용하게 되는 문법들에 대하여 정리해보았습니다. 🧐 다른 코드와 비교해보자 템플릿 리터럴 템플릿 리터럴은 내장된 표현식을 허용하여 문자열 보간과 여러 줄로 이루어진 문자열을 동시에 사용할 수 있게 도와주는 문법입니다. 파이썬의 format과 비슷한 개념으로, 함수의 매개변수에도 사용할 수 있습니다. $('.container').append( ' ' + car + '' + name + ' ' ) 다음과..
-
자바스크립트에서 세미콜론(;)을 꼭 사용해야 하는 이유가 있다?Coding/JavaScript 2020. 10. 16. 21:08
안녕하세요. 오늘은 자바스크립트에서의 세미콜론 사용 여부에 대한 재밌는 글을 발견하여 포스팅합니다. Shruti Kapoor의 why-are-expliit-semicolons-important-in-javascript라는 글을 읽어보면, 자바스크립트에서 세미콜론을 명시하는 것에 대한 중요성에 대해 다루고 있습니다. www.freecodecamp.org/news/codebyte-why-are-explicit-semicolons-important-in-javascript-49550bea0b82/ Why explicit semicolons are important in JavaScript > I am in "Effective JavaScript" training at @PayPalEng [https://twi..
-
내 홈페이지에 Daum 우편번호 서비스 API 붙이기! (반응형)Coding/JavaScript 2020. 9. 8. 20:54
안녕하세요 오늘은 Daum에서 제공하는 우편번호 서비스(도로명, 지번주소 찾기) API 연동에 대해 포스팅합니다. 홈페이지에서 회원가입이나 배송지 선택 등, 주소를 검색해야 하는 상황이 나오면 다음과 같은 화면을 많이 보셨을 겁니다. Daum 우편번호 서비스는 사용하기도 간편하고, 구현도 쉬워 많은 사이트에서 애용되고 있습니다. 가이드를 살펴보면 구현 방법도 여러가지 입니다. postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 1. 팝업으로 띄우기 2. iframe을 이용..
-
[Javascript] 브라우저가 Internet Explorer 인지 체크하기Coding/JavaScript 2020. 8. 18. 19:04
자바스크립트의 navigator.userAgent 객체에는 브라우저에 대한 정보가 나와있습니다. 따라서 현재 클라이언트가 접속한 브라우저가 익스플로어(IE)인지 체크하기 위해서는 appName에 익스플로어(msie)가 있는지 체크하기만 하면 됬죠. 실제로 서비스되는 웹 페이지에서 익스플로어에 호환 문제가 제일 많이 발생하기 때문에 아오 익스플로러 체크를 해서 따로 처리를 해주는 경우가 많습니다. (jQuery 3 이상은 IE 낮은 버전에서 사용이 안되고, history API 같은 경우는 IE 11의 일정 버전 이상에서만 작동합니다. 대체 왜?) 근데, IE 12 이후로 알 수 없는 이유로 익스플로어의 appName이 'Netscape'로 바뀌었습니다. 따라서 IE 12 이상도 대응을 하기 위해서는 다음..
-
[History] SPA에서 URL을 업데이트하는 효율적인 방법Coding/JavaScript 2020. 8. 2. 20:46
안녕하세요 이번 포스팅에서는 History API에 대해 알아보겠습니다. 일반적으로는 주소에 따라 데이터를 띄울때 라우팅을 연결하는 것이 기본적입니다. 특정 URL로 접근하였을 때 로드될 내용을 잘 연결해 놓는다면 URL에 따른 적절한 내용을 로드할 수 있겠죠. 그렇기 때문에 우리는 보통 이러한 방법들을 이용하여 URL을 업데이트하고 페이지를 이동합니다. 1. window.location.href="" 2. form action="/" 3. server에서 리다이렉트 시켜주기 ... 하지만 SPA에서는 우리가 자주 사용하는 URL 이동 방법들을 사용하기 적절하지 않습니다. Single Page라는 특성상 데이터를 페이지가 올려져 있을 때도 비동기적으로 로드하기 때문에 페이지 새로고침이 일어나면 맨 처음으..
-
[JavaScript] 콜백 함수로 화살표 함수를 전달하기Coding/JavaScript 2020. 1. 21. 21:05
Callback은 비동기 프로그래밍에서 자주 활용되는 방식입니다. 콜백 함수를 활용하면, A 함수의 파라미터로 B 함수를 전달하여, A함수의 작동이 끝나고 나면 B함수를 호출하는 방식으로 작동하게 됩니다. 보다 심도높은 비동기 프로그래밍에서는 복잡한 콜백 구조가 형성되어야겠으나, 간단한 함수의 순서 처리는 보다 간단합니다. ES6 이전의 콜백 함수는 다음과 같은 방식으로 구현할 수 있었습니다. function add (a, b, callback) => { var result = a + b; callback(result); } add(10, 10, function(result) { console.log('파라미터로 전달된 콜백 함수가 계산을 마치고 호출됨'); console.log('%d',result);..
