웹스톰에서 노드JS가 자동 실행 안될 때


안녕하세요.
고코더 입니다.


 1. 웹스톰은 컴퓨터에 node가 설치되어 있으면 자동으로 node.js 실행 환경을 설정합니다. 
이유는 잘 모르겠지만 Node가 실행안되는 분이 계시는 경우도 있습니다.



 2. 이럴 경우에는 환경설정 (Ctrl+ Shit + s)를 눌러 실행합니다.
Language & Frameworks을 실행합니다. 그러면 node interpreter 노드 실행 파일을 설정하는 곳과
Package manager를 NPM을 설정하는 곳이 있습니다. 이곳에 자신에 노드를 설치한 폴더로 맞추어 지정합니다. 


 3. 오른쪽 끝에 ...으로 되어 있는 열기 아이콘을 누르고 나오는 팝업에서도 +를 눌러 해당 node.js를 지정하면 됩니다.




마무리


노드가 설치되었다면 자동으로 잡힙니다. 혹시 설치 안하신건 아닌지요?


댓글을 달아 주세요


할 수 있다면 웹스톰으로 개발 하는게 어떨까요?


안녕하세요.
고코더 입니다.



Node.js에 등장으로 JavaScript 개발을 위한 IDE들이 다시 주목 받고 있습니다. 
공룡 IT 기업들은 이미 저마다 무료로 사용가능한 개발 프로그램들을 제작하여 배포하고 있습니다.
이런 레드오션 시장에서 유료 정책으로 성공한 웹스톰에 대해 이야기를 나누려고 합니다. 


1. 기존에도 훌륭한 무료 IDE 시장
자바스크립트를 개발 할 수 있는 프로그램은 많습니다. 급할때는 메모장을 사용 할 수 도 있고 강력한 기능을 갖춘 무료 프로그램도 많습니다. MS사에 비주얼 스튜디오 코드, 깃허브에 아톰, 어도비에 브라켓등 선택 사항은 넓고 풍족합니다. 실제로 많은 개발자와 기업에서는 이 프로그램들을 도입하여 부족함 없이 자바스크립트를 개발하고 있습니다. 

2. 완벽함을 추구하는 젯브레인사에 IDE
하지만 개발자를 완벽히 지원하는 IDE 툴은 젯브레인사에 웹스톰이 아닐까 생각합니다. 
낯선 나라 체코 프라하에 있는 이 회사는 개발 프로그램을 전문적으로 만들어내는 소프트웨어 회사 입니다. 
이들이 만들어낸 IDE들은 개발자를 이해하는 지능적은 코드 어시스턴트, 높은 완성도와 안전성 그리고 개발자를 지원하는 편의성이 상당합니다. 10여년 가까이 이클립스와 아톰등에 만족하며 쓰다 리뷰를 위해 젯브레인사에 IDE를 쓰고 저도 매니아가 된거보면 분명 매력적인 도구 입니다.


3. 비싼 구독료
하지만 주변을 살펴보면 아직 웹스톰을 사용하는 개발자를 많이 볼 수는 없습니다. 이유는 가격이 매우 비싸기 때문입니다. 1년에 약 15만원 정도 구독료를 내야 합니다. 물런 학생 무료 라이센스나 스타트업 할인등 다양한 프로모션이 존재하지만 평범한 개인 개발자들에게 구독료 지출 부분은 쉽지 않은 선택 입니다. 기업에서도 이미 이클립스와 아톰과 같은 대표적인 무료 IDE가 있는데 돈을 쓰고 싶지 않기 때문입니다. 

4. 그래도 웹스톰을 추천하는 이유
좋은 IDE는 좀 더 빠르게 코딩을 할 수 있게 합니다. 불필요한 시간을 줄이게 함으로 같은 시간동안 더 많은걸 개발하고 공부하게 합니다. 
예를 들면 큰 따옴표 안에 따옴표를 입력해야 한다면 웹스톰은 붙혀넣기를 하면 자동으로 알아서 스트링을 완성해줍니다. 만약 다른 IDE였다면 따옴표 안에 특수문자를 넣기 위해 여러번에 디버깅을 하면서 시간을 낭비하게 합니다. 물런 이런 디버깅이나 오류를 만들어 내는 것도 개발 학습안에 들어가지만 IDE가 코딩 비서와 같은 역할을 해준다면 더 가치 있는 곳에 시간을 투자 할 수 있습니다. 
해당 변수가 어디에 속해 있는지 소스를 하나씩 열어보는게 아니라 F3키 한번이면 자동으로 포커스가 이동 되는건 게으름이 아니라 스마트한 개발자 입니다.

그리고 가장 최신 트렌드에 IDE를 만나보는 것 역시 개발자가 해야할 학습이라 생각합니다.



마무리


5. 회사 정책에 맞는 IDE 사용하는게 맞다.
이번 시간에 웹스톰을 사용해야 한다고 말했지만 회사 정책이 무료 IDE를 사용하는 분위기라면 의사소통을 위해 동일한 프로그램을 쓰는 것이 맞습니다. 팀 프로젝트는 나 혼자 코딩을 잘하는걸 뽐내는 자리가 아니라 팀워크로 프로젝트를 완성하는게 목적 입니다. 웹스톰이 가장 좋은 효율을 내고 프로젝트를 단축시킬 수 있지만 비싼 구독료라던지 내부 레퍼런스가 특정 IDE에 맞게 설계된 경우 등 저마다에 이유로 필요한 IDE가 있기 마련입니다. 



댓글을 달아 주세요


노드에서 MySQL 설치 방법


안녕하세요.
고코더 입니다. 


오늘은 데이터베이스를 쓰기 위해 첫번째로 해야 하는 Mysql 설치 방법을 함께 알아보려고 합니다.
노드를 배우는 강의이고 개인에게는 완전히 무료이면서 설치가 가벼워서 다른 DBMS를 제치고
번 강의에서는 MySQL를 사용해보겠습니다. 

설치 방법은 두가지가 있습니다. 
그리고 npm 설치는 모두 이 과정과 동일 합니다.



 1. 커맨드(CMD)로 설치


 1-1. 커맨드 라인에서 자신에 프로젝트로 이동 합니다.
저랑 계속 함께 개발중이라면 해당 폴더 입니다.
D:\node\gocoder

 1-2. 프로젝트에서 npm을 설치하는 명령어를 입력합니다.
그럼 순신각에 폴더와 파일을 생성 하면서 끝입니다. 
npm install mysql


 1-3. node_modules에 mysql 이라는 폴더가 생성 되어 있습니다. 
D:\node\gocoder\node_modules



감이 오시겠지만 npm 설치는 곧 모듈 다운로드 입니다. 


 2. Webstrom 으로 설치 


 2-1. 커맨드라인 설치 방법은 원리를 알려드릴려고 한 방법이며
저와 함께 강의를 보시는 분은 웹스톰으로 설치를 한번 해보시길 바랍니다.
프로그램에서 file->setiings 로 들어갑니다. (단축키 Ctrl+Alt+S)


 2-2. 그리고 languages & Frameworks에서
Node.js and NPM 으로 들어간 다음 + 버튼을 누릅니다. 


 2-3. 그리고 여기서 mysql을 선택하고 Install Package를 클릭 합니다. 


 2-4. 그럼 바로 install 과정을 실행합니다. 
웹스톰에서 위에서 배운 npm 명령어를 날리는 과정을 대신 해줍니다.


 2-5 인스톨이 완료되었다는 성공 창이 나타납니다. 
npm 설치를 마우스 클릭으로 완료 했습니다. 


 2-6. 이제 프로젝트에 package.josn 파일을 확인을 합니다.
D:\node\gocoder\package.json


 2-7. 그럼 mysql 이 패키지 파일에 종속성으로 
자동으로 기록되어 포함되어 있는걸 확인 할 수 있습니다. 




마무리


Mysql 설치 방법을 배웠지만 
모든 npm 설치 하는 과정은 동일 합니다.




아메리카노 한잔으로 배우는 Node.js Express 기본편



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.




댓글을 달아 주세요


노드몬 설치 후 웹스톰으로 연동 하기 


안녕하세요.
고코더 입니다.


이번 시간에는 개발시에 편의성을 위해 소스 수정시
자동 반영을 도와주는 nodemon을 설치 하고  webstorm과 연동하는 방법을 배워 보겠습니다.


 1. nodemon(노드몬)이란?


 1-1. node.js 사용시에 꼭 필요한 모듈중 하나 입니다. 
쉽게 말하면 소스 코드를 수정하면 이걸 감지하여 
서버를 자동으로 재시작 해줍니다. 

자바 개발시에 사용하던 비슷한 설정이 있죠?
거의 같은 역할을 해줍니다
 1-2. 설치 명령어는 아래와 같습니다. 
npm install nodemon -g


 1-3. 글로벌 옵션이기에 제 컴퓨터 폴더 기준으로는 아래 주소로 설치가 됩니다. 
C:\Users\gocoder\AppData\Roaming\npm\node_modules


 1-4. 명령어를 실행하면 npm이 자동으로 노드몬을 설치 해줍니다. 


 1-5. npm 폴더에 nodemon이 설치되어 있는게 보입니다.
설치가 성공적으로 완료되었습니다.
C:\Users\gocoder\AppData\Roaming\npm\node_modules\nodemon



 2. webstorm 노드몬 연동 


 2-1. 이제 노드몬을 사용하기 위해 webstorm 에 설정을 해주겠습니다. 
상단에 Edit configurations 를 클릭 합니다. 


 2-2.node parameters에 위에서 설치한 폴더주소를 입력 합니다.


 2-3.OK를 눌러 설정을 저장합니다. 


 2-4서버시작버튼으로 실행하면 노드몬으로 실행 됩니다.




 3. 커맨드 라인에서 노드몬 실행 방법


이번에는 커맨드 라인에서 수동으로 nodemon으로 서버를 시작하는 방법을 알아봅니다. 

 3-1. 프로젝트 폴더까지 이동합니다. 
그리고 아래 명령어를 입력 합니다.
nodemon npm start


 3-2. 노드몬이 실행됩니다.

.

노드몬은 .js에 수정 될때마다 감지하여 자동으로 서버를 재시작 해주는 역할을 하여 서버언어도 마치 html을 수정하듯 개발이 가능합니다.


마무리


노드몬으로 학습 속도 개발속도 모두 향상 시키세요.



아메리카노 한잔으로 배우는 Node.js Express 기본편



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.




댓글을 달아 주세요

  • 송천동바이블 2019.09.27 13:51  댓글주소  수정/삭제  댓글쓰기

    좋은 강의 잘 보고 있습니다.!
    질문이 있어서 이렇게 댓글 달아요.
    nodemon이 React등과 같은 프론트엔드 프레임워크에 속하는 건가요?


theme 파일 적용하기 


안녕하세요.
고코더 입니다.


오늘은 인텔리제이 프로그램에서 외부에서 다운받은
테마 파일을 적용하는 방법을 알아보겠습니다.

 1. 이전 시간에 테마를 모아둔 사이트를 소개했습니다.
거기서 가장 다운로드 횟수가 많은
Ladies Night2를 적용해보겠습니다.


 2. 파일을 다운받습니다.
자바로 만든 티가 나는 jar 파일입니다.


 3. 그리고 인텔리 제품을 킵니다.
저는 PHP스톰에서 적용해보겠습니다. 
File->Import Settings 를 클릭 합니다. 


 4. 그리고 jar로 된 파일을 선택하여 OK를 누릅니다.



 5. 그리고 적용 여부를 묻습니다.
모두 선택하고 OK


 6. OK를 누르면 자동으로 재시작 합니다.


 7. 그리고 새롭게 적용된 
레이디 나이트 이게 인기가 제일 많다고 하는데
전 별로네요 


간단한 방법으로 다른 사람이 만든
테마를 적용해보세요.


마무리


저도 만들어 개인적으로 쓰고 있습니다.


댓글을 달아 주세요


IDEA, Webstorm, PyCharm, RubyMine, PhpStorm 테마 설치하기


안녕하세요.
고코더 입니다. 


 1. 인텔리제이 제품군들은 다른 개발프로그램들 처럼 
테마 변경이 가능합니다.
기본 테마는 이쁘긴 하지만 제 스타일은 아닙니다.
-> PhpStorm,WebStorm - 기본 테마 변경하기 / 다크테마(Darcula)



 2. 그래서 인텔리제이 프로그램들에 적용 가능한
다양한 테마를 다운로드 할 수 있는 사이트가 있습니다.
바로 컬러-테마 닷컴 입니다 입니다.


 3. 접속 후에 각 테마를 클릭하면 적용 가능한 제품군이 보입니다. 
인텔리젠 프로그램은 대부분 적용 가능한 테마 입니다. 


 4. 굉장히 많은 테마가 있지만
성의 없는 테마도 많기에
정렬 상태를 인기 순으로 하셔서 적용해보세요.



마무리


눈에 딱 맞는
테마는 개발에 첫걸음입니다. 









댓글을 달아 주세요


드라큘라 테마로 변경


안녕하세요.
고코더 입니다.


 1.우리나라에서
흔히 드라큘라 다크테마라고 불리는 것들이
서양에서는 드라큘라 테마라고 많이 합니다.
(빛을 싫어한다나)

 2. 그래서 이클립스도 그렇지만
인텔리제이도 어두운 빛이 적은 드라큘라 테마를 사용할 수 있습니다.


 3. 인텔리 프로그램들은 기본테마는 조금 촌스럽습니다.


 4Settings에 들어가서
Appearance를 찾습니다.
그리고 여기서 theme 를 선택할 수 있습니다.


 5제가 사용하는 2017 버전은 3가지 버전이 있는데요
드라큘라 버전을 선택하고 OK를 눌러보겠습니다.


 6그럼 어둡고 빛이 적은 드라큘라 테마가 생성했습니다. 기본테마라 어두운 테마가 필요한분은
이 테마로 사용해보세요.




마무리


눈에는 어두운게 좋죠


댓글을 달아 주세요


인텔리제이 프로그램들은 JDK가 설치가 필수


안녕하세요.
고코더 입니다.


 1. 대부분에 인텔리제이 프로그램들
(webstorm, phpstorm등등)
실행할시에 해당 오류 메세지가 보일때가 있습니다.
No JVM installation found. Please install a 32-bit JDK.
If you already have a JDK installed, define a JAVA_HOME variable in Computer > System properties > System Settings > Environment Variables.



 2. 자바 프레임 워크로 만들어진 인텔리J 프로그램들은 JDK 프로그램이 필수 입니다.
JDK를 설치하거나 시스템 변수에 등록을 해줘야 합니다.

 3. 만약에 JDK 설치가 완료되었는데
해당 메세지가 뜬다면
bit 에 따른 프로그램 실행 EXE 버튼이 다릅니다.
자신에 JDK 비트에 맞는 프로그램을 실행 해야 합니다. 



마무리


시작부터 막히셔서 짜증나셨죠.
설치만하면 개발 탄탄 대로 입니다. 


댓글을 달아 주세요


코드 미리보기 설치


안녕하세요.
고코더 입니다.


jetbrain 제품에 기본 설정이 아쉬운것중에 하나가
코드 미니맵을 제공하지 않는 것 입니다. 

그래서 확장프로그램으로 
codeglance를 설치하면 되는데

이상하게 플러그인에서 검색하면
해당 확장프로그램 나오질 않습니다.

그래서 홈페이지에서 제공하는
jar 파일을 다운받아 설치해야 합니다.

▼해당 URL에서 
최신버전 코드글랜스를 다운로드 해주세요.



▼그리고 setiings->plugins로 접근합니다
(ctrl+alt+s 를 눌러 plugins를 검색하세요)
그리고 install plugin from disk를 클릭 합니다.



▼ 다운받은 파일을 선택합니다.


▼ 설치 후에 restart PhpStorm을 클릭해
재시작 합니다.


▼해당 플러그인이 설치가 잘되었네요 



▼그리고 이제 소스창을 열면
오른쪽에 미리보기 미니맵 코드 창이 생겨 있습니다. 



jetbrain 툴을 쓰신다면
개인적으로 추천하는
필수 확장 프로그램이라고 생각합니다.


마무리


기본으로 탑재 하면 좋겠는데.


댓글을 달아 주세요


PHP스톰 에디터 색상 변경 


안녕하세요
고코더 입니다.

PHPSTORM을 사용하다보면 
글자색을 바꾸고 싶을때가 있습니다.

저는 개인적으로 비주얼 스튜디오 다크테마의 색을 좋아합니다.
그래서 새로운 IDE를 사용할때 사용했던 다크테마의 색을 따라해서
글자색을 바꿔 놓습니다.

당연히 PHP스톰에도 이러한 에디터 컬러를 바꿀수 있는 기능이 있습니다.
오늘은 한번 이 설정을 알아보겠습니다. 

설정으로 향하는 단축키를 누릅니다.

++

CTRL + ALT + S



그리고 Editor -> Color Scheme 에서
변경하고 싶은 언어를 클릭 합니다. 


그리고 Foreground에서 컬러를 클릭해 
빨간색으로 바꿔 봤습니다.


변수 색깔이 빨간색이니 눈이 아프네요



PHP스톰은 이렇게 예시로된 코드를 마우스로 눌러서
색깔을 자유자재로 바꿀 수 있습니다.

자신에게 맞는 컬러로 한번 변경해보세요.


마무리


저는 IDE마다 저만의 색상으로 만들어 설정값을 가지고 있습니다.


댓글을 달아 주세요