FRONT-END

Callback 구조

promise - async/await

promise - then

catch와 finally

parseInt는 type을 숫자로 바꿔주며 뒤 10을 통해 10진수로 바꾼다.

pageLength는 총 페이지 갯수로 1페이지당 10개의 movie가 있다.

Math.ceil은 올림처리의 기호이다.

기존 commit으로 updateState를 작동시켜 movies: Search를 넣을시

기존 movies가 덮어씌워지므로 전개연산자를 통해 actions에 state를 인자로 넣고

...state.moves, 에 ...Search를 추가할수 있도록 작성한다.

...state를 사용하기 위해 commite 처럼 action의 인자로 { state, commit}이 있어야한다.

import _uniquBy from 'loadash/uniqBy' //lodash의 uniquBy만 사용선언

Search는 검색된 movie들이 여러개 들어있는 배열데이터인데 여기서 imdbID라는 값이 같은것들은 1개로만 만들어서 배열을 새로만들어낸다.

search.vue에서 methods의 내부 vuex(store) 실행 방법

변이 mutations

flex의 감소 비율을 없애기

flex-shrink:0

http 요청을 위한 패키지설치

npm i axios

버튼을 누를때만 비동기 처리

async-await

vuex(Store)

부모와 자식간에는 props를 사용해 데이터 전달

부모와 최하위 자식간에는 provide/inject 사용해 데이터 전달 가능

자식과 자식간에는 vuex(store)로 데이터중앙집권형으로 데이터 전달

1. 설치

npm i vuex@next

2. store폴더 내 index.js 생성으로 vuex의 설정파일 생성

3. main.js에 use로 연결 및 import stroe 선언

4.stoe폴더 내 movie나 about .js 생성

5. index.js에서 movie나 about. js 에서 export defalut로 내보낸것을 import하여 사용 선언

V-model $data 점표기법 연결

year부분 value가 없을시

value=""와 option사이 값을 주는것은 같다.

Logo 만들기

inner처럼 가운데 bootstrap을 통해 정렬하기

1. navigations로 nav태그들을 나열하기 위해 Search, Movie, About을 만들고 href로 주소도 배치한다.

2. 나열될 div에 v-for로 나열시키고 RouterLink에 :to로 href를 할당한다.

3. bootstrap처럼 버튼을 누를시 active가 되는것을 위해 active-class="active"로 하고 nav-pills로 bootstrap 양식을 맞춘다.

4. App.vue에 Header로 선언한다.

페이지 라우터 이동 연결 설정

1. npm install vue-router@4 설치

2. main.js 설정

import router from './routes/index.js' //import 추가

createApp(App).use(router).mount('#app') //.use(router)추가

3. index.js 설정import { createRouter, createWebHashHistory } from 'vue-router'

export default createRouter({history: createWebHashHistory(),routes:[{ path:'/'. //주소 뒤 경로 component:'' //Router폴더안에 있는 vue파일을 연결}]})

index.js 내부routes-component 설정하는법

bootstrap 커스텀하기-scss

1. npm install bootstrap@next로 최신 bootstrap설치

2. main.scss 선언

@import "../../node_modules/bootstrap.scss/bootstrap.scss

3. 적용할 vue에 scss 선언

<style lang="scss">

@import "~scss/main";

</style>

4. main.scss에서 custom진행

$primary: #FDC000;

@import "../../node_modules/bootstrap/scss/functions"; //위 커스텀 적용후 import

@import "../../node_modules/bootstrap/scss/variables"; //위 커스텀 적용후 import

@import "../../node_modules/bootstrap/scss/mixins"; //위 커스텀 적용후 import

props와 context로 setup 수정하기

ref로 데이터를 반응성있게 만들기

App.composition으로 변경해보기