이 튜토리얼에서는 웹 양식 생성을 위한 첫 번째 프로젝트를 설정하는 방법을 배웁니다. 비주얼 스튜디오 코드에서 새 프로젝트를 만들고, 필요한 종속성을 설치한 다음, 마지막으로 개발 서버를 시작하는 방법을 단계별로 보여드리겠습니다. 마지막에는 간단한 HTML 양식을 만들고 JavaScript와 상호 작용하는 방법을 이해할 수 있습니다.
주요 학습 내용
- Visual Studio Code 또는 다른 편집기로 작업할 수 있습니다.
- 프로젝트 설치를 위해서는 Node.js와 npm이 필수입니다.
- 바닐라 JavaScript로 개발하는 것은 폼을 만들기 위한 좋은 출발점입니다.
- 콘솔을 통해 HTML 요소와 쉽게 상호 작용할 수 있습니다.
단계별 지침
프로젝트 만들기 및 준비하기
먼저 Visual Studio Code에서 터미널을 엽니다. 이 터미널에서 프로젝트에 필요한 디렉터리를 만듭니다. 원하는 경우 다른 편집기를 사용할 수도 있습니다.
이제 터미널에서 새 프로젝트를 만들 준비가 되었습니다. npm 도구를 사용하여 새 프로젝트를 만듭니다. npm과 함께 작동하므로 컴퓨터에 Node.js가 설치되어 있는지 확인하세요.
이제 npm create 명령으로 새 프로젝트를 만듭니다. "Form App"이라는 이름을 사용하는 것이 좋습니다. 설치하는 동안 추가 패키지를 설치할지 묻는 메시지가 표시될 수 있으며, 일반적으로 설치해야 합니다.
확인 및 프로젝트 디렉토리 변경
지금은 특별한 프레임워크나 입력이 필요하지 않으므로 Vanilla JavaScript를 선택하는 것이 중요합니다. JavaScript를 선택하기만 하면 다음 단계로 넘어갈 준비가 된 것입니다.
프로젝트가 성공적으로 생성된 후에는 새로 만든 프로젝트의 디렉토리로 변경해야 합니다. 이렇게 하려면 "cd [프로젝트 이름]" 명령을 사용하고 "npm install"으로 필요한 모든 패키지를 설치합니다.
개발 서버 시작
모든 패키지가 설치되면 개발 서버를 시작할 수 있습니다. 이 작업은 npm run dev 명령으로 수행합니다. 이제 서버가 시작되고 브라우저에서 애플리케이션을 열 수 있는 URL(예: "http://localhost:5173")을 받게 됩니다.
크롬, 파이어폭스, 사파리 등 원하는 웹 브라우저를 열어 앱을 테스트합니다. 테스트 애플리케이션을 보고 기능을 확인할 수 있어야 합니다.
앱의 첫 단계
이 테스트 앱에는 클릭하여 늘릴 수 있는 카운터가 표시됩니다. 여기서 이 카운터 뒤에 있는 코드가 궁금할 것입니다. 앱에 이미 포함되어 있는 kunstd 설명 요소는 DOM 조작에 대해 자세히 알아보도록 초대합니다.
이제 메인 JavaScript 파일의 소스 코드를 살펴봅시다. 여기에서 원본 코드에 사용된 DOM의 기본 조작을 확인할 수 있습니다. 요소가 어떻게 생성되고 상호 작용을 활성화하기 위해 메서드가 호출되는지 확인할 수 있습니다.
Chrome 개발자 도구 사용
Chrome 개발자 도구는 개발 및 디버깅에 매우 유용한 도구입니다. 도구를 열어 백그라운드에서 어떤 일이 일어나고 있는지 자세히 살펴볼 수 있습니다. 예를 들어 중단점을 설정하여 실행 중인 특정 코드를 중지하고 변수를 검사할 수 있습니다.
HTML 페이지의 버튼이나 기타 요소를 확인하려면 해당 요소를 클릭하기만 하면 콘솔에 코드가 표시됩니다. 이 경험을 통해 HTML 요소의 맥락에서 JavaScript를 효과적으로 사용하는 방법을 배울 수 있습니다.
코드 내 상호 작용
이제 콘솔에서 HTML 요소와 상호 작용할 수 있습니다. 예를 들어 버튼의 ID를 확인하고 이벤트 리스너를 추가하여 요소를 조작할 수 있습니다. 이렇게 하면 앱에서 상호 작용 및 사용자 지정에 대한 많은 가능성이 열립니다.
또한 알림 창을 사용하여 이벤트가 트리거되는지 간단히 확인할 수도 있습니다. JavaScript 실력을 테스트할 수 있는 쉬운 방법입니다. 실제로 알림을 표시하기 위해 필요한 조정을 수행해야 합니다.
다음 프로젝트 미리 보기
이제 프로젝트를 성공적으로 설정했으니 첫 번째 양식을 만들 준비를 하세요. 다음 단원에서는 방금 작성한 코드를 삭제하고 HTML을 작성하여 양식을 만들어 보겠습니다.
이를 통해 JavaScript에서 폼이 작동하는 방식과 프로젝트에서 폼을 효과적으로 사용하는 방법에 대한 기본적인 이해를 얻을 수 있습니다.
요약
이 튜토리얼에서는 Visual Studio Code에서 첫 번째 프로젝트를 만들고 웹 양식 개발을 시작하는 방법을 배웠습니다. 개발 서버 설치 및 실행의 기본 사항과 JavaScript를 통해 HTML 요소와 상호 작용하는 방법을 배웠습니다. 다음 단계에서는 첫 번째 웹 양식을 만들어 보겠습니다.
자주 묻는 질문
비주얼 스튜디오 코드는 어떻게 설치하나요?공식 웹사이트에서 비주얼 스튜디오 코드를 다운로드하여 설치할 수 있습니다.
Node.js란 무엇인가요?Node.js는 서버에서 JavaScript를 실행할 수 있는 JavaScript 런타임 환경입니다.
Chrome 개발자도구는 어떻게 사용하나요?페이지를 마우스 오른쪽 버튼으로 클릭하고 '탐색'을 선택하면 개발자도구가 열립니다. 여기에서 디버깅을 수행하고 DOM을 검사할 수 있습니다.
