알토르 2주차 NEXT.js로 포트폴리오 제작

NEXT.js로 포트폴리오 제작

1. 기본 설정

1-1. node.js 및 next.js 설치

터미널에서 npx-create-app@latest 입력하면
대화형 설치 시작

생성 완료

다운로드 완료 시 해당 디렉터리에 설정 파일 생성 확인 가능하다

VScode로 해당 폴더를 오픈한다

npm run dev 입력 시 오류 발생

Powershell 관리자로 실행 후
Set-ExecutionPolicy RemoteSigned 입력
Y 입력

상기 명령어 입력 후
npm run dev 입력 시 정상 작동 확인

http://localhost:3000 으로 접속

테스트 페이지 확인

테스트 페이지 내용 삭제 후
<> </> 입력 시 빈 화면

title 수정 및 내용 변경

Outfit, Ovo로 변경

소문자 outfit,ovo

코드의 의미

1. 구글 폰트(Outfit, Ovo)를 Next.js 방식으로 불러오기
2. 전역 CSS (Tailwind 포함) 불러오기
3. 사이트 기본 메타데이터(title, description) 설정
4. 모든 페이지에 공통 레이아웃(html, body 구조) 적용
5. 폰트와 Tailwind 스타일을 body에 입혀 전체 사트에 반영

1-2. ES7 설치 및 작성

 

rafce -> ES7 문법 구조