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. Javascript 자료형에는 어떤 것이 있을까? 자바스크립트는 동적 언어로서, 타입을 미리 명시할 필요가 없다. 타입은 프로그램이 처리되는 과정에서 알아서 파악될 것이기 때문이다. 이 때문에 우리는 프로그램을 실행하기 전, 어떤 타입이든 동일한 변수에 넣어줄 수 있다. var something = 11; // 이제 Number 타입 var something = "bar"; // 이제 String 타입 var something = true; // 이제 Boolean 타입 자바스크립트의 데이터 타입 자바스크립트에는 6가지의 기본 자료형과 Object라는 자료형까지해서 총 7개의 자료형이 있다. 기본 자료형 1. Boolean 타입 Boolean타입은 true와 false 둘 중 하나의 값을 갖는 논리적인 요소를 뜻한다. A라는 물체가 물인지 아닌지를 표현.. 2021. 4. 5. javascript 변수 - const, let, var 변수에 대하여 javascript 뿐만 아니라 어떤 프로그래밍 언어에서든 가장 먼저 다루는 개념이 변수이다. 변수는 '무언가를 담는 상자'라고 생각하면 쉽다. 프로그래밍을 할 때는 무언가를 담아두었다가, 원하는 시점에 꺼내서 쓸 수 있도록 하는 방식으로 코드를 작성하게 된다. 이 말은 '무언가를 담을 수 있는 상자'라는 것이 정확히 어떤 것이고, 어떻게 이루어져 있는지를 이해하는 것이 필요하다. 필자는 4개월간 javascript를 사용해왔는데 기능 구현에만 초점을 맞춘 상태로 기본을 놓치고 있었다. 이번 포스팅에서는 javascript에서 사용되는 '무언가를 담는 상자'에 대해 다뤄보고자 한다. javascript에서의 변수 선언 javascript에서 사용되는 변수 선언은 const, let, var.. 2021. 3. 31. 이전 1 2 다음 반응형
