연습 - 웹앱의 구조 설정
웹 사이트 프로젝트를 만들고 관리하는 여러 가지 방법이 있습니다. 이러한 차이 중 일부는 현재 보유하고 있는 특정 도구와 조직의 기본 설정에 따라 달라집니다. 웹 사이트를 만들 때 시간이 지남에 따라 프로젝트 구조가 더 복잡해지므로 이를 변경하는 것은 일반적이지 않습니다. 대규모 프로젝트는 많은 사람들이 모든 것을 구성된 상태로 유지할 수 있도록 더 높은 수준의 관심과 주의가 필요한 경우가 많습니다. 조직의 모습을 유지하는 것이 핵심이며, 이를 돕는 일반적인 전략이 있습니다.
이 단원에서는 Visual Studio Code를 사용해 작은 프로젝트 구조를 만듭니다. 프로젝트에는 HTML, CSS, JavaScript라는 세 가지 파일이 있습니다. 또한 브라우저에서 웹 사이트 실행을 간소화하기 위해 Visual Studio Code 확장을 추가합니다.
웹 사이트에 대한 새 폴더 만들기
Visual Studio Code를 엽니다.
Visual Studio Code를 열면 시작 페이지가 열립니다. 시작 목록에서 새 파일을 만들거나 폴더를 열 수 있습니다.
시작 페이지가 표시되지 않으면 메뉴에서 도움말 > 시작을 선택하여 시작 페이지를 표시할 수 있습니다. (또는 바로 가기 키 Shift+Cmd+P(Windows 컴퓨터) 또는 Shift+Cmd+P(macOS)를 사용하여 명령 팔레트를 열거나 Visual Studio Code 메뉴에서 보기 > 명령 팔레트를 선택하여 시작 페이지를 표시할 수 있습니다. 명령 팔레트가 표시되면 검색 필드에 >도움말: 시작 페이지를 입력하여 시작 페이지를 엽니다.)
시작 페이지의 시작 목록에서 폴더 열기를 선택하거나 Visual Studio Code 메뉴에서 파일 > 폴더 열기를 선택합니다.
폴더를 열면 운영 체제에 새 폴더를 만들 수 있는 메뉴 옵션이 있습니다.
웹 사이트에서 새 폴더를 만들려는 위치로 이동하여 새 폴더를 선택합니다.
폴더 이름을 simple-website로 지정한 다음 폴더 선택을 선택합니다.
중요
Visual Studio Code 대화 상자가 나타나면 Trust the authors of all files in the parent folder...(상위 폴더에 있는 모든 파일의 작성자를 신뢰합니다...)를 선택합니다. 이 기능은 프로젝트 폴더에서 자동 코드 실행을 허용할지 제한할지 결정할 수 있는 작업 영역 신뢰 기능입니다. 폴더를 방금 만들었으므로 안전합니다.
파일 만들기
메뉴에서 파일 > 새 파일을 선택하거나 Ctrl+N(Windows) 또는 Command+N(macOS)을 사용하여 새 파일을 만듭니다.
Ctrl+S(Windows) 또는 Command+S(macOS)를 선택하여 파일을 저장합니다.
파일 이름에
index.html을 입력한 다음 저장을 선택합니다.위의 단계를 반복하여
main.css및app.js파일을 더 만듭니다. 완료되면 Visual Studio Code Explorer의 단순 웹 사이트 프로젝트 폴더에 다음 파일이 포함되어야 합니다.- index.html
- main.css
- app.js
모든 HTML, CSS 스타일 및 JavaScript 코드를 단일 파일 내에 포함하여 웹 사이트를 빌드할 수 있습니다. 그러나 이 연습에서는 콘텐츠에 HTML 파일을 사용하고, 스타일 지정에 CSS 파일을 사용하며, 대화형 작업에 JavaScript 파일을 사용합니다.
세 파일을 설정하면 웹 사이트 프로젝트를 구성된 상태로 유지할 수 있습니다. 콘텐츠, 스타일, 논리를 분리하는 것은 ‘점진적 향상’의 한 가지 예입니다. 고객이 JavaScript를 사용 또는 지원하지 않더라도 CSS 및 HTML은 계속 작동합니다. 그러나 고객이 CSS를 지원하지 않는 경우 최소한 HTML 콘텐츠는 표시됩니다.
확장 또는 패키지 설치
Extensions Marketplace를 사용하여 Visual Studio Code의 기능을 확장할 수 있습니다. 이러한 확장은 커뮤니티에서 개발한 리소스이고 동일한 기능 유형의 솔루션이 몇 가지 있는 경우가 많습니다. 편집기에서 개별적으로 확장을 설치하거나 명령줄을 사용하여 여러 개의 확장을 한 번에 설치할 수 있습니다.
웹 개발의 경우 지금 필요한 것은 open in browser입니다. 이 확장을 사용하면 파일 URL을 복사하여 브라우저에 붙여넣는 대신 기본 브라우저에서 웹 사이트를 신속하게 열 수 있습니다.
이 확장을 설치하려면 다음 단계를 사용합니다.
세로 작업 막대(왼쪽 창)에서 확장 아이콘을 선택합니다.
검색 상자에 “open in”를 입력한 다음, TechER에서 게시한 open in browser 확장을 선택합니다.
설치를 선택하면 Visual Studio Code가 확장을 설치합니다.
작업 막대에서 맨 위 아이콘을 클릭하거나 Ctrl+Shift+E(Windows) 또는 Command+Shift+E(macOS)를 사용하여 탐색기로 다시 전환합니다.
잘 했어요! 설치 및 설정에는 시간이 약간 걸리지만 설치와 설정을 한 번만 하면 됩니다. 이제 웹 사이트를 만들 준비가 되었습니다.