2025. 3. 12. 12:58ㆍWEB
웹개발 공부를 해보자.
공부를 하기 전에, 웹 개발을 위해서는 코드를 입력하기 위한 에디터가 필요하다.
코드 자체를 입력하는 것은 메모장에 입력하는 것만으로도 가능하지만,
이왕이면 개발에 있어 다양한 기능을 제공해주는 에디터를 설치해 사용하는 것이 좋다.
웹개발에 많이 사용되는 에디터 중에서 가장 많이 사용한다는 비주얼스튜디오코드(줄여서 VSCODE)라는 것을 설치해서 웹 개발 공부를 해보도록 하자.

Visual Studio Code 다운로드
마이크로소프트에서 개발한 에터로 다양한 확장 기능이 강점인 에디터.
아래의 링크로 가서 에디터를 다운로드하고 설치하자.
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
Visual Studio Code 설치
다운로드한 파일을 실행하고 설치가 완료 후에 메뉴가 영어로 표시되어 불편하다면 한글 언어팩을 설치해서 한글로 변경할 수도 있다.
확장 기능을 통해 한글 언어 팩을 설치하자.
(한글이 필요없거나 이미 한글이 출력된다면 건너뛰자)

설치 완료 후에는 vscode의 오른쪽 아래에 한글적용을 위해 재시작한다는 알림창이 활성화되는데 승인하면 재시작되고 메뉴에 한글이 적용되어 나온다.
Visual Studio Code 작업 폴더 설정
이제 본격적으로 웹개발 공부를 시작하기 위해 작업 폴더를 설정해줄 것이다.
아래 사진과 같이 탐색기 버튼을 누르면(단축키 : Ctrl+Shift+E) 탐색기 탭이 열리는데, 탭 안에는 "열린 폴더 없음" 이라는 카테고리가 있고, 그 아래에 "폴더 열기"라는 버튼이 보이는데 이걸 클릭하자.

탐색기 창이 열리면 작업할 폴더를 만들고 해당 폴더를 선택 후 폴더 선택 버튼을 눌러준다.
나는 바탕화면 > Web > test 라는 폴더를 작업 폴더로 설정했다.

이렇게 하면 vscode의 탐색기에는 "열려 있는 편집기"라는 카테고리를 작업 폴더로써 사용할 수 있게 된다.

위 사진의 TEST 라는 폴더명 우측에는 새파일, 새폴더, 탐색기 새로고침, 탐색기에서 폴더 축소라는 4개의 메뉴가 있는데,
새파일을 누르면 파일을 생성하고, 새폴더를 누르면 TEST 폴더 내에 또 다른 폴더를 만들 수 있다.

새파일을 만들 때 폴더별로 정리해서 파일을 관리하는 습관을 들이자.
비주얼 스튜디오 코드 설치에 관한 내용은 여기까지.
끝.