세팅하면 매우 편리한 웹개발 환경 설정하기 - HTML 강좌 (2)

오늘은 HTML과 더 나아가 PHP, Ruby 등등... 까지 개발할 수 있는 개발 환경을 구축해보겠습니다. 사실 HTML이라는 언어는 따로 프로그램을 설치할 필요 없이, 메모장이랑 브라우저만 있어도 코딩이 가능하긴 합니다. 하지만 이 경우 자바스크립트 같은 것과 같이 쓴다면 코딩하기 어려워 개발 환경을 사용하는 것을 추천드립니다. 한번 개발 환경 세팅을 해보도록 하겠습니다.

비주얼 스튜디오 코드 설치

Visual Studio Code - Code Editing. Redefined

마이크로소프트의 비주얼 스튜디오 코드입니다. JS/PHP/파이썬 등등 여러 언어의 대부분의 개발자들은 이 에디터를 제일 많이 쓰며 거의 업계 표준이라고 봐도 무방할 정도입니다. 그만큼 수많은 사람들이 사용하며, 수많은 사람들이 사용하는 만큼 편리함도 보장되어있습니다. 위 사이트에 들어가 설치해줍니다. 프로그램이 비주얼 스튜디오와 달라 에디터만 있기에 상대적으로 매우 가볍습니다.

비주얼 스튜디오 코드 플러그인 추천

현재 제가 쓰고있는 세팅입니다. 비주얼 스튜디오 코드에서는 여러 확장 플러그인을 설치해 코딩할때 더욱 편리하게 할 수 있습니다.

Auto Rename Tag

이 플러그인은 HTML을 사용할때 매우 편리합니다. 생각보다  태그를 만들고 바꿀 일이 매우 많은데, 2개를 모두 바꾸기도 귀찮을 뿐더러 섞여있으면 닫힌 태그를 찾기도 어려워서 이렇게 자동으로 태그를 바꿔주면 시간 절략이 됩니다. 그래서 HTML을 사용한다면 꼭 사용하길 권합니다.

Beauty

이 플러그인은 코드를 예쁘게 정렬해줍니다. 코드를 예쁘게 정렬해주면 그만큼 보기 쉬울 뿐더러, 코드가 난잡해지면 알 수 없는 오류가 생길 수도 있고 나중에 내가 코드를 볼때 어떻게 썼는지 헷갈리는 일이 발생해 코드를 예쁘게 정리하는 것은 필수입니다. 그래서 이 Beauty 플러그인은 여러 언어들의 코드를 자동으로 예쁘게 정렬해줍니다.

HTML Preview

이 플러그인은 실시간으로 HTML 파일을 미리볼 수 있습니다. 그래서 프론트앤드 작업하시는 분들은 이 플러그인을 거의 필수로 끼고 살고 있습니다. 크롬까지 가서 F5를 연타하지 않아도 된다는 점이 매우 큰 강점입니다. 그래서 이 플러그인은 Auto Rename Tag, Beauty 플러그인과 함께 꼭 써야하는 플러그인 3종중 하나입니다.

웹서버 설정하기

]

웹서버를 설치해줄 차례입니다. 웹서버는 수많은 프로그램들이 있지만 제가 추천하는 프로그램은 Bitnami의 WAMP/MAMP입니다. 이 프로그램은 웹서버/DB/PHP를 모두 한번에 세팅해주기에 무척 편리합니다. 그래서 저는 WAMP를 사용하고 있습니다. 맥용은 MAMP, 윈도우용은 WAMP니 자신의 OS 버전에 맞게 설치하시면 됩니다.

Bitnami Application Catalog

이제 개발을 하면 됩니다.

이제 개발 설정은 끝입니다! 이제 다음 강좌부터는 HTML의 사용 방법에 대해 알려드리도록 하겠습니다 :)