이 게시물 시리즈의 색인은 NgateSystems.com에 있습니다. 거기에서 매우 유용한 키워드 검색 기능도 찾을 수 있습니다.

최종 검토일: 2024년 11월

1. 소개

안녕하세요, 환영합니다! 여기서 원하는 것을 찾으시길 바랍니다.

이 게시물은 완전 초보자를 위한 게시물입니다. 이 책은 내가 처음 웹사이트와 데이터베이스를 다루기 시작했을 때 나 자신이 알고 싶었던 모든 것을 다루고 있습니다. 아마도 당신은 아직 학교에 다니고 있거나, 나이가 많아 직업 변경을 고려 중이거나, 은퇴하고(아직 마음은 어리지만) 단지 호기심이 있을 수도 있습니다. 중요한 것은 당신이 새로운 아이디어에 열려 있고 기회를 빠르게 인식하는 젊은 마음을 가지고 있다는 것입니다. 흡수해야 할 새로운 아이디어의 양이 거의 압도적이기 때문에 이것이 필요합니다. 현대 정보 시스템 실습은 도구와 기술의 완벽한 정글입니다. 더 나쁜 것은 이 정글이 어지러운 속도로 진화하고 있다는 것입니다. 도대체 어디서부터 시작해야 할까요?

이 시리즈는 이 정글을 통과하는 특정 경로를 제안하여 어려움을 최소화하는 것을 목표로 합니다. 이 경로는 빠르고 유용한 결과를 제공할 뿐만 아니라 나중에 자신만의 길을 갈 수 있도록 기술과 개념을 개발합니다.

놀랍게도(그리고 저는 이것에 계속해서 놀랐습니다) 여기서 설명하는 대부분의 도구와 기술은 무료입니다. 투자해야 할 유일한 것은 개인적인 시간입니다. 불행하게도 이는 사소한 요소가 아니지만, "고통이 없으면 이득도 없습니다!

그러나 더 많은 격려를 드리기 위해 이제 범용 chatBot이라는 엄청난 무료 동맹이 생겼음을 말씀드리고 싶습니다. 이 시리즈에는 지루한 지침으로 가득 찬 터무니없이 긴 게시물이 포함되어 있습니다. 그럼에도 불구하고, 귀하가 원하는 단계를 자세히 설명하려고 시도했다면 훨씬 더 길어졌을 것입니다. 이제 내가 당신을 버렸다고 느낄 때마다 봇을 불러 다시 정상으로 돌아올 수 있다고 확신할 수 있습니다. 2022년 chatGPT 및 기타 봇이 출시되기 전에는 이것이 가능하리라고는 꿈도 꾸지 못했습니다. 이제 모든 것이 바뀌었습니다. 디지털 튜터에 대한 소개는 게시물 4.1을 참조하세요. 현재 무료 등급의 chatGPT40을 사용하는 것이 좋습니다.

다음은 이 시리즈의 전반적인 목적에 대한 설명과 시리즈가 제안하는 경로의 개요입니다.

2. 목표

귀하의 목표는 일부 정보를 컴퓨터로 읽고 이를 의도적인 방식으로 처리한 다음 결과를 화면에 표시하는 소프트웨어를 개발하는 것입니다. 아, 게다가 당신은 세계 어디에서나 누구라도 당신의 작품을 사용할 수 있기를 바랍니다. 이건 정말 쉬울 거에요...

IT 세계에는 이 간단한 작업을 수행하는 방법이 무수히 많습니다. 하지만 내 경험에 따르면 가장 간단한 옵션은 Chrome이나 Safari와 같은 인터넷 브라우저를 애플리케이션의 "런치패드"로 사용하는 것입니다. 이상하게 보일 수도 있습니다. 모두가 휴대폰에서 독립형 "앱"을 사용하고 있지 않나요?

한 가지 이유는 다음과 같습니다. 생각할 수 있는 모든 장치(노트북, 태블릿, 데스크톱 컴퓨터 등)를 통해 작업하는 사용자가 애플리케이션을 사용할 수 있기를 원합니다. 브라우저는 애플리케이션을 차이점으로부터 격리하여 이를 달성할 수 있는 탁월한 방법을 제공합니다. 하드웨어 및 운영 체제에서. 또한 애플리케이션 논리를 지원하기 위한 정교하고 실용적인 환경도 제공합니다. 반면에 앱은 특정 하드웨어 플랫폼에 묶여 있고 복잡성에 빠져 있습니다.

또 다른 이유는 전 세계 어디에서나 사용자가 애플리케이션 정보를 사용할 수 있기를 원하기 때문입니다. 브라우저는 이미 인터넷에 위치하며, 그 목적은 정보 공유를 촉진하는 것입니다. 이것이 바로 Amazon 및 Facebook과 같은 주요 기업이 웹 브라우저를 시스템 플랫폼으로 사용하는 것을 매우 기쁘게 생각하는 이유입니다.

그래서 제가 제안하는 경로는 현재 일반적으로 웹앱의 "주소"를 웹 브라우저에 입력하면 활성화되는 소프트웨어인 "웹앱"으로 연결됩니다. 이 웹앱은 영구 데이터 저장소("데이터베이스")를 유지할 수 있으며 "로그인" 기능을 통해 이 데이터에 대한 보안을 제공합니다. 브라우저 기반 챗봇은 웹앱 기술 활용의 훌륭한 예를 제공합니다.

다음은 최신 웹 앱을 구축하기 위해 숙달해야 하는 도구와 기술에 대한 개요입니다.

1. HTML - 하이퍼텍스트 마크업 언어 - 컴퓨터 화면에서 웹앱의 출력 형식을 지정하는 방법을 브라우저에 알려주는 데 사용되는 "언어"입니다
2. IDE - 대화형 개발 환경 - 코드를 생성하는 데 사용하는 편집 도구입니다. 여기서 제가 사용할 IDE는 Microsoft의 VSCode입니다.
3. 프로그래밍 언어- 애플리케이션의 "개념"을 디지털 구현으로 변환합니다. 이번 강좌에서 사용할 언어는 JavaScript입니다.
4. 브라우저 도구 - 웹앱이 실행되는 동안 이를 검사하고 디버깅할 수 있습니다. 저는 Google의 Chrome 브라우저
에서 도구 세트를 사용할 예정입니다.
5. 개발 프레임워크 - 웹앱 개발의 특정 요구 사항에 JavaScript를 효율적으로 적용할 수 있는 도구 세트로 가장 잘 이해됩니다. 제가 사용할 프레임워크는 SvelteKit입니다.
6. 서버 - 웹앱 코드를 사용자에게 전달하는 원격 호스트입니다. 또한 데이터에 대한 저장소를 제공하고 해당 코드의 선택된 요소를 실행할 수 있습니다. 저는 App Engine 서버에서 Google의 Firebase를 사용할 예정입니다. 다른 플랫폼도 사용할 수 있지만 Google Cloud는 특히 넉넉한 '무료 등급'을 제공합니다.

자, 버클을 채우세요. 시작합니다... 이 게시물을 온라인에서 읽고 계시다면, 이미 온라인 세계에 어느 정도 익숙해졌다고 가정하겠습니다. 이 과정에서는 데스크톱 컴퓨터에 액세스해야 하며, 단순화를 위해 Microsoft Windows 노트북이라고 가정했습니다. 그렇지 않은 경우에는 제 지침을 적절하게 적용하실 수 있을 것이라고 확신합니다.

2.1 HTML(하이퍼텍스트 마크업 언어)

당신은 웹 브라우저에 텍스트를 표시하는 소프트웨어를 개발하고 있습니다. 이 텍스트가 위치, 색상, 크기 등 다양하고 우아한 구성으로 표시되기를 원합니다. 웹 브라우저를 사용하면 콘텐츠 표시 방법을 결정하는 "마크업" 코드로 텍스트 콘텐츠를 둘러싸서 이러한 구성을 지정할 수 있습니다. 이 간단한 배열은 놀랍도록 강력한 결과를 제공합니다.

Microsoft 메모장과 같은 간단한 편집기에서 텍스트 파일에 지침을 입력하여 샘플을 만들 수 있습니다. 다음의 간단한 연습을 시도해 보세요.

즐겨 사용하는 텍스트 편집기(예: Windows 메모장 유틸리티)에 다음 줄을 입력한 다음 HTML 확장자(예: "my-first-app.html")를 사용하여 파일로 저장합니다.

<h1>Hello there</h1>

Windows 탐색기에서 해당 항목을 "두 번 클릭"하여 파일을 "열면" Windows는 기본 브라우저를 열고 "안녕하세요"라는 단어가 표시된 화면을 표시하는 방식으로 응답해야 합니다. 축하합니다. 첫 번째 웹앱을 작성했습니다(비록 본인 외에는 아무도 볼 수 없지만 나중에 수정하겠습니다).

여기서 상황이 예상대로 해결되지 않으면 ChatGPT에 문제 해결에 도움을 요청하는 것이 좋습니다. 위에 설명된 절차는 장치 구성에 따라 다릅니다. 이해가 안 되는 부분이나 특정 기기에서 작동하지 않는 부분을 ChatGPT에 알려주시면 문제를 해결하기 위해 수행해야 할 작업이 무엇인지 정확하게 알려드립니다.

그리고

에 대한 정보는 Google에서 확인하세요. HTML 학습에 관한 수많은 튜토리얼과 조언을 찾을 수 있습니다. 시작하기 가장 좋은 곳은 Mozilla.org의 웹 시작하기입니다. 또 다른 유용한 사이트는 W3Schools HTML Tutorial입니다. W3schools 사이트는 대화형이며 HTML 구문을 실험해 볼 수 있습니다.

중요한 점은 이 문서에서 태그 작업을 수정하는 데 사용할 수 있는 다양한 한정자를 배울 수 있다는 점입니다. 예를 들어

태그는 다음으로 한정될 수 있습니다.>

2.2 IDE(대화형 개발 환경)

웹 앱을 작성하려면 다소 큰 파일을 만들어야 한다는 느낌을 받을 수도 있습니다. Webapp 코드는 장황하며 수천 줄을 포함하는 파일은 이상하지 않습니다.

위의 예에서처럼 할 수도 기본 텍스트 편집기에 다음 줄을 입력할 수 있지만 이는 좋지 않은 생각입니다. 브라우저는 용서할 수 없는 짐승이므로 코드에 철자 오류가 있으면 의도가 완전히 실패하게 됩니다. 이상적으로는 입력하는 코드를 모니터링하고, 구조를 제어하는 ​​데 도움이 되는 방식으로 코드의 형식을 지정하고 강조 표시하고, 심지어 코드를 작성해 주는 전문 텍스트 편집기가 필요합니다.

IDE는 이러한 요구 사항과 그 외에도 다양한 요구 사항을 충족하도록 설계되었습니다.

다양한 IDE를 사용할 수 있지만 제가 추천하는 것은 Microsoft의 VSCode입니다. 설치가 무료이며 매우 널리 사용됩니다. 다시 한 번 가파른 학습 곡선을 나타내지만 Microsoft는 뛰어난 온라인 문서를 제공합니다.

무료 VSCode 패키지 내에는 코드 형식을 지정하고 간단한 자동 완성 메커니즘(예: JavaScript 지침 및 변수 이름)을 제공하는 도구인 다양한 자동화 지원도 제공됩니다. 메커니즘을 확인하면 구문 오류가 발견되고 정의되지 않은 변수 등이 강조 표시됩니다.

IDE는 그 밖에도 다양한 유용한 서비스를 제공합니다. 지금까지 애플리케이션은 단일 .html 파일로 표시되었습니다. 실제로 최신 컴퓨터 시스템에는 수백 개의 파일이 포함될 가능성이 높습니다. 전체 어셈블리를 "프로젝트"라고 합니다. 대규모 프로젝트를 관리하면 많은 어려운 작업이 발생하며 이제 이 모든 작업이 IDE의 책임이 됩니다.

예를 들어 변경하고 싶다고 가정해 보겠습니다.>

다시 한 번, 파일에 대한 최근 변경 사항을 취소하고 편집 기록에서 이전 상태로 재설정하고 싶다고 가정해 보겠습니다. VSCode는 혼란을 해결하는 데 사용할 수 있는 로컬 파일 기록을 유지 관리합니다. 또한 VSCode는 Github라는 버전 관리 시스템과 원활하게 연결되어 프로젝트의 안전한 외부 웹 기반 "체크포인트" 복사본을 생성합니다. 이렇게 하면 버스에 노트북을 두고 내리더라도 소스와 기록이 안전합니다.

마지막으로 VSCode는 장치의 운영 체제에 직접 연결되는 터미널 세션을 사용하여 프로젝트를 실행하기 위한 플랫폼을 제공합니다. VSCode 내에서 많은 시간을 보낼 것 같습니다!

기기에 VSCode를 설치하고 Visual Studio Code 시작하기에서 Microsoft의 튜토리얼을 사용해 볼 수 있는 좋은 기회일 수 있습니다

2.3 자바스크립트

JavaScript는 초보자에게 훌륭한 언어입니다. 배우기 쉽고 다양한 상황에서 잘 작동합니다. 웹앱의 HTML 섹션에 의해 정의된 데이터 구조를 읽고 쓸 수 있는 브라우저는 자연스러운 홈입니다. 쉽게 말하면 화면에 직접 읽고 쓸 수 있습니다. 그러나 브라우저 내에서 그리고 서버에서 원격으로 실행될 때 원격 서버 기반 데이터 저장소를 읽고 쓸 수 있는 기능도 획득했습니다. 간단히 말해서, 그것은 매우 유용해져서 당신이 배워야 할 유일한 언어일 수도 있습니다.

시작해 보겠습니다. JavaScript는 "해석된" 언어입니다. 이는 실행을 위해 코드를 준비하는 데 특별한 전처리가 필요하지 않음을 의미합니다. 이를 "런타임 엔진"으로 직접 실행하고 결과를 즉시 확인할 수 있습니다. 귀하의 겸손한 웹 브라우저는 JavaScript 런타임 엔진의 예입니다. Javascript를 추가하여 이전에 생성한 my-first-app.html 파일이 "지능적으로" 작동하도록 만드는 방법을 살펴보겠습니다.

JavaScript는 HTML 구문의 엄격한 특성으로 인해 화면에 직접 읽고 쓸 수 있는 기능을 갖게 되었습니다. 이를 통해 브라우저는 화면 레이아웃의 "모델", 즉 "도메인 개체 모델"(또는 줄여서 "DOM")이라는 트리 구조를 구성할 수 있습니다. DOM 내에서 트리의 다양한 가지와 잎은 모두 JavaScript로 개별적으로 주소를 지정할 수 있습니다.

예를 들어보겠습니다. 위에서 소개한 my-first-app.html 파일을 가져와서 다음과 같이 편집하세요.

<h1>



<p>이 코드는 코드의 출력을 하루 중 시간에 따라 달라집니다. 점심 시간 이전(구체적으로 특정 날짜의 정오 12시 이전)에 파일을 다시 실행하면 출력이 파란색으로 표시됩니다. 점심 식사 후에는 출력이 빨간색으로 나타납니다. 축하합니다. 첫 번째 "지능형" 웹앱을 코딩했습니다. </p><p>HTML <script> 및 </script> 태그에는 JavaScript 코드의 첫 번째 비트가 포함되어 있습니다. hourOfDay =로 시작하는 줄은 런타임에 대한 "날짜" "객체"를 포함하는 "변수"를 생성합니다. Javascript의 "객체"는 미래에 관심을 갖게 될 복잡한 개념입니다. 그러나 지금 당장 알아야 할 것은 코드가 실행될 때 생성된 "Date" 개체의 인스턴스에 하루 중 시간에 대한 밀리초 단위의 정확한 표현이 포함된다는 것입니다. 또한 개체에는 밀리초 데이터에서 "시간"을 나타내는 0에서 23 사이의 정수를 추출하는 .getHours "메서드"도 포함되어 있습니다. 후속 코드 줄의 if 및 else Javascript 키워드는 참조하는 값에 따라 적절하게 작동하는 논리를 제공합니다.

<p>색상 변경 논리를 테스트하기 위해 점심시간까지 기다려야 하는 것이 불편하다면 분이 짝수일 때 색상이 전환되도록 코드를 변경해 보세요. 오늘의 분을 얻는 "메소드"는 getMinutes()입니다. 숫자 num이 짝수인지 홀수인지 테스트하는 Javascript는 if (num % 2 === 0)입니다. 1분이 지난 후 페이지를 새로 고칠 때 텍스트 색상을 변경하도록 my-first-app.html의 코드를 변경할 수 있는지 확인하세요.</p>

<p>아마도 <h1> 파일 원본 버전의 첫 번째 줄에 있는 태그에 'id=' 절이 포함되어 있습니다. 이는 고유한 문자열(이 경우 "test")로 태그에 "레이블을 지정"했습니다. 영리한 부분은 JavaScript가 'test' <h1> 꼬리표. </p>

<p><em>document.getElementById('test') 명령어를 만지작거리며 평생을 보낼 수도 있다는 사실에 겁을 먹기 전에 이것이 필요하지 않다는 점을 알려드립니다. 최근 소프트웨어 엔지니어링 개발의 전체 과정은 <b>의미 있는</b> 언어 패턴을 통해 화면 레이아웃을 제어할 수 있도록 설계되었습니다. 이는 작업을 크게 단순화합니다. 이 게시물 시리즈에서는 앞서 설명한 대로 SvelteKit이라는 "코드 프레임워크"를 사용하여 시스템을 만듭니다. 이에 대한 예는 Post 2.1에서 볼 수 있습니다.</em></p>

<p>자, JavaScript를 유창하게 익히려면 어떻게 해야 할까요? 여기에 필요한 것은 좋은 책이고 제가 추천하는 책은 Marijn Haverbeke의 "Eloquent JavaScript"입니다. </p>

<p>꼭 필요한 경우 온라인으로 읽어 보세요(최신 버전은 https://JavaScript .net/에서 찾을 수 있음). 하지만 낙서할 수 있는 실제 페이지가 있고 적절하고 잘 쓰여진 책만큼 편리한 것은 없습니다. 중고품(및 초기판)은 현 단계에서는 괜찮으며 아마도 한동안 해야 할 최고의(유일한) 초기 투자가 될 것입니다. Haverbeke는 위에서 소개한 "객체", "메서드", "기능" 및 "스타일" 개념을 제가 달성하고자 하는 어떤 것보다 훨씬 더 잘 설명할 것입니다. </p><p>그래도 여전히 온라인으로 공부하기로 마음먹었다면 Mozilla의 JavaScript 기본 튜토리얼이 훌륭하다고 생각합니다.</p>

<p>작업에 대한 테스트 프로젝트에 대해 생각해 보는 것도 좋은 생각일 것입니다. 이 시리즈의 이후 게시물에서는 몇 가지 인위적인 예를 제공할 것이지만 개인적인 측면에서 재해석할 수 있을 때만 의미가 있을 것입니다. 이제 이 프로젝트에 필요한 데이터 종류에 대해 생각해 보세요. 이것은 어떻게 표현될까요? 사용자는 어떻게 상호작용할까요?</p>

<h4>
  
  
  2.4 브라우저 도구
</h4>

<p>코딩 시도가 처음에 제대로 작동할 가능성은 거의 없습니다.  아마도 화면 레이아웃이 의도한 것과 다를 수도 있고 웹앱의 논리에 문제가 있을 수도 있습니다. 때때로 브라우저는 오류 메시지를 표시하지만 다른 경우에는 가만히 앉아서 부루퉁할 뿐입니다. 이걸 어떻게 정리하나요?</p>

<p>좋은 소식은 모든 주요 브라우저에는 이러한 문제를 조사할 수 있는 '검사 도구'가 내장되어 있다는 것입니다. "검사기"는 브라우저의 화면 레이아웃 정의 해석에 대한 내부 정보를 제공하고 클라이언트 측 JavaScript 지침의 실행을 모니터링할 수 있게 해줍니다. Google Chrome의 경우, 브라우저 화면을 마우스 오른쪽 버튼으로 클릭하고 표시된 팝업에서 "검사"를 선택하면 이 검사 도구에 액세스할 수 있습니다. </p>

<p>나쁜 소식은 처음 접했을 때 검사 도구가 메뉴 표시줄과 크기 조정이 가능한 창으로 구성된 놀라울 만큼 복잡한 모습으로 드러났다는 것입니다. 그러나 일단 익숙해지면 이 도구가 작업하기에 즐겁고 문제를 추적하고 해결하는 데 귀중한 리소스라는 것을 알게 될 것이라는 나의 확신을 받아들이십시오. Google devtools에서 전체 문서를 찾을 수 있습니다.</p>

<p>레이아웃 문제와 관련하여 검사기는 표시 요소의 위치를 ​​결정하는 다양한 "여백", "패딩" 및 "너비" 매개변수가 브라우저에서 어떻게 적용되는지 그래픽으로 보여줍니다. 이와 함께 적절한 조정을 실험할 수 있는 도구도 제공합니다.</p>

<p>로직 문제와 관련하여 검사기를 사용하면 JavaScript 소스 코드에 "중단점"을 설정할 수 있습니다. 이를 사용하여 웹앱을 새로 고치면 첫 번째 중단점에서 실행이 중단되고 해당 지점에서 프로그램 변수의 값을 볼 수 있습니다. 그런 다음 후속 코드를 한 줄씩 실행하거나 다음 중단점으로 건너뛸 수 있는 옵션이 있습니다</p>

<p>프로그램이 "충돌"하면 검사관이 무엇이 잘못되었는지 알려줄 것입니다.</p><p>이전에는 무엇이 논리 문제를 일으켰는지 알아내는 일반적인 방법은 "로깅" 지침을 추가하는 것이었습니다. 이는 프로그램을 통해 "제어 흐름"을 추적하고 검사 지점에 프로그램 변수 값을 표시했을 것입니다. 여러분이 상상할 수 있듯이 이것은 번거로운 절차였습니다. 이제 브라우저에서 웹앱을 "검사"하면 마치 스위스 시계의 뒷면을 열어 검사를 위해 모든 복잡함을 발견한 것과 같습니다. 이제 디버깅이 너무 즐거워서 코드에 오류가 생기기를 고대하고 있습니다!</p>

<h4>
  
  
  2.5 스벨트킷
</h4>

<p>위 섹션 2.3에 소개된 Javascript 예제에서는 보기 흉한 document.getElementById("idName") 메서드를 사용하여 웹앱의 DOM에 접근하고 "idName" 요소의 속성을 수정했습니다. Sveltekit과 같은 프레임워크는 훨씬 더 친숙하고 효율적인 DOM 인터페이스를 제공합니다. 이를 통해 팝업 표시 및 숨기기, 목록 표시 및 브라우저 탭 기록 생성과 같은 일반적인 작업에 대한 "의미 있는" 코드를 작성할 수 있습니다. 예를 들어, "if popUpVisible displayPopup()"(약간 더 엄격한 구문이기는 하지만)이라고 말하는 Svelte 문은 displayPopup 변수가 true로 변경될 때 팝업을 표시합니다.</p>

<p>초기 개발 중에 프레임워크는 IDE 터미널 세션에서 시작하는 "로컬 서버"를 통해 작동합니다. 이는 기본 웹앱 코드를 변경할 때마다 자동으로 업데이트되고 새로 고쳐지는 브라우저 창을 유지하는 마법의 효과를 갖습니다. </p>

<p>프레임워크를 사용하면 웹앱 코드가 실행되는 위치를 지정할 수도 있습니다. 예를 들어, 원격 저장소를 읽고 쓰는 명령문은 상황에 따라 사용자 브라우저에서 로컬로 실행되거나 서버에서 원격으로 실행되는 것이 가장 좋습니다. 현재로서는 관심이 없을 수도 있지만 심각한 코드를 작성하고 나면 중요해질 것입니다. 브라우저에서 실행되는 코드는 디버깅하기 쉽지만 효율성 및 보안 문제와 씨름해야 하는 경우 "서버측"을 실행할 수 있는 기회를 얻게 되어 기쁠 수 있습니다. Sveltekit을 사용하면 특히 우아한 방식으로 이러한 배열을 제공할 수 있습니다.</p>

<p>코드를 구현할 준비가 되면 프레임워크의 마지막 작업은 애플리케이션의 '패키지' 버전을 '빌드'하는 것입니다. 이는 애플리케이션을 배포 준비가 된 "패키지"로 컴파일, 번들 및 최적화하는 일련의 단계를 수행합니다. 이렇게 하면 배포된 웹앱이 최대한 작고 빠르며 효율적이게 됩니다.</p>

<p>현재 가장 인기 있는 프레임워크는 아마도 Meta의 React 시스템일 것입니다. 이는 Facebook의 발전을 지원하기 위해 2010년경에 만들어졌습니다. 이 아이디어는 매우 효과적이어서 Vue, Angular 및 Next.js와 같은 경쟁업체가 빠르게 등장했습니다. Sveltekit은 가장 최근에 나온 것 중 하나이며 특히 사용하기 쉽기 때문에 여기서 사용하고 있습니다. Stack Overflow의 2024년 개발자 설문조사에서 좋은 지지율을 기록하고 싶을 수도 있습니다.'</p><p><em>여담으로, 제가 가끔 Svelteki에 대해 이야기하다가 Svelte라는 다른 말로 전환하는 것처럼 비뚤어진 모습을 보이실 수도 있습니다. Svelte는 Javascript를 "확장"하고 효율적인 웹앱을 보다 쉽게 ​​작성할 수 있도록 svelte.dev 엔지니어가 만든 "언어"입니다. Sveltekit은 Svelte 웹앱이 실행되는 환경을 만드는 프레임워크입니다.</em></p>

<h4>
  
  
  2.6 파이어베이스와 앱 엔진
</h4>

<p>웹앱 프로젝트의 개발 단계를 완료하는 데 필요한 모든 것은 적당한 사양의 데스크톱 컴퓨터에서 제공될 수 있습니다. 그러나 프로젝트를 기대하는 세계에 출시하려는 시점에 도달하면 전문적인 "백엔드" 웹 서버의 서비스가 필요합니다. 이는 다음과 같습니다:</p>

• 브라우저에서 로컬 실행을 위해 프로젝트의 실행 파일을 배포할 수 있는 "엔드포인트"(예: 웹의 URL)를 제공하세요.
• 프로젝트 데이터를 위한 중앙 웹 기반 저장소를 제공합니다. 아마도 이는 구조화된 데이터베이스에 보관될 것입니다.
• 민감한 애플리케이션 요소를 실행할 수 있는 빠르고 안전한 환경을 제공하세요.

이 과정에서는 다음을 사용합니다.

• 간단하고 구조화된 데이터베이스를 사용할 수 있게 해주는 "Firestore" 도구에 액세스할 수 있는 Google의 "Firebase" 애플리케이션 개발 환경
• 웹 앱 코드를 배포하고 SvelteKit 프로젝트의 "서버 측" 요소 실행을 호스팅하는 Google의 "App Engine" 환경입니다.

처음부터 Firestore를 사용하게 되므로 먼저 Firebase 계정을 만들어야 합니다.

과거에는 GoDaddy 또는 HostPapa와 같은 "인터넷 서비스 제공업체"를 통해 클라우드 서비스를 제공받았을 것입니다. 이러한 서비스는 여전히 해야 할 역할이 있고 헬프 데스크를 통해 탁월한 맞춤형 지원을 제공하지만, 클라우드 플랫폼은 현재 목적에 더 나은 종합 패키지를 제공합니다.

3. 이제 계속 읽어보세요

이 과정은 이제 두 가지 주요 단계로 진행됩니다. 첫 번째는 HTML, Javascript, Firebase 및 Firestore의 기본 사항에 익숙해지도록 설계되었습니다. 이 게임을 처음 접하는 분이라면 여기서 배울 것이 많고 혼란스러울 가능성도 많습니다. 이것에 대해 시간을 보낼 것으로 예상됩니다. 시간을 내어 chatBot 튜터를 많이 활용하세요.

이 과정을 마치면 두 번째 단계에서는 Sveltekit 웹앱 디자인의 고급 요소 중 일부를 소개합니다. 이 작업을 성공적으로 완료하면 유용한 웹앱을 개발하는 데 필요한 대부분의 내용을 알게 될 것입니다.

이제 시작하겠습니다. 첫 번째 단계는 로컬 컴퓨터에 SvelteKit을 설치하고 웹앱 개발 기술에 익숙해지는 것입니다. 지침은 게시물 2.1을 참조하세요.

위 내용은 NgSysV.A 젊은이를 위한 AI 시대 시스템 개발 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!