본문 바로가기
반응형

JavaScript9

javascript querySelector, querySelectorAll이용하기 이번 포스팅에서는 javascript의 querySelector를 이용하는 방법에 대해 다뤄보겠습니다. 크롬 브라우저의 개발자 도구에서 console창으로 테스트해보시는 것을 추천드립니다. 📌 querySelector querySelector는 dom 요소를 하나만 선택할 때 사용합니다. 해당 요소의 속성을 변경하거나, 자식 / 부모 관계로 Element를 만들 때 주로 사용됩니다. 사용 방법은 이렇습니다. document.querySelector('요소'); 📌 querySelectorAll querySelectorAll은 해당되는 모든 요소를 nodeList(배열)로 반환합니다. document.querySelectorAll('요소'); 이때, 선택할 요소는 css 선택자를 사용하는데요, 대표적인 경.. 2021. 5. 31.
javascript 배송 기한 설정하기 e commerce 서비스를 이용하다 보면, "00시간 00분 00초 내 주문 시 당일 발송"과 같은 문구를 볼 수 있습니다. 이번 포스팅에서는 javascript로 배송 기한 설정 작업을 해보겠습니다. - 오후 3시를 기준으로, 오늘 배송인지 내일 배송인 판별 합니다. - 다음날이 공휴일 / 주말이라면 다음 영업일을 기준으로 몇일, 몇 시간 이내에 주문 시 발송인지 포함합니다. 📌 전체 코드 👀 부분적으로 알아보기 👉 타이머 띄우기 window.onload = function(){ var info_new_wrap = document.querySelector('.parentElement');//class 이름이 parentElement인 요소 var timer_below_order_cost = creat.. 2021. 5. 31.
리액트 프로젝트 만들기 create-react-app 0. 준비물 Nodejs - 리액트 관련 라이브러리들하을 손쉽게 설치할 수 있도록 해주는 npm, yarn을 위해 필요하다. VSCode (코드 편집기중 하나인데, 다른 편집기를 사용해도 괜찮다) 1. yarn 설치하기 yarn은 페이스북에서 만든 녀석인데, 프로젝트 의존성 관리를 담당하는 Javascript 기반의 패키지 매니저다. npm이 존재하긴 하나, 이보다 훨씬 빠르고 안전하다. npm의 속도, 성능, 보안 문제들을 해결하기 위해 개발되었다. 설치는 Yarn의 홈페이지에서 할 수 있다. https://yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarn.. 2021. 4. 18.
Javascript - Daum 도로명주소 API 사용하기 javascript를 사용하여 도로명 주소 찾기를 해보자. 참고한 공식 문서는 글 제일 하단에 링크를 걸어두었다. 왜 Daum API인가? 우체국, 도로명주소 API등 많은 주소 관련 API가 있는데 왜 다음 API를 이용하여 개발하는가에 대한 내용이다. 다른 주소 API의 경우 별도로 Key를 발급 받거나, 응답 형태가 XML이라 추가적으로 파싱을 해야 할 필요가 있었다. 이 때문에 구현하는 것에도 진입장벽이 높았고, 유지보수 또한 만만치 않았다. 하지만, Daum API가 등장하고, 10분 만에 도로명 주소 검색을 구현할 수 있게 되었다. 사용 형태 Daum API를 사용하여 주소 검색을 구현하면, 크게 세 가지 형태로 구현이 가능하다. 첫 번째로, 팝업을 띄우는 형태이다. 팝업을 띄우는 것은 PC .. 2021. 4. 6.
반응형