|
'Front-end'에 해당되는 글 2건next.js 13 Super expression must either be null or a function 에러 발생시Front-end/Next.js 2023. 6. 27. 14:30
error TypeError: Super expression must either be null or a function 에러 발생시
아래와 같이 "use client"; 를 코드 첫줄에 넣어주면 에러 사라짐. 에러가 사라지고 화면이 표시된다.
Vue 기본 문법Front-end/Vue.js 2019. 2. 22. 14:09변수 Binding <html> <head> </head> <Body> <div id="app"> <h2>{{product}} is in shock</h2> </div> <script src="https://unpkg.com/vue"></script> <script> const app = new Vue({ el: '#app', data: { product: 'Boots' } }) </script> </Body> </html> for loop <html> <head> </head> <Body> <div id="app"> <ul> <li v-for="product in products"> {{product}} </li> </ul> </div> <script src="https://unpkg.com/vue"></script> <script> const app = new Vue({ el: '#app', data: { products: [ 'Boots', 'Jacket', 'Hiking Socks' ] } }) </script> </Body> </html> 서비스의 JSON 데이터 처리 <html> <head> </head> <Body> <div id="app"> <ul> <li v-for="product in products"> {{product.quantity}} {{product.name}} </li> </ul> </div> <script src="https://unpkg.com/vue"></script> <script> const app = new Vue({ el: '#app', data: { products: [ ] }, created () { fetch('https://api.myjson.com/bins/74l63') .then(response => response.json()) .then(json => { this.products = json.products }) } }) </script> </Body> </html>
IF 문 <html> <head> </head> <Body> <div id="app"> <ul> <li v-for="product in products"> {{product.quantity}} {{product.name}} <span v-if="product.quantity === 0"> - OUT OF STOCK </span> </li> </ul> </div> <script src="https://unpkg.com/vue"></script> <script> const app = new Vue({ el: '#app', data: { products: [ ] }, created () { fetch('https://api.myjson.com/bins/74l63') .then(response => response.json()) .then(json => { this.products = json.products }) } }) </script> </Body> </html> compute (합계 구하기) <html> <head> </head> <Body> <div id="app"> <ul> <li v-for="product in products"> {{product.quantity}} {{product.name}} <span v-if="product.quantity === 0"> - OUT OF STOCK </span> </li> </ul> <h2>Total Inventory: {{totalProducts}}</h2> </div> <script src="https://unpkg.com/vue"></script> <script> const app = new Vue({ el: '#app', data: { products: [ ] }, computed: { totalProducts() { return this.products.reduce((sum, product) => { return sum + product.quantity }, 0) } }, created () { fetch('https://api.myjson.com/bins/74l63') .then(response => response.json()) .then(json => { this.products = json.products }) } }) </script> </Body> </html> Control (버튼 추가) <html> <head> </head> <Body> <div id="app"> <ul> <li v-for="product in products"> {{product.quantity}} {{product.name}} <span v-if="product.quantity === 0"> - OUT OF STOCK </span> <button @click="product.quantity += 1"> Add </button> <button @click="product.quantity -= 1"> Sub </button> </li> </ul> <h2>Total Inventory: {{totalProducts}}</h2> </div> <script src="https://unpkg.com/vue"></script> <script> const app = new Vue({ el: '#app', data: { products: [ ] }, computed: { totalProducts() { return this.products.reduce((sum, product) => { return sum + product.quantity }, 0) } }, created () { fetch('https://api.myjson.com/bins/74l63') .then(response => response.json()) .then(json => { this.products = json.products }) } }) </script> </Body> </html> Control (입력상자 Input) <html> <head> </head> <Body> <div id="app"> <ul> <li v-for="product in products"> <input type="number" v-model.number="product.quantity"> {{product.name}} <span v-if="product.quantity === 0"> - OUT OF STOCK </span> <button @click="product.quantity += 1"> Add </button> <button @click="product.quantity -= 1"> Sub </button> </li> </ul> <h2>Total Inventory: {{totalProducts}}</h2> </div> <script src="https://unpkg.com/vue"></script> <script> const app = new Vue({ el: '#app', data: { products: [ ] }, computed: { totalProducts() { return this.products.reduce((sum, product) => { return sum + product.quantity }, 0) } }, created () { fetch('https://api.myjson.com/bins/74l63') .then(response => response.json()) .then(json => { this.products = json.products }) } }) </script> </Body> </html> |
