[220607 / Day 24] fullpage, 비구조화 할당, React 시작

JS

1. 풀페이지

fullpage.min.js : 압축

카피 스크립트 태그로 붙여 넣으면 모든 것 붙여넣기 가능

콜백 처리 : 플러그인 쓸 때 콜백 처리 잘 봐줘야 함, 페이지가 들어오고 나서 반응이 있는 등 은 콜백함수로 처리, 한두개만 봐도 감이 생김

fullpage.min.js:11 fullPage: Fullpage.js requires a `licenseKey` option. Read about it on the following URL:  라이선스 오류? 풀페이지 깃헙 리드미 읽어볼 것,

data-menuanchor : 꼭 있어야 함

메뉴바 : 바디 부분과 스크립트 부분의 앵커 부분 연결해주는 링크가 똑같아야 함 그래서 각각 누르면 anchors: ['section0', 'section1', 'section2', 'section3'] 찾아갈 수 있도록 / active 는 활성되는 클래스 즉, 붙었을 때 변경하고 싶은 것

배민사이트 만들기 가능 (콜백처리)

콜백

- afterload : 구역을 불러오고 나서 스크롤이 끝나면 콜백이 실행됩니다.  도착을 했을 때 실행

- onLeave : 떠나고 실행

 

2. 비구조화 할당

비구조화 할당 : 배열, 객체, 반복 가능 객체에서 값을 꺼내어 그 값을 별도의 변수에 대입하는 문장

리액트 쓸 때 많이 사용

 

배열의 비구조화 할당 destructuring.html

객체의 비구조화 할당 destructuring2.html

 

배열은 index 순서임 그래서 순서를 바꾸면 같이 바뀌는 게 아니라 순서만 바뀜

객체는 순서를 바꿔도 이름으로 찾기 때문에 열거된 순서대로 찾지 않고 이름대로 찾음

 

 

 

 

React

리액트를 다루는 기술 - 김민준 도 괜찮

함수형 주로 할 것

31p

상단부터 전체를 다시 불러오기 서버 요청이 들어감 페이지를 아예 다시 구성 돔트리 다시 구성

싱글페이지 어플리케이션 : 페이지가 한장, 많은 페이지로 각각 페이지로 전환되는 것이 아닌 교체되는 부분만 갈아끼우는 것 페이지 여러장 아님

돔트리 직접 바꾸는 것이 아닌 가상 돔 사용 그 전에 읽어왔던 내용과 바뀐 내용을 읽어서 그것만 변경

 

react/01

퍼블릭에서 배포

소스에서 작업

app.js 가 메인페이지 역할

102p jsx

jsx = javascript xml