내맘대로 frontend 낙서장

https://www.jasonchoi.dev/posts/publish-nextjs-to-gh-pages Next.js Github Pages 가장 쉽게 배포하기 가장 쉽게 배포하는 방법을 알아보자. www.jasonchoi.dev 해당 블로그를 참조하면 배포하는 방법이 매우 쉽다 그러나 13.3이후 버전을 쓴다면 조금 수정을해야한다. 위 블로그를 그대로 따라하되 2가지만 수정하면된다. 1. build명령어를 "next build"로 한다.(뒤에 next export는 지우면된다.) 2. next.config.ts에 다음과 같이 추가한다. const nextConfig = { output: 'export', basePath: '/레포지토리이름', }; 그러면 잘되는 걸 확인할 수 있다. 왜그렇게 되었냐면..

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

https://codingapple.com/course/next-js/ 코딩애플 강의 next13나옴 머리아플 찰나에 무려 얼리어드로 반값까지 (5.4까지라니깐 이걸 보면 살사람들 ㄱㄱ) 바로 질렀음 이전글들과 겹칠 가능성이 많음 그래서 강의를 들으면서 개념은 안쓰고 해당 문법을 어떻게 썻는지를 남길 예정 우리가 Next.js를 해야하는 이유 외주가 싸고 ,GPT가 코드를 더 잘 짠다 GPT에게 지시하면 되기 때문에 점점 풀스택 개발자들을 많이 선호 하게 될것이다. 특히 Next.js는 front,back 둘다 가 CSR(client-side rendering) 대신 SSR(server-side rendering)이 재유행 중 더보기 client-side rendering은 브라우저에서 html을 실시간..

상태 컴포넌트 안에서 자유롭게 변경할 값이 필요할 때 컴포넌트 안에서 만들수 있음 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(..