티스토리 뷰
JetBrain IDE IntelliJ에서 LiveEdit 사용하기
HTML 마크업이나 CSS를 잘 만지는 편이 아닌데 가끔씩 작업을 할 때면
작업하고, 저장하고, (빌드하고), 확인하고 를 반복하다보면 시간 소요가 많아지는게 사실입니다.
이를 해결하기위해 IDE들이 다양한 기능들을 제공해 주는데 그중 IntelliJ의
LiveEdit 를적용하는법을 찾게되어 기록하였습니다..
LiveEdit은 IDE 에서 작업하는 HTML 마크업을 실시간으로 브라우저에
바로 보여주는 기능인데 구글 크롬 플러그인으로 제공됩니다.
먼저 Google Chrome 웹 스토어에서 jetbrain을 검색하여
JetBrain IDE Support 플러그인을 설치 해 주어야 합니다.
Chrome에서 플러그인 설치가 완료 되었으면 IntelliJ 내부에서도 LiveView 플러그인을 설치 해 주어야 합니다.
환경설정에서 Pluin설치 목록중 LiveEdit를 검색하여 설치해준후 IDE를 재부팅 해주면 사용할 준비가 됩니다.
아래 캡쳐화면은 이미 설치가 되어있는 화면이라 따로 설치 메시지가 나오지는 않습니다.
플러그인을 설치하고 IDE를 한번 재부팅 한 이후에는 IDE의 에티터 창에서
Chrome로 보기 창을 눌러 브라우저 창을 띄워줍니다.
그리고 <body> 태그 안에 바로 텍스트를 치면 LiveEdit기능이 바로 되지는 않습니다.
활성화를 시켜주어야 하는데
간단하게 브라우저 화면 우클릭 후 Inspect in IDEA 메뉴를 선택하게 되면
이제부터 IDE 에디터에서 편집한 화면이 실시간으로 브라우저에 표시 되는것을 볼 수 있습니다.
