안녕하세요! 프로그래밍 세계에 첫 발을 내딛는 여러분을 진심으로 환영합니다. 오늘은 코드를 작성하기 전에 필요한 첫 번째 단계인 코드 에디터의 설치와 설정 방법에 대해 자세히 알아보겠습니다.
1. 코드 에디터란 무엇인가요?
코드 에디터는 프로그래밍 코드를 작성하고 수정할 수 있는 특수한 소프트웨어입니다. 마치 문서를 작성할 때 사용하는 워드 프로세서처럼, 코드 에디터는 프로그래머가 코드를 효율적으로 작성하고 관리할 수 있게 도와줍니다. 특히 HTML과 CSS 같은 웹 프로그래밍 언어를 쉽게 작성할 수 있는 환경을 제공합니다.
2. 왜 Visual Studio Code를 선택하나요?
이번 과정에서 사용할 코드 에디터는 Microsoft의 Visual Studio Code(VS Code)입니다. 많은 개발자들이 웹 개발 분야에서 최고의 코드 에디터로 VS Code를 추천하고 있습니다. 그 이유는 다음과 같습니다:
- 무료로 제공됩니다.
- Windows, macOS, Linux 등 다양한 운영체제에서 사용 가능합니다.
- 풍부한 확장 기능을 통해 에디터를 사용자에 맞게 커스터마이즈할 수 있습니다.
- 강력한 기능과 편리한 사용성을 제공합니다.
저를 포함한 많은 개발자들이 VS Code를 사용하고 있으며, 여러분도 이 에디터를 선택하신다면 좋은 선택이 될 것입니다.
3. Visual Studio Code 다운로드 및 설치 방법
- 웹 브라우저를 열고 Google에서 'VS Code'를 검색하세요.
- 검색 결과의 첫 번째 링크인 code.visualstudio.com을 클릭합니다.
- 웹사이트에서 자신의 운영체제에 맞는 설치 프로그램을 다운로드하세요.
- Windows, macOS, Linux 중 선택 가능합니다.
- 다운로드한 설치 프로그램을 실행하고 안내에 따라 설치를 완료합니다.
- 일반 소프트웨어 설치 과정과 동일합니다.
4. Visual Studio Code 설정하기
설치가 완료되었다면, 이제 VS Code를 실행해 보세요. 처음 실행하면 기본 설정으로 에디터가 열릴 것입니다. 앞으로의 학습을 쉽게 따라가기 위해 몇 가지 설정을 변경해 보겠습니다.
4.1. 확장 프로그램 설치하기
확장 프로그램(Extensions)은 VS Code의 기능을 확장하고 개선할 수 있는 추가 도구입니다. 이를 통해 에디터를 더욱 강력하고 편리하게 사용할 수 있습니다.
4.1.1. Prettier 설치하기
Prettier는 코드 포맷터로, 코드를 일관된 스타일로 자동 정렬해 줍니다.
- VS Code 왼쪽 사이드바에서 확장 프로그램 아이콘(네모 네 개가 겹쳐진 모양)을 클릭합니다.
- 상단 검색창에 'Prettier'를 입력합니다.
- 검색 결과에서 'Prettier - Code formatter'를 선택하고 '설치' 버튼을 클릭합니다.
- 설치가 완료되면 '활성화' 버튼이 나타날 수 있습니다. 클릭하여 활성화하세요.
- 변경 사항을 적용하기 위해 VS Code를 재시작합니다.
4.2. 설정 변경하기
Prettier를 효과적으로 사용하기 위해 몇 가지 설정을 변경하겠습니다.
4.2.1. 기본 포맷터 설정하기
- VS Code 하단 왼쪽의 설정 아이콘(톱니바퀴 모양)을 클릭하고 '설정'을 선택합니다.
- 오른쪽 상단의 검색창에 'default formatter'를 입력합니다.
- 'Editor: Default Formatter' 옵션을 찾아 클릭하고, 드롭다운 메뉴에서 'Prettier - Code formatter'를 선택합니다.
4.2.2. 저장 시 자동 포맷팅 설정하기
- 설정 창의 검색창에 'format on save'를 입력합니다.
- 'Editor: Format On Save' 옵션을 찾아 체크박스를 선택합니다.
- 이 설정을 하면 파일을 저장할 때마다 Prettier가 자동으로 코드를 포맷팅합니다.
4.2.3. 자동 저장 설정하기
- 검색창에 'auto save'를 입력합니다.
- 'Files: Auto Save' 옵션을 찾아 드롭다운 메뉴에서 'onFocusChange'를 선택합니다.
- 다른 탭이나 창으로 이동할 때 자동으로 파일을 저장해 줍니다.
- 편집 중인 내용을 잃어버릴 걱정을 덜 수 있습니다.
4.2.4. 탭 크기 설정하기
- 검색창에 'tab size'를 입력합니다.
- 'Editor: Tab Size' 옵션을 찾아 값을 2로 설정합니다.
- 코드의 들여쓰기 간격을 설정하는 것으로, 코드의 일관성과 가독성을 높여줍니다.
4.3. 색상 테마 설정하기
코드의 가독성을 높이기 위해 에디터의 색상 테마를 변경할 수 있습니다.
4.3.1. One Monokai 테마 설치하기
- 확장 프로그램 아이콘을 클릭합니다.
- 검색창에 'One Monokai'를 입력합니다.
- 'One Monokai Theme'를 선택하고 '설치' 버튼을 클릭합니다.
- 설치가 완료되면 '설정' 아이콘을 클릭하고 '컬러 테마'를 선택합니다.
- 목록에서 'One Monokai'를 선택하여 테마를 적용합니다.
- 이 테마는 코드의 다양한 요소를 구분하기 쉽게 색상을 적용하여 코드를 읽기 편하게 만들어줍니다.
- 개인 취향에 따라 다른 테마를 선택하거나 기본 테마를 사용하셔도 됩니다.
4.4. 파일 아이콘 테마 설정하기 (선택 사항)
파일 탐색기에서 파일의 종류에 따라 아이콘이 다르게 표시되도록 설정할 수 있습니다.
- 설정 아이콘을 클릭하고 '파일 아이콘 테마'를 선택합니다.
- 'Seti (Visual Studio Code 기본값)'를 선택합니다.
- 에디터의 외관을 통일감 있게 만들어 줍니다.
이 설정은 필수가 아니며, 원하시는 경우 적용하시면 됩니다.
5. 모든 설정 완료!
이제 VS Code의 기본적인 설정이 완료되었습니다. 이러한 설정을 통해 앞으로 코드를 작성하고 학습하는 데 큰 도움이 될 것입니다.
6. 다음 단계: 첫 번째 코드 작성하기
설치와 설정을 모두 마쳤으니, 이제 실제로 코드를 작성해 볼 준비가 되었습니다. 다음 시간에는 첫 번째 코드를 작성하며 프로그래밍의 세계를 직접 경험해 보겠습니다.
마무리하며
이번 시간에는 코드 에디터인 VS Code의 설치부터 확장 프로그램 설정, 테마 적용까지 자세히 알아보았습니다. 처음에는 다소 복잡하게 느껴질 수 있지만, 차근차근 따라 하시다 보면 금방 익숙해지실 거예요.
프로그래밍은 도구의 활용이 매우 중요합니다. 올바른 환경 설정은 효율적인 코딩과 학습에 큰 도움이 됩니다. 앞으로도 함께 재미있게 배워나가길 기대합니다.
궁금한 점이나 어려운 부분이 있다면 언제든지 질문해 주세요. 그럼 다음 시간에 첫 번째 코드를 작성하며 다시 만나 뵙겠습니다. 감사합니다!
