웹 개발 환경 구축하기

 

웹 개발을 할 때 메모장으로도 가능한 것을 아시나요? 하지만 엄청 불편합니다.

그래서 웹 개발을 할 때 개발 툴을 설치해서 프로그래밍을 합니다. 웹 개발뿐만 아니라 다른 언어도 마찬가지죠.

오늘은 웹 개발 환경 구축에 대해 알아보려고 합니다. 웹 개발 환경을 사용할 때 사용하는 개발 툴은 다양하게 있습니다.

 

저는 이번 글에서 웹 개발에 유용한 개발 툴 3가지를 소개해드리려고 합니다.

 

01. brackets

brackets는 웹 개발에 초점을 맞춰 만들어진 소스 코드 편집기입니다. 쉽게 말하면 웹 개발 전용 개발 환경입니다. 어도비 많이 들어보셨나요? 포토샵이나 일러스트레이터 등 다양한 디자인 툴을 판매, 제공하는 기업이죠. brackets는 바로 어도비에서 개발한 툴입니다. 현재는 어도비와 다른 오픈 소스 개발자들에 의해서 깃허브에서 버전 관리를 하고 있습니다.

 

위에 빨간 박스 안에 있는 내용에서 중요한 내용은 2021년 9월 1일부터 지원을 종료하고 깃허브에서 버전 관리를 하겠다고 합니다.

 

혹시 brackets 개발 툴에 관심이 있다면 밑에 bracket 깃허브 사이트 링크를 걸어둘 테니 확인해보시면 좋을 거 같네요.

https://github.com/adobe/brackets

 

 

 

 

02. Sublime Text

Sublime Text는 원래 파이썬 API 용으로 유명합니다. 그래도 많은 프로그램 언와 마크업 언어를 지원합니다. 여기서 마크업 언어란 다음 글에서 설명하겠지만 웹 개발에 뼈대를 구성한다고 알려져 있는 HTML을 뜻하기도 합니다. 물론 다른 마크업 언어도 있습니다.

 

혹시 Sublime Text에 대해 궁금하신 게 있다면 아래에 있는 홈페이지를 참고해 주세요.

https://www.sublimetext.com/

 

 

 

03. Visual Studio Code

이제 마지막 Visual Studio Code입니다. 줄여서 VSCode라고도 합니다. 비주얼 스튜디 오코 드라고 읽습니다. VScode는 마이크로소프트사에서 개발한 개발 툴입니다. VScode(비주얼 스튜디오 코드) 역시 다양한 프로그램 언어를 지원할 뿐만 아니라 디버깅 지원도 합니다. 당연히 웹 개발도 가능합니다.

 

저도 웹 개발을 할 때 Visual Studio Code를 사용합니다. 저는 C#을 주로 사용하다 보니까 Visual Studio라는 개발 툴을 사용합니다. 그래서 VSCode가 친숙하고 비슷해서 사용합니다. 꼭 한 가지만 고집해서 사용할 게 아니라 다양한 개발 툴을 접해보고 상황에 맞거나 여러분에게 맞는 개발 툴을 사용해도 됩니다. 어떤 개발 툴을 사용하든 웹 개발하는 데는 지장이 없으니까요.

 

이 밖에도 아톰이 있습니다. 아톰도 유명한 개발 툴인데 제가 한 번도 사용해본 적 없어서 따로 설명을 못 드리겠네요. 한 번도 사용해보지 못한 것을 리뷰할 수는 없으니까요. 제가 사용해본 개발 환경 툴로 설명드렸습니다.

 

저는 이 3가지 중에서 Visual Studio Code(비주얼 스튜디오 코드) 설치 방법을 설명드리겠습니다.

 

 

 

Visual Studio Code 설치하기

출처 입력

먼저 구글 또는 네이버 검색창에 visual studio code라고 검색합니다. 네이버도 좋지만 솔직히 개발자라면 구글링을 더 추천드립니다..

검색이 귀찮다면 바로 아래에 있는 링크를 클릭해주세요!

https://code.visualstudio.com/

 

 

검색을 하면 홈페이지가 바로 나옵니다. 홈페이지를 클릭해주세요.

 

 

 

 

 

 

위의 스크린샷과 같이 Downlad for Windows 옆에 있는 화살표를 클릭하면 다양한 운영체제에 맞게 설치가 가능합니다.

 

 

 

 

 

 

그 후에 있는 설치 과정은 설치경로를 설정합니다. 이후에 있는 과정은 너무 간단해서 스크린샷 제외하겠습니다.

 

중요!

추가 작업 선택 시에 모두 다 선택하시는 게 좋습니다.