[PHPSTORM] phpstorm에서 html, js, css 라이브 코딩. 새로고침 필요없도록 자동화하기. 즉각적인 브라우저 반응 일으키기!

-
PhpStrom에서 즉각적으로 화면 변하는 환경 구축하기.



1. Settings/Pereferencs 클릭후 Plugins 에 들어가줍니다.




2.  live edit 을 검색한 후 Install JetBrains plugin... 클릭해줍니다.





3. Install 해줍니다.



4. 크롬 확장 도구 설치를 합니다.
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?hl=ko


5. Restart If hotswap fails 체크박스 선택해줍니다.
체크가 안되어있을 경우 자동 새로고침을 지원합니다.



6. 크롬에 들어가 확장 도구에 마우스 우클릭을 한 후 Inspect in PhpStorm 클릭합니다.




7. 아래와 같은 화면이 보입니다.

크롬 화면에는 



PhpStorm에는




그 후 PhpStorm에서 코딩을 하시면 0.3s 후에 화면이 변경되는 것을 확인할 수 있습니다.




댓글

댓글 쓰기

이 블로그의 인기 게시물

[생활] 짝눈(부동시)로 신체검사 4급(공익) 받은 방법.

-
저는 2000년도 태어나서 2019년에 신체검사 대상자입니다. 저는 초등학교 2학년부터 짝눈인 것을 알았습니다. 흔히 말하는 시력으로는 좌안 1.0 우안0.1 이 나왔습니다. 사실 이때 약시 치료를 받았어야했는데 의사의 오진?!으로 치료 시기를 놓쳤습니다. 운이 좋게?!도 지금 20살이 되도록 좌안은 0.8 우안 0.01 이 나옵니다. 디옵토로 말하자면 좌안 -1.00 우안 -6.75 입니다. 병무청 신체검사 기준  을 보았을 때 양안 차이가 -5.0 이상 차이날 때 4급이라 저는 4급에 해당했습니다. 하지만 병무청 신체검사로 판정이 나지 않기때문에 병원에서 검사를 받고 서류를 제출해야합니다. 일단 저는 약시로 병무용 진단서로 진찰을 받았습니다. 진단서는 보험 처리가 안되기 때문에 비쌉니다. 약시 병무청 진단 비용은 약 13만원 정도 사용했습니다. 저는 생각이 짧았는지 약시가 부동시로 오기때문에 좀 더 넓은 범위가 약시라 약시 진단을 끊었습니다. 그러나 병무청에서는 약시는 3년전 기록이 필요하고 부동시로 진단서를 발급 받아야 한다는 것이였습니다. 돈 13만원이 너무 아깝지만 현역보단 낫겠지라는 생각으로 동네 안과에 갔습니다. 부동시는 병무용 진단서가 아니라 근처 병원에서 4가지 검사 후 의무기록지 사본만 제출하면 된다고합니다. 다행히 의무기록지 사본을 발급 받는 비용은 약 4만원 정도로 병사용 진단서보다는 저렴했습니다. 의무기록지 사본을 병무청 등기로 보낸 후 이틀 후 4급 판정을 우편으로 통지 받았습니다. 가끔... 저를 부러워 하시는 분들이 있는데 이렇게 짝눈이 심하면 한쪽눈으로 생활하게 되고. 한쪽눈으로 생활을 하다보니 두통과 어지러움을 굉장히 자주 느낍니다. 일상생활이 안될 때도 있습니다. 그러니 부러워하지 않으셔도 됩니다!! 이상 짝눈으로 4급 판정 받은 과정이였습니다.
자세한 내용 보기

[스프링부트] @Mapper import 실패시(빨간줄) 해결 방법

-
@Mapper 찾지못하는 오류 현상 해결 방법 오류 사항 import org.apache.ibatis.annotations.Mapper ; 위에 import문에서 Mapper에서만 빨간 밑줄 이 그어진다면 gradle 속성을 살펴보아야한다. 아래와 같이  gradle 속성을 바꾸어주었더니 IDE에서 인식이 가능하였다. 기존 compile 일부 compile "org.mybatis:mybatis:3.3.0" compile "org.mybatis:mybatis-spring:1.2.3" 추가한 compile 일부 compile "org.springframework.boot:spring-boot-starter-jdbc" compile( "org.mybatis.spring.boot:mybatis-spring-boot-starter:1.3.2" ) 속성만 바꿔준다고해서 적용 이 되지않는다. gradle 속성을 바꿔준다음 gradle Tool View에서 Refersh all gradle projects 를 해줘야 적용이 된다.
자세한 내용 보기

[Spring] Spring & Egov *.do 확장자 없이 URL 접근 가능토록 하기

-
 기존 프로젝트에서 *.do 확장자만 사용하다 API 기능을 추가해야하는 상황이 왔다. API 주소에 *.do 확장자를 사용하게 하고 사용하라고 하면 되지만.. 적절하지도 않고 크롤링도 아니고 API 인데 확장자를 *.do 를 쓰게 할 수는 없었다. 결과적으로 변경한 코드는 매우 간단했지만 꽤나 시간을 소비하였다. webapp/WEB-INF/web.xml 파일이 존재할 것이다. 이 부분에 servlet-mapping 설정 관련이 있을 것이다. 기존의 파일의 경우 아래와 같이 *.do 일 때 설정해놓은 servlet-class 로 이동토록 하였다.. <servlet-mapping> <servlet-name> action </servlet-name> <url-pattern> *.do </url-pattern> </servlet-mapping> url-pattern 을 *.do -> /* 이렇게 변경하면 서버 구동은 되겠지만 jsp 화면이 나오지 않을 것이다. 이유는 기본적으로 *.jsp, *.js 등 servlet-mapping 이 따로 설정되어있었기 때문이다. 그렇기에 /* 로 변경하면 *.jsp 도 위 action 에 설정이 될 것이다. 그렇다면 어떻게 해야하는가? /* -> / 로 변경하면 된다. <servlet-mapping> <servlet-name> action </servlet-name> <url-pattern> / </url-pattern> </servlet-mapping> 위와 같이 하면 화면은 보이겠지만 img 등은 보이지 않을 것이다. 이유는 url-pattern 을 /  으로 설정하여 기존에 있던 기본 servlet 을 우리가 덮어 사용하였기 때문이다. 여러 파일을 제대로 불러와주기 위해서는 아래와 같은 추가적인 servlet-mapping 이 필요하다. ( 출처 ) ...
자세한 내용 보기