안녕하세요. 에디입니다.
오늘은 웹 기반 시스템(프론트엔드/백엔드) 개발시 기본적으로 개발자 컴퓨터에 설치하는 개발툴을 비롯한 기초 웹 개발 환경 구축 방법을 안내해 드립니다.
개발자분들이라면 당연히 기본적으로 아는 내용들일수도 있으니 처음 개발을 해보시는 분들을 위해 짧게 주요 기초 내용만 정리해 공유드립니다.

1) 개발언어 별 개발 툴

웹 기반 시스템은 주로 웹 프론트엔드 시스템과 백엔드 시스템으로 구분됩니다.
웹 백엔드 시스템의 경우  어떠한 개발언어와 개발 프레임워크를 사용하느냐에 따라 설치해야하는 개발툴이 달라집니다.

주로 웹기반 백엔드 시스템 개발시 주로 사용되는 개발언어는 크게 컴파일 언어와 인터프리팅 언어 2가지 종류로 나누어집니다.

A) 컴파일언어 : JAVA,Kotlin,C#,Go(Golang)...

B)인터프리팅언어 : JavaScript(Node.js),PHP,Python ....

주로 인터프리팅 언어 개발시에는 마이크로소프트의 VSCode를 주로 사용하고 있으며 컴파일언어의 경우
JAVA,Kotlin는 유료툴인 IntelliJ 와 C#경우 Visual Studio 2022(유/무료) 또는 VSCode(무료),Go는 VSCode등을 주로 사용합니다. 

참고로 컴파일 언어도 VSCode를 통해 개발은 가능하나 통합개발환경(IDE)을 제공해주는 전문 개발툴에 비해 편리 기능이 약해 전문 유료 상용툴을 사용하는 편입니다. 

C# 용 통합개발환경(IDE) 제공 개발툴 - Visual Studio 2022



JAVA,Kotlin 전용 개발 유료툴 - Intellij

웹 프론트엔드 개발은 주로 웹브라우저 환경에서 작동되는(런타임환경제공) HTML,CSS,JavaScript 와 같은 인터프리팅 언어를 주로 다루기 때문에 전문 개발툴 보다는
VSCode와 같은 코드 에디터 수준의 가볍고 개발툴에 추가 설치하는 각종 플러그인 기능을 제공하는 확장성 좋은 가벼운 개발툴을 주로 사용해서 개발합니다. 

따라서 웹 프론트엔드 주요 개발기술인 React(Vite,Next.js),Vue.js, Angualar.js,Svelt 등과 같은 웹 개발 프레임워크(라이브러리) 기반 프론트엔드 어플리케이션 개발시 주로 VSCode를 사용합니다.

2) VSCode 개발툴 설치하기 

웹 프론트엔드와 백엔드 개발시 가장 보편적으로 전세계적으로 가장 많이 사용하는 무료 오픈소스 개발툴인 VSCode(Visual Studio Code) 편집기 툴의 설치 과정을 간략히 안내드립니다.
구글에서 VSCode를 검색하고 하기 VSCode 웹사이트로 이동합니다.

https://code.visualstudio.com/ 

여러분의 개발자 컴퓨터 OS에 맞는 설치파일을 다운로드하여 설치를 진행합니다.
윈도우즈 사용자인경우 : Windows x64 Stable 다운로드/설치
설치가 완료되었으면 아래 주요 웹개발시 사용하는 VSCode 확장툴을 설치합니다. 

3) 개발툴 확장툴(플러그인) 설치 및 사용

VSCode는 특정 개발 언어에 특화된 전문 개발툴이라기 보다는 여러 개발언어의 코드를 작성할수 있는 코드편집기와 같은 개발 도구입니다.
여러분이 원하는 개발언어를 기반으로 VSCode를 이용해 어플리케이션을 개발하고 테스트/실행하기 위해서는 각종 확장툴(플러그인)을 VSCode 개발툴에 추가로 설치해 사용하게 됩니다.

A) 한국어 언어팩 설치하기 

VSCode는 기본적으로 설치하면 영어버전으로 설치되며 설치 이후 자동으로 한국어 언어팩을 설치할것인지 묻는경우가 있는데 그떄 설치를 진행해도되고
아래와 같이 VSCode 좌측 메뉴 Extensions(확장플러그인) 메뉴를 이용해 원하는 언어팩을 설치할수 있습니다.

VSCode 좌측 메뉴 > Extensions > 검색란에 Korean 검색
Korean Language Pack for Visual Studio Code 플러그인 선택 설치하기
설치 후 하단 우측에 설치언어팩 적용여부 버튼(Change Language and Restart )을 클릭한후 VSCode 를 닫고 재실해하면 설치된 언어팩 환경으로 VSCode를 이용할수 있습니다.

B) Live Server 플로그인 설치하기

웹 기반 시스템 개발은 정적이던 동적이던 HTML,CSS를 포함한 웹페이지를 다루는 일이 주업무입니다.
따라서 웹페이지 기본문서 인 .html, .htm파일을  작성하고 html페이지내에 포함된 HTML,CSS,JavaScript코드를 실제 실행하는 환경(런터임환경)인
사용자들의 웹브라우저를 통해 작성한 웹페이지를 실행하여 그 결과를 확인(실행)해보기 위한 환경이 제공이 필수적으로 필요합니다.

이때 개발자들이 작성한 정적 웹페이지 문서( ~.html,~.htm)를 서버 환경을 통해 웹페이지를 웹브라우저환경에 서비스해주기위해 라이브서버 라는 확장툴을  VSCode에 설치하고 사용합니다.

VSCode 좌측 메뉴 Extensions(확장플러그인) > 검색란에 Live Server 검색
설치 진행후  여러분이 작성한 각종 html문서를 열고 오른쪽마우스 클릭을 하면 Live Server를 통해 해당 웹페이지 문서를 바로 서버환경을 통해 웹브라우저에 웹페이지를 전달하고
여러분의 웹브라우저를 통해 웹페이지 소스를 실행할수 있습니다.

이번 시간에는 간단히 웹 개발 언어별 주요 개발툴에 대해 알아보았으며 특히 VSCode의 설치 및 기초 플러그인 설치 방법에 대해 알아보았습니다.

다음 시간에는 JavaScript언어 기반 프론트엔드,백엔드 개발시 필수적으로 설치하는 Node Framework 설치 방법 및
VSCode에서 Node Framework 디버깅 환경 구성 방법에 대해 안내해 드리겠습니다.

감사합니다.