코딩을 위해서는 소스 코드 편집기 설치가 기본중의 기본입니다.
일단 소스 코드 편집기부터 설치합니다.
가장 기본적으로 사용하는 VScode로 기본 세팅을 설치하겠습니다.
다른 소스코드 편집기도 많고, 많이 사용하는 Brackets등도 있지만, 아래와 같이..
On September 1, 2021, Adobe will end support for Brackets. If you would like to continue using, maintaining, and improving Brackets, you may fork the project on GitHub. Through Adobe’s partnership with Microsoft, we encourage users to migrate to Visual Studio Code, Microsoft’s free code editor built on open source.
==> 2021년 9월 1일부터 어도비에서 브래킷 Brackets에 대한 지원을 종료한다고 발표하면서, VScode로 넘어갈 것을 권장하고 있죠? 기초를 다지시려는 분들은 브래킷 사용 종료, 지원 종료 에 당황하지 마시고 처음부터 VScode를 설치하여 사용하실 것을 권장드립니다.
코딩 개발 환경 기본세팅 0. VScode 설치
접속 후 맥/윈도우 등 운영체제에 알맞는 버전의 실행파일을 다운로드합니다.
Documentation for Visual Studio CodeFind out how to set-up and get the most from Visual Studio Code. Optimized 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
다운로드 후 설치해서 첫 실행한 화면입니다.
코딩 개발 환경 기본세팅 1.
왼쪽 세로 메뉴 다섯개 중 가장 끝 블럭모양을 클릭합니다.
코딩 개발 환경 기본세팅 2.
검색창에 korean 입력 후 첫번째 Korean Language Pack for Visual Studio Code (VS Code용 한국어 팩) 을 설치합니다.
3. 설치한 후 하단 아래의 restart를 클릭하여 재시작합니다.
4. 자동으로 재시작되며 한국어가 패치됩니다. 다시 처음 왼쪽 맨 아래 블록 버튼을 눌러 아래와 같이 검색합니다.
[ open in browser ]
5. 검색결과 상 3번째 뜨는 확장파일을 받아줍니다.
6. 설치 후 ctrl + n 을 누르고, 아무것도 기재하지 않은 검은 화면 상태로 새 파일을 저장합니다.
*.html의 확장자로 저장해야 합니다.
저장한 후 1행에 html:5를 입력하고 엔터를 치면 위와 같은 기본 html5코드가 자동으로 입력됩니다.
7. 해당 상태에서 ctrl + alt + o를 누르면 open in browser 확장 파일이 실행되며 해당 코드를 브라우저에서 바로 실행할 수 있도록 창이 오픈됩니다. 해당 창에서 어느 브라우저에서 열어볼 것인지 방향키 등을 이용하여 선택 후 엔터를 누릅니다.
해당 단축키는 맥에서는 alt + b로 동작하기도 합니다.
이상 아주 기초적인 개발환경 구축이 완료되었습니다.