리액트

자바스크립트 6일차, 리엑트1일차

초롱씨 2023. 9. 5. 12:24
728x90
반응형
ghjk

1. window

    - 최상위 객체

    - 전역 scope, 브라우저 창과 관련된 여러가지 기능 제공

    - window.alert, window.print, window.open 등

 

2. navigator

    - 사용자가 사용하는 브라우저의 여러가지 정보 제공 (버전, 언어, 위치 등)

    - navigator.geolocation, navigator.userAgent 등

 

배열에서는  for in for of 

객체에서는 for in

 

1. Element 생성 후 body의 자식 요소로 추가

const h1 = document.createElement('h1');

h1.textContent = 'Hello';

document.body.appendChild(h1);

 

2. body의 HTML에 (문자열) 태그 추가

document.body.innerHTML += '<h2>Hello</h2>';

 

 

addEventListener에

  • click: 마우스 클릭 이벤트.
  • mousedown: 마우스 버튼을 누를 때 발생하는 이벤트.
  • mouseup: 마우스 버튼을 놓을 때 발생하는 이벤트.
  • mousemove: 마우스 포인터가 요소 내에서 이동할 때 발생하는 이벤트.
  • mouseenter: 요소 내로 마우스 포인터가 진입할 때 발생하는 이벤트.
  • mouseleave: 요소를 벗어나면 발생하는 이벤트.
  • keydown: 키보드 키를 누를 때 발생하는 이벤트.
  • keyup: 키보드 키를 놓을 때 발생하는 이벤트.
  • input: 입력 요소의 값이 변경될 때 발생하는 이벤트.
  • submit: 폼 제출 이벤트.
  • focus: 요소가 포커스를 얻을 때 발생하는 이벤트.
  • blur: 요소가 포커스를 잃을 때 발생하는 이벤트.
  • load: 웹 페이지나 이미지 등이 로드될 때 발생하는 이벤트.
  • unload: 웹 페이지가 언로드될 때 발생하는 이벤트.
  • resize: 브라우저 창 크기가 변경될 때 발생하는 이벤트.
  • scroll: 스크롤바가 스크롤될 때 발생하는 이벤트.
  • contextmenu: 마우스 오른쪽 버튼으로 요소를 클릭할 때 발생하는 이벤트.
  • touchstart: 터치 디바이스에서 화면을 터치할 때 발생하는 이벤트.
  • touchmove: 터치 디바이스에서 화면을 터치한 후 이동할 때 발생하는 이벤트.
  • touchend: 터치 디바이스에서 화면에서 손을 떼면 발생하는 이벤트.

 

   <h1>🎈</h1>
    </body>
    <script>
    const star = document.querySelector('h1');
    star.style.position = 'absolute';
    // let [x, y] = [0, 0];
    let x=0;
    let y=0;
    const block = 20;
    const print = () => {
    star.style.left = `${x * block}px`
    star.style.top = `${y * block}px`
    };
    print();
    const [left, up, right, down] = [37, 38, 39, 40];
    document.body.addEventListener('keydown', (event) => {
    switch (event.keyCode) {
    case left : x -= 1; break;
    case up : y -= 1; break;
    case right: x += 1; break;
    case down : y += 1; break;
    }
    print();
    });

화면에 게임

 

<body>
    <input type="text" name="search">
 
</body>

<script>
    const input = document.querySelector('[name=search]');
    input.addEventListener('focus', (event) => {
        let search = event.currentTarget.value;
        if (search.length==0){
        event.target.value = '#'
    }
    });

    input.addEventListener('keyup', (event) => {
        let keyCode = event.keyCode;
        if (keyCode == 32) {
            let value= event.target.value;
            let last = value.substring(value.length-2);
            if (last!='# '){
            value = value.substring(0,value.length -1);
            event.target.value = value+',#';
        }
    }

    });

</script>
# 넣기
event driven
이벤트막는 함수
preventDefalut()
stopPropagation(): 겹치는 것들이 모두 반응하지 않게 최초 발생하는 하나에만 걸어준다.
<body>
    <select>
    <option>떡볶이</option>
    <option>순대</option>
    <option>오뎅</option>
    <option>튀김</option>
    </select>
    <p>선택: 떡볶이</p>
    </body>
    <script>
    const select = document.querySelector('select');
    const p = document.querySelector('p');
    select.addEventListener('change', (event) => {
    const options = event.currentTarget.options;
    const index = event.currentTarget.options.selectedIndex;
    p.textContent = `선택: ${options[index].textContent}`
    console.dir(event);
    });
    </script>
변경시 값 변경
 
■ Cookie / Local Storage / Session Storage
 
● Cookie - 자바스크립트에 의해 사용자의 PC(브라우저)에 저장되는 파일 - 사용자의 로그인 정보를 저장하는 등 다양하게 활용 - 문자열만 저장 가능 - Session Cookie : 브라우저 종료 시 쿠키 삭제 - Persistent Cookie : 만료일자를 지정하여 해당 일자에 삭제 - 저장 용량 : 4KB
● Local Storage - 자바스크립트에 의해 사용자의 PC(브라우저)에 저장되는 파일 - 사용자의 로그인 정보를 저장하는 등 다양하게 활용 - 객체 저장 가능 - Persistent : 자동으로 삭제되지 않음 - 저장 용량 : 5MB 이상
   
● Session Storage - 자바스크립트에 의해 사용자의 PC(브라우저)에 저장되는 파일 - 사용자의 로그인 정보를 저장하는 등 다양하게 활용 - 객체 저장 가능 - Session : 브라우저 종료 / 탭 종료 시 삭제 - 저장 용량 : 5MB 이상
 
➔ 브라우저 종료 후에도 데이터 저장 : Cookie / Local Storage 웹 서버(Back-end)에서 활용 : Cookie 대용량 / 객체 활용 : Local Storage 데이터 임시 활용 : Session Storage
 
 
쿠키
document.cookie = 'key1=value1;'; document.cookie = 'key2=value2;expires=Sun, 01 Jan 2040 00:00:00 GMT';
UTC - Coordinated Universal Time GMT - Greenwich Mean Time -> Wed, 08 Jan 2020 00:00:00 UTC;

● Local Storage 활용

localStorage.setItem('key1', 'local value1');

localStorage.setItem('key2', 'local value2');

console.log(localStorage.getItem('key1'));

console.log(localStorage.getItem('key2'));

● Session Storage 활용

sessionStorage.setItem('key1', 'session value1');

sessionStorage.setItem('key2', 'session value2');

console.log(sessionStorage.getItem('key1'));

console.log(sessionStorage.getItem('key2'));

 

 

 

@@@@@

npm uninstall -g create -reacte- 

 

mkdir 폴더 명으로 폴더 만들고 

오류가 발생되면 

npm uninstall -g create-react-app 

위 명령어 실행 후 아래 실행

 

1) npx create-react-app .

    프로젝트 폴더를 미리 만들어둔 경우

 

2) npx create-react-app react-app

    프로젝트 폴더를 미리 만들어두지 않은 경우

 

프로젝트 실행  패키지 제이슨의 명령어 중
npm run start 시작

live server - 127.0.0.1:5500

react run - localhost:3000 == 127.0.0.1:3000

 

const Nav = () => { 함수형식이
  return (
  <nav>
    <ul>
      <li><a href='1.html'>HTML</a></li>
      <li><a href='2.html'>CSS</a></li>
      <li><a href='3.html'>JavaScript</a></li>
    </ul>
  </nav>
  );
}

function App() {
  return (
    <div className="App"> //jsx 이라고 한다.
      <Header></Header> 앞글자가 대문자다
      <hr></hr>
      <Nav></Nav>
    </div>
  );
}

export default App;

 

css는 한곳에서 임포트해도 다 적용되기때문에 개별 적용방법이 필요하다

 <ul style={
      {border: '1px solid red'}
    }>

인라인방식

 

module방식은 css.module.css 파일을 임포트 해서 사용

 

 

리액트네이티브-안드로이드

 

컴포넌트에 데이터 값을 넣기 위해 프롭스 객체를 준다.

 

728x90
반응형