HAN STORY

💡 EventHandler{ console.log(1) }}>버튼 button 에 EventHandler 를 달아주려면 onClick={()=>{ JavaScript Code}} 이런 식으로 해야한다.물론 client component 에서만 JavaScript 가 실행 가능하니까 페이지 상단에 'use client' 를 달아주자.💡 useState'use client'import { useState } from "react";export default function List() { let [count, changeCount] = useState(0) let products = ['Tomatoes', 'Pasta', 'Coconut'] return ( ..

💡 server component / client componentserver component- 단순 page.js, layout,js 등이 해당장점 : 페이지 로드 시 자바스크립트가 별로 필요가 없어서 빠르다.단점 : html 안에 자바스크립트를 넣지 못한다. useState, useEffect, onClick 다 못 쓴다. client component 'use client' - 페이지 맨 위에 'use client' 라는 코드를 넣어서 사용장점 : html 안에 자바스크립트 맘대로 넣어서 기능개발이 가능하다.단점 : 쓸데없는 자바스크립트로 인해 페이지 용량도 커지고 페이지 로딩속도도 약간 느려질 수 있다. 특히, client component 를 로드하려면 hydration 이라는 과정을 거치게..

💡 map 함수를 활용한 반복문export default function List() { let products = ['Tomatoes', 'Pasta', 'Coconut'] return ( 상품 목록 { products.map((product, i) => { return ( {products[i]} $40 ) }) } );} 우선 데이터베이스로부터..

🔧 개발환경 세팅npx create-next-app@14 새 터미널에 위 명령어를 치고 project name 과 설정들을 선택해주면 새로운 폴더와 파일이 생성된다.그 파일을 열어서 진행하면 된다.보통 다른 선택사항들을 No 로 했고, App router 선택만 Yes 로 했다. npm run dev 를 쳐서 나오는 주소로 들어가서 미리보기 가능.🔧 파일 구조page.js메인 파일 layout.jspage.js 를 감싸는 파일 태그, 상단bar 등을 보통 넣는다. globals.css모든 페이지에 적용될 css 파일 page.module.css특정 파일에만 적용시키고 싶은 css 파일작명.module.css 로 파일을 만들어서 사용한다. api 폴더서버 기능을 만드는 곳 node_modules설치한 ..

✔️ Nested routes상세 페이지 안에 더 복잡하게 엮인 route 들을 설정하고자 했다. { path: "/detail/:id(\\d+)", component: Detail, props: (route) => { const blogPost = blogs.find(blog => blog.number === parseInt(route.params.id)); return { blogPost }; }, children: [ { path: "author", component: Author }, ..

✔️ Project setting1. router 설치npm install vue-router@42. router.js 설정router.jsimport { createWebHistory, createRouter } from "vue-router";import List from "./components/List.vue";const routes = [ { path: "/list", component: List.vue, }];const router = createRouter({ history: createWebHistory(), routes,});export default router; 상단 import 로 List Component 가져오고path route 설정 한다음에 component..

✔️ Project setting구글에 nodejs 검색 후 LTS라고 써있는 버전을 다운받아 설치, 빈 폴더 생성 후 VSCode 로 열기, 터미널에npm create vue@latest 입력하면 환경 세팅이 완료된다. 이후 생성된 폴더 프로젝트를 다시 열어준다. npm install npm 을 설치해준 후  npm run dev 를 실행하면  위의 http://localhost:5173/ 으로 미리보기가 가능하다. vue.js basic template✔️ Install Bootstrap1. 홈페이지에서 태그를 가져와 html 파일에 넣기 Bootstrap 홈페이지에서 버전 확인 후  해당 태그들을 html 파일에 넣어준다. 2. npm 으로 설치npm install bootstrap@5 터미널에 입..

✔️ Lifecycle Diagram Vue.js 의 Lifecycle 은 CREATE 단계 → MOUNT 단계 → 컴포넌트 생성   → UPDATE 단계   → UNMOUNT 단계  를 거친다. 이 중간에 hook 을 걸어서 액션을 취할 수도 있다. 예를 들어서 배너 하나가 띄워진 후에 mount 된 2초 후에 배너를 없애고 싶다면  data() { return { onerooms_original: [...data], onerooms: data, user_clicked: 0, modal_status: false, discount_status: true, menus: ['Home', 'Shop', 'About'], warn_count:..

✔️ UI 애니메이션 주기.start { opacity: 0; transition: all 1s;}.end { opacity: 1;} start 와 end css 코드를 작성해놓고  위처럼 Modal Component 를 div 로 감싸 초기 class 상태를 start 로 만들어주고, :class 를 활용해 modal_status 가 true 일 때만 end class 를 붙여주도록 조건부를 달아줄 수 있다. vue 에서 제공하는 태그가 있는데,  이렇게 transition 태그로 감싸주고 name 에 작명을 해준다. 이후 아래에 style 태그에서.fade-enter-from { 시작 시 스타일}.fade-enter-active { 동작}.fade-enter-to {..

✔️ 사용자의 input 을 받는 법 data() { return { month : 1 } 데이터에 input 에 입력받을 변수를 추가하고,   input 에 값이 입력되면 자동으로 그 값이 month 변수에 저장되도록 설정을 할 수 있다.  더 축약해서 위처럼 줄일 수 있다. textarea, select 태그 등에도 사용할 수 있다. ※ data 에서 초기값에 따라서 해당 변수에 어떤 값이 들어올지 정하는 것이기 때문에, 지금 상황에서 input 태그 안에 문자를 넣으면 인식을 안한다. v-model.number 를 사용해서 숫자로 취급할 수 있다.✔️ watch 를 사용해 데이터 감시데이터가 올바른 값이 들어왔는지 검사하기 위해 watch 를 사용한다. ..