[아톰(Atom)/패키지] open-in-browsers (jsp,php 페이지 보기)

예전에 HTML 작업물을 단축키로 브라우저로 여는 기능을 하는 패키지를 소개했던 적이 있습니다.

http://recoveryman.tistory.com/239

이 패키지는 그냥 단순히 HTML만을 열어볼 수 있었습니다.

근데 이번엔 HTML 뿐만 아니라 JSP, PHP등의 페이지도 열어볼 수 있습니다.

또, 크로스브라우징 테스트 할 때 엄청 편합니다.

근데 사용하면서 한가지 오해가 있을꺼 같아서 미리 적어 올립니다.

이건 FTP 뭐 그런게 아니라 무조건 내 컴퓨터 기준으로..

작업중인 PHP 페이지를 보고싶다, 혹은 ASP 페이지를 보고싶다. 혹은 Ajax로 만든 작업물을 테스트해 보고싶다. 그리고, 모바일 웹 사이트를 만들었는데 휴대폰으로 테스트해야 한다.

이럴때 조금 더 유용하다는 거예요.

그런데 이런 것들을 하려면 뭐가 필요한가요?

바로 웹 서버가 돌아가야 합니다.

아파치, IIS 같은 웹서버가 돌아가야 합니다.

이거 안돌리고 이 패키지로 PHP, JSP 같은걸 단축키 한방으로 브라우저에서 확인 못해요.

웹서버를 돌려야 돌아갑니다.

간단하게 웹 서버를 구축할 수 있는

XAMPP, APMSETUP 같은 프로그램들이 있습니다.

그런걸 설치해서 사용하시면 편하시고,

또한 굳이 PHP, JSP를 안쓰고 HTML 만 하신다고 하면

아톰라이브서버

http://recoveryman.tistory.com/302

이게 제일 좋습니다. 이건 패키지만 깔면 되요.

하지만 이 패키지만의 장점은 바로 크로스 브라우징 테스트 할 때 아주 유용하게 사용할 수 있습니다.

여러가지 브라우저를 테스트 할 수 있게 에디터 하단에 아이콘으로 뜹니다.

이건 설치법 부터 포스팅 하면서 보겠습니다.

/* 171130 수정 */

아톰 업데이트가 되어서 본 글에 수정하여 올립니다. 

업데이트 된 아톰 저도 설치했습니다.

컨트롤 + 쉬프트 + p 누른 후 install 을 입력합니다.

그럼 두번째 Settings View: Install Packages And Themes 를 선택합니다.

우측 상단에 Package 탭을 선택한 후 open in browsers 를 입력하여 해당하는 패키지를 다운로드 받습니다.

주의할 점이 제작자가 skandsoft 를 꼭 확인하시고 인스톨 합니다.

설치가 완료되면 Settings 버튼을 눌러 줍니다.

그럼 오른쪽에 먼가 저런게 뜰 텐데 단축키를 바꿔주기 위해 View Code 를 눌러 줍니다.

그러면 좌측에 open-in-browsers 폴더를 펼치면 keymaps 라는 폴더가 있습니다. 그 폴더도 펼치면 open-in-browsers.cson 파일이 보이는데 이걸 열어줍니다.

그리고 단축키를 f12 로 변경하고 이 탭은 닫습니다.

이제 웹서버를 돌려볼껀데 저는 xampp 씁니다.

다른 분들은 쓰시던거 쓰셔도 됩니다.

일단 프로젝트 Root 설정을 위해 아파치 서버의 config 버튼을 눌러 httpd.conf 파일을 열어줍니다.

※ 여기서 주의해야 할 점은 아파치 서버가 작동하지 않고 있어야 한다는 점입니다.

컨트롤 + F 로 찾기를 할텐데 document 를 입력해서 한 두번정도 엔터를 눌러주면 저런 모습이 보입니다.

여기서 제가 표시친 이 경로가 테스트 할 경로가 됩니다.

저는 C드라이브의 test 폴더를 Root 폴더로 잡았습니다.

수정해 주고 저장한뒤 아파치 서버를 실행시켜 줍니다.

C드라이브에 test 폴더를 만들었습니다.

에디터로 돌아가서

아까 그 Settings 탭을 열어봅니다. 그냥 어차피 켜져 있을테니까 걱정 마세요.

또는 끄셔도 상관 없습니다. 이 부분은 그냥 읽어주세요.

아무튼 스크롤을 내리면 Project/Local Host Combination Config File 이런게 있어요.

이거 보시면 기본 파일로 proj.json 을 가르키고 있습니다.

proj.json 파일이 필요합니다. 그게 Root 폴더에 있어야 합니다.

좀 더 내려보겠습니다. 그 파일은 어떻게 작성해야 하는지.

스크롤을 내려보니 이런 문구가 있네요.

아래 입력 양식에 맞춰서 작성하래요. 저 코드를 복사해 줍니다.

좌측 상단의 File 을 눌러 메뉴를 펼칩니다.

그리고 Open Folder... 눌러줍니다.

프로젝트 폴더를 선택할 수 있게 뜨죠.

그럼 C드라이브의 test 폴더를 선택합니다. 또는 이걸 보시는 여러분들이 지정한 Root 폴더로 하시면 됩니다.

그럼 이제 에디터에서 파일을 만들 수 있을꺼예요.

좌측 의 폴더 이름을 오른쪽 클릭하면 새로운 파일을 만들 수 있죠.

거기서 파일 이름이 proj.json 파일을 만들어 줍미다.

그리고 아까 복사했던 양식을 그대로 붙혀넣기 한 후

3번 줄의 URL 을 http://localhost 로 바꿔주고

4번줄의 폴더를 C:/test 로 바꿔줍니다. 그리고 저장.

저는 바로 index.html 을 만들어 F12 버튼을 눌러 테스트 해봤습니다.

아주 잘 됩니다.

이 부분은 보셔도 되고 안보셔도 되는 부분인데

proj.json 파일이 계속 루트에 보일꺼예요. 이걸 숨김처리 하기 위해 오른쪽 클릭 후 속성을 눌러줍니다.

일반 쪽에 숨김 체크. 하시면 안보이시게 되고

형상관리를 하고 계시다면 제외 처리를 하셔야 할 수도 있습니다.

/* 구버전 */

설치

1. 패키지 설치의 기본이죠.

윈도우 : 컨트롤 + 쉬프트 + P -> install 입력 후 Install Packages And Themes 선택

맥 : 커맨드 + 쉬프트 + P -> install 입력 후 Install Packages And Themes 선택

2. 좌측의 Install 클릭 -> 우측의 PACKAGES 선택 후 open in browsers 검색 -> 제작자가 skandasoft 인 패키지 설치

3. Setting 클릭

여기서 주의하실 점이 단 한개 있습니다.

제 블로그 보고 셋팅을 하신 분이 계시다면 제작자가 magbicaleman 인 open-in-browser를 다운 받았을 꺼예요. (스샷기준 두번째 패키지)

그 패키지를 제거해 주셔야 합니다.

4. 단축키를 바꿔주기 위해 VIEW CODE 를 눌러 줍니다.

5. 좌측의 keymaps 폴더를 열어서 open-in-browsers.cso 라는 파일을 열어 줍니다.

그리고 다음과 같이 f12 를 넣고 저장합니다.

6. 다시 셋팅창으로 돌아와서 스크롤을 조금 내리면 Settings 라는 부분이 보일 꺼예요.

이 스샷에 나와있는 부분은 기본적으로 되어있는 체크상태일껍니다.

7. 이 패키지는 여기서 부터가 제일 중요한 부분입니다. 지금 여기서 하려는건 PHP, JSP 같은 페이지를 볼꺼거든요.

- IE 쪽에 Switch to LocalHost 에 체크

- LocalHost URL 에 http://localhost 를 입력 or CMD에서 ipconfig 명령으로 찍은 자신의 아이피 주소를 http://192.168.x.xxx 이렇게 입력해 둡시다.

8. PHP, JSP 같은 페이지를 보려면 웹 서버가 돌아가야 한다고 이 글 맨 처음에 작성하였습니다.

물론 이런걸 하려면 PHP, JSP 에 대한 사전 지식이 있으면 좋습니다.

저는 XAMPP를 이용해서 Apache웹 서버를 구동시켰습니다.

9. 에디터로 돌아가서 프로젝트의 루트 폴더에 적당히 아무거나 만들어 두고 F12를 누르면 다음과 같이 localhost 로 연결되서 페이지를 볼 수 있습니다.

여기서 이 localhost 로 페이지가 안뜨고 폴더 경로로 페이지가 뜰 경우

- 7번 스샷에 해당하는 내용을 컨트롤 + Z 로 되돌리고 ( http://localhost:3000 이라고 되어있는 부분에 마우스 찍고 컨트로 + Z ) 저장

- 에디터 종료

- 에디터 다시 켜서만든 페이지에서 F12 버튼을 눌러서 localhost:3000 으로 브라우저가 열리는지 확인 (여기서 localhost:3000 으로 브라우저가 열리면 됩니다. 오류 상관 없이)

- 다시 7번 스샷에서 처럼 http://localhost 입력 후 저장 (자신의 IP 주소를 적어도 되고, 127.0.0.1 로 해도 됩니다.)

10. 여기 보시면 크로스 브라우징 할 수 있게 아주 잘 준비되어 있네요.