내맘대로 frontend 낙서장

serverComponent와 client Component에서의 route방법 // serverComponent import Link from "next/link" 이건 서버컴포넌트 링크 //client 'use client' import {useRouter} from 'next/navigation' export default function DetailLink(){ let router = useRouter() return ( { router.push('/') }}>버튼 ) } router.forward() : 앞으로가기 router.refresh() : 새로고침 ( 이전과 바뀐부분을 분석해서 바뀐부분만 새로고침) prefetch기능 : 서버, 클라이언트 둘다 사용가능 // client { router..

상태 컴포넌트 안에서 자유롭게 변경할 값이 필요할 때 컴포넌트 안에서 만들수 있음 ex) const [data, setData] = useState(초기값) function counter(){ setData(data + 1); } return 카운터 {counter} 리스트 배열로 반복되는 UI그리기 배열에서 map으로 사용해서 반환 ex) const abc = [“1”,”2”,”3”] {abc.map(data=>{data})} 여기서 왜 for ,foreach등의 반복문은 안되고 map만 사용해야 하냐면 React에서 항목 목록을 렌더링할 때 각 요소에는 이를 식별하는 고유 키가 있어야 함 for 또는 foreach와 같은 루프 구성을 사용할 때 각 요소의 키를 추적하기 어려울 수 있는데 반면 map(..

// 12 import {useRouter } from "next/router"; // 13 import { useRouter } from "next/navigation"; 폴더구조도 src / app ~~으로 바뀜 기존은 pages였음 이에 따라 라우팅 방법도 약간 바뀌었는데 url이 /dashboard/abc면 폴더구조는 app dashboard abc 처럼 됨. 그리고 각각의 폴더에서 쓰이는 기본 파일 (대충 베타공식문서에서 번역해왔다는 말...) page.js: 경로의 고유한 UI를 생성하고 해당 경로를 공개적으로 액세스 가능하게 만듭니다. route.js: 경로에 대한 서버 측 API 엔드포인트를 생성합니다. layout.js: 세그먼트와 해당 하위 요소들에 대한 공유 UI를 생성합니다. 레이아..

Vue랑은 또 다른 배포방법 까먹지 않게 남겨둡니다... 만들고 배포한 Url : https://hyunjunyong.github.io/react-study/ gh-pages 패키지는 사용안함 -> 해보니깐 안되서 1. 일단 repository가 public으로 되면 안됨 사이트 개설해야 되기 때문(유료버전쓰면 모르겠다만은..) 2. package.json에 밑에 처럼 추가 ㄱㄱ { "homepage": "https://hyunjunyong.github.io/react-study", } 이건 내url이니깐 이걸보는사람이 있으면(있을까) 자신의 github page url을 남겨 놓으시길... 3. react-router를 쓰고 있으면 index.js에 다음과 같이 추가 // process.env.PUBL..