강의 수강 조건(Requirements)
- React를 어느정도 알면 좋습니다. 모르면 그냥 시키는대로 따라하면 됩니다.
Features
- MUI를 이용해서 PC, 모바일에 모두 대응하는 반응형으로 만듭니다.
- 햄버거 메뉴와 사이드바, 스크롤시 헤더 감추기, 맨위로 등 각종 팁이 들어있습니다.
- 무료 이미지를 가져와 적용하는 방법을 설명합니다.
수강 대상
- 프론트엔드 초보자
강의 개요
이미 Next.js나 React를 잘 하는 분에게는 필요가 없는 강의입니다.
또, 제대로 배우려는 분에게는 맞지 않습니다.
php, jsp만 할 줄 아는 옛날 개발자 분들에게 유용합니다!
[체험코딩]이란
전체 기술을 학습하는 것이 아니라,
이 개발언어가 나랑 맞는지 체험하며
궁합을 알아보는 과정입니다.
이 강의는,
1~2시간 정도 따라하면 React 기반으로
웹사이트 하나 만들어집니다.
이 강의의 큰 장점은,
Next.js와 Material-UI v5의 초기 구성,
이미지를 사용하는 방법,
컴포넌트를 재사용하는법을
예로 들며 설명합니다.
복/붙만 해도 홈페이지가 완성되는 강의입니다.

이 강의는
세계적으로 가장 많은 Frontend 점유율을 가지고 있는 React기반의 프레임워크인 Next.js로
구글의 UI 가이드라인인 ‘Materail Design’을 적용한 Material-UI v5를 이용하여
한번의 코딩으로 웹과 모바일에서 잘 보이는 반응형으로 웹사이트를 만들고
Next.js팀이 만든 무료 정적 호스팅 사이트인 Vercel에 남들이 볼 수 있게 배포
해 보는 과정입니다.
이 강의는
초보자를 위한 수업이며 React를 잘 모르셔도 따라만 하면 웹페이지가 만들어지는 체험 과정입니다.
Next.js, Material-UI v5, Vercel, React 등을 자세히 설명하지 않습니다.
하지만, Next.js를 어떻게 구성하고, MUI를 어떤 식으로 활용하는지 방법에 대해 소개합니다.
또, 만든 홈페이지를 Vercel을 이용하여 무료로 배포도 해 봅니다.
빠르게 Next.js를 맛 한 번 보겠다는 분들은 수강해주세요~
미리 준비할 것들
- 강의는 macOS를 기본으로 설명합니다.
- nodejs , yarn
- 편집기, vscode 를 설치해주세요.
- 배포를 위해 vercel.com에 회원가입
- 배포를 위해 git 설치 및 github.com에 회원가입
최종 구현 화면
https://tera-nexjs-mui5.vercel.app/

영상으로 보기
본 강의는 아래 강의를 번역 및 재구성했습니다.
https://www.ansonlowzf.com/create-a-website-with-material-ui-v5-nextjs/