연습 썸네일형 리스트형 [Next.js] 포트폴리오 사이트 만들기 오늘부터는 포트폴리오 사이트를 만들어 보려고합니다. 본실습은 개발하는 정대리님의 강의 영상을 참고하였습니다. 먼저 폴더를 하나 만들어 주고 npx create-next-app@latest --experimental-app 를 터미널에 입력해줍니다. 초기 설정을 해주고 npm run dev를 통해 실행합니다. export default function Home() { return ( 메인 페이지임 ) } index.js에서 메인 페이지가 잘 동작하는지 확인하기 위해서 다음과 같이 코딩을 짰습니다. 잘 동작하네요! 레이아웃을 만들기 위해서 components라는 폴더를 만들어 주고, Layout.js 파일을 만들어 줍니다. export default function Layout({children}) { re.. 더보기 [Next.js] 쿠팡 사이트 디자인 따라해보기 3 지난 번에 했던 것에 이어서 쿠팡 사이트를 따라해 보겠습니다. 지난 번에는 검색 창까지 만들었었는데요. 오늘은 버튼을 만들어 보겠습니다. 먼저 버튼 태그를 만들고 {alert("하이")}}> 버튼을 누르면 "하이"라는 알림창이 뜨게 만들겠습니다. 그리고 오늘은 처음으로 React Icons라는 사이트에서 아이콘을 import해서 사용해 보겠습니다. React Icons (react-icons.github.io) React Icons 🔍 SearchPlease enter at least 3 characters to search... react-icons.github.io 여기서 import할 아이콘을 찾아서 태그를 만들어 주시면 됩니다. import { BiSearchAlt2 } from "react-ic.. 더보기 이전 1 다음
