Next.js 관리자 웹 애플리케이션 개발 환경 구축 (윈도우즈)

1. Visual Studio Code 설치

1. Visual Studio Code 공식 웹사이트에서 Windows용 설치 파일을 다운로드합니다.
2. 다운로드한 .exe 파일을 실행하고 설치 마법사의 지시를 따릅니다.
3. "PATH에 추가" 옵션을 선택하여 명령 프롬프트에서 code 명령을 사용할 수 있게 합니다.
4. 설치가 완료되면 VS Code를 실행합니다.

2. Node.js 설치

1. Node.js 공식 웹사이트에서 Windows용 LTS 버전을 다운로드합니다.
2. 다운로드한 .msi 파일을 실행하고 설치 마법사의 지시를 따릅니다.
3. 설치가 완료되면 Windows 명령 프롬프트를 열고 다음 명령어로 설치를 확인합니다:

node --version npm --version

3. Next.js 프로젝트 생성

1. Windows 파일 탐색기에서 프로젝트를 생성할 폴더로 이동합니다.
2. 주소 표시줄에 cmd를 입력하고 Enter를 눌러 해당 위치에서 명령 프롬프트를 엽니다.
3. 다음 명령어를 실행하여 새 Next.js 프로젝트를 생성합니다:
   (admin-web-app > 프로젝트 명)
   

   npx create-next-app@latest admin-web-app

   
   
4. 프로젝트 설정 옵션을 선택합니다. TypeScript, ESLint, Tailwind CSS 등을 사용할지 선택할 수 있습니다.

5. VS Code에서 프로젝트 열기

1. VS Code를 실행합니다.
2. "File" > "Open Folder"를 선택하고 생성한 Next.js 프로젝트 폴더를 엽니다.

6. 필요한 VS Code 확장 프로그램 설치

1. VS Code의 왼쪽 사이드바에서 확장 프로그램 아이콘을 클릭합니다.
2. 다음 확장 프로그램을 검색하여 설치합니다:
   • ESLint
   • Prettier - Code formatter : ESLint와 Prettier는 코드 품질과 스타일을 관리하는 데 필수적인 도구입니다. 이들은 일관된 코드 스타일을 유지하고 잠재적인 오류를 방지하는 데 매우 유용합니다.
   • ES7+ React/Redux/React-Native snippets : React 개발을 빠르게 할 수 있도록 도와주는 유용한 도구입니다.
   • Auto Rename Tag : HTML/JSX 작업 시 매우 유용하며, 태그 이름 변경 시 실수를 줄여줍니다.
   • GitLens : 버전 관리와 협업에 매우 유용한 도구로, 코드의 변경 이력을 쉽게 추적할 수 있게 해줍니다.
   • React Developer Tools : React 애플리케이션 디버깅에 특화된 도구로, 컴포넌트 구조와 상태를 쉽게 확인할 수 있게 해줍니다.

7. 프로젝트 구조 확인 및 기본 설정

1. package.json 파일을 열어 프로젝트 의존성과 스크립트를 확인합니다.
2. .eslintrc.json 파일을 열어 ESLint 설정을 확인하고 필요에 따라 수정합니다.
3. next.config.js 파일을 열어 Next.js 설정을 확인합니다.

8. 개발 서버 실행

1. VS Code의 통합 터미널을 엽니다 (Ctrl+` 또는 View > Terminal).
2. 다음 명령어를 실행하여 개발 서버를 시작합니다:
   

   npm run dev

   
   
3. 웹 브라우저에서 http://localhost:3000으로 접속하여 기본 Next.js 페이지를 확인합니다.

9. Windows 특화 팁

• Windows 방화벽 알림이 뜨면 개발 서버에 대한 액세스를 허용합니다.
• 긴 파일 경로 문제가 발생할 경우, 레지스트리 편집기에서 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem의 LongPathsEnabled 값을 1로 설정합니다.
• PowerShell을 사용하려면 관리자 권한으로 실행하고 실행 정책을 변경해야 할 수 있습니다:

Set-ExecutionPolicy RemoteSigned

마무리

이제 Windows 환경에서 Next.js를 사용하여 모바일 애플리케이션의 관리자 웹 애플리케이션을 개발할 준비가 완료되었습니다! 이 환경에서 컴포넌트를 만들고, 페이지를 구성하고, API 라우트를 설정하는 등의 작업을 진행할 수 있습니다.다음 포스트에서는 실제 관리자 웹 애플리케이션의 기본 구조를 설계하고 구현하는 과정을 다루도록 하겠습니다. 궁금한 점이나 추가 정보가 필요하다면 댓글로 남겨주세요!행복한 코딩 되세요! 😊