FRONT-END

html - 자바스크립트 환경에서는 import / exports 를 사용

node.js - 자바스크립트 환경에서는 require / exports 사용

*서버리스함수에서 데이터가 객체로 전달 될 시 JSON.stringify를 사용한다.

*서버리스는 가져올때 body부분의 데이터를 문자로 가지고 있지만 사용할때 JSON.parse를 통해 객체로 만들어야한다.

환경변수 설정으로 중요한 키는 .env에서 관리하기

1. npm i -D dotenv-webpack 설치

2. webpack.config.js에서 import 및 plugin 선언

3. .env 파일 생성

API_KEY=7035c60c

4. API_KEY가 선언되있는곳에 .env의 API_KEY를 불러오기

5. .gitignore에 .env 선언 (*선언할시 netlify에서는 업로드가 없는걸로 되니 별도로 netlify웹에서 환경변수선언해야함)

RouterView 라우터로 연결된 실제 동작할 부분을 보여준다

RouterLink a태그처럼 누르면 라우터로 연결된 ./route로 이동시킨다.

Route는 fullPath나 param같은 요소들이 있다

Router는 push같은 메소드들이 들어있다.

netlify-CLI 서버리스함수로 API관리구조

[설정]

1. netlify.toml 생성

[build]
  functions = 'functions' //function 디렉토리를 서버리스 함수 폴더로 지정

2. functions 폴더 생성

3. functions 폴더 내부 서버리스 함수 hello.js 생성

exports.handler = async function(event,context){

  return{

    statusCode:200,

    body: JSON.stringify({

      name:'HEROPY',

      age:25,

      email:'sadad@naver.com'

    })

  }

}

netlify.toml 설정

netlify-cli 설정 및 작동

1. npm i -D netlify-cli 설치

2. package.json 내부 

"dev:netlify" : "netlify dev" 선언

3. npm run dev:netlify 작동

*작동시 개발서버에서 8080포트로 개발되어 netlify에서는 8888포트로 연결된다.

http://localhost:8888/.netlify/functions/hello 해당 주소에 접속하면 hello.js에서 json수정한 객체가 보이게 된다.

main.scss 전역에서 가져와서 사용하기

vuex의 mapState로 this.$store.state.모듈.값 을 한번에 처리하기

about.js export default {   namespaced:true,   state:()=>({     name: '****',     email:'wnsdud****@naver.com',     blog:'https://naver.com',     phone:'+82-10-****-****',     image:'https://heropy.blog/css/images/logo.png'   }) }

페이지 이동간 스크롤 복귀

메인 페이지로 이동시 검색 정보를 초기화

page404 route 연결 및 omponents에 NotFound.vue만들기

RouterLink to="./about" 대신 @click="메소드"로 연결

뷰포트 크기 대비 크고 작을시 내부 요소 변경

정규표현식 /movie로 시작하는 경로를 일치시킨다.

path:/^\/movie/

정규표현식 true와 false로 test( ) 하기

이미지 로드 아이콘 생성

고해상도 이미지변경 methods

클래스 바인딩을 통해 특정 값에 의해 class가 추가되는것을 설정할 수 있다.

삼항 연산자

movie/tt123123 등 영화상세정보페이지 만들기

props 연결 구조

white-space:nowrap; //내부 콘텐츠(글자)에 따라 아래로 height가 늘어나지않고 옆으로 콘텐츠가 나열됨

overflow: hidden; //부모요소에서 튀어나가는 콘텐츠들을 잘라냄

text-overflow: ellipsis; //잘려나간 콘텐츠를 ...으로 이어진다는 표현으로 나타냄

backdrop-filter: blur(10px); // 뒷 영역의 모자이크처리를 한다.

backdrop-filter: grayscale(); // 뒷 영역을 흑백처리함

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개로만 만들어서 배열을 새로만들어낸다.