Next.js 썸네일형 리스트형 [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.. 더보기 [Next.js] 쿠팡 사이트 디자인 따라해보기 2 저번 시간에 이어서 쿠팡 사이트 디자인을 따라해보겠습니다! 쿠팡 사이트의 툴 바는 좌측에 2개의 링크바, 우측에 3개의 링크바가 정렬 되어 있는데 저번에 구현한 사이트에선 이것을 구현하지 못했습니다. 일단 이것먼저 보완해보겠습니다. 우측 3개의 링크바를 먼저 태그로 감싸줘야할 것 같습니다. 로그인 회원가입 고객센터 Rightbar라는 이름의 태그로 감싸줍니다. 그 다음, .Rightbar{ display:flex; justify-content: space-between; } display를 flex한 컨테이너로 바꿔주고 space-between 속성을 주게 되면 공간을 확보하기 위해 우측으로 밀려날 것 같습니다! 성공적으로 정렬 된 모습입니다. 좌측 2개의 링크바도 손봐줍시다! 즐겨찾기 입점신청▼ 먼저 .. 더보기 [Next.js] 쿠팡 사이트 디자인 따라해보기 1 안녕하세요 제가 Next.js를 좀 다루다 보니 기본적인 css 디자인 능력이 좀 부족하더라고요. 그래서 오늘은 연습으로 쿠팡 사이트와 같은(거의 비슷한) 사이트를 만들어 보겠습니다. 차근차근 하나씩 해보겠습니다. 먼저 위쪽을 보시면 작은 회색의 툴바가 있습니다. 툴바를 먼저 만들어 봅시다! 즐겨찾기 입점신청▼ 로그인 회원가입 고객센터 툴바 클래스 입니다. 링크 태그로 감싸져 있는 메뉴를 5개 만들어 줍니다. 그리고 툴바의 배경이 될 박스를 만들어 줍니다. .toolbar{ background-color: rgba(222, 222, 233, 0.456); padding:7px; display:flex; margin:0 auto; justify-content: space-around; } 회색바의 css .. 더보기 [Next.js] React 기능들을 이용해서 디자인하기 오늘은 저번 시간과 마찬가지로 Next.js와 친해지는 시간을 가져보겠습니다. 그러기 위해서는 React기능들을 복습할 필요가 있겠네요. 이번 공부는 코딩애플님의 강좌를 참고하였습니다. Home상세 1 Next.js 입문 React에서와 똑같이 div 태그안에 className을 통해서 css를 디자인할 수 있습니다. 태그는 html에 a href태그와 같은 기능을 합니다. 는 기본페이지로 이동하게 해주고, 는 기본페이지 뒤에 /list를 입력하면 그 페이지로 이동하게 해줍니다. 태그는 글자의 크기를 키워줍니다. 이때 ~ 역순으로 크기가 증가합니다. Next.js에서 css를 건드리려면 React의 app.js와 똑같은 역할을 하는 globals.css로 이동을 해야합니다. 내용을 다 지우고 .front.. 더보기 [Next.js] 개발환경 셋팅 요새는 React 보다는 Next.js를 쓰는 것이 인기라고 하네요. 저도 트렌드를 따라서 Next.js 공부를 해보려고 합니다. Next.js는 React문법을 기본으로 사용하기 때문에 공부하기 수월할 것 같습니다! 먼저 개발환경 셋팅을 해보겠습니다. Node.js 18버전 이상이 필요하다고 하네요. 왼쪽 버튼을 눌러 다운받아 줍니다. 에디터는 VScode를 그대로 사용하면 될 것 같습니다. 코드를 짤 폴더도 만들어 주겠습니다. 그리고 이것을 VScode에서 열어주면 되겠네요. 폴더를 연 다음 터미널을 열어서 npx create-next-app@latest --experimental-app 명령어를 입력해줍니다. 그러면 이렇게 에러가 발생합니다. 하하,, 구글링을 해 볼 차례입니다. 생각보다 쉽게 해결.. 더보기 이전 1 다음
