pnpm 설치
넥스트JS 프레임워크 만든 회사에서 시작하는 템플릿을 만들어 놓음.
이제부터 라이브러리 설치는 npm 대신 pnpm을 통해서 한다.
이제 npm보다 더 좋을 걸 써보자.
근데 이것도 우선 npm으로 설치해야 한다.
npm i -g
뒤에 붙은 g는 글로벌 설치를 말한다. 터미널 어느 위치에서든 사용할 수 있게 전역으로 설치한다.
pnpm 설치 명령어
npm i -g pnpm설치한 후 터미널에 pnpm을 입력하면 명령어 설명 리스트가 떠야하는데, 오류가 뜰 때가 있다.
보안오류 PSSecurityException
pnpm : 이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없습니다. 자세한 내용은 aboutExecution
Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
위치 줄:1 문자:1
+pnpm
+
+CategoryInfo : 보안 오류: (:) PSSecurityException
+FullyQualifiedErrorId : UnauthorizedAccess
-
windows PowerShell 프로그램을 관리자 권한으로 실행합니다.
-
Get-ExecutionPolicy 명령어를 작성하면 본인의 권한? 상태가 보여집니다.
-
권한이 RemoteSigned 가 아니라면 Set-ExecutionPolicy RemoteSigned 를 입력
-
Get-ExecutionPolicy 명령어로 다시 한번 확인 하면 RemoteSigned로 변경 확인.
출처 : https://dog-developers.tistory.com/183
Next.js 템플릿 만들기
pnpm create next-app --ts공홈 docs : https://nextjs.org/docs/api-reference/create-next-app
이렇게 알아서 필요한 폴더와 파일들이 생성이 된다.
pnpm dev로 실행명령
pnpm dev
ctrl을 누른 상태로 url을 클릭하면 브라우저가 켜지고 해당 url로 이동한다.
주소창과 파일명이 동일하게 이어져 있으므로
이렇게 http://localhost:3000 뒤에 파일명을 붙여 이용할 수 있다.
각 폴더/파일 역할을 살펴보자
public 폴더에는 이미지 파일을 주로 넣는다.
.eslintrc.json
javascript 사용할 때 효율성, 보안 문제 등을 검사 해주는 규칙이다.
이건 제일 빡센 규칙
next-env.d.ts 넥스트의 설정이니까 건드리지 말자.
next.config.js 얘도 문법을 철저하게 잡아주는 애
tsconfig.json은 typescript의 문법을 어떻게 쓸지 정해주는 부분이다. strict를 false로 바꿔주자. 프론트엔드에서 엄격하게 쓸 필요는 없다.
pnpm build
package.json을 보니 script에 뭔가 많이 생겼다.
브라우저가 읽을 수 있도록 변환 해주는 걸 빌드라고 한다.
브라우저가 읽으라고 만든게 빌드 파일이다.
pnpm build빌드된 파일은 .next에 넣어준다.
"start" 명령어는 바로 쓸 수 없다. build를 시킨 다음에 빌드 파일을 시작시켜주는 명령어.
pnpm lint문법을 잘 지켰는지 검사하는 명령어
폴더 정리
src 폴더를 만들어 pages 폴더와 src 폴더를 넣어주자
src 폴더 밑에 components 폴더 생성
