[브라켓(Brackets)] 실시간 미리보기

에디터/브라켓 에디터(Brackets editor) 2015. 11. 1. 17:55

728x90
반응형

다른 에디터 보다

브라켓을 왜 쓰는지 그 첫번째 이유가 되는 

'실시간 미리보기' 기능 입니다.

(첫번째 이유가 있으면 두번째도 있다는 것이죠. ^^)


실시간 미리보기 기능은 말 그대로

코딩하는 동시에 실시간 아웃풋으로 확인 할 수 있습니다.


확장 기능을 설치하는것도 아니고

프로그램을 깔면 그냥 기본으로 들어 있어요!



바로 이 기능이죠.


사용법은 아주 간단합니다.

그 전에.. 크롬 브라우저를 설치 합니다.

이 기능은 크롬이 없으면 안돼요!



이렇게 해주면 됩니다.

단축키도 있네요!

'컨트롤 + 알트 + p'


누르게 되면



확인 한번 눌러주세요.

다음부턴 이 안내 메시지는 출력이 안됩니다. 한번만 출력되요.



새 창이 열리면서 잠시 기다리라네요

그후 로딩이 완료되면

..

에디터로 돌아가서

body 태그 안에다가 아무거나 입력해 봅시다.


그러면 위의 gif처럼 같은 결과를 보실 수 있습니다.

(서브라임에서도 비슷한 기능이 있는데 그건, 크롬브라우저 에다가 뭘 설치해야 하고 게다가 에디터 에서 저장을 눌러야지만 반영이 되죠. 하지만 이건... 저장을 굳이 안하셔도 말그대로 실시간 반영을 합니다.)

반응형

댓글 11

  • 나그네 (2016.04.20 08:40)

    실시간 미리보기를 사용하면 예전엔 바로바로 나왔는데 현재는 저장을 해야 적용하네요...

    • 회복맨 (2016.04.20 09:05 신고)

      다른 확장 기능하고 충돌이 날 경우도 있고
      여러가지 이유가 있을꺼예요. 한가지 이유만 있을꺼라 생각하지 않습니다
      잘 안되시면 프로그램 삭제 후 다시 설치해보시는게 어떨까요?

    • 녹차 (2016.10.11 13:36)

      해당 파일을 불러오지 마시고, 파일이 포함된 폴더를 불러 와서 작업해보세요. 그럼 저장하지 않아도 실시간으로 적용 돼요~

    • 공부중 (2019.07.17 16:25)

      녹차님 감사합니다. 덕분에 해결됐습니다.

    • 저요저요 (2021.01.22 12:12)

      저두 안되서 저장하고 하니 일단 됩니다. 다른 컴은 안그런데 이컴은 그렇게 해야 작동이 되네요.. 근본적인 해결은 아닐찌 몰라도 일단 작동은 됩니다.

    • 저요저요 (2021.01.22 12:18)

      녹차님 말씀이 지당 하십니다..
      저두 방금 생각 났습니다.. 폴더열기를 해서 폴더를 지정 해줘야 그때 부터 실시간 에러가 나지 않습니다..
      왼쪽 파일목록 있는데서 마우스 우클릭 하고 폴더 열기 해서 작업 폴더를 지정 해줘야 됩니다. 잠시 멍때리다가 화면 돌아 오면 작동 됩니다.

  • 나그네2 (2017.01.31 14:40)

    ph파일은 실시간 보기가 불가능한가요 ㅠㅠ?

    • 회복맨 (2017.01.31 16:41 신고)

      이건 거의 node js의 live server와 비슷한 거라서 php의 실시간 미리보기는 안될꺼 같습니다.

      방문해 주셔서 감사합니다 :)

  • 꼬망디 (2017.06.22 23:37)

    저도 브라켓 사용하는데, 예전엔 잘됏던 것 같은데 CSS가 내부스타일일때만 실시간이 되고
    외부스타일로 작성할땐 link로 연결해도 실시간 미리보기가 안되네요 ㅠㅠㅠㅠ왜그럴까요?

    • 회복맨 (2017.06.22 23:48 신고)

      방문해 주셔서 감사합니다. :)
      음....
      브라캣을 실시간 미리보기가 되니까 사용하신다면... 저는 말리고 싶습니다 ㅠ

      또한....

      이렇게 오류 문의가 쇄도하는 에디터를 포스팅 한걸 조금은 후회하고 있어요.
      에러가 발생 시 검색 해도 잘 안나와요. 문제 해결 방법이... 그리고 많이 안타까운 말씀이지만 이젠 제 블로그에서도 브라캣의 오류에 대한 문제는 다루지 않습니다.

      실시간 미리보기가 되니까 사용하고 싶다면, 다른 여러 에디터 에서도 됩니다.
      이런 거라면 제 블로그의 우측 메뉴의
      아톰, 웹스톰, Gulp 등을 보셔서 실시간 미리보기를 설정하시면 될듯합니다.

  • 김유진 (2021.01.28 17:44)

    우와 폴더를 열어야 실시간 미리보기 가능한걸 여기서 해결했습니다
    너무 감사해 인사말 남기고 갑니다