Supplement 과제 1일차

학원 종강 이후 수료증을 받기 위한 추가과제가 주어졌다.

Final, 개인포트폴리오와 비슷한 웹 페이지를 만드는 것이 그 과제였는데,

방식은 Final과 비슷하여 npx create-next-app 부터 시작하게 된다. 

본인은 create-next-app 이후 필요한 기본적인 것들만 미리 설치하고(ex typescript 등) 나머지 것들은 진행하면서 설치 하였다.

먼저 오늘은 기본설치와 ui기초작업을 진행 할 것이다.

그럼 시작 해 보자.

 

먼저 npx create-next-app을 통해 프로젝트를 생성 해 준다.

 

 

이후 react,next 최신버전을 사용하지않고 17버전과 12버전으로 고정하기 위해 npm 을 통해 react17, next12버전을 설치 해 준다.

 

 

yarn 또한 설치해 준 뒤 앞서 얘기한 두 가지만 설치해줘도 yarn dev를 통해 위와 같은 페이지를 띄울 수 있다.

 

이후 피그마를 통해 UI작업을 시작한다.

 

 

먼저, 기본적인 폴더구조를 생성한 뒤 사용할 폰트를 폰트패밀리 여러개로 구분해 주었다.

 

이후 브랜드 상품등록 페이지에서 쓰일 리액트퀼을 설치 해 주었다.

 

UI작업에 집중하느라 스크린샷 캡쳐를 못했는데 아무래도 이후 부터는 캡쳐없이 진행 될 것 같다.