비전공자 HTML ① - 기초 환경 세팅

VSCode와 확장프로그램부터 마인드셋까지

HTML과 CSS, 이후 JavaScript 등을 공부하기 위해 환경 세팅을 해보자.

1. Google Chrome 설치

원래는 Brave나 Arc를 사용하는 편이긴하지만, 혹시 몰라서 그냥 크롬으로 설치했다.

마소의 엣지나 모질라의 파이어폭스까지도 Okay. 근데 익스플로러는 XXX. 

2. VSCode(Visual Studio Code) 설치&세팅 (설치 링크)

코드를 쉽게 작성하고 관리할 수 있도록 해주는 대중적이고 유명한 코드 에디터이다. 

세팅은 예전부터 보고 공부하고 있는 한 개발자 유튜버의 세팅을 따라했다.

설치 후 VSCode의 좌측 하단을 눌러 설정으로 들어가주자. 처음 설치하면 영어로 되어있을텐데 위치는 똑같으니 찾아 들어가면 된다.

Tab Size 변경

VScode 우측의 설정 값들을 스크롤하며 살피다 보면 Tab Size라는 설정이 있다. default가 4로 설정되어있을텐데, 2로 변경해주자.

World Wrap 활성화

또 내리다보면 Word Wrap이라는 설정이 있다. OFF로 되어있을텐데 On으로 변경해주자.

참고로 깃허브라는 플랫폼에 계정을 생성하여 VSCode에 깃허브 계정을 로그인 해두면, 이런 세팅들이 동기화된다. 컴퓨터, 노트북, 회사컴 등 다양한 디바이스에서 사용할 때 유용하다.

Extension 설치

확장프로그램, 혹은 플러그인이라고도 부른다. 구글크롬 확장프로그램 같은 느낌 생각하면 편하다.

Vscode 추천 Extension(확장프로그램)은 아래와 같다.

1) One Dark Pro
VSCode의 테마 색을 눈이 아프지 않고 가독성이 좋은 Black 계열로 적용해준다.

2) Korean Language Pack 

VSCode를 한글 버전으로 사용할 수 있다. 처음 사용하는 사람들에게는 큰 도움이 되겠지만, 프로그래밍 공부를 하다보면 영어로 작성된 글들을 많이 참고하게 되어 오히려 Bottle Neck이 될 수도 있다. 취향것 사용하시면 될듯

3) Material Icon Theme

탐색기 아이콘이 변경된다.

4) Live Server 

매번 새로고침 하지 않아도 개발 중인 웹이 업데이트된다.

5) Indent-Rainbow 

작성한 괄호가 열렸느냐 닫혔느냐에 따른 짝을 지어준다.

6) Auto Rename Tag

여는 태그 수정 시, 닫는 태그도 알아서 수정 해준다.

위 익스텐션들을 검색해서 설치해주자. (대부분 설치하면 알아서 적용까지 되거나, 적용하기 버튼 등을 클릭하면 알아서 설정되니 따로 세팅해야 하나?라는 걱정은 하지 말자.)

Mind Set: 핑프가 되지말자.

개발 부트캠프는 아니지만, 단기간에 스프린트해서 학습을 하고 실습하는 부트캠프들을 해본 경험 상 자기주도적인 학습이 정말 중요하다고 느낀다. 특히나 IT 업계는 더더욱. 내가 어떤 유튜버나 블로그를 보고 공부하다가 모르는 게 있을 때, 그 정보 제공자에게 질문을 남기고 답변을 기다리는 시간 보다, 그 내용을 구글에 검색해보는 게 훨씬 빠르고 효율적이다. 

심지어 요즘에는 ChatGPT까지 있으니, 모르는 게 있으면 물어보면 된다. 읽었는데 이해가 안 되면, 복붙해서 5살 아이가 이해할 수 있게 설명해달라고 하면 된다.