쿠카의 개발일지

우편번호 검색 서비스를 직접 자신의 서버에 구현 할 경우, 약 1G에 달하는 데이터를 서버가 들고 있어야 하고, 주기적으로 데이터도 업데이트 해줘야 한다. 검색해보니 Daum에서 제공하는 API는 키도 필요 없고, backend에서 처리 할 필요가 없어져서 여기에 소개 해보려고 한다. 관련링크: https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 예제 코드 : 구현된 모습 :

문제 상황 : shouldComponentUpdate 기능 구현하기전부터 콘솔 로그확인시 두번씩 반복되는 것을 확인할수있는데, 적용후에도 동일하게 나타납니다. 어떤 문제인지 잘 파악이 되지않아 해당 화면 첨부드립니다. 이유 : 렌더링 단계는 render 함수를 호출해서 이전 렌더와 비교를 수행하는 단계이고, 커밋 단계의 경우에는 라이프 사이클 함수를 실행시키며 DOM 노드를 추가/변경해주는 단계입니다. 여기서 커밋단계는 일반적으로 렌더링 단계보다 빠릅니다. 그로인해 느린 렌더링 단계에서 여러 생명주기 메서드가 여러번 호출되기도 합니다. 이러한 것들을 strict 모드에서는 미리 파악하고 우리에게 경고해줍니다. strict 모드가 자동적으로 모든 부작용을 찾아낼 수는 없지만, 문제가 될 만한 함수를 두 번..

사용자의 키보드 입력을 감지 키보드 이벤트 타입 키보드 이벤트(Keyboard Event)는 사용자가 키를 누르거나 키를 놓을 때 발생합니다. 키를 누를 때는 keydown 타입의 이벤트가 발생하고, 키를 놓을 때는 keyup 타입의 이벤트가 발생합니다. (예전에는 keypress라는 이벤트 타입도 사용되었으나, 현재는 deprecated되어 권장되지 않으므로 다루지 않겠습니다.) 키보드 이벤트는 DOM 상에서 창(window)이나 문서(document), 또는 특정 요소(element)에서 발생할 수 있습니다. 예를 들어, window에서 발생하는 keydown 이벤트를 처리하려면 다음과 같이 이벤트 처리를 위한 콜백(callback) 함수를 설정해주면 됩니다. window.onkeydown = (e)..

padding과 margin CSS 속성중에 요소의 여백을 결정하는 속성들에 대하여 알아봅니다. margin 축약 속성이며, 요소의 테두리 외부에 투명한 공간을 확보한다. 값은 1개부터 4개까지 지정할 수 있다. CSS h1 {margin: 10px 5px 15px 20px;} /* top-10px, right-5px, bottom-15px, right-20px */ h2 {margin: 10px 5px 15px;} /* top-10px, right & left-5px, bottom-15px */ h3 {margin: 10px 5px;} /* top & bottom-10px, right & left-5px */ h4 {margin: 10px;} /* all four margins are 10px */ 속..

1. 커서 변경 $('body').css('cursor', 'default'); $('body').css('cursor', 'wait'); 2. Select Box에서 선택된 Value 찾기 $('#search_sale_pernr_s option:selected').val(); 3. Table의 타이틀 Row를 제외한 모든 Row 삭제하기 $("#data_list_table > tbody").children("tr:not(:first)").remove(); 4. Table의 마지막 Row 다음에 Row 추가하기 $("#data_list_table > tbody:last").append("값1"); 5. innerHTML값 Setting하기 $("#id_total_price").html("값"); 6. 해..

addClass(), removeClass(), hasClass() 예제 # 제이쿼리 addClass() 정보 및 예제보기아래는 제이쿼리를 사용한 addClass() 메소드입니다. 기본적인 문법은 아래와 같습니다. $(element).addClass('클래스명'); addClass() 속성을 사용하면 특정 요소에 새로운 클래스를 추가할 수 있습니다. 앞에 언급한 것처럼 이미 가지고 있는 클래스는 더 이상 추가되지 않습니다. ! addClass() 예제보기만약 아래와 같이 span 태그가 존재할 경우 여기에 red 클래스를 주어 폰트색을 변경하는 예제를 만들어 보겠습니다. .red { color: red; } Test addClass @ red.js $('span').addClass('red'); 위 코드..

getElementById()없이 id.value가 가능한 이유 아이디 : 일반적으로 자바스크립트에서 특정 ID의 텍스트 상자 값을 가져올 때 위 예제와 같이 document.getElementById("id").value를 이용한다. 그러던 중 우연히 id.value를 사용해봤는데, document.getElementById("id").value와 동일하게 동작했다! 여기서 두가지 의문이 생겼다. 1. id.value는 어떤 원리로 동작하는 것인가? 2. id.value와 같은 단순한 형태를 두고 우리는 왜 굳이 getElementById를 사용하는가? 1. id.value의 동작원리 html 태그의 id 속성값은 자바스크립트에서 전역변수로 사용될 수 있다. x = document.getElementB..

var, let, const 의 차이점 1. 변수 선언 방식 우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. var name = 'bathingape' console.log(name) // bathingape var name = 'javascript' console.log(name) // javascript 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다. 그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 const 이다. 위의 코드에서 변수 ..

javascript avascript null,undefined,empty 체크시 좋은 코딩방법 대전제로 javascript의 조건문안에서 ** null,undefined,’‘,0 은 false로 변환된다 ** 조건문이란? javascript에서 조건문이라 하면 이하와 같은 코드를 말한다. 1. if ( xx ) 2. !xx 3. !!xx 4. xx ? yy : zz 계속 반복 해당 로직안에서 null,undefined,'',0은 false로 변환된다. null,undefined,’‘,0 === false라고?? 검증해보자 !!를 사용해서 검증해보자. > !!undefined false > !!null false > !!"" false > !!0 false 전부 false가 반환되는걸 알 수 있다. 이 ..

상위 요소 선택자 - 선택한 요소를 기준으로 모든 상위 요소를 선택하거나 상위 요소 중 선택하고자하는 요소만 선택할 때 사용 기본형 $("요소 선택").parents(); $("요소 선택").parents("요소 선택"); - 예제 선택자 내용 내용 출처 : https://shgdx.tistory.com/57?category=954801 [JQuery] 선택자 - 인접 관계 선택자 1. 개발 환경 구분 내용 사용 언어 HTML5, CSS3, JS, jQuery 개발환경 Visual Studio Code 참고 도서 [Do it] 자바스크립트 + 제이쿼리 입문 웹브라우저 Chrome 2. 주요 문법 1) 인접 관계 선택자 - 직접 선택자로 요 shgdx.tistory.com