에디터/웹스톰(WebStorm)2018. 6. 12. 20:48

웹스톰 2018.1.4 버전을 이번에 새로 구매하게 되었습니다. 그래서 혹시 테마 변경을 한 후 폰트 변경에 어려움이 있으신 분들이 계시면 이 게시물이 도움이 되었으면 합니다. 이 게시물은 윈도우OS 기준으로 작성했습니다. 우선 테마를 설치합니다. 테마설치 : http://recoveryman.tistory.com/348 그리고 왼쪽 상단의 File -> Settings 를 눌러줍니다. 단축키는 컨트롤 + 알트 + S 입니다. 그리고 아래 사진에 나와있는 순서대로 좌측 메뉴의 Editor -> Font -> Current editor font: [적용중인폰트이름], [폰트사이즈] 를 눌러줍니다. 사진이 잘 안보이면 클릭해서 보시면 크게 나옵니다. Font 부분을 선택해서 원하는 폰트로 바꿔주시면 됩니다...

에디터/웹스톰(WebStorm)2017. 6. 8. 02:48

실시간 미리보기에 대해 설명하기 전에 이게 뭔지 다음 동영상을 먼저 보시면 이해가 빠릅니다. 파일을 수정하고 나면 브라우저를 F5번으로 새로고침 해서 변경된 사항을 확인해야 하는데, 이 npm 모듈을 설치하면 그런 작업이 필요 없습니다.브라켓의 실시간 미리보기 기능하고 똑같죠.우측 하단이 톱니버튼을 클릭해서 동영상 해상도를 1080p 로 설정하시면 또렸하게 잘 보입니다. 1. 실시간 미리보기(live-server)를 사용하려면 일단 Node js 가 먼저 설치되어 있어야 합니다.https://nodejs.org/ko/ 2. 웹스톰 에 좌측 하단의 작은 버튼이 있습니다.그걸 클릭하시거나 마우스를 올려놓으면 메뉴가 나옵니다. 거기서 Terminal 을 선택해 줍니다. 3. 그러면 에디터가 이런 형태로 바뀌어..

에디터/웹스톰(WebStorm)2017. 6. 5. 06:23

/* 1~6 까지는 Clone 에 대한 글입니다. */ 이 포스팅 에서 git clone 에 대한 명령어가 안나올 수 있습니다.git clone 는 Git 저장소를 복제할 때 쓰는 git 명령어 입니다.Git 저장소 복제하기 링크하지만 웹스톰 메뉴 중 이러한 메뉴가 없는것 같아요.만약 SVN 이라는 버전관리 툴을 사용해 보신 적 있으시다면 Check out 과도 같은 기능 입니다.해서 저는 다른 프로젝트를 다운받아 보고 싶었어요.본 예제를 진행하기에 앞서 저는 github 계정을 하나 더 생성하고,위와같은 작업을 진행하려고 새로운 계정에 github프로젝트를 하나 더 만들었습니다. 1. 일단 Git bash 로 현재 진행하려는 유저가 누군지 확인해 봅니다. 하단의user.name=xxxuser.email..

에디터/웹스톰(WebStorm)2017. 6. 3. 03:11

웹스톰 으로 깃을 편리하게 이용할 수 있다고 합니다.저는 깃을 회사에서 한두번 사용해 봤지만 그냥 신규파일 만들고 업로드 수준이라...저는 일단 Git이 설치가 되어 있습니다.이게 Git이 설치가 되어 있어야 사용 가능한지는 잘 모르겠습니다만 저의 작업환경과 동일하다는 기준 하에 포스팅 하겠습니다. 이 포스팅은 신규 원격 저장소를 만들고 거기에 업로드 하는 글입니다. 1. 일단 깃을 설치하고 사용자 등록까지 합니다.Git 최초설정 하는 방법 : 바로가기그리고 웹스톰으로 돌아가서 단축키 컨트롤 + 알트 + S 를 눌러 줍니다.그러면 메뉴가 너무 많아서 뭐가 뭔지 모를꺼예요.상단에 git 이라고 검색하면 Version Control 탭이 보입니다. 그 탭을 열어주면 Git 에 대한 부분이 보입니다.그러면 메..

에디터/웹스톰(WebStorm)2017. 6. 2. 18:45

웹스톰을 사용해서 새로운 프로젝트를 만들거나기존에 관리하는 프로젝트를 웹스톰으로 열었을 때 .idea 라는 폴더가 이렇게 생깁니다. 내부 모습은 이렇게 생겼구요. 이 폴더는 인텔리제이 에서 만든 IDE를 사용하면 해당 프로젝트의 설정값들이 담기게 된다고 합니다.즉 우리의 의사와는 상관없이 그냥 자동적으로 생성이 됩니다.이 파일은 여러사람이 관리해야 하는 경우가 거의 없다고 보시면 됩니다.해서. 버전관리(SVN, GIT 등)를 이용해서 프로젝트를 관리해야 할 때 해당 폴더를 제외시키고 관리하면 된다고 하네요.https://stackoverflow.com/questions/17049416/what-is-the-idea-folder 또는 해당 프로젝트를 마우스 우측 클릭해서 숨김 처리하는 방법이 있습니다.ht..

에디터/웹스톰(WebStorm)2017. 6. 2. 05:27

웹스톰 단축키 입니다. 공식 블로그에서 유용한 10가지 단축키 사용법을 GIF 로 잘 만들어 놔서 링크 올립니다.https://blog.jetbrains.com/webstorm/2015/06/10-webstorm-shortcuts-you-need-to-know/ 물론... 단축키 PDF도 있습니다.1쪽은 Mac OS 용이고 2쪽은 Windows 용 이네요.https://resources.jetbrains.com/storage/products/webstorm/docs/WebStorm_ReferenceCard.pdf 영짧이라 번역이 있었으면 좋겠다 생각이 들기도 하지만..왠만한 단축키는 기존에 쓰시던 에디터와 크게 다른 부분이 없기에 사용하시는데 무리는 없을꺼 같습니다.

에디터/웹스톰(WebStorm)2017. 6. 2. 05:13

서브라임텍스트, 아톰 에디터의 경우엔 패키지 플러그인등을 설치해야 단축키로 브라우저 확인이 가능했었죠.하지만 웹스톰의 경우엔 그런 패키지 플러그인을 설치하지 않아도 단축키로 브라우저 확인이 가능 합니다. 1. 작업중인 페이지를 저장 후 오른쪽클릭 으로 나오는 메뉴 중Run 'xxxx' 를 클릭합니다.단축키는 컨트롤 + 쉬프트 + F10 이네요. 2. 잘 됩니다.또한 단축키 변경을 셋팅 Keymap 에서 Run 으로 검색하시면 쉽게 찾을 수 있지만주의하실 점은 다른 단축키와 충돌이 나는 경우가 있기 때문에 잘 확인 하신 뒤 원하는 단축키로 변경하시면 됩니다.(제가 자주 쓰는 F12 키는 이미 다른 단축키로 등록이 되어 있어서 그냥... 저는 원래 있던거 쓸래요...ㅠㅠ)

에디터/웹스톰(WebStorm)2017. 6. 2. 04:24

1. 웹스톰을 사용해 보니 자동 줄바꿈 설정은 처음엔 안되어 있는거 같습니다.이렇게 길에 장문의 글을 쓰면 가로로 스크롤이 생기는 걸 볼 수 있습니다. 2. 자동 줄바꿈 설정을 하기 위해 상단의 메뉴중File -> Settings... 를 누릅니다.단축키인 컨트롤 + 알트 + S를 활용합시다! 3. 좌측 메뉴중Editor -> General 을 선택하면 우측이 이런 화면이 뜹니다.우측화면에서 Soft Wraps 항목의 Use soft wraps in editor 에 체크하신 후 Apply 를 누르고 OK를 누릅니다. 4. 에디터로 돌아가면 다음과 같이 자동 줄바꿈이 적용이 되어 있습니다. /* 2018 06 14 -추가 */ 맥에서는 메뉴의 위치가 조금 틀린거 같네요.2018.1.4 버전 기준으로 다음과..

에디터/웹스톰(WebStorm)2017. 6. 2. 03:37

이전 포스팅에서 보기에도 숨막히는 테마가 계속 적용되어 있어서 힘들었습니다.하지만 굉장한 사이트를 발견해서 공유 올립니다.http://color-themes.com/?view=index이쁜 테마가 엄청 많습니다!하지만 제눈에는 Monokai가 제일 예뻐 보입니다! 1. 자! Monokai Sublime Text3 를 클릭합니다!완벽에 가까운 이 Monokai 테마를 우리는 좋아할 수밖에 없습니다.(맘에 드는 테마를 클릭합니다. ㅎㅎ;) 2. 그러면 이런 화면이 뜨는데요.Download for 바로 옆의 버튼을 클릭하면 됩니다.지원되는 IDE를 잘 확인하시고 자신이 쓰는 IDE에 적용 할 수 있는지 확인 후 클릭하시면 됩니다. 3. 자 다운을 받으셨으면 이런 XXXX.jar 파일이 받아집니다.다운받은 이 ..

에디터/웹스톰(WebStorm)2017. 6. 2. 02:58

앞의 포스팅에서 웹스톰 설치를 저와 동일하게 진행했다면 웹스톰을 종료 후 재실행 시켰을 때 이런 모습으로 창이 뜹니다. 1. 우선 기존의 프로젝트를 열어보겠습니다.두번째 Open 버튼을 누르면 프로젝트를 찾을 수 있습니다. 2. 이렇게 자신이 원하는 프로젝트를 검색하여 하단의 OK 버튼을 눌러줍니다. 3. 프로젝트를 열었다면 다음과 같은 모습이 보일꺼예요. 저는 이 test 폴더에 아무것도 없어서 새로 프로젝트를 만들어 보겠습니다. 4. 테스트 버튼을 오른쪽 클릭하면 하위에 이런 메뉴들이 뜹니다.신규 파일을 만들려면 New로 가시면 다음과 같이 이렇게 파일을 만들 수 있습니다.HTML 파일이 없기 때문에 HTML File 을 선택 합니다. 5. Name: 부분엔 적당한 이름을 입력하고Kind: 부분에는 ..