Muscardinus

인터넷이 느릴경우 우리는 불가피하게 expression을 들어내는 경우가 있다. 이럴 경우, 인터넷이 느린 지역에서 서비스에 접근했을때 expression만 보이는 불행한 사태가 벌어질 수 있다. 이를 방지하기 위해서, 우리는 v-cloak라는 directive를 사용할 수 있다. {{ fullName() }} v-cloak라는 directive를 vue template에 넣고, [v-cloak] { display: none; } 해당, 속성에 대해서 display:none을 넣을 경우, vue instance가 실행되기 전까지, 안보였다가 실행이 완료되면 원하는 데이터가 보이게 할 수 있다.

Vue template 안에서 복잡한 계산을 하는것은 장려되지 않는다. 그렇다면, data를 가공해서 보여지기 위해서는 어떻게 해야할 것인가? 이를 위해서 vue에서는 method라는 기능을 제공한다. const vm = Vue.createApp({ data() { return { firstName: 'John', lastName: 'Doe', }; }, methods: { fullName() { return `${this.firstName} ${this.lastName.toUpperCase()}`; }, }, }).mount('#app'); arrow function에 익숙한 사람들은 충동적으로 arrow function을 사용하겠지만, this를 사용하기 위해서는 일반함수 선언방식을 사용해야한다. (..

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

https://www.acmicpc.net/problem/20055 20055번: 컨베이어 벨트 위의 로봇 길이가 N인 컨베이어 벨트가 있고, 길이가 2N인 벨트가 이 컨베이어 벨트를 위아래로 감싸며 돌고 있다. 벨트는 길이 1 간격으로 2N개의 칸으로 나뉘어져 있으며, 각 칸에는 아래 그림과 같이 1부 www.acmicpc.net #include using namespace std; int N, K; int ret = 0; int belt[200]; int zero_cnt = 0; int queue[200 * 1000]; int head, tail; void init() { cin >> N >> K; for (int i = 0; i > belt[i]; } } voi..

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..