Atom설치 및 nodejs package setting

반응형
728x90
반응형
 
Introduction

  책의 예제를 따라 node.js를 macOS에 설치하고, 개발툴로 brackets을 사용하고 있었습니다. 그리고 brackets으로 mongoDB 등 co-work 등을 수행하면서 두세번 정도 컴퓨터가 뻗었습니다. 맥북으로 개발하면서 뻗는 경우는 정말 드물었는데 brackets에서 멈추는 경우가 종종 있어서 Atom으로 개발툴을 넘어가고자 합니다. Atom은 sublime text 와 유사하게 기본 툴 설치 이후 package를 개별설치하게 됩니다. 개별 설치하는 package를 일일이 검색하기 귀찮을 것 같아, 블로그에 포스팅을 하기로 하였습니다. 
 
 
Install the Atom

 
 
아톰(Atom)을 설치하기위해서 아래의 링크에 접속하여 OS에 맞춰서 설치를 하시면 됩니다. 그리고 node.js를 컴파일 하기위해서는 Config 설정에서 아래의 코드를 입력하도록 합니다. (다른 블로그에 다들 그렇게 설정을…)
 
처음 실행한 아톰(Atom)툴이기때문에 찾기 힘들 경우, 위의 그림과 같이 Help도구를 이용하여 검색을 하시면 됩니다. 
 
 
runner:
  scopes:
    js:"node"
 
  • 코드 저장 
 
이제 기본 설치는 완료 하였고 package List를 참조하여 필요에 따라 추가 설치하시면 됩니다. 

 

 

 
package list

  • highlight-selected: 단어를 더블클릭했을때 해당 파일에 같은 단어들을 표시해 주는 기능
  • linter: 문법 오류알림 (참고: linter 데이터는 따로 설치필요)
    • linter-jshint: javascript파일(.js)의 문법 오류 알림
    • linter-csslint: css파일(.css)의 문법 오류 알림
  • file-icon-supplement: 확장자에 맞춰서 atom 아이콘을 변경합니다.
  • atom-runner: 실행 도우미 (Win: Alt + R), (Mac: Ctrl + R)  (키가 잘못되면 알려주세요ㅠㅠ)
  • script: script 실행 도우미 (Mac: Cmd + i)
  • emmet: HTML 태그 등 웹 개발 지원
  • minimap: 소스코드 좌측/우측에 미니맵 추가 
  • atom-beautify: 코드 정렬
  • color-picker: 코드 내에서 색상 선택툴
  • file-icons: 트리뷰 아이콘 칼러 추가
  • pigments: 문서내 색상코드 가시화
    • minimap-pigments
  • remote-ftp: ftp 사용가능 패키지
  • sync-settings: 다양한 기기에서의 개발환경 동기화
  • activate-power-mode: 타이핑 할 때, 타격감 효과

 

 

 

 

 
패키지 설치방법 전에 먼저 package list를 먼저 작성한 이유는, 타 블로그 확인시, 스크롤을 일일이 내리며 확인을 해야해서…
처음에는 하나씩 보겠지만, 이후에는 이름만 보고 후르륵 검색할테죠?…..

 

 

package install

 
  • Install packages 선택
  • packages 검색 및 설치 
    • 상위 package list의 이름을 검색하여 설치하면 됩니다. (추가 그림은 불필요하여 제거)
 
 
인스톨 패키지(install packages) 에서 상위 작성 된 리스트의 이름을 하나씩 검색해서 설치(install)을 하시면 됩니다. 그 외에도 재미있는 패키지들이 몇가지 있었는데, 다른 블로그 등을 참조하여 추가 설치하시면 좋을 듯 합니다. 
 
즐거운 coding Life 되시길!!
728x90
반응형

댓글

Designed by JB FACTORY