오늘도 기록it

https://nuxtjs.org/docs/get-started/installation { "name": "my-app", "scripts": { "dev": "nuxt", "build": "nuxt build", "generate": "nuxt generate", "start": "nuxt start" } } "start": "nuxt start" 제품용 서버를 열어줄 수 있다. https://nuxtjs.org/docs/features/meta-tags-seo 검색 엔진 최적화 내용 export default { head: { title: 'my website title', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=devic..

The Open Graph protocol 웹 페이지의 메타 데이터를 사용해 페이지 콘텐츠 표시를 표준화하기 위한 페이스북에서 만든 인터넷 프로토콜 https://ogp.me/ index.html 파일에 head태그 안에 넣어주면 된다., 그럼 이러한 결과를 얻을 수 있다. 그렇지만 다른 페이지를 붙여 넣어도 똑같은 결과를 출력한다.

"scripts": { "dev": "webpack-dev-server --mode development", "dev:netlify" : "netlify dev", //추가!! "build": "webpack --mode production", "lint": "eslint --fix --ext .js,.vue" }, package.json 파일에 다음 코드 추가해주고 npm i -D netlify-cli 를 설치해준다. npm run dev:netlify 로 브라우저를 오픈할 수 있다.

https://docs.netlify.com/functions/overview/ 이러한 글을 참조하여 netlify.toml을 만들고 hello.js 파일을 만들어준다. 원하는 데이터를 내어줄 수 있다.

Traditional web Application - 데이터를 요청할 때마다 페이지 로드! google.com 페이지 로드하면 최초 페이지 요청을 하고 서버로부터 페이지를 받는다. goolg.com/about 새로운 페이지를 요청하면 다시 새로운 페이지를 로드해 준다. SPA - 페이지 로드 없이 데이터 요청 google.com 페이지 로드 하면 최초 페이지 요청을 하고 서버로부터 페이지를 받는다. google.com/#/about 페이지 로드 없이 다른 부분에 AJAX 요청을 하고 json으로 데이터를 받는다., 새로고침 없이 콘텐츠만 새로고침이 된다. SPA 장점 1. 빠르고 자연스런 전환으로 훌륭한 사용자 경험 제공 2. 더 적게 요청해 빠르게 렌더링 가능 3. 컴포넌트 단위 개발로 생산성 향상 4..

페이지 출력되는 영역 컴포넌트 페이지 이동을 위한 링크 컴포넌트 $route - 페이지 정보를 가지는 객체 [속성] $router - route 페이지 조작을 위한 객체 [push] https://google.com/tistory.com/123?apikey=abcd0987&name=KYS https://google.com - 도메인 tistory.com/123?apikey=abcd0987&name=KYS - fullPath [$route] tistory.com/123 - params [직접적인 경로] ?apikey=abcd0987&name=KYS - query [key, value] 데이터 [key, value] [apikey,abcd0987] [name, KYS] https://next.router.v..

페이지를 이동할 때 마다 스크롤 최상단 이동 scrollBehavior(){ return {top:0} },

https://next.vuex.vuejs.org/guide/state.html#the-mapstate-helper 이러한 코드를 이렇게 작성할 수 있다. vuex에서 mapstate를 가져와서 첫 번째 인수로 about을 가져오고 두 번째 인수로 배열로 상태들을 가져오면 mapstate 함수로 실행된 결과가 반환이 됩니다.

webpack.config.js 파일에서 module: { rules: [ { test: /\.vue$/, use: 'vue-loader' }, { test: /\.s?css$/, use: [ // 순서 중요! 'vue-style-loader', 'style-loader', 'css-loader', 'postcss-loader', { loader:'sass-loader', options:{ additionalData:'@import "~/scss/main";' } } ] }, module 부분의 sass 부분을 고쳐준다. additionalData 부분에 작성하면 sass 생성 시 제일 먼저 자동으로 선언되게 된다. 편리하게 스타일 작성 가능하다.

https://getbootstrap.com/docs/5.1/layout/breakpoints/ 사이즈를 변수로 처리하고 있다. vue 포트가 크기보다 클때 사용 vue 포트가 크기보다 작을 때 사용