두잉애니띵

리팩토링 Payment 컴포넌트 분리(feat. reduce())

공부하는 승승 — Thu, 24 Aug 2023 01:31:34 +0900

reduce()

map() 대신 사용
array의 모든 요소를 체크하고 누적된 값을 리턴하기 좋은듯
반복문이나 값을 계산하기 위한 변수를 따로 선언하지 않아도 결과 값을 출력할 수 있어서 코드가 깔끔해보인다.

array.reduce(callback, 초기값);

array: 콜백함수를 돌리는데 사용할 인수를 가진 배열
callback: 배열의 각 요소에 대해 실행될 함수
- 사용가능 한 인수들
- accumulator: 누적된 값
- currentValue: 현재 처리 중인 요소
- currentIndex: (선택사항) 현재 처리 중인 인덱스
- array: (선택사항) reduce()가 호출된 원본 배열
초기값: 생략시 array의 첫 번째 요소가 초기 누적값이 됨

예시

const array = [1, 2, 3, 4, 5];

// reduce를 사용하여 array의 모든 요소의 합을 계산

const sum = array.reduce((accumulator, currentValue) => {
  return accumulator + currentValue);
}, 0); // 초기값 : 0

console.log(sum) // 15

const sum = array.reduce((accumulator, currentValue) => {
  return accumulator + currentValue);
}, 100); // 초기값 : 100

console.log(sum) // 115

1. 이제 reduce()를 사용해서 map()을 걷어내보자.

// 리팩토링 전
function Payment() {
    const state = useSelector((state) => state.cartItem);
    let [sumPrice, setSumPrice] = useState(0);
    let priceArr = [];

    if (state.length > 0) {
        state &&
            state.map((a, i) => {
                let amountPrice;
                if (state[i].checked) {
                    amountPrice = state[i].price * state[i].count;
                } else {
                    amountPrice = 0;
                }
                return priceArr.push(amountPrice);
            });
    } else {
        sumPrice = 0;
    }
}

// 리팩토링 후
function Payment({ cartItem }) {
    const [sumPrice, setSumPrice] = useState(0);

    const calculateSumPrice = () => {
        if (!cartItem) return;

        const totalAmount = cartItem.reduce((sum, item) => {
            if (item.checked) {
                return sum + item.price * item.count;
            }
            return sum;
        }, 0);
        setSumPrice(totalAmount);
    };

2. 불필요하게 두번 계산하던 것도 calculateSumPrice란 변수에 담아서 재사용하기 + setTimeout 제거

// 리팩토링 전
useEffect(() => {
    setTimeout(() => {
        if (priceArr.length > 0) {
            let a = priceArr.reduce((sum, itemPrice) => sum + itemPrice);
            setSumPrice(a);
        }
    }, 100);
});

// 리팩토링 후
useEffect(() => {
    calculateSumPrice();
});

3. return()에서 직접 연산하던 부분도 추상화하기

// 리팩토링 전
return (
    ...
    <dl className="amount">
        <dt className="amount-item">총 상품금액</dt>
        <dd className="amount-price">{sumPrice.toLocaleString()}원</dd>
        <dt>배송비</dt>
        <dd>+{sumPrice === 0 ? 0 : sumPrice >= 30000 ? 0 : SHIPPING}원</dd>
    </dl>
    <dl className="total">
        <dt>결제예상금액</dt>
        <dd>
            {sumPrice === 0
                ? 0
                : sumPrice >= 30000
                ? sumPrice.toLocaleString()
                : (sumPrice + shipping).toLocaleString()}
            원
        </dd>
    </dl>
    ...
)

// 리팩토링 후
const calculateSumPrice = () => {
    ...
    const renderShippingCost = () => {
        if (sumPrice >= 30000) {
            return 0;
        }
        return SHIPPING_COST;
    };

    const estimatedPayment = () => {
        if (sumPrice === 0) {
            return 0;
        }
        const totalPrice = sumPrice + (sumPrice >= 30000 ? 0 : SHIPPING_COST);
        return totalPrice.toLocaleString();
    };
    ...
    return (
        ...
        <dl className="amount">
            <dt className="amount-item">총 상품금액</dt>
            <dd className="amount-price">{sumPrice.toLocaleString()}원</dd>
            <dt>배송비</dt>
            <dd>+{renderShippingCost()}원</dd>
        </dl>
        <dl className="total">
            <dt>결제예상금액</dt>
            <dd>{estimatedPayment()}원</dd>
        </dl>
        ...
    );
}

리팩토링

공부하는 승승 — Wed, 23 Aug 2023 23:59:49 +0900

장바구니 페이지 리팩토링하기

이 프로젝트에서 가장 가독성 떨어지는 파일이다. 당시 디렉토리 구조를 아래와 같이 만들는데, pages 폴더에 웹 프로젝트에서 보여줄 각각의 페이지를 넣고 그 페이지를 구성하는 요소를 component 폴더에 담았다. 예컨데 메인페이지를 만든다고 가정했을 때, pages > main.js / component > header, footer, nav 이런식으로 쪼개서 만든 셈이다.

당시에 컴포넌트란 개념에 대해 UI의 최소 단위, 재사용 가능한 가장 작은 조각이라고 이해했다. 이걸 HTML의 시멘틱 태그처럼 코드를 봤을 때 그 구조가 한눈에 보이게 짜면 되겠구나! 라고 생각한 것이다. 아주 틀린 말은 아니겠지만 실제 현업에서 프로젝트를 진행하면서 보았던 컴포넌트들은 저정도? 크기는 작은 것도 아니었다... (input, button, modal 하나하나 다 컴포넌트로 만들어두고 사용하는 것에 놀랐던 기억이 새록새록...)

그래서 리택토링 전 Cart 컴포넌트의 구조는 이렇다.

function Cart(){

  return (
    <Container className='cart-container'>
      <header>
        <div className='cart-title'>
          <h4 className='active'>장바구니</h4>
        </div>
      </header>
        <section className='cart-box'>
          {/* 선택한 상품 */}
          <article className="cart-content">
            <CartItem />
          </article>
          {/* 총 상품 금액 */}
          <Payment />
        </section>
    </Container>
  )
}

function CartItem(){
  /* ... */
}

function Payment(){
  /* ... */
}

이걸 보고 일단 저 CartItem()과 Payment()부터 개별 컴포넌트로 빼야겠다는 생각이 만연했다. 이 파일을 열어보기 전까지 Payment()가 여기 있다는 사실도 잊고있었으니 당장 분리시켜야겠다.

해당 컴포넌트를 분리시키면서 신경 썼던 부분은 크게 두가지다.

가독성
추상화

return() 안에서 직접 연산하거나 state를 변경하지 말자.

// CartItem() 리팩토링 전 input

<input type='checkbox' 
    id={checkId} 
    onClick={() => {dispatch(checkItem(cartItemId))}} 
    checked={state[i].checked ? true && checkArr.push(cartItemId) : false && checkArr.drop(cartItemId)} readOnly
/>

// CartItem() 리팩토링 후 input
const handleCheckboxClick = () => {
    dispatch(checkItem(id));
};

const isChecked = checked ? true : false;
if (isChecked) {
    checkArr.push(id);
} else {
    const indexToRemove = checkArr.indexOf(id);
    if (indexToRemove !== -1) {
        checkArr.splice(indexToRemove, 1);
    }
}

return (
    ...
    <input
        type="checkbox"
        id={checkId}
        onClick={handleCheckboxClick}
        checked={isChecked}
        readOnly
    />
)

* splice()

[Vue.js] 21. Composition API

공부하는 승승 — Mon, 7 Aug 2023 21:09:39 +0900

Options API: 지금까지 사용했던 문법
Composition API: 관련 있는 코드를 한 곳에 모을 수 있음

* 컴포넌트마다 Options / Composition 선택 가능

보여줄 vue 만들기

데이터 준비하기

1. 보여줄 vue 만들기 - 마이페이지

<!-- Mypage.vue -->
<template>
    <div style="padding: 10px">
        <h4>팔로워</h4>
        <input placeholder="?" />
        <div class="post-header">
            <div class="profile"></div>
            <span class="profile-name">사용자명</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Mypage-components',
};
</script>

<style></style>

2. 데이터 준비하기 - public폴더 내 json 파일 생성

// folowwer.json
[
    { "id": 0, "name": "_Limvely", "image": "https://picsum.photos/200?r=0" },
    { "id": 1, "name": "salmon_X", "image": "https://picsum.photos/200?r=1" },
    { "id": 2, "name": "360noscope", "image": "https://picsum.photos/200?r=2" },
    { "id": 3, "name": "Jeony_1", "image": "https://picsum.photos/200?r=3" },
    { "id": 4, "name": "mihyeon", "image": "https://picsum.photos/200?r=4" }
]

* public폴더에 생성한 건 빌드할 때 파일명 변경안됨

setup()함수

setup(){
    let 데이터이름 = ref(데이터);
}

ref()에 데이터 담는 이유

Vue에서 실시간 데이터 재렌더링이 가능한 이유는 reference data 타입 덕분인데 setup()함수에서도 데이터의 실시간 재렌더링을 반영하기 위해 ref()에 데이터 담아서 사용함

reactive()

reactive() - 보통 array, object 데이터 사용

ref() - 숫자, 문자 등 나머지 자료형 사용

import { onMounted, ref } from 'vue';
import axios from 'axios';

export default {
    name: 'Mypage-components',
    setup() {
        let follower = ref([]);
        // let follower = reactive({ name: 'kim' });
        
        // Composition API에서 Lifecycle Hook 사용
        onMounted(() => {
            axios.get('/follower.json').then((res) => {
                follower.value = res.data;
            });
        });
        return { follower };
    },
};

Composition API에서 props 사용하기

<!-- 부모 컴포넌트 -->
<tmeplate>
    <Mypage :one="1" :two="2" />
</tmeplate>

<!-- 자식 컴포넌트 -->
<script>
import { onMounted, ref, toRefs } from 'vue';
import axios from 'axios';

export default {
    name: 'Mypage-components',
    props: {
        one: Number,
        two: Number,
    },
    setup(props, context) {
        ...
        // props 사용 방법
        let { one, two } = toRefs(props);
        one.value;
        two.value;
        ...
    },
};
</script>

Composition API에서 watch 사용하기

watch(감시할것, () => {실행할코드})

import { ref, watch } from 'vue'

export default {
  setup(props){
    let follower = ref([]);
    watch( 데이터명, ()=>{ 데이터 변화시 실행할 코드 } )
    return { follower }
  },
}

Composition API에서 computed 사용하기

computed(() => { return 연산결과 })

export default {
    name: 'Mypage-components',
    props: {
        one: Number,
        two: Number,
    },
    setup(props, context) {
        let result = computed(() => {
        return follower.value.length;
    });
    console.log(result);
    ...

Composition API에서 vuex store 사용하기

import { useStore } from 'vuex';
export default {
    name: 'Mypage-components',
    props: {
        one: Number,
        two: Number,
    },
    setup(props, context) {
        let follower = ref([]);
        let store = useStore();
        console.log(store.state.name);
        console.log(store.commit.addAge); // Composition API 안에서는 mapState 안됨
        return { follower }
    }
    ...

Composition API에서 methods함수 사용하기

<template>
    내함수()
</template>

<script>
export default {
    name: 'Mypage-components',
    props: {
        one: Number,
        two: Number,
    },
    setup(props, context) {
        ...
        function 내함수(){
            코드작성
        }
    }
    return { 내함수 }
    ...
</script>

ex) 검색기능 구현하기

*옛날 방식: s 입력시 s가 들어간 HTML을 보이게 처리

Vue 방식: s 입력시 follower라는 데이터를 조작

<template>
    <div>
        <input placeholder="팔로워검색하기" @input="search($event.target.value)" />
    </div>
</template>

<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';

export default {
    name: 'Mypage-components',
    setup(props, context) {
        let follower = ref([]);
        let followerOriginal = ref([]);

        onMounted(() => {
            axios.get('/follower.json').then((res) => {
                follower.value = res.data;
                followerOriginal.value = [...res.data];
            });
        });

        function search(검색어) {
            let newFollower = followerOriginal.value.filter((res) => {
                return res.name.indexOf(검색어) != -1;
            });
            follower.value = [...newFollower];
        }

        return { follower, search };
    },
};
</script>

[Vue] 20. PWA

공부하는 승승 — Mon, 7 Aug 2023 19:56:18 +0900

> 리액트에서 PWA 설치 및 세팅

[React] PWA

PWA : Progressive Web App 안드로이드 / iOS 모바일 앱처럼 사용할 수 있게 만드는 웹개발 기술 iOS, Android 앱으로 발행하는게 아니라 웹사이트 자체를 스마트폰 홈화면에 설치 1. PWA 장점 설치 마케팅 비

seungstory.tistory.com

1. 라이브러리 설치

vue add pwa

2. 배포용 html 생성하기

npm run build

* 주요 파일

manifest.json - 앱 정보를 담은 파일

service-worker.js - 웹페이지 구동에 필요한 html, css, js, img를 하드에 저장해두고 사용(오프라인에서도 사용가능하게)

3. PWA 설정 변경하기

vue.config.js 파일 생성

// vue.config.js
module.exports = {
  pwa: {
    name: '앱이름',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    workboxOptions: {
      exclude: [/\.map$/, /manifest\.json$/, 'index.html'] // 캐싱 목록에서 제외할 폴더
    }
  }
}

* play store에 등록가능한 실제 apk 파일생성

https://v3.vuejs.org/guide/mobile.html#introduction

Vue.js - The Progressive JavaScript Framework | Vue.js

Versatile A rich, incrementally adoptable ecosystem that scales between a library and a full-featured framework.

vuejs.org

[Vue.js] 19. Vuex

공부하는 승승 — Mon, 7 Aug 2023 02:23:01 +0900

Vuex

: 사용 이유

props, custom event로 데이터를 주고받으면 컴포넌트가 여러개일 때 관리하기가 힘듦

(컴포넌트, 데이터 개수가 적을 때는 props가 더 나을 수 있음)

1. 설치

npm install vuex@next

2. 세팅

src폴더 > store.js 파일 생성

// store.js
import { createStore } from 'vuex';

const store = createStore({
    state() {
        return {
            name: 'kim', // 보관하고 싶은 state(:데이터)
        };
    },
});

export default store;

main.js에 store파일 import

// main.js
import { createApp } from 'vue';
import App from './App.vue';
let app = createApp(App);

import store from './store';

app.use(store).mount('#app'); // 모든 컴포넌트들이 이 store 안에 있는 state(:데이터)들을 공유

3. 사용하기

{{ $store.state.state이름 }}

ex)

{{ $store.state.name }}

❗ Vuex 컴포넌트 안에서 직접 수정 금지

4. state 변경하기1 - mutations(순차적으로 state변경)

미리 store.js에 수정방법을 정의
해당 방법을 컴포넌트에서 소환해서 수정

// store.js
import { createStore } from 'vuex';

const store = createStore({
    state() {
        return {
            name: 'kim',
            age: 20,
        };
    },
    mutations: { // 순차적으로 state 변경
        updateName(state) {
            state.name = 'park';
        },
        addAge(state, payload) {
            state.age += payload;
        },
    },
});

export default store;

<!-- App.vue -->
<template>
    <div class="header">
        <h4>안녕 {{ $store.state.name }}</h4>
        <button @click="$store.commit('updateName')">이름변경</button>
        
        <span>{{ $store.state.age }}</span>
        <button @click="$store.commit('addAge', 3)">나이추가</button> <!-- age + 3 -->
    </div>
</template>

5. state 변경하기2 - actions(ajax, 오래걸리는작업)

// store.js
import axios from 'axios';
import { createStore } from 'vuex';

const store = createStore({
    // 보관하고 싶은 state(:데이터)
    state() {
        return {
            name: 'kim',
            age: 20,
            likes: 0,
            clickLikes: false,
            more: {},
        };
    },
    // 순차적으로 state 변경
    mutations: {
        ...
        setMore(state, data) {
            state.more = data;
        },
    },
    // ajax, 오래걸리는 작업
    actions: {
        getData(context) {
            axios
                .get(`https://codingapple1.github.io/vue/more0.json`)
                .then((res) => {
                    context.commit('setMore', res.data);
                })
                .catch((err) => console.log(err));
        },
    },
});

export default store;

<!-- App.vue -->
<template>
    <p>{{ $store.state.more }}</p>
    <!-- dispatch: actions요청 -->
    <button @click="$store.dispatch('getData')">더보기</button>
</template>

6. computed 함수

methods 함수: 사용할 때마다 실행
computed 함수: 사용해도 실행되지 않음.처음 실행할 때 값을 간직함 - 데이터 결과 저장소...

<!-- App.vue -->
<template>
    <div>
        <p>{{ now() }}{{ counter }}</p> <!-- methods -->
        <p>{{ now2 }}{{ counter }}</p>  <!-- computed -->
        <button @click="counter++">버튼</button>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            counter: 0,
        };
    },
    methods: {
        now() {
            return new Date();
        },
    },
    computed: {
        now2() {
            return new Date();
        },
    },
};
</script>

7. mapState

store에 저장한 state 편하게 꺼내 쓰기

// store.js
import axios from 'axios';
import { createStore } from 'vuex';

const store = createStore({
    state() {
        return {
            name: 'kim',
            age: 20,
            likes: 0,
            clickLikes: false,
            more: {},
        };
    },
    mutations: {
        updateName(state) {
            state.name = 'park';
        },
        addAge(state, payload) {
            state.age += payload;
        },
        likes(state) {
            if (!state.clickLikes) {
                state.likes++;
                state.clickLikes = true;
            } else {
                state.likes--;
                state.clickLikes = false;
            }
        },
        setMore(state, data) {
            state.more = data;
        },
    },
    actions: {
        getData(context) {
            axios
                .get(`https://codingapple1.github.io/vue/more0.json`)
                .then((res) => {
                    console.log(res.data);
                    context.commit('setMore', res.data);
                })
                .catch((err) => console.log(err));
        },
    },
});

export default store;

<template>
    <div>
        <!-- mapState 사용 -->
        {{ name }} {{ age }} {{ likes }}
        {{ 내이름 }}
        
        <button @click="$store.commit('addAge', 3)">나이+</button> <!-- mapState 사용x -->
        <button @click="addAge(3)">나이+3</button> <!-- mapState 사용o -->
    </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex';

export default {
    name: 'App',
    data() {
        return {
            postData: postData,
            moreCount: 0,
            step: 0,
            image: '',
            writePost: '',
            selectedFilter: '',
            counter: 0,
        };
    },
    methods: {
        ...mapMutations(['addAge', 'likes', 'setMore']),
        ...mapActions(['getData']),
       ...
    },
    computed: {
        ...
        ...mapState(['name', 'age', 'likes']),
        ...mapState({ 내이름: 'name' }),
    },
};
</script>

[Vue.js] 18. mitt

공부하는 승승 — Mon, 7 Aug 2023 01:57:32 +0900

컴포넌트 구조

App.vue > Container.vue > FilterBox.vue

mitt 라이브러리를 사용해서 FilerBox 컴포넌트에서 App 컴포넌트로 데이터 전송하기

설치

npm install mitt

세팅

// main.js
...
import mitt from 'mitt';
let emitter = mitt();
let app = createApp(App);
app.config.globalProperties.emitter = emitter;
// app.config.globalProperties: 글로벌한 변수보관함 - 보관함에 { emitter: emitter } 추가

app.mount('#app');

mitt로 데이터 전송하는 방법

데이터 전송할 컴포넌트에서 this.emitter.emit()
데이터 수신할 컴포넌트에서 this.emitter.on()

데이터 보내기

<!-- 데이터 보낼 컴포넌트 -->
<template>
    <button @click="fire">버튼</button>
</template>

<script>
export default {
    name: 'Filter-box',
    methods: {
        fire() {
            // this.emitter.emit('작명', '데이터'); // 보낼 데이터 작성
            this.emitter.emit('selectedFilter', this.filter);
        },
    },
};
</script>

데이터 받기

<!-- 데이터 받는 컴포넌트 -->
<template>
    <!-- 필터선택페이지 -->
    <div v-if="step == 1">
        <div :class="`upload-image ${selectedFilter}`" :style="{ backgroundImage: `url(${image})` }"></div>
        ...
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            postData: postData,
            moreCount: 0,
            step: 0,
            image: '',
            writePost: '',
            selectedFilter: '', // <- 추가
        };
    },
    methods: {
        ...
        publish() {
            let myPost = {
                name: 'Kim Hyun',
                userImage: 'https://picsum.photos/100?random=3',
                postImage: this.image,
                likes: 36,
                date: 'May 15',
                liked: false,
                content: this.writePost,
                filter: this.selectedFilter, //<-emitt으로 받아온 데이터 갱신
            };
            this.postData.unshift(myPost);
            this.step = 0;
        },
    },
    mounted() {
        // this.emitter.on('작명', () => {
        //     '실행할 코드';
        // });
        this.emitter.on('selectedFilter', (filter) => {
            this.selectedFilter = filter;
        });
    },
    ...
};
</script>

❗ mitt는 많이 사용하면 관리가 힘들어짐 -> Vuex 사용하기

[Vue.js] 17. slot

공부하는 승승 — Mon, 7 Aug 2023 00:26:37 +0900

slot

: props보다 간단하게 자식 컴포넌트에서 부모 컴포넌트의 데이터를 사용

사용방법

부모 컴포넌트에서 해당 <자식컴포넌트> 태그 사이에 보낼 데이터 작성하기
자식 컴포넌트의 <template> 태그 사이에 데이터를 사용할 공간에 <slot></slot> 태그 넣기

<!-- 부모 컴포넌트 -->
<!-- Container.vue -->
<FilterBox v-for="(filter, i) in filterData" :key="i" :image="image" :filter="filter">
    {{ filter }} <!--FilterBox 컴포넌트에 보낼 데이터 -->
</FilterBox>

<!-- 자식 컴포넌트 -->
<!-- FilterBox.vue -->
<template>
    <div :class="`filter-item ${filter}`" :style="{ backgroundImage: `url(${image})` }">
        <slot></slot> <!--여기에 부모에서 넘겨받은 데이터 들어감 -->
    </div>
</template>

[Vue.js] 16. 서버없이 이미지 업로드

공부하는 승승 — Sun, 6 Aug 2023 05:05:15 +0900

이미지 업로드 한 걸 HTML에 보여주는 방법 두가지

FileReader() - 파일을 글자로 변환
URL.createObjectURL() - 이미지의 가상 URL을 생성

* 이미지는 원래 0과 1로 이뤄진 binary 데이터임. binary 데이터를 다룰 때 BLOB라는 object에 담아서 다룸

ex) 파일 업로드 후 다음페이지로 이동 - 이동한 페이지에 업로드한 이미지 띄우기

<!-- App.vue -->
<template>
    <Container :postData="postData" :step="step" :image="image" />
    <div class="footer">
        <ul class="footer-button-plus">
            <!-- multiple: 다중선택 / accept="image/*": 이미지 선택을 기본으로 -->
            <input @change="upload" accept="image/*" type="file" id="file" class="inputfile" />
            <label for="file" class="input-plus">+</label>
        </ul>
    </div>
</template>

<script>
import Container from './components/Container.vue';
import postData from './data/postData';
export default {
    name: 'App',
    data() {
        return {
            ...
            step: 0,
            image: '',
        };
    },
    methods: {
        upload(e) {
            let file = e.target.files;
            console.log(file[0]);
            console.log(file[0].type); // 이미지 타입
            let url = URL.createObjectURL(file[0]); // 가상의 이미지 URL 생성
            console.log(url);
            this.image = url;
            this.step++; // 다음 페이지로 이동
        },
    },
    ...
};
</script>

<!-- Container.vue -->
<template>
    <!-- 필터선택페이지 -->
    <div v-if="step == 1">
        <div class="upload-image" :style="{ backgroundImage: `url(${image})` }"></div>
    </div>
</template>

<script>
import Post from './Post.vue';
export default {
    name: 'Container-component',
    props: {
        postData: Array,
        step: Number,
        image: String,
    },
    components: { Post },
};
</script>

<style>
.upload-image {
    width: 100%;
    height: 450px;
    background: cornflowerblue;
    background-size: cover;
}
</style>

[Vue.js] 15. Ajax

공부하는 승승 — Sun, 6 Aug 2023 04:16:02 +0900

ajax 요청 방법 두가지

axios 라이브러리 사용
기본 fetch 함수 사용

> axios 라이브러리 사용

라이브러리 설치하기

npm install axios

사용하기

// post 요청
axios.post('URL', {name: 'kim'})
    .then((결과) => {
        console.log(결과)
    })
    .catch((에러) => {
        console.log(에러)
    });
    
// get 요청
axios.get('URL')
    .then((결과) => {
        console.log(결과)
    })
    .catch((에러) => {
        console.log(에러)
    });

ex) 더보기 클릭시 데이터 받아오기

<template>
    <button @click="more">더보기</button>
</template>

<script>
import postData from './data/postData';
import axios from 'axios';

export default {
    name: 'App',
    data() {
        return {
            postData: postData,
            moreCount: 0,
        };
    },
    methods: {
        more() {
            axios
                .get(`https://codingapple1.github.io/vue/more${this.moreCount}.json`)
                .then((res) => {
                    console.log(res);
                    this.postData.push(res.data);
                    this.moreCount++;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
    components: { Container },
};
</script>

[Vue.js] 14-2. 라우터 hash mode, Navigation guards

공부하는 승승 — Sun, 6 Aug 2023 00:44:11 +0900

1. 라우터 hash mode

처음 세팅했던 라우터 코드

import { createRouter, createWebHistory } from 'vue-router'

const router = [];
const router = createRouter({
  history: createWebHistory(),
  routes,
})

history: createWebHistory() - HTML5 mode

서버에 해당 페이지 요청함.
그래서 Vue가 라우팅 해주기 전에 서버가 해당 페이지를 보여주려고 함.
서버에 기능 구현이 안되어있으면 404가 뜰 수도 있음 -> 미리 서버에 Vue에서 라우팅 처리하게 맡겨두라고 기능 개발 해둬야함

history: createWebHashHistory() - Hash mode

URL에 #이 붙음 ex) tistory.com/#
# 뒤에 있는 내용들은 서버로 전달되지 않음
그래서 서버가 라우팅을 채가는 일을 방지할 수 있고 Vue에서 온전히 라우팅할 수 있음

2. Navigation guards

특정 URL로 접속할 때 특정 코드를 실행
네비게이션해주기 전에 실행되는 코드, 훅 같은 것

ex) /home 페이지로 이동 전 로그인하지 않은 상태면 /login 페이지로 이동

const routes = [
  {
    path: "/home",
    component: HelloWorld,
    beforeEnter: ()=>{
      if (isLogin == false) { // 로그인하지않았으면
        return '/login' // 로그인 페이지로 이동
      }
    }
  }
];

+ 파라미터

const routes = [
  {
    path: "/hello",
    component: HelloWorld,
    beforeEnter: (to, from)=>{ // 첫번째 파라미터: 도착 페이지 / 두번째 파라미터: 출발 페이지
      return to.fullPath // to.fullPath: 전체 경로 / to.params.id: id 파라미터
    } // return false: 라우팅 중단
  }
];

2.1. Vue 컴포넌트 안에서도 navigatrion guard 사용 가능

lifecycle hook 사용 위치에 사용
특정 페이지로 접속했을 때 ajax 요청을 할 때 주로 사용

beforeRouteEnter(){}
beforeRouteUpdate(){}