개발환경 셋팅
(맥이나 윈도우나 똑같습니다)
1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다.
- nodejs 18버전 이상에서만 잘돌아감
- 설치 경로는 C드라이브 어쩌구 되어있는거 바꾸지말고 그대로 쓰는게 좋습니다.
- 설치 중 chocolatey 어쩌구는 설치하지 맙시다.
2. Visual Studio Code 에디터도 구글에 검색해서 설치합니다.
평소에 쓰던 에디터 쓰셔도 되지만 터미널을 기존에 안다뤄본 분들은 설치합시다.
Next.js 프로젝트 생성은
1. 작업용 폴더를 하나 만들어줍니다
오픈 폴더 해서 열어줌.
이 명령어 입력하고 엔터키 치면 된다.
npx create-next-app@latest
프로젝트 이름 작명하라고 하면 작명하면 됨.
fresh 라고 프로젝트 이름 설정
또 그 다음 안내문 뜸.
- 타입스크립트 쓸 지 말 지 설정
App router 선택하라고 나오면 Y
다 하면 프로젝트 하나가 생성된거 확인.
이거 에디터로 오픈해서 코드 짜면 된다.
다시 오픈폴더로 열어서 fresh 폴더 열어주기.
꼭 폴더 오픈해야함.
코드를 짜는 곳.
= page.js
리액트 문법으로 코드짜게 돼있는데 그 방법은 다음시간에.
미리보기 띄워보는 방법.
터미널 열기
그리고 이거 입력하면 실행된다.
링크 하나 뜰건데 이걸 ctrl+클릭 을 하거나
주소 복붙하면 됨.
2. 작업폴더에 shift + 우클릭해서 여기서 powershell 열기를 누릅니다.
맥북은 손가락 두개 클릭해서 터미널열기 누르면 됩니다.
3. 그럼 터미널이라는게 나오는데
npx create-next-app@latest이거 그대로 입력하고 엔터누르면 프로젝트 생성 끝입니다.
이거저거 선택하라고 하면 남자답게 선택합시다.
App router 선택하라고 나오면 Y로 합시다.
4. 에디터에서 프로젝트 오픈해서 코드짭시다
프로젝트 설치했으면 프로젝트이름의 폴더가 하나 생성되는데 (저는 fresh라는 폴더)
그 폴더를 에디터로 오픈해서 코드짜면 됩니다.
Visual studio code 에디터 켠 다음에 File - Open Folder 누른다음에 아까 생성된 fresh 폴더 선택하면 됩니다.
5. page.js 가 메인페이지임
거기다가 코드짜면 됩니다.
6. 내 사이트를 브라우저로 미리보기 띄우고 싶으면
에디터 상단메뉴에서 Terminal - New Terminal 누릅니다.
그럼 터미널이 뜨는데 거기다가 npm run dev 입력후 엔터치면 localhost:3000 어쩌구 url이 하나 나오는데
브라우저로 거기 접속하면 실시간 미리보기가 뜹니다.
- npm run dev 입력 전에 저처럼 프로젝트명이 터미널에 안뜨면 폴더오픈을 제대로 안한것입니다. 폴더 오픈부터 잘하십쇼
- 브라우저 자동으로 안뜨면 localhost:3000 이라고 크롬 브라우저 열고 직접 입력합시다.
프로젝트 파일들 설명
app 폴더 : 님들이 코드짤 폴더
page.js : 메인페이지
layout.js : 메인페이지 감싸는 용도의 페이지
public 폴더 : 이미지나 static 파일 보관용
api 폴더 : 서버기능 만드는 곳
next.config.js : nextjs 설정 파일
node_modules 폴더 : 설치한 라이브러리 보관용 폴더
package.json : 설치한 라이브러리 버전 기록용 파일
다 지워주고
main 만 남겨주기.
메인도 맘에 안들어서 그냥
div 박스로 이름 변경
css 파일들에 있는 내용도 싹 지워버리기
자주 겪는 에러 모음
Q1. 저는 프로젝트 설치가 10분 이상 오래걸려요
스타벅스에서 하지 말고 집에서 합시다.
Q2. "npx command not found 어쩌구" 에러
- 터미널 다시 껐다 켭시다.
- 대부분 nodejs 설치가 제대로 안되어서 그렇습니다. 18버전 이상으로 재설치 해봅시다.
- 윈도우는 작업폴더를 VScode 에디터로 오픈한 뒤에 상단 Terminal 메뉴에서 터미널 열어서 npx 어쩌구 입력해봅시다.
(또는 VSCode에서 Terminal 열면 여러 버튼이 있는데 Command prompt 눌러서 입력해봅시다)
Q3. 맥북인데 프로젝트 생성시 "permission이 없어요 어쩌구" 에러
npx 어쩌구 명령어 왼쪽에 sudo라는 단어 포함해서 sudo npx 어쩌구 입력해보면 됩니다.
비번입력하라고 하면 맥북 비번 입력하면 됩니다.
Q4. 윈도우인데 "허가되지 않은 스크립트 입니다 어쩌구~" 에러
윈도우 하단 검색메뉴에서 Powershell 검색 - 우클릭 - 관리자 권한으로 실행한 뒤
Set-ExecutionPolicy Unrestricted
라고 대소문자 하나라도 틀리지않고 입력하고 엔터칩니다.
그 다음에 뭐 선택하라고 하면 y 누르고 엔터치고 powershell 재시작합시다.
Q5. 윈도우인데 아직도 터미널에서 뭐 하는거 안되면
- 이상한 보안프로그램 끕시다.
- 아니면 Powershell 오픈할 때 관리자권한으로 오픈해서 입력해봅시다.
- 시작 - 검색 - 환경 변수 편집 - 환경 변수 - path부분클릭 후 편집 - 새로만들기 - C:\Windows\System32 라고 추가 후 저장해봅시다.
이외에 다양한 에러가 나올 수 있는데 에러메시지 직접 구글에 검색하는게 빠릅니다.
'> 코딩애플 (부분공개) > Next.js로 웹서비스 만들기' 카테고리의 다른 글
| 페이지 레이아웃 만들기 (React 기초문법) (0) | 2024.07.12 |
|---|---|
| Next.js 많이 쓰는 이유를 알아보자 (0) | 2024.07.11 |
