인프런 커뮤니티 질문&답변
작성한 질문수
젯브레인 웹스톰(jetbrains webstorm) 사용하시는 분들 참고
작성
·
47
0
프로젝트 생성 시 위와 같이 선택 하시면 됩니다. (Create TypeScript project 체크 박스 꼭 선택 하세요.)
Create 버튼 클릭 하시면 화면 하단 터미널에 설치 옵션을 물어보는 화면이 보이게 됩니다.
그런데, 강의 와는 다르게 터보팩 사용 여부는 물어보지 않아요. Next.js 13 이상 버전에는 터보팩이 이미 내장되어 있습니다. 이 부분은 무시하고 진행 하시면 됩니다. 설치 완료 후,
package.json 파일에 아래와 같이 개발 스크립트 부분을 수정 하세요. --turbo 추가 하시면 됩니다.
"scripts": {
"dev": "next dev --turbo",
"build": "next build",
"start": "next start",
"lint": "eslint"
},
실행은 상단 우측 보시면 아래와 같은게 보이실 겁니다. client-side 와 server-side 가 있는데 server-side 선택 하셔서 실행 하시면 됩니다.
(안보이면 웹스톰 재시작 하세요. 지금 단계 에서 client-side 는 선택 하지 마세요. 이 강의를 계속 들어 보시면 저 두가지가 무슨 의미 인지 알게 됩니다.)
터보팩 적용 하여 올바르게 실행 되면 아래와 같이 보일 겁니다.
답변 2
0
안녕하세요, jyuvenia님!
해당 강의는 VS Code 또는 Cursor 환경을 기준으로 설계되어 있어
JetBrains 환경에서는 제가 미처 확인해보지 못했습니다.
소중한 내용 공유해주셔서 감사합니다. 🙏
0
안녕하세요, 인프런 AI 인턴입니다. jyuvenia님.
젯브레인 웹스톰을 활용하여 Next.js 프로젝트를 생성하고 실행하는 방법에 대해 공유해 주셔서 감사합니다. 이 과정은 일반적으로 Next.js와 TypeScript를 사용하는 개발 환경을 구축하는 데 도움이 됩니다. 특히, 최근 Next.js 13 버전 이상에서는 터보팩이 기본으로 내장되어 있으므로 별도의 설정 없이도 성능 향상을 누릴 수 있습니다.
프로젝트 생성 및 설정 요약
프로젝트 생성 시:
- 프로젝트 위치와 Node 버전을 설정합니다.
create-next-app명령어를 사용합니다.
- “Create TypeScript project” 옵션을 반드시 선택하세요.
- 프로젝트 위치와 Node 버전을 설정합니다.
스크립트 수정:
- 프로젝트 생성 후
package.json의scripts항목에--turbo옵션을 추가하여 개발 서버를 실행합니다.
- 예시:
"scripts": { "dev": "next dev --turbo", "build": "next build", "start": "next start", "lint": "eslint" }
- 프로젝트 생성 후
프로젝트 실행:
- 웹스톰의 우측 상단에서
server-side옵션을 선택하여 실행합니다.
- 실행 후, 로컬 개발 서버가 정상적으로 작동하여
http://localhost:3000또는 네트워크 주소로 접근 가능합니다.
- 웹스톰의 우측 상단에서
이 과정들이 터보팩을 통해 최적화된 환경을 제공하며, 두 가지(ex. client-side와 server-side) 모드의 차이에 대한 이해는 강의 내용을 통해 더 자세히 알게 될 것입니다.
이 정보를 통해 Next.js 프로젝트를 더욱 효과적으로 관리하는 데 도움이 되기를 바랍니다. 추가적인 질문이나 강의 관련 문의가 있으시면 언제든지 남겨주세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.