개발 환경 만들기

사이트 개발 시작 전 프로그램 이야기

devtrek 2024. 9. 3. 15:38

 컴퓨터에는 사이트 개발을 위한 프로그램들이 설치가 되어있지 않아요

그래서 반드시 2가지 내용은 꼭 설치를 해야하는 것이 있죠

 

첫번째

언어 사용을 위한  프로그램

프로그램이 없으면 사용을 할 수 있는 언어가 있으니 꼭 설치를 해야합니다  

 

두번쨰

visual studio 확장 프로그램

확장 프로그램의 경우 필수 설치 사항은 아니지만

몇 가지를 설치를 해두면 조금 더 편하고 빠르게 개발을 할 수 있어서 설치를 하고 있습니다

 

 

 

 

 이번 이야기는 개발을 시작 전 

제가 반드시 설치를 하는 프로그램 

visual studio 확장 프로그램

적어 보려고 합니다

 

저는 front-end 개발을 하고 있어서 모든 내용은

front-end 필수 프로그램 및 저만의 확장 프로그램

관련된 내용인 점을 참고해주시면 좋겠습니다

 

 

 

 

 

 

 

필수 설치 프로그램

 

1. visual studio code

 

 

제가 생각했을때 개발에 있어서 반드시 있어야 하는 1순위 프로그램 입니다

프론트 작업을 하는 개발을 선호하다 보니 html , css , react 등 다양한 언어를 사용하고 결과물도 볼 수 있어서

반드시 설치를 해야하는 1순위라고 저는 생각합니다

 

 공식 홈페이지에서 쉽게 다운로드 가능합니다

링크

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and 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

 

 

 

2. Node.js

 

 

2번째로 반드시 설치해야하는 프로그램이 바로 Node.js 입니다

frontend 개발에서 꼭 사용하는 언어인 react를 구동하기 위해서 반드시 필요한 프로그램 입니다

이걸 설치를 하지 않으면 디버깅을 했을때 에러가 나오게 됩니다

 

공식 플랫폼을 검색해보니

Node.js는 자바스크립트 엔진으로 구동되며 웹 브라우저 바같에

자바스크립트 코드를 실행할 수 있게 해준다고 하네요

 

그래서 프로그램 설치 후 자바스크립트 형식인 react가 구동이 된거 같아요

따라서 제가 생각하는 반드시 설치해야하는 프로그램 2순위는

Node.js 입니다

 

 

공식 홈페이지에서 쉽게 다운로드 가능합니다

 

 링크

https://nodejs.org/en

 

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

 

3. Git Bash

 

 

git bash는 github에 파일들을 저장할때 터미널에 명령어로 쉽게 넣을 수 있어 필수로 설치하고 있습니다

github는 여러 개발자 분들과 함께 작업을 하기 위해서 꼭 필요한 사이트입니다

개발을 한 내용 중 어떤식으로 수정을 했는지 정확하게 알려주기 떄문이라고 저는 생각해요

 

gitbash를 처음 사용하면 다양한 명령어로 인해서

조금 어려움이 느껴질 수 있지만 사용을 할수록 파일 저장하는 시간이 줄어들어서 

매우 편리하다고 느꼈습니다

 

따라서 3번째 필수 프로그램은 git bash 설치입니다

 

공식 홈페이지에 들어가면 쉽게 다운로드를 할 수 있습니다

 

링크

https://git-scm.com/

 

Git

 

git-scm.com

 

 

VS 확장 프로그램

위에서는 필수로 설치를 하는 프로그램들에 대해서 적어보았는데요 

다음은 필수로 설치하는 visual studio code에 확장 프로그램에 대해서 이야기 해보겠습니다

vs코드 프로그램 내에서는 개발을 더 수월하게 하기 위해서 다양한 확장 프로그램들이 있습니다

설치를 하는 법은

 

왼쪽 목록 중 두번쨰 하단 목록을 누르면 설치를 할 수 있습니다

 

이렇게 블록을 클릭하면 원하는 프로그램을 검색해서 설치를 할 수 있도록 되어 있습니다

하지만 처음 vs코드를 설치를 하면 어떤 확장 프로그램이 있는지 잘 모르겠더라구요 

 

그래서

개발 초보인 저에게 있어서 사용하면서 좋았던 확장 프로그램을 이야기 하겠습니다 

 

1. Korean Language Pack for Visual Studio Code

 

 

말 그대로 한국어를 지원을 해주는 확장 프로그램입니다

vs 프로그램은 모든 내용이 영어로 되어있어서 영어를 잘 못하는 저에게는 설정이 매우 힘들었는데요

이 확장 프로그램을 사용하면 vs의 모든 목록 및 내용이 전부 한국말로 변경되어 쉽게 변경 할 수 있습니다

따라서 vs코드를 처음 설치하시는 분들이라면 꼭 추천드리는 프로그램입니다

 

 

 

2. Material Icon Theme

 

두번째 프로그램의 경우 파일의 아이콘을 수정해주는 프로그램입니다

vs코드의 프로그램 역시 파일 아이콘이 이미 설정이 되어 있으나 

저는 이 테마 아이콘을 사용해서 각기 다른 언어를 사용하는 파일 또는 사용 용도에 따른 폴더 모양 변화

이 두가지가 명확하게 차이가 있어서 개발을 할때 헷갈리지 않고 파일 찾기가 좋았습니다

 

 

 

3. Error Lens

 

 

3번째로 반드시 설치하는 확장 프로그램은 Error Lens 입니다

프로그램 개발을 할때 가장 힘든 내용은 바로 에러가 발생되는 구문을 찾는 일이라고 생각이 듭니다

이 확장 프로그램은 디버깅을 하지 않아도 구문이 이상이 있을 경우 문제가 있는 부분을 잡아주는 프로그램입니다

 

물론 구문에는 문제가 없으나 디버깅을 했을때 나타나는 에러는 반드시 해결을 해야합니다

그러나 작업 중 프로그램 구문에 이상이 있을 경우 바로 알림을 주기 때문에

디버깅 후 나타나는 에러들이 조금 더 수월하게 해결이 되는 장점이 있었습니다

 

따라서 3번쨰로 제가 꼭 설치하는 확장 프로그램은 Error Lens 입니다

 

 

 

 

 

 

 

 

이렇게 제가 컴퓨터를 변경을 했을때 반드시 설치를 하는 프로그램과 확장 프로그램에 대해서 이야기 해보았습니다

해당 포스팅 내용은 전부 저의 주관적인 생각으로 필요하고 사용하기 좋은 프로그램의 내용을 입력해 보았습니다

 

혹시나 더 좋은 확장 프로그램이나 꼭 필요한 프로그램들이 있다면 

또는 제가 설명을 올린 내용에 문제가 있고 설명과 다른 내용이 있으시면

댓글로 남겨주시면 수정하고 저도 추천한 내용을 사용하여 게시글을 추가 해보겠습니다

지금까지 긴 글을 봐주셔서 감사합니다