javaScript 썸네일형 리스트형 javascript / Jquery 일본 우편번호 api 사용해보기 일본에서는 우리나라처럼 주소를 도로명처럼 작성하는 게 아닌 우편번호를 통해 주소를 입력한다고 합니다 그렇게 숫자정도를 가지고 일본 주소를 찾을 수 있습니다 바로 사용하기 전 블록단위로 기능을 만든 후 제가 필요한 곳에 가져다 쓰려고 합니다 먼저 일본 우편번호를 찾을 수 있는 api의 참고 사이트 입니다 여기서 api를 가져오시면 됩니다 https://zipaddress.net/ 郵便番号-住所検索API 郵便番号-住所対応表は、日本郵便サイトで配布されているKEN_ALL.CSVのデータを解析して生成しています。毎月の1日の深夜に対応表を生成しなおしますので、比較的新しいデータで検索が可能 zipaddress.net 번역에 어려움이 있지만 코드만 보고 어느정도 ajax를 통해 호출해 올 수 있다는 것을 알 수 있기에 사용 방법.. 더보기 Jquery AJAX 페이지네이션(pagination) 구현 AJAX를 통해 데이터를 통신하고 이를 통해 화면의 UI를 구현할 경우 데이터가 들어갈 템플릿을 만들고 데이터를 뿌려주게 됩니다 백엔드에서 페이징된 api를 구성하여 준다고 가정하였을경우 페이징을 하는 코드를 구현하였습니다 AJAX GET통신을 하기 위한 코드 예시를 보겠습니다 HTML 페이지 더보기 제목이 들어갑니다 본문이 들어갑니다 먼저 데이터가 들어오게될 HTML 코드를 작성했습니다 HTML 태그의 클래스를 부여하여 스크립트가 동작할 수 있는 준비를 해주어야 합니다 페이지 더보기 제목이 들어갑니다 본문이 들어갑니다 다음 AJAX를 사용하는 코드를 예시로 보겠습니다 Script cosnt city = [ { title : "서울", contents : "연남동", }, { title : "부산", c.. 더보기 ajax의 간단한 사용법 오랜만에 제이쿼리를 조금 사용해 보면서 ajax를 사용할 일이 생겼습니다 간단하게 ajax 비동기통신을 통해 데이터를 바인딩할 수 있는 방법을 알아보겠습니다 ajax란? AJAX란, JavaScript의 라이브러리 중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다 전체 페이지를 새로 고침 하지 않아도 페이지 일부만을 로드하는 기법이며 javascript를 이용한 비동기 통신, 클라이언트와 서버 간의 XML데이터를 주고받습니다쉽게 말하자면 ajax는 서버에 데이터를 요청하는 것입니다. $.ajax({ type : 'post', // 타입 (get, post, put 등등) url : '/test', // 요청할 서버url async : tru.. 더보기 this에 대해 알아봅시다! 포엠아이웹에서 정의하는 javascript this는 "자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다" 로 정의 되어 있습니다. this란 '이것'이라는 뜻이고 this란 예약어 입니다 this는? this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성된다. this는 코드 어디서든 참조할 수 있다. 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체.. 더보기 javascript callback function 자바스크립트 콜백함수에 대해 알아보겠습니다 콜백함수란 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수입니다 forEach를 이용한 콜백함수 // 예제 let ary = ["사과", "배", "딸기", "오렌지"]; ary.forEach(function(item) { console.log(item); }); // 결과 "사과" "배" "딸기" "오렌지" Arrow function // 예제 let ary = ["사과", "배", "딸기", "오렌지"]; ary.forEach((item) => { console.log(item); }); 콜백함수 사용 원칙 익명의 함수 사용 콜백함수는 함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 되는 익명의 함수를 사용합니다 더보기 자바스크립트 replace() replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 그 패턴은 문자열이나 정규식이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다. replace() // 1 const str = "hello superman"; console.log(str.replace("superman","batman")); // "hello batman" // 2 const str = "hello superman"; const a = "superman"; const b = "batman"; console.log(str.replace(a, b)); // "hello batman" array replace() // 1 const str = [.. 더보기 자바스크립트 ES6 문법을 통한 입력값 주기 Feat. React 최근 프로젝트를 하며 알게 된 내용 중 하나를 공유하고자 합니다 React에서 input 태그의 입력값을 구해와야 할 때 일일이 한 개의 input 태그의 입력값을 구해왔던 분들이 있을 겁니다 물론 저도 지금까지 그래 왔습니다 예를 들어 클릭 이벤트를 발생시킬 때 함수를 한 개씩 만들었던 것처럼 말이죠 한 개의 함수로도 쉽게 여러 개의 input값을 가져올 수 있습니다 예시와 함께 바로 보도록 하겠습니다 const onPostChange = (event) => { const { target: { value, name }, } = event; } onPostChange라는 함수 안에 파라미터로 event를 받고 있습니다 함수안 객체를 선언후 프로퍼티로 target이라는 이름의 키값과 객체 value, na.. 더보기 Javascript function(함수) 사용 해보기 아무것도 모르고 블로그에 적었던 옛날 자바스크립트 관련 글을 새로 작성하려고 합니다 그중 첫 번째는 함수입니다 누군가에게 설명하고 이해시키는 것은 굉장히 어렵습니다 제가 이 글 이후부터는 존대를 사용하는 것 또한 나만 보려고 쓰는 글이 더 이상 아니기 때문입니다 함수는 자바스크립트의 개념 중에서도 핵심개념입니다 수학에서의 함수와 매우 흡사하고 입력받아 출력을 내보내는 방법 또한 일치합니다 프로그래밍에서의 함수도 같은 개념 입니다 자바스크립트 함수 함수를 사용하는 이유는 재사용성이 좋습니다 위와 같이 한번 함수를 만들어 놓으면 함수를 여러 번 호출하여 원하는 값을 각각 할당해 줄 수 있습니다 함수의 재사용 함수는 return(반환 값)을 받지 않고도 사용할 수 있습니다 또한 매개변수가 없더라도 함수 안에서.. 더보기 이전 1 2 3 4 ··· 6 다음
