티스토리

쿠카의 개발일지
검색하기

블로그 홈

쿠카의 개발일지

devkuka.tistory.com/m

8년차 개발자의 블로그 입니다.

구독자
10
방명록 방문하기
공지 쿠카이든의 육아 일기 링크 모두보기
728x90

주요 글 목록

  • 도로명주소 검색 기능 구현 (feat. Daum PostCode Service) 우편번호 검색 서비스를 직접 자신의 서버에 구현 할 경우, 약 1G에 달하는 데이터를 서버가 들고 있어야 하고, 주기적으로 데이터도 업데이트 해줘야 한다. 검색해보니 Daum에서 제공하는 API는 키도 필요 없고, backend에서 처리 할 필요가 없어져서 여기에 소개 해보려고 한다. 관련링크: https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 예제 코드 : 구현된 모습 : 공감수 5 댓글수 0 2023. 5. 10.
  • strict 모드(feat. <React.StrictMode>) 문제 상황 : shouldComponentUpdate 기능 구현하기전부터 콘솔 로그확인시 두번씩 반복되는 것을 확인할수있는데, 적용후에도 동일하게 나타납니다. 어떤 문제인지 잘 파악이 되지않아 해당 화면 첨부드립니다. 이유 : 렌더링 단계는 render 함수를 호출해서 이전 렌더와 비교를 수행하는 단계이고, 커밋 단계의 경우에는 라이프 사이클 함수를 실행시키며 DOM 노드를 추가/변경해주는 단계입니다. 여기서 커밋단계는 일반적으로 렌더링 단계보다 빠릅니다. 그로인해 느린 렌더링 단계에서 여러 생명주기 메서드가 여러번 호출되기도 합니다. 이러한 것들을 strict 모드에서는 미리 파악하고 우리에게 경고해줍니다. strict 모드가 자동적으로 모든 부작용을 찾아낼 수는 없지만, 문제가 될 만한 함수를 두 번.. 공감수 5 댓글수 0 2023. 5. 9.
  • keydown(), keyup() 이벤트 사용자의 키보드 입력을 감지 키보드 이벤트 타입 키보드 이벤트(Keyboard Event)는 사용자가 키를 누르거나 키를 놓을 때 발생합니다. 키를 누를 때는 keydown 타입의 이벤트가 발생하고, 키를 놓을 때는 keyup 타입의 이벤트가 발생합니다. (예전에는 keypress라는 이벤트 타입도 사용되었으나, 현재는 deprecated되어 권장되지 않으므로 다루지 않겠습니다.) 키보드 이벤트는 DOM 상에서 창(window)이나 문서(document), 또는 특정 요소(element)에서 발생할 수 있습니다. 예를 들어, window에서 발생하는 keydown 이벤트를 처리하려면 다음과 같이 이벤트 처리를 위한 콜백(callback) 함수를 설정해주면 됩니다. window.onkeydown = (e).. 공감수 8 댓글수 0 2022. 12. 27.
  • getElementById() 대신 id.value 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.. 공감수 3 댓글수 0 2022. 12. 22.
  • const vs let (feat. 호이스팅) var, let, const 의 차이점 1. 변수 선언 방식 우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. var name = 'bathingape' console.log(name) // bathingape var name = 'javascript' console.log(name) // javascript 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다. 그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 const 이다. 위의 코드에서 변수 .. 공감수 3 댓글수 2 2022. 12. 20.
  • null,undefined,empty 체크 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가 반환되는걸 알 수 있다. 이 .. 공감수 8 댓글수 0 2022. 12. 12.
  • form이벤트 onfocus, onblur, onchange, onsubmit - 포커스얻을시, 포커스잃을시, 교체시, 폼보낼시 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 기본 사과 오렌지 onfocus, onblur, onchange, onsubmit onfocus- 포커스를 얻었을때 이벤트가 발생합니다. onblur- 포커스를 잃었을때 이벤트가 발생합니다. onchange- 교체(체인지)시 이벤트가 발생합니다. onsubmit- 폼보낼시 이벤트가 발생합니다.(예제는 생략) 출처 : https://roydest.tistory.com/entry/form%EC%9D%B4%EB%B2%A4%ED%8A%B8-onfocus-onblur-onchange-onsubmit .. 공감수 6 댓글수 0 2022. 12. 2.
  • 테이블에 행 추가하는 이벤트 버튼을 클릭하여 테이블에 행을 추가하는 방법 테이블에 행 추가하기 - insertRow(), insertCell() insertRow(), insertCell() 함수 테이블에 행(Row)를 추가하기 위해서는 insertRow(), insertCell() 함수를 사용합니다. insertRow() var newRow = HTMLTableElement.insertRow(index); table element에 새로운 행을 추가해 줍니다. 파라미터(index) 새로 생성된 행(row)가 테이블에 들어갈 위치 index를 넣어줍니다. 파라미터를 입력하지 않으면 default 값은 '-1'이고, 테이블의 가장 마지막에 새로운 행을 추가합니다. 리턴 새로 추가된 행(row)를 가리키는 reference를 나타냅니다.. 공감수 8 댓글수 0 2022. 11. 16.
    728x90
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.