과제
이제 이때까지 배운 것을 토대로 내가 취업하기 위해 사용할 웹 페이지를 손수 만들어 보자.
실습 순서
- shadcon-ui를 사용해서 전체적인 테마를 잡아줄 것이다. (라이트, 다크모드 포함)
- header - page - footer 로 구성한다.
- header는 logo, nav, toggle 로 구성된다.
- page는 hero 컴포넌트를 포함하고, hero 안에는 글상자와 사진, 소셜 로고가 있다.
- footer는 소셜 로고와 copyright 글로 이루어져 있다.
- 스타일은 tailwind CSS를 이용해 잡아줄것이다.
실습
#1 세팅
- 라이브러리 다운
$ npx create-next-app@latest .
$ npx shadcn-ui@latest init // 그후 다양한 UI를 components/ui 폴더에 다운
$ npm i lucide-react react-icons next-themes
$ npm run dev
- page.jsx에 기존에 있던 태그들 삭제
- Footer 컴포넌트와 Header, ThemeProvider, ThemeToggler 컴포넌트 생성
- layout.jsx 에 레이아웃으로 할 컴포넌트들을 추가
#2 light 모드, dark 모드
- themeprovider를 사용해서 전체 페이지에 테마를 줄 수 있다. shadcn-ui 에서 global.css에 사용할 수 있는 테마를 제공하는 데 이것을 사용하면 전체적인 테마를 간단하게 적용할 수 있다.
- themetoggler를 사용해서 버튼을 눌렀을 때 라이트 모드와 다크모드를 넘어다닐 수 있다.
- icon은 radix-ui 라이브러리에서 지원해주는 것을 사용할 수 있다.
- tailwind CSS를 사용하는 방법은 간단하다. className="CSS 내용"을 입력하면 자동으로 CSS가 적용된다.
#3 Header 컴포넌트 작성
-
헤더는 로고, Nav바, 테마 토글버튼, 모바일 버전 Nav바로 구성하였다.
-
로고, Nav바, 모바일 버전 Nav바 컴포넌트를 작성한다. Tailwind CSS로 정렬을 시킨다.
-
Nav바 안에 AI Resume 페이지와 Project 페이지 링크를 작성해준다.
#4 Hero 컴포넌트 작성
- 홈페이지는 page.jsx를 기반으로 만들어진다. 하지만 그 안에 바로 태그를 이용해 페이지를 만들지 않고, hero 컴포넌트를 만들어서 page.jsx에 컴포넌트를 넣어주어서 홈페이지를 만든다.
- 인사말, 자기소개, 웹페이지 소개, 사진 등을 넣어주었다.
- tailwind CSS는 창의 크기가 클때는 xl: 로 표현할 수 있어서 스타일을 잡기 편했다.
#5 MobileNav, Footer 컴포넌트 작성
- Sheet ui를 사용하여 창 크기가 작을 때는 메뉴바를 눌러 메뉴가 보이게 한다.
결론
이렇게 홈페이지의 홈 화면을 만들어 보았다. 다음에는 웹페이지의 핵심 기능인 AI assistant를 이용한 이력서 챗봇을 지원하는 ai_resume 페이지를 만들어 볼것이다.
출처
tailwind CSS 문법 검색
https://tailwindcss.com/docs/text-wrap
react-icons 종류 검색
https://react-icons.github.io/react-icons/icons/ri/
Cloud Security Expert