M1 맥북 - VS code 및 도커 설치

 

1. VS code 

1 ) 설치 URL

비주얼스튜디오코드는 마이크로소프트사에서 만든 텍스트 에디터로 ts기반으로 개발된 오픈소스 프로젝트입니다. 웹개발 및 다양한 언어 개발에 유용하게 활용됩니다.

Visual Studio Code - Code Editing. Redefined

2 ) 설치 단계

사이트에 접속해 macOS에 맞는 다운로드 버튼을 클릭하면 됩니다.

다운로드된 vscode를 열기만 하면 별도의 과정없이 프로그램이 정상적으로 실행됩니다.

cmd + j : 하단 터미널창 열기

cmd + b : 사이드창 닫기

 

 

3 ) Extension 설치

개발 환경에 유용하게 사용되는 확장 프로그램을 설치해봅시다.

 

1. Live Server  ( ⭐️⭐️⭐️⭐️ )

브라우저 별도의 새로고침없이 html 및 css의 변경사항이 생기면 자동으로 브라우저에 반영해주는 프로그램입니다.

2. Material Icon Theme  ( ⭐️⭐️⭐️⭐️ )

단축키를 통해 리액트 함수 컴포넌트 생성 등 다양한 코드를 빠르게 작성할 수 있도록 돕습니다. ( Ex. rfce, _rfc )

 

3. Material Icon Theme  ( ⭐️⭐️ )

jsx, html, css 등 각 파일마다 구별하기 쉬운 보기 좋은 아이콘으로 표시해줍니다.

 

4. Prettier  ( ⭐️⭐️⭐️ )

코드 저장과 동시에 들여쓰기 및 코드의 자동 정렬을 지원해줍니다.

 

5. Bracket Pair Colorizer  ( ⭐️⭐️ )

{ }, ( ) 등 코드의 괄호마다 별도의 색상 적용를 통해 코드 영역 이해와 가독성을 높혀줍니다.

 

6. Auto Rename Tag  ( ⭐️⭐️⭐️ )

html 앞 뒤 태그 중 한쪽을 수정하게 되면 맞은편 쌍도 변경 사항에 맞춰 자동으로 수정되는 편리한 기능을 제공합니다.

 

7. Auto Close Tag  ( ⭐️⭐️⭐️ )

html 태그 부분의 (/)만 입력해 주면 자동으로 닫힘 태그를 완성시켜줍니다. 있다 없음 불편해요 ㅜ

 

8. CSS Peek  ( ⭐️⭐️⭐️ )

html 태그에 선언된 css 클래스명을 cmd 키와 함께 클릭 시 정의된 css 파일의 코드 위치로 이동합니다.

 

9. HTML CSS Support  ( ⭐️⭐️ )

html에서 css 파일에 정의된 클래스명의 자동완성 기능을 돕습니다.

 

 

2. Docker 

1 ) 설치 URL

Docker Desktop for Mac by Docker | Docker Hub

 

2 ) 설치 단계

접속하여 Mac OS 에 맞는 실행 파일을 다운로드 합니다. 

도커를 추출을 완료하면 생성된 아이콘을 더블 클릭해 접근 권한 및 약관 허용을 진행해주면 모든 작업이 끝납니다.

접근 권한 허용 단계

 

도커 애플리케이션 실행 화면

 

Posted by Ang