본문 바로가기
728x90
반응형

Coding With Jina154

[자바스크립트] Event의 종류( addEventListener, removeEventListener 메서드) addEventListener으로 등록할 수 있는 이벤트 중 자주 쓰이는 이벤트 목록 이벤트 명 설명 change 변동이 있을 때 click 마우스를 클릭 시 focus 포커스를 얻었을 때 keydown 키보드 아무거나 눌렀을 때 keyup 키보드에서 손을 땟을 때 load 로드가 완료 되었을 때 mousedown 마우스를 클릭 했을 때 mouseout 마우스가 특정 객체 밖으로 나갔을 때 mouseover 마우스가 특정 객체 위로 올려졌을 때 mousemove 마우스가 움직였을 때 mouseleave 마우스가 연결된 요소에서 이동했을 때 mouseup 마우스에서 손을 땟을 때 select option 태그 등에서 선택을 했을 때 resize 화면의 크기가 조정되었을 때 (element를 window로 .. 2021. 1. 13.
[자바스크립트] addEventListener() 함수 addEventListener() 함수 - 한 요소에 여러 이벤트가 발생했을 때 이를 동시에 처리하기 위한 함수 - 이벤트가 발생한 요소에 이벤트 처리기를 연결해주는 함수 element.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식) 1. 이벤트 명 : 이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달 2. 실행할 이벤트 리스너 : 지정된 이벤트가 발생했을 때 실행할 이벤트 리스너를 전달 3. 이벤트 전파 방식 : false면 버블링(bubbling) 방식으로, true면 캡처링(capturing) 방식으로 이벤트를 전파 (디폴드값 false이고 생략가능) [출처] www.tcpschool.com/javascript/js_event_eventListenerRegister -.. 2021. 1. 13.
[React] 리액트 초기 세팅 - ③ create-react-app을 이용해서 개발환경 구축하기 리액트 시작 전 초기 세팅 1) Node.js 사이트에서 npm 다운로드 및 설치하기 2) npm을 이용해서 create react app 설치하기 3) create react app을 이용해서 개발환경 구축 3) create react app을 이용해서 개발환경 구축 3-1) 디렉토리 설정하기 ① 원하는 경로에 react-app 폴더 생성 (폴더명을 react라고 하면 안됨 → 특수한 문자이기때문에 create-react-app에서 거절) ② cmd 창에 cd (Change Directory 라는 뜻)와 스페이스바를 입력한 후에 생성한 폴더를 드래그 해서 넣고 엔터! (cd만 입력하고 드래그 하면 파일 이름, 디렉터리 이름 또는 볼륨 레이블 구문이 잘못되었습니다. 라고 뜸) ③ 자동으로 경로를 알려줌 .. 2021. 1. 12.
[React] 리액트 초기 세팅 - ② npm을 이용해서 create react app 설치하기 리액트 시작 전 초기 세팅 1) Node.js 사이트에서 npm 다운로드 및 설치하기 2) npm을 이용해서 create react app 설치하기 3) create react app을 이용해서 개발환경 구축 2) npm을 이용해서 create react app 설치하기 2-1) create react app 설치 ① cmd 실행창을 연다(윈도우키+r) ② npm install create-react-app@2.1.8 이라고 치고 엔터 (여기서 버전을 안쳐주면 최신형으로 설치가 되는데 버전이 다르면 이고잉님 생활코딩 리액트 강의와 호환이 안될 수 도 있어서 똑같이 따라함) ③ 중간에 -g 를 추가로 입력해주면 컴퓨터 어디에서든지 create-react-app을 설치 실행할 수 있기때문에 매우 편리 ④ 그.. 2021. 1. 12.
[React] 리액트 초기 세팅 - ① Node.js 사이트에서 npm 다운로드 및 설치하기(Windows 10) 리액트를 시작하기 위해서는 리액트 툴을 추가해야한다. 여기서 3가지 방법이 있는데 우리는 Create React App을 이용한 리액트 활용법을 알아볼 것이다. 리액트 시작 전 초기 세팅 1) Node.js 사이트에서 npm 다운로드 및 설치하기 2) npm을 이용해서 create react app 설치하기 3) create react app을 이용해서 개발환경 구축 1) Node.js 사이트에서 npm 다운로드 및 설치하기 1-1) npm 설치하기 npm이란? - Node.js 라고 하는 기술을 이용해서 만들어진 여러 앱들을 명령어 환경에서 아주 손쉽게 설치할 수 있도록 도와주는 도구 - Node.js 계의 앱스토어 또는 구글 플레이 같은 역할을 하는 소프트웨어 ① Node.js 홈페이지에서 다운로드(.. 2021. 1. 12.
[자바스크립트] 날짜계산기 만들기 HTML 기념일 계산기 우리 만난지 일 자바스크립트 const now = new Date(); function input(){ const dday = new Date(document.querySelector("#input_date").value); const passedTime = now.getTime()-dday.getTime(); const passedDay = Math.round(passedTime/(24*60*60*1000)); document.querySelector("#accent").innerHTML = passedDay+"일"; } const now = new Date()는 Wed Dec 16 2020 09:00:00 GMT+0900 (대한민국 표준시) 이런식으로 저장되고 바로 밀리초로 바.. 2021. 1. 6.
728x90
반응형

티스토리툴바