이 게시물 시리즈의 색인은 NgateSystems.com에 있습니다. 거기에서 매우 유용한 키워드 검색 기능도 찾을 수 있습니다.
최종 검토일: 2024년 11월
이 게시물은 웹앱 개발자로서 삶의 현실을 처음으로 맛보실 수 있도록 작성되었습니다. 간단하게 작동하는 웹앱으로 마무리되지만 이를 실행할 수 있는 지점에 도달하기 위해 협상해야 하는 까다로운 "설치" 작업부터 시작해야 합니다.
귀찮은 일이더라도 계속 지켜주세요. 이러한 문제를 해결하고 나면 Microsoft의 VSCode 편집기를 사용하여 작은 HTML 조각을 작성할 수 있습니다. 마지막으로 VSCode 터미널 세션을 사용하여 Sveltekit 로컬 서버를 통해 브라우저에서 이를 실행합니다.
이거 좋은 것 같나요? 그럼 계속 읽어보세요.
이 섹션은 특히 사용자에게 친숙하지 않은 일부 절차를 사용하기 때문에 완전 초보자에게는 까다로울 수 있습니다. 하지만 시간이 오래 걸리지 않으며 앞으로 반복적으로 사용할 몇 가지 기본 기술을 익히게 됩니다. 당신이 할 일은 다음과 같습니다:
첫 번째 단계는 Windows 파일 탐색기 도구를 사용하여 새 프로젝트를 만드는 것입니다. 이에 대한 이름을 선택해야 합니다. 소문자와 하이픈을 사용하고 이름을 짧게 유지하는 것이 좋습니다. svelte-dev와 같은 것이 좋은 생각일 수 있습니다. 또한 Dropbox 또는 OneDrive 버전 저장소에서 폴더를 찾아서는 안 됩니다. 웹앱 프로젝트는 상당히 커지는 경향이 있으며 범용 버전 관리 시스템을 압도하기 쉽습니다. 어떤 경우든 VSCode와 Git은 필요한 모든 버전 관리를 제공합니다.
Visual Studio Code 시작하기의 지침에 따라 장치에 소프트웨어를 설치합니다. 데스크탑 아이콘을 사용하여 실행하고 VSCode 화면 상단의 메뉴 표시줄에 있는 "파일" 항목을 확인하세요. 이것을 클릭하고 "작업 공간에 폴더 추가"를 선택한 다음 프로젝트 폴더 위치로 이동하여 선택/추가하십시오.
이 시점에서 VSCode 화면은 메뉴 모음 아래에 도구 모음, "작업 공간" 콘텐츠 세부 정보를 표시하는 "탐색기" 패널, 작업 공간 파일 편집을 기다리는 큰 빈 영역 등 세 가지 정보 열을 표시합니다.
프로젝트가 하나뿐인데 왜 VSCode가 "작업 공간" 개념으로 부담을 주는지 궁금할 것입니다. 시간이 지남에 따라 수많은 프로젝트가 축적되고 그 사이에 코드를 공유하고 싶어지기 때문입니다. "작업 공간"을 사용하면 프로젝트 그룹을 작업할 수 있습니다. 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 "작업 공간에서 폴더 제거"를 선택하여 작업 공간에서 프로젝트를 제거할 수 있습니다. VSCode를 닫았다가 다시 시작하면 이전 작업 공간 콘텐츠 설정이 기억되어 복원됩니다.
VSCode를 많이 사용하게 되므로 VSCode를 데스크톱 도구 모음에 "고정"하는 것을 고려할 수 있습니다. 작업 공간에 프로젝트를 추가하면 r-click "작업 공간에서 폴더 제거" 명령을 사용하여 폴더를 명시적으로 제거할 때까지 VSCode는 재시작 사이에 해당 프로젝트를 유지합니다.
VSCode 메뉴에서 "터미널 -> 새 터미널"을 선택한 다음 나타나는 목록에서 프로젝트 항목을 클릭하여 프로젝트에서 새 터미널 세션을 열 수 있습니다. 메뉴 표시줄에 "터미널" 옵션이 표시되지 않으면 "..." 넘침 영역에서 찾을 수 있습니다.
"터미널"은 VSCode 화면 오른쪽 편집 영역 하단에 하위 창으로 나타납니다. 상단 및 왼쪽 테두리를 클릭하고 드래그하여 높이와 너비의 크기를 조정할 수 있습니다. Ctrl' 단축키를 다시 사용하여 켜거나 끌 수도 있습니다. 현재는 프로젝트 폴더의 전체 주소 앞에 "터미널 세션" 명령을 입력하기를 기다리고 있습니다.
지금까지의 IT 경험이 전적으로 Windows(Microsoft) 및 iOS(Mac) 화면에서 "클릭 앤 포인트"를 통해 이루어졌다면 이 게시물에서는 "터미널" 세션 사용에 크게 의존하게 될 수 있습니다. 반갑지 않은 충격입니다.
여기서 "터미널"이라는 단어는 오늘날 우리가 사용하는 "그래픽 사용자 인터페이스"가 등장하기 훨씬 전인 컴퓨팅 초기로 거슬러 올라갑니다. 그런 다음 개발자는 텔레타이프 또는 "VDU" 시각적 표시 장치와 같은 "터미널" 장치를 사용하여 버튼을 클릭하는 대신 "명령"을 입력하여 운영 체제 지침을 발행했습니다. 이러한 "명령 셸" 인터페이스는 설정이 쉽고 유연성이 높기 때문에 시스템 프로그래머에게 여전히 큰 이점을 제공합니다. 따라서 터미널 세션은 개발 프로세스에서 계속해서 널리 사용됩니다. 당연히 "포인트 앤 클릭" 인터페이스를 접해 본 적이 있다면 이를 후진 단계로 보게 될 것입니다. 그러나 당신은 그것이 잘 작동한다는 것을 빨리 알게 될 것이고, 어떤 경우에도 당신의 점점 늘어나는 개발 기술 범위에 또 다른 유용한 구성 요소를 추가할 것입니다.
터미널 명령에 관한 책을 쓸 수도 있지만 지금은 몇 가지 기본 사실만 알면 됩니다. 첫째, 터미널 명령을 편집하기 위해 마우스를 사용할 수 없다는 것을 알게 될 것입니다. 명령 도중에 오류를 발견하면 "백스페이스" 키를 사용하여 후속 내용을 제거하고 다시 입력해야 합니다. 그러나 이러한 불편함은 VSCode에서 사용되는 기본 Powershell 터미널 세션이 사용하는 명령의 기록을 유지하고 원하는 명령이 나타날 때까지 위쪽 화살표 키를 반복적으로 눌러 이전 명령을 참조할 수 있다는 사실로 상쇄됩니다. 아래쪽 화살표 키를 누르면 프로세스가 반전됩니다.
이미 약간 피곤함을 느끼실 수도 있지만, 참으세요. SvelteKit 사용을 시작할 수 있는 지점에 거의 다 왔습니다.
"문제"는 SvelteKit이 인터넷을 통해 "패키지"로 배포된다는 것입니다. SvelteKit 패키지를 설치하려면 "패키지 관리자"가 필요합니다. 패키지란 무엇이고 패키지 관리자란 무엇인가요?
"패키지"는 버전 번호가 주의 깊게 찍혀 있고 다른 패키지에 대한 종속성에 대한 세부 정보가 함께 포함된 코드 파일의 깔끔하게 번들 모음입니다. 최신 소프트웨어 개발 방식에서는 패키지 계층 구조를 사용하여 유용한 코드 구성 요소를 공유합니다.
"패키지 관리자"는 코드 콘텐츠의 압축을 풀고 프로젝트 폴더에 복사하여 패키지를 프로젝트에 "설치"할 수 있는 도구입니다. 패키지 관리자는 설치되었을 수 있는 다른 패키지와의 호환성을 확인합니다.
여기서 사용할 패키지 관리자는 npm(Node Package Manager)입니다. 패키지 관리는 까다롭기 때문에 전문적인 상황에 맞게 대체 관리자를 사용할 수 있습니다. 그러나 npm 패키지 관리자가 표준 선택이며 여기에서는 권장됩니다. 추가 구성 요소를 포함해야 할 필요성을 느끼면 프로젝트 개발 중에 npm을 반복적으로 사용하게 됩니다.
조금 더 나아가 npm 패키지 관리자와 해당 런타임 환경이 설치되면 이를 사용하여 프로젝트에 "my-package" 패키지를 설치할 수 있습니다. VSCode 터미널 세션에서 npm create my-package와 같은 명령을 실행하면 됩니다. 그러면 "my-package" 라이브러리 파일이 프로젝트의 node-modules 폴더에 다운로드됩니다.
하지만 문제가 있습니다. npm에는 "Node.js 런타임 환경"이 필요합니다. 따라서 이것도 설치해야 합니다.
좋은 소식은 적어도 Windows 사용자의 경우 표준 msi(Microsoft Installation) 파일을 다운로드하여 열면 Node.js가 설치된다는 것입니다. 더 좋은 점은 이렇게 시작된 설치 절차를 통해 npm도 설치할 수 있다는 것입니다.
그러나 절차를 실행하는 것은 초보자에게 상당히 어려운 작업입니다. 기본 다운로드 배열은 https://nodejs.org/en의 Run JavaScript Everywhere에 문서화되어 있지만 이는 운영 지침에 있어서 매우 가볍습니다. Windows에 Node.js 및 NPM을 설치하는 방법에서 자세한 지침을 확인하는 것이 도움이 될 수 있습니다. 이것으로 시간을 가지십시오. 문제가 발생하면 Node.js를 제거하고 다시 시작하기만 하면 됩니다. 제가 드릴 수 있는 최선의 조언은 절차에서 제공하는 표준 기본 설정을 사용하라는 것입니다. 재정의는 전문가에게만 적용됩니다.
드디어 진전을 이룰 수 있는 위치에 이르렀습니다! 이 단계를 완료하면 브라우저에서 실행되는 간단한 데모 SvelteKit 페이지를 받게 됩니다.
npx sv create
*여담으로, npx는 npm에 내장된 "패키지 실행기" 도구입니다. npm과 함께 자동으로 설치됩니다
2024년 11월부터 Svelte 5로 프로젝트를 구성하는 절차를 안내하는 SvelteKit 대화상자가 시작됩니다.
여담이지만, 이 절차에 문제가 생겨 다시 시작하고 싶다면 프로젝트 폴더의 전체 내용을 삭제하고 다시 시도하면 됩니다. 또한 npm 설치는 프로젝트에 빌드 중인 파일의 비호환성을 확인할 때 걱정스러운 경고 메시지 목록을 표시하는 경우가 많습니다. 초보자에게는 이러한 내용이 관련될 가능성이 거의 없으므로 그냥 무시하는 것이 좋습니다.
Svelte의 첫 번째 질문은 "프로젝트를 어디에서 만들어야 할까요?"입니다. 프로젝트 폴더에 터미널 세션이 이미 열려 있으므로 여기에서 Return 키를 누르기만 하면 됩니다.
이제 Svelte는 어떤 스타일의 프로젝트를 만들어야 하는지 알고 싶어합니다. 여기서는 "최소"를 선택해 주셨으면 합니다. 터미널 세션에서 이 작업을 수행하는 절차는 웹 페이지에서처럼 마우스를 사용하여 확인란을 전환할 수 없기 때문에 약간 어색합니다. 아래쪽 화살표 키를 사용하여 "최소" 라인에 위치를 잡은 다음 Return 키를 눌러 여기에 선호 사항을 표시합니다
이제 Svelte는 TypeScript 검사 기능을 사용하고 싶은지 알고 싶어합니다. 이 고급 Javascript 확장은 복잡한 프로덕션급 웹앱에서 작업할 때 매우 중요합니다(Javascript에서 변수 유형 사용을 관리하고 일관성을 보장합니다). 하지만 여기서는 이것이 필요하지 않으며 학습 곡선이 이미 기하급수적으로 늘어나고 있으므로 아래쪽 화살표를 두 번 누른 다음 Return 키를 눌러 "아니요"를 선택하는 것이 좋습니다.
그런 다음 Svelte는 '추가 옵션'을 포함하고 싶은지 궁금해합니다. 제시된 목록 상단에 표시된 ESLint 구문 검사 도구가 도움이 될 수 있습니다. 이는 때때로 특별히 관심이 없는 문제에 대해 경고하는 "시끄러운" 귀찮은 일이 될 수 있습니다. 하지만 균형을 고려하여 여기에서 스페이스바와 Return 키를 눌러 수락하는 것이 좋습니다.
마지막으로 Svelte는 어떤 패키지 관리자를 사용할 것인지 묻습니다. npm 선택
제시될 수 있는 다른 옵션은 무시해도 됩니다.
Svelte는 이제 프로젝트를 구축할 준비가 모두 완료되었습니다. 요청이 있을 경우 터미널 세션에 다음 명령을 입력하여 진행하세요.
npx sv create
지금 화면에 보이는 흥미로운 디스플레이는 npm이 패키지 파일을 프로젝트에 다운로드하는 모습을 처음 본 것일 수도 있습니다. 작업 공간 창의 svelte-dev 폴더가 갑자기 하위 폴더 콘텐츠의 인상적인 표시로 꽃피웠다는 사실을 알아두면 도움이 될 것입니다. 이것은 "최소" SvelteKit 프로젝트를 나타내는 코드입니다.
항상 패키지 소프트웨어가 프로젝트에 포함되는 것은 아닙니다. 다른 프로젝트와 공유하는 데 유용할 수 있는 도구를 설치하는 경우 해당 도구를 "전역적으로" 설치하도록 요청할 수 있습니다. npm 명령에 "-g" "플래그 필드"를 추가하면 됩니다. 터미널 명령에서 널리 사용되는 플래그 필드를 볼 수 있습니다. 하지만 지금은 설치 프로그램 소프트웨어를 사용에 대한 지침으로 남겨두십시오. chatGPT에 언제든지 이에 대한 튜토리얼을 요청하세요.
이제 Svelte 설치 프로그램에서 npm run dev -- --open을 실행하라는 메시지를 표시합니다. 한번 시도해 보세요:
npm install
이렇게 하면 SvelteKit 로컬 서버가 시작되고 그 안에서 프로젝트가 실행됩니다. 로컬 서버는 브라우저의 포트 5173에 "localhost" 페이지를 생성하는 작업을 수행합니다. 이 문장이 이해가 되지 않더라도 npm 명령의 "-- --open" 비트가 자동으로 브라우저에 제어권을 넘겨주고 데모를 제공하기 때문에 이제 그 의미가 무엇인지 볼 수 있습니다. 화면은 아래 그림과 같아야 합니다.
이것은 Post 1.1에서 본 것과 똑같은 종류의 HTML로 코딩된 웹앱입니다. 차이점은 해당 콘텐츠가 SVelteKit 프레임워크에 의해 모니터링된다는 것입니다. 코드는 현재 새 VSCode svelte-dev 프로젝트에 있습니다. 브라우저 화면에 "SvelteKit에 오신 것을 환영합니다" 배너를 표시하는 비트를 찾아서 변경하고 무슨 일이 일어나는지 살펴보겠습니다.
VSCode로 돌아가서 프로젝트가 "작업 공간"에 표시되면 해당 폴더/파일 계층 구조를 사용하여 Windows 탐색기에서와 마찬가지로 콘텐츠를 탐색할 수 있습니다. 당신은 프로젝트가 상당히 인상적인 코드 모음을 획득했다는 것을 알게 될 것입니다! 예를 들어, 이제 작은 파일로 가득 찬 node_modules 폴더가 있습니다. 여기에는 npm 설치 작업 중에 다운로드한 모든 파일이 있는 곳입니다. 이제 src/routes 폴더에서 찾을 수 있는 page.svelte 파일을 찾아 클릭하세요. (src 폴더 내 이름과 위치의 중요성은 향후 게시물에서 명확해질 것입니다. 지금은 "page.svelte"라는 이름이 다소 중요하다고만 말씀드리겠습니다.) 이제 화면 RHS의 VSCode 편집 창에 src/routes/page.svelte의 내용이 표시되는 것을 볼 수 있습니다.
npm run dev로 시작한 SvelteKit 서버가 프로젝트 폴더를 모니터링하고 있기 때문에 파일을 변경할 때마다 서버는 변경 사항을 브라우저의 활성 애플리케이션에 자동으로 전송합니다.
이렇게 하면 개발이 정말 재미있어질 거예요!
이 게시물에서 살아남으셨다면 자신에게 금별을 선물하세요. 개발 모드에서 SvelteKit 웹 앱을 실행하는 데 성공했으며, 마찬가지로 중요한 것은 향후 모든 SvelteKit 프로젝트를 순조롭게 시작할 수 있는 VSCode, npm 및 Node.js "스캐폴딩"을 만들었습니다.
이 시리즈의 다음 게시물에서는 Javascript와 Svelte "언어"를 사용하여 웹앱에 지능을 추가하는 방법을 보여줍니다.
이 문제로 혼란에 빠지는 것은 어렵지 않습니다. 가장 숙련된 개발자는 때때로 HTML 태그의 이름을 잘못 입력하여 무시무시한 오류 메시지로 화면을 가득 채울 것입니다. 차이점은 그들이 이전에 모든 것을 보았고 당황하지 말아야 한다는 것을 알고 있다는 것입니다! 초보자로서 이런 것을 보면 아마도 컴퓨터가 완전히 망가져서 이제 새 컴퓨터를 사야 한다고 생각할 것입니다. 진정하다. 이렇게 정렬하시면 됩니다.
오류는 다양한 방법으로 표시됩니다. VSCode에서 열린 .js(javascript) 파일의 구문 오류는 편집 창에 표시됩니다. 아래 예에서는 닫는 > 기호를 삭제하여 "최소" 프로젝트의 헤더 메시지에 대한 HTML 코드를 의도적으로 손상시켰습니다. 초기
참고:
이것은 왜 냉정함을 유지해야 하는지를 보여주는 완벽한 예입니다. 이 모든 혼란 뒤에는 아주 사소한 오류가 숨어 있습니다
우선 이 모든 것이 합산되지 않는다는 것을 알게 될 것입니다. 시스템은 결론 오류의 원인으로 태그를 지정하세요. 진짜 문제는 깨진 개구부
제 일반적인 관행은 코드에 문제가 생기면 편집기에서 강조한 문제를 해결하는 것부터 시작하는 것입니다. 그러나 VSCode는 완벽하게 작동하지만 브라우저에 오류가 표시되는 경우가 있습니다 있습니다. 이때 터미널 세션에 표시되는 오류 메시지를 살펴봐야 합니다. 이러한 오류는 더욱 심각할 수 있으므로 심호흡을 하고 메시지를 자세히 읽고 메시지가 전달하려는 내용을 깊이 생각해 보도록 조언합니다. 그래도 문제가 해결되지 않으면 오류 메시지를 chatGPT에 붙여넣고 조언을 요청하세요. Stackoverflow를 인용한 Google 검색도 좋은 자료입니다.
여전히 갇혔다면 휴식을 취하고 산책을 하고 신선한 공기를 마시세요. 그것은 큰 변화를 가져올 수 있습니다. 컴퓨팅의 가장 큰 장점은 문제가 발생하더라도 항상 이유가 있다는 것입니다. 더 좋은 점은 그 원인을 찾아 수정하면 고정 상태입니다. 자신이 운이 좋다고 생각하세요. 정반대가 적용되는 경우에는 사람들과 관련된 문제를 해결하려고 할 수 있습니다! 용기를 내세요, 용감한 몬. 코딩 문제를 찾아서 해결해 보세요.
VSCode가 탐색기 패널도 표시하는 경우 VSCode 편집 패널이 약간 제한적으로 느껴질 수 있습니다. 도구 모음 열의 왼쪽 상단에 있는 탐색기 아이콘을 클릭하여 탐색기 패널을 켜고 끌 수 있다는 점을 알고 싶을 수도 있습니다.
마찬가지로, 편집 패널이 터미널 세션에 의해 오버레이되는 경우 "ctrl '" 단축키를 사용하여 빠르게 이 패널을 끌 수 있다는 점을 기억하십시오.
마지막으로 여러 터미널 창을 동시에 활성화할 수 있다는 점을 알아두면 유용할 것입니다. 이 경우 터미널 창의 메뉴 표시줄에는 활성 터미널 목록이 표시되며 목록 항목을 클릭하여 터미널 간에 전환할 수 있습니다. 여기에 있는 "쓰레기통" 아이콘을 사용하면 창을 종료할 수도 있지만 터미널 창을 충분히 크게 만든 경우에만 표시될 수 있습니다. VSCode에서는 공간이 항상 중요합니다.
위 내용은 NgSysV.Sveltekit 설치 및 간단한 전체 HTML 웹앱 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
