UI/UX 트랙 환경 세팅하기

1. Visual Studio Code 설치

2. Prettier 세팅

Prettier는 말 그대로 예쁘게 보이도록 도와주는 프로그램입니다. 코드를 정돈해주기 위해 설치해봅시다.

1. extension 설치

visual studio code의 왼쪽 사이드바에서 extension (블록 모양)을 클릭하고, prettier 를 검색합니다. Prettier - Code formatter 프로그램을 설치(install)합니다.

2. 유저 환경설정

mac OS의 경우 키보드 command + shift + p 를 입력하고, windows OS의 경우 ctrl+shift+p **를 입력합니다. 그리고 Open User Settings를 입력하고 Preferences: Open User Settings**을 선택합니다.

3. format 이라고 검색 후, Editor: Default Formatter에서 Prettier - Code formatter 를 선택해줍니다.

4. 코드 입력 및 저장 (ctrl + s) 시 코드가 자동 정렬 되는지 확인

3. live server 확장 프로그램 설치

live server 코드 변경 후 새로고침 없이 바로 변경사항이 화면(브라우저)에 적용되도록 하는 아주 편리한 프로그램입니다.

1. visual studio code의 왼쪽 사이드바에서 extension (블록 모양)을 클릭하고, live server 검색 후 Live Server 의 install 버튼을 클릭합니다. 저는 이미 설치했기 때문에 install 버튼이 없습니다.

2. 파일 우클릭 후 최상단의 Open with Live Server 를 클릭하시면 브라우저가 자동으로 열립니다.

3. 라이브 서버를 종료하고 싶다면 우측 아래의 [Port : 숫자 부분] 클릭 시 종료됩니다.

---