개발을 위한 환경 세팅(Web Editor, Extensions)

이번 글에서는, 개발을 위한 컴퓨터 환경 세팅과 꿀팁을 적었다.

꿀팁 먼저 적자면,

부트캠프 강의에서 멘토님의 화면공유를 보며 벤치마킹한 것이 하나 있다.

1. Mac북 Dock을 왼쪽으로 정렬하여 보다 효과적으로 화면을 사용하는 법

여러 개의 웹을 하나의 화면에 띄어놓고 왔다갔다 이동하며 코드를 작성하고, 구현하고, 문제를 확인하기에는, (게다가 줌까지 사용하고 있다면,)

맥북의 하단에 놓인 Dock을 왼편에 놓는 것이 더 효율적이다.

이제 본격적인, 컴퓨터 기본 세팅을 해 보자.

2. 웹 에디터를 웹 브라우저에 작동 시키는 방법

여러가지 방법이 있다.

1. drag + enter: 파일을 웹 브라우저에 드래그 하기

2. 웹 브라우저에서 '파일 찾기(find file)'

3. 웹 에디터에서 '파일'에 오른쪽 마우스> '파일 열기' > 'open in default browser'

4. 'live server' 사용하기

3. 추가 확장자 설치

웹 에디터에서 '확장자' Extensions을 설치하면 더욱 편리하고 가독성 있게
코딩을 짤 수 있다.

[3-1. 기본적으로 설치가 필요한 Extensions]

• Open in Browser
• Live Server (html, css 파일 저장 -> 새로고침 없이 자동 브라우저 업데이트)
  

'생활코딩'에서는 Web Editor 설치하는 법을 자세히 배웠지만 확장자 내용은 빠졌었는데, '드림코딩'에서 Extensions(확장자) 설치를 배웠다.

[3-2. 추가 설치하면 좋은 Extensions]

오래 사용하는 Visual Studio Code를 보다 가시성 있게 활용할 수 있도록!

• Prettier (코드 formatting)
• Material Theme (테마 색상)
• Material Theme Icon (파일 아이콘 예쁘게)
• Bracket Pair Colorizer (괄호마다 다르게 색상 지정, 어떤 게 어떤 것을 닫는지 구분)
• Indent-rainbow (들여쓰기 구분 위한 색상)
• Auto Rename Tag (앞의 태그 변경 시, 뒤의 태그 자동 변경)
• CSS Peek (css 금방 찾을 수 있게 도와줌; html에서 ctrl+클릭 --> 정의된 css 파일로 바로 이동)
• HTML CSS Support (html에서 한 글자만 써도, css 자동완성)

[이미 설치된 Markdown Preview ]

깃허브에 올리면 readme 파일이 항상 추가로 들어가야 하는데,
md 파일로 markdown 파일, 작성하면서 어떻게 보이는 지
'Preview md' 창에서 확인 가능 (오른쪽에 두면 작성하면서 어떻게 보이는지 볼 수)

[실제로 현업에서 사용하는 사이트]

'버그 리포트,html, css에서 어떻게 작동하더라?'할 때 쓰면 좋은 사이트

• jsbin.com
• jsfiddle.net
• codesandbox.io

프로젝트, 파일 일일이 만들지 않고 간단하게 html, css 동작 확인 가능

그러면서, 이렇게 확장자를 많이 깔아도 되는지 우려에 검색을 하다보니,

더 유용한 확장자들을 알게 되었다.

• Error lens ('생활코딩'에서 가끔 error로 작동 안 될 때, 직접 오류를 찾으시는데, 이 기능이 있으면 나에게 좋겠다 싶었다)
• Auto Close Tag (개발자는 역시 효율성 추구인 것인가~ 이런 기능도 있다니!)
• Project Manager (연습으로도 여러 프로젝트를 나는 하게 될 거니까! 나는 PM 이기도 하니까!)