full page plugin

full page plugin
https://alvarotrigo.com/fullPage/ko/

CDN
https://cdnjs.com/libraries/fullPage.js

📌Full page plugin 활용 예제 1

    <div id="menuBar">
        <ul class="gnb">
            <li data-menuanchor="section0"><a href="#section0">Section1</a></li>
            <li data-menuanchor="section1"><a href="#section1">Section2</a></li>
            <li data-menuanchor="section2"><a href="#section2">Section3</a></li>
            <li data-menuanchor="section3"><a href="#section3">Section4</a></li>
        </ul>
    </div>
    <div id="fullpage">
        <div class="section s1"></div>
        <div class="section s2"></div>
        <div class="section s3"></div>
        <div class="section s4"></div>
    </div>

<script>
        new fullpage('#fullpage', {
        licenseKey:'OPEN-SOURCE-GPLv3-LICENSE',
        autoScrolling:true,
        scrollHorizontally: true,
        menu : '.gnb',👈
        anchors: ['section0','section1','section2','section3']👈
});
</script>

1) 메뉴에 해당하는 li에 data-menuanchor 값 지정.

2) js 초기화에 menu와 anchor 지정하면 해당 섹션을 인덱스로 불러올 수 있음.

📌Full page plugin 활용 예제 2

콜백함수를 사용하여 페이지가 로드된 후 효과 적용하기.

afterLoad
(origin, destination, direction, trigger)
Demo Callback fired once the sections have been loaded, after the scrolling has ended. Parameters:
origin: (Object) section of origin.
destination: (Object) destination section.
direction: (String) it will take the values up or down depending on the scrolling direction.
trigger: (String) indicates what triggered the scroll. It can be: "wheel", "keydown", "menu", "slideArrow", "verticalNav", "horizontalNav".

출처 : https://github.com/alvarotrigo/fullPage.js#readme

afterLoad: function(origin, destination, direction){
        let num = destination.index;
        if(num==2){
            li.forEach((ele)=>{
                ele.classList.add('on')
            })
        }else{
            li.forEach((ele)=>{
                ele.classList.remove('on')
            })
        }
    }

---

javascript

비구조화 할당(distructuring)

객체, 배열에서 값을 꺼내어 그 값을 별도의 변수에 대입하는 문장.

배열

축약

<script>
    const arr = [1,2,3,4,5];
    const arr1 = arr[0];
    const arr2 = arr[1];
    const arr3 = arr[2];
    const arr4 = arr[3];         
    const arr5 = arr[4];           
</script>

<script>
    let arr = [1,2,3,4,5];
    const [arr1,arr2,arr3,arr4,arr5] = [1,2,3,4,5];
</script>

    const [num1,num2,num3 = 300]=[100,200]
    console.log(num3)

num3=300 없을 시 undefined.

재할당

let[a,b] = ['철수','영희'];
console.log(a);
[a,b]=[100,200];
console.log(a);

중첩

let price, item1, item2;
price = [item1, item2] = ['사과','배','키위','귤'];
console.log(item1); //사과
console.log(item2); //배
console.log(price)//['사과', '배', '키위', '귤']

중첩된 경우 가장 우변의 값이 들어간다.

last element

const [txt1,txt2,...txt3] = ['a','b','c','d']
console.log(txt3)//['c', 'd']
console.log(txt3[0], txt3[1])//c , d

... : 나머지 값 배열로 전부 받아옴.

함수로 호출

 function arrFnc(name, age){
    console.log(name)
    console.log(age)
}
const people = ['shin', 20<]
arrFnc(people[0],people[1])

...
arrFnc(['shin', 20])
//[name, age] = ['shin', 20]

객체

const {age : b,name : a} = {name:'lee', age:30}
console.log(a)//lee
console.log(b)//30

배열은 인덱스 값으로 불러옴. 순서를 바꾸면 들어가는 값이 달라짐. 반면 객체는 순서가 아닌 key값으로 호출.

축약

const {age : age,name : name} = {name:'lee', age:30}

const {age,name} = {name:'lee', age:30}

const address = 'seoul';
const telNum = '010';
const gender = 'male';
const user ={
    address :address,
    telNum : telNum,
    gender : gender
}

const user ={address ,telNum ,gender}

초기값

const {a:x=0,b:y=0,c:z=0} = {a:1, b:2, c:3}
console.log(x,y,z)//1 2 3

const {a:x=0,b:y=0,c:z=0} = {a:1, b:2, c}
//에러발생

const {a:x=0,b:y=0,c:z=0} = {a:1, b:2}
console.log(x,y,z)//1 2 0

함수로 호출

function objFnc (name, age){
    console.log(name)
    console.log(age)
}
const obj = {name : 'won', age : 10}
objFnc(obj.name , obj.age)

function objFnc (name, age){
    console.log(name)
    console.log(age)
}
const obj = {name : 'won', age : 10}//=objFnc(obj.name , obj.age)
objFnc(obj)//={name, age} = {name : 'won', age : 10}

let product ={
    shape :{width:150,height:100,weight:50,},color:['red', 'green', 'yellow']
}
console.log(product.shape.width)
let {shape :{width,height,weight},color:[topColor,bottomColor,sideColor]} = product
console.log(width)
console.log(weight)
console.log(height)
console.log(topColor)
console.log(bottomColor)
console.log(sideColor)

js파일에서 일부 불러오기

형식

import valuebox from 'js파일 경로';

예시
1) 하나만 내보낼 때

html 파일

    <script type="module">
        import a from './a.js';👈
    </script>
</head>

js 파일

const a = 100;
const b = 200;
const hi = '안녕하세요';
export default b;👈

default로 지정하여 하나만 내보낼때는 import 에서 지정한 이름과 상관 없이 js파일에서 내보내기로 지정한 값을 받아옴.

2) 두개 이상 내보낼 때.

html 파일

    <script type="module">
        import {a,b,hi} from './a.js';👈
    </script>
</head>

js 파일

const a = 100;
const b = 200;
const hi = '안녕하세요';
export {a,b,hi};👈

모듈에서 이름을 일치시켜야 받아올 수 있음.

3) 이름 다르게 지정하고 싶을 때

import {a as value} from './b.js';
console.log(value)

---

react

single page application

component

style 적용하기

1) css 연결

import './App.css';

2) 반복되는 요소 변수 지정하여 적용

const listLi = {margin:'0 10px',lineHeight:'50px',backgroundColor:'#778A35'}
...
<li style={listLi}>리스트{num}</li>

3) 인라인으로 적용

...
<ul style = {{fontSize:'30px', color:'#fff', margin:'50px auto', display:'flex',justifyContent:'center', backgroundColor:'#D1E2C4'}}>
...

jsx문법 : js, html 혼합해서 사용
중괄홈, 카멜표기법 사용.