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설치한 ..