Muscardinus

Vue.createApp({ data() { return { firstName: 'John', }; }, }).mount('#app'); data라는 함수 안에 object를 반환함으로서 vue-template에서 사용할 수 있다. 사용하기 위해서는 {{ firstName }} 위와 같이 {{ }}를 사용한다. Vue에서 자체적으로 {{ }} 안의 expression을 찾아내서 바꾼다. Vue는 Proxy를 사용하여 데이터를 관리한다. 따라서, 추후에 값을 변화하기 위해서는 vm.$data.firstName = "Bob"; 위와 같이 바꿔야하지만, 우리에게 편의를 주기위해서 $data 없이도 바꿀 수 있게 도와준다. 따라서, 만일 firstName을 2초 후에 바꾸고 싶으면 아래와 같이 작성이 가능하다..

https://v3.vuejs.org/guide/installation.html#vite Installation | Vue.js Installation Vue.js is built by design to be incrementally adoptable. This means that it can be integrated into a project multiple ways depending on the requirements. There are four primary ways of adding Vue.js to a project: Import it as a CDN package on v3.vuejs.org 해당 링크에는 여러가지 방법으로 Vue를 실행시킨다. 그 중 가장 간단한 CDN 방법을 사용하겠다. 해..

https://medium.com/react-courses/react-create-react-app-v3-4-1-a55f3e7a8d6d

Next.js를 사용하지 않더라도, 우리는 meta 태그를 통해서 SEO를 최적화한다. Next.js는 이를 Head를 통해서 할 수 있다. 예시 import Head from 'next/head' function IndexPage() { return ( Hello world! ) } export default IndexPage

매번 페이지 요청 때마다, pre-render하고 싶을 때 사용한다. 그리고, component를 render하기 전에 필요한 값들을 component에 props로 전달한다. export async function getServerSideProps(context) { return { props: {}, // will be passed to the page component as props } } context 속성 params: 해당 페이지의 route parameter를 보유하고 있다. 만약 page 이름이 [id].js이면, params는 {id: ...}라고 나타날 것이다. getServerSideProps 반환값 1. props: page 컴포넌트에서 받는 props들을 나타낸다. 2. notF..

Page가 Dynamic Routes이고 getStaticProps가 있는 상태에서, 어떠한 페이지를 pre-render할 지를 알아야한다. 우리는 getStaticProps를 통하여 이를 해결할 수 있다. export async function getStaticPaths() { return { paths: [ { params: { id: '1' } }, { params: { id: '2' } } ], fallback: true, false, or 'blocking' // See the "fallback" section below }; } getStaticPaths 반환값 1. paths: 어떠한 path를 pre-render 할지를 결정한다. 예를 들어, dynamic route가 "pages/post..

When to use getStaticProps The data required to render the page is available at build time ahead of a user’s request. The data comes from a headless CMS. The data can be publicly cached (not user-specific). The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance. export async function getStaticP..

(만약 React로 개발할 경우 CRA(Create React App)으로 설치할 시 eslint는 자동으로 설치가 되어있다.) eslint와 prettier 설치 npm install prettier eslint npm install babel-eslint --save-dev npm install eslint-config-prettier --save-dev npm install eslint-plugin-prettier --save-dev .eslintrc { "env": { "browser": true, "es6": true, "node": true }, "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:prettier/rec..