[JavaScript] WebStorm 설치하기

안녕하세요. 개발토끼 입니다.

오늘은 연달아서 WebStorm 설치를 알려드리도록 하겠습니다.

사실 WebStorm을 검색하실 정도면 프로그래밍에 조예가 있거나 적어도 컴퓨터 프로그램 설치/삭제 정도는 하실 줄 아시겠죠.

하지만, 저는 뭐든지 단계적으로 진행하는 것을 좋아합니다.

그래서 저 나름대로의 레퍼런스를 만든다고 생각하고 블로그 작성에 임하고 있죠.

어려운 내용은 없지만, 그냥 한번 둘러보신다고 생각하고 봐주셨으면 좋겠습니다.

그럼 설치를 시작하겠습니다.

 

 

JetBrains 홈페이지 접속하기

http://www.jetbrains.com

 

- 홈페이지 상단에 PRODUCTS 클릭 -

여기 PRODUCTS를 클릭하게 되면 다양한 JetBrains 사의 제품들을 보실 수 있습니다.

하지만, 우리에게 필요한 것은 WebStorm이죠? ㅎㅎㅎ

 

 

 

- WebStorm 클릭 -

 

 

 

 

- Download WebStorm 클릭 -

 

 

 

- 다운로드 감사 페이지 -

웹스톰을 다운로드 해줘서 너무 감사하다는 문구가 나오는 군요.

저는 오히려 제가 감사하다고 생각합니다.

아주 훌륭한 프로그램을 이렇게 만들어서 배포해주니 말입니다.

이 페이지는 다운로드가 자동으로 이루어지는 페이지 입니다.

 

근데 가끔 인터넷 익스플로러 구 버전을 이용하시는 분들 같은 경우 자동 다운로드가 나오지 않을 수 있습니다.

 

해결책 : 화면에 파란색 큰 글씨로 HTTP or HTTPS 중 하나를 클릭하면 자동으로 다운로드가 시작됩니다.

 

 

 

- 실행 클릭 -

저 같은 경우엔 저장을 하도록 하겠습니다. 

근데 실행이든 저장이든 별 상관이 없죠. 

추후에 설치파일을 써야 한다면 반드시 저장해서 원하는 장소에다가

파일을 저장하시기 바랍니다. 

 

 

 

- 웹스톰 설치 파일 모습 -

설치 파일을 더블 클릭 해서 설치를 해봅시다.

 

 

 

 

- 넥스트 다음 -

일반 프로그램 설치하는 화면가 비슷하죠.

프로그래밍을 도와주는 IDE 설치도 JetBrain사에서 만들면 어려울 것이 없습니다.

참고로 Eclipse 같은 경우엔 설치파일 형식이 아니라 압축 파일을 받아

압축을 풀고 그걸 Program Files에 넣고 일련의 작업들을 해주었었죠.

 

 

 

 

- 원하는 위치 선택 -

보통 기본 위치에 저장하는 것을 권장합니다.

물론 원하시는 위치로 바꾸셔도 좋습니다.

 

 

 

- 파일 확장자를 프로그램과 자동 연결 -

이 화면은 웹 프로그램에 필요한 파일들(html, css, JavaScript) 등을 열 때

기본 프로그램으로 사용하겠느냐를 묻는 것입니다.

저 같은 경우 Visual Studio가 있어 자동연결이 되어 있지만,

이번에는 WebStorm에 모두 연결하도록 하겠습니다.

그래서 모두 체크를 하고 바탕화면에도 바로가기 생성에 체크를 합니다.

 

 

 

 

- 빠르게 다음으로 넘어갑시다! -

 

 

 

 

- 설치 중 -

 

 

 

 

- 설치 중 -

 

 

 

 

- 설치 완료 -

 

 

 

- 바탕화면 바로가기 생성 샷 -

이제 웹스톰을 한번 실행해 봅시다.

 

 

 

- 웹스톰 메인 로고 -

되게 캡쳐하는데 어려웠습니다.

프로그램이 비교적 가벼워서 메인 로고가 슉 나왔다가 슉 하고 2 ~ 3초도 안되어서 사라지더군요.

 

 

 

- 라이센스 등록 화면 -

이 화면은 웹스톰을 제일 처음 실행하게 되면 나오는 화면입니다.

유료 프로그램이다 보니 이 프로그램을 사용하기 위해 라이센스가 필요하죠.

근데 라이센스 비용도 무시 못할 만한 비용이기 때문에 라이센스가 없으신 분들은

그림과 같이 Evaluate for free for 30 days를 클릭해서 평가판으로 이용하시면 됩니다.

 

평가판 같은 경우 일반 라이센스 비용을 지불한 것과 동일한 기능과 성능을 이용할 수 있습니다.

30일 이후엔 라이센스를 구입하도록 하고 그 이후에는 더 이상 사용할 수가 없죠.

저도 이번에 학교를 졸업하게 되면 웹스톰을 학생 라이센스가 아닌

정식 Personal License를 구입할 예정입니다.

 

구입할 때 그 후기와 방법도 나중에 블로그 포스팅으로 올리도록 하겠습니다.

 

 

 

- 라이센스가 있을 경우 JetBrains 로그인 하기 -

저 같은 경우 현재 다니고 있는 대학교 인증을 해서 학생 라이센스로

웹스톰을 이용할 수 있는 상태 입니다.

그래서 정식 이용을 위해 로그인 하도록 하겠습니다.

 

 

 

 

- 웹스톰 초기 설정화면 -

네 이 화면은 이제 웹스톰을 사용할 때 초기에 사용자 선택을 입력 받는 화면입니다.

보통 프로그래머들은 화면 테마를 자신이 원하는 것으로 바꾸길 원하죠.

거의 3가지 부류가 있는 데

첫째는 종이에다가 프로그래밍하는 것 같은 느낌인 흰색 바탕을 쓰는 프로그래머

둘째는 '자신의 안구는 소중하니까' 회색 검은색 바탕을 쓰는 프로그래머

셋째는 개성넘치는 발광 색을 쓰는 프로그래머

여기서 발광색을 쓰는 프로그래머들은 보통 검은색 바탕에

Class, Method 이름을 휘향찬란하게 해놓으시는 분들을 일컫죠. ㅎㅎㅎ

 

여러분들이 프로그래밍 경험이 적어 무엇을 써야할지 잘 모르겠다 하시면 화면과 같이

Click to preview를 눌러보세요.

 

 

- 인텔리 제이 기본 테마(흰 바탕) -

인텔리 제이는 기본 테마는 흰색 바탕에 검은색 글자를 표현합니다.

보통 기본으로 많이 사용하지만,

모니터 밝기가 많이 밝을 경우 흰색 바탕은 눈을 아프게 만드는 주범이 될 수 있습니다.

그래서 모니터 밝기를 낮춘다든지, 혹은 바탕을 검은색 혹은 회색으로 바꾸시는 걸 추천드립니다.

물론, 저는 대부분 흰색 바탕을 쓰고 있습니다.

 

 

 

- 드라큘라 테마 적용 모습 -

아마 많은 프로그래머들이 선호하는 화면이 아닐까 싶습니다.

검은색은 너무 과하고 위와 같이 회색일 때

프로그래밍 되어 있는 부분들이 알록달록한 색깔로 빛나는 것

이런 세팅으로 하면 왠지 프로그래밍이 잘될 것 같은 느낌도 듭니다. ㅎㅎㅎ

모든 설정이 완료 되면 OK를 눌러줍니다.

 

 

- IDE appearance settings will be applied after restart. Would you like restart now? -

그냥 영어 길게 한번 적어봤습니다. ㅎㅎㅎㅎ

이것은 제가 이제 테마를 드라큘라 테마로 적용했기 때문에 웹스톰에 테마를 변경하기 위해서

웹스톰을 다시 실행해야 한다는 뜻입니다.

다시 실행하시겠습니까? Yes

아니면 No를 클릭해주세요.

저는 다시 시작하겠습니다.

 

 

 

 

- 짠짠!! 드디어 멋진 웹스톰 메인 화면 입니다. -

항상 느끼는 것이지만 JetBrains 사의 프로그램들은 이렇게 깔끔한 UI를 자랑하고 있습니다.

정말 얼른 빨리 이용해보고 싶군요. ㅎㅎㅎㅎ

마음 같아선 지금 자바스크립트 책을 보며 여러분들과 같이 공부를 하고 싶은데

오늘 집에 늦게 들어와 포스팅하다 보니 벌써 1시네요.

눈이 무척이나 감기는 시간입니다.

 

오늘은 여기까지 마무리 하고 내일은 간단히 웹스톰을 둘러보고

자바스크립트 기본부터 공부하도록 하겠습니다.

 

보잘 것 없는 긴 포스팅 읽어주셔서 감사합니다.

가끔 시간 나실 때 댓글도 달아주시면 더 열심히 블로그 작성할 수 있을 것 같습니다.

댓글 많이 달아주세요. ㅎㅎㅎㅎ

 

내일 뵙겠습니다.

안녕~