-
링크 클릭 시 경고창을 보여주고 웹사이트 이동 막기 이동
[React] 리액트 링크 클릭 시 경고창을 보여주고 웹사이트 이동 막기링크 클릭 시 경고창을 보여주고 웹사이트 이동 막기 이동
🗓️ 2023.11.16 🗨️0 -
QRcode 로 로또 용지를 촬영했을 때 1등 번호로 수정해서 요청할 수 있도록 코드 수정하기. 수정 후 location = x 로 이동해서 결과 확인하기. Drop files here to upload ※ 자바스크립트의 특수한 객체. 브라우저에 내장되어 있는 객체(내장객체) => location : URL 과 관련된 기능 => window : alert, print => navigator : geolocation
[React] 리액트 실습 : QRcode 로 로또 용지 촬영 시 1등 번호로 수정해서 요청QRcode 로 로또 용지를 촬영했을 때 1등 번호로 수정해서 요청할 수 있도록 코드 수정하기. 수정 후 location = x 로 이동해서 결과 확인하기. Drop files here to upload ※ 자바스크립트의 특수한 객체. 브라우저에 내장되어 있는 객체(내장객체) => location : URL 과 관련된 기능 => window : alert, print => navigator : geolocation
🗓️ 2023.11.15 🗨️0 -
검색용 해시태그 입력을 위한 사용자 편의 기능 추가하기 검색어 입력 :
[React] 리액트 검색용 해시태그 입력을 위한 사용자 편의 기능 추가하기검색용 해시태그 입력을 위한 사용자 편의 기능 추가하기 검색어 입력 :
🗓️ 2023.11.15 🗨️0 -
DOM (Document Object Model) => 웹 브라우저가 HTML을 인식하는 방식 (넓은 의미) => document 객체와 관련된 객체의 집합 (좁은 의미) => HTML의 Tag를 자바스크립트에서 이용할 수 있도록 객체로 만든 것 => Element Node 와 Text Node (Text Content) 로 나뉜다. 1) 문서 객체 가져오기 - document. ~ ex) document.head, document.body, document.title ※ document. 다음으로 나올 단어에서 title, head, body 등 대표적인 것 이외의 것들은 사용불가할 수 있다. => querySelecor 혹은 querySelectorAll 을 사용함. - javascript 로 HTM..
[React] 리액트 DOM 문서 가져오기 / 객체 생성 및 속성 지정 + 연습문제DOM (Document Object Model) => 웹 브라우저가 HTML을 인식하는 방식 (넓은 의미) => document 객체와 관련된 객체의 집합 (좁은 의미) => HTML의 Tag를 자바스크립트에서 이용할 수 있도록 객체로 만든 것 => Element Node 와 Text Node (Text Content) 로 나뉜다. 1) 문서 객체 가져오기 - document. ~ ex) document.head, document.body, document.title ※ document. 다음으로 나올 단어에서 title, head, body 등 대표적인 것 이외의 것들은 사용불가할 수 있다. => querySelecor 혹은 querySelectorAll 을 사용함. - javascript 로 HTM..
🗓️ 2023.11.14 🗨️0 -
Cookie 자바스크립트에 의해 사용자의 PC(브라우저)에 저장되는 파일 사용자의 로그인 정보를 저장하는 등 다양하게 활용 문자열만 저장 가능 Session Cookie : 브라우저 종료 시 쿠키 삭제 Persistent Cookie : 만료일자를 지정하여 해당 일자에 삭제 저장 용량 : 4KB 1) Cookie 저장 // Session Cookie ( 키 = 값;) // // Persistent Cookie ( 키 = 값; expires = 만료일자; ) // Local Storage 자바스크립트에 의해 사용자의 PC(브라우저)에 저장되는 파일 사용자의 로그인 정보를 저장하는 등 다양하게 활용 객체 저장 가능 Persistent : 자동으로 삭제되지 않음 저장 용량 : 5MB 이상 // Local St..
[React] 리액트 Cookie 쿠키 / LocalStorage 로컬스토리지 / SessionStorage 세션스토리지Cookie 자바스크립트에 의해 사용자의 PC(브라우저)에 저장되는 파일 사용자의 로그인 정보를 저장하는 등 다양하게 활용 문자열만 저장 가능 Session Cookie : 브라우저 종료 시 쿠키 삭제 Persistent Cookie : 만료일자를 지정하여 해당 일자에 삭제 저장 용량 : 4KB 1) Cookie 저장 // Session Cookie ( 키 = 값;) // // Persistent Cookie ( 키 = 값; expires = 만료일자; ) // Local Storage 자바스크립트에 의해 사용자의 PC(브라우저)에 저장되는 파일 사용자의 로그인 정보를 저장하는 등 다양하게 활용 객체 저장 가능 Persistent : 자동으로 삭제되지 않음 저장 용량 : 5MB 이상 // Local St..
🗓️ 2023.11.13 🗨️0 -
Event ※ 코드 독해시 어려움 있을경우 console.dir(event) 을 통해 각 파라미터 혹은 하위 카테고리 확인해보기 ※ Event Driven Programming (이벤트 기반 프로그래밍) : 이벤트의 발생에 의해 프로그램 흐름이 결정되는 프로그래밍 패러다임 1) Event 사용 ① 문서객체.addEventListener('이벤트명', 콜백함수) ② 문서객체.removeEventListener('이벤트명', 콜백함수) 2) 키보드 이벤트 ① keydown : 키가 눌릴 때 실행 ② keypress : 키가 입력되었을 때 실행 ③ keyup : 눌렀던 키를 떨어질 때 실행 // 키보드 입력 시 글자 수 출력 // 글자 수 : 0 3) 드롭다운(Select) 목록 활용 떡볶이 순대 오뎅 튀김 ..
[React] 리액트 Event 이벤트 종류Event ※ 코드 독해시 어려움 있을경우 console.dir(event) 을 통해 각 파라미터 혹은 하위 카테고리 확인해보기 ※ Event Driven Programming (이벤트 기반 프로그래밍) : 이벤트의 발생에 의해 프로그램 흐름이 결정되는 프로그래밍 패러다임 1) Event 사용 ① 문서객체.addEventListener('이벤트명', 콜백함수) ② 문서객체.removeEventListener('이벤트명', 콜백함수) 2) 키보드 이벤트 ① keydown : 키가 눌릴 때 실행 ② keypress : 키가 입력되었을 때 실행 ③ keyup : 눌렀던 키를 떨어질 때 실행 // 키보드 입력 시 글자 수 출력 // 글자 수 : 0 3) 드롭다운(Select) 목록 활용 떡볶이 순대 오뎅 튀김 ..
🗓️ 2023.11.13 🗨️2