반응형

프로그램, HTML 코딩을 하다 보면 소스 정리와 자동 정렬의 필요가 생기게 됩니다.

이 때, 아톰에서 유용한 패키지를 설치하여 사용하면 편리하게 할 수 있습니다.

 

저의 경우 아래 2가지 패키지를 이용합니다.

atom-alignment

name value 형식을 정렬 정리하여 줍니다.

atom-alignment

auto-indent

html 문법 구조에 맞게 자동으로 들여쓰기를 하여 줍니다.

auto-indent 설치 및 사용방법

 

 

 

 

atom-beautify

많은 사람들의 사랑을 받고 있는 패키지입니다.

atom-beautify 설치 및 사용방법

 

PHP 소스코드에서 atom-beautify를 사용할 때 아래와 같은 에러가 발생하는 경우 해결 방법입니다.

Could not find 'php-cs-fixer'. The program may not be installed.

See php-cs-fixer installation instructions at https://github.com/Glavin001/atom-beautify#beautifiers or go to https://github.com/FriendsOfPHP/PHP-CS-Fixer
Your program is properly installed if running 'where.exe php-cs-fixer' in your CMD prompt returns an absolute path to the executable.
Hide Stack Trace
Error: Could not find 'php-cs-fixer'. The program may not be installed.
    at Function.Executable.commandNotFoundError (file:///C:/Users/Administrator/.atom/packages/atom-beautify/src/beautifiers/executable.coffee:277:10)
    at HybridExecutable.Executable.commandNotFoundError (file:///C:/Users/Administrator/.atom/packages/atom-beautify/src/beautifiers/executable.coffee:269:18)
    at file:///C:/Users/Administrator/.atom/packages/atom-beautify/src/beautifiers/executable.coffee:197:22
    at tryCatcher (C:\Users\Administrator\.atom\packages\atom-beautify\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (C:\Users\Administrator\.atom\packages\atom-beautify\node_modules\bluebird\js\release\promise.js:547:31)
    at Promise._settlePromise (C:\Users\Administrator\.atom\packages\atom-beautify\node_modules\bluebird\js\release\promise.js:604:18)
    at Promise._settlePromise0 (C:\Users\Administrator\.atom\packages\atom-beautify\node_modules\bluebird\js\release\promise.js:649:10)
    at Promise._settlePromises (C:\Users\Administrator\.atom\packages\atom-beautify\node_modules\bluebird\js\release\promise.js:725:18)
    at _drainQueueStep (C:\Users\Administrator\.atom\packages\atom-beautify\node_modules\bluebird\js\release\async.js:93:12)
    at _drainQueue (C:\Users\Administrator\.atom\packages\atom-beautify\node_modules\bluebird\js\release\async.js:86:9)
    at Async._drainQueues (C:\Users\Administrator\.atom\packages\atom-beautify\node_modules\bluebird\js\release\async.js:102:5)
    at Async.drainQueues (C:\Users\Administrator\.atom\packages\atom-beautify\node_modules\bluebird\js\release\async.js:15:14)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:89:5)

PHP 소스코드에서 atom-beautify를 사용할 때 발생하는 에러

 

1. PHP 실행 파일을 다운로드하여 설치를 합니다.

   https://windows.php.net/download/
   (참고)
   x86 Non Thread Safe : 32bit IIS 서버
   x86 Thread Safe :  32bit 아파치(Apache) 서버
   x64 Non Thread Safe :  64bit IIS 서버
   x64 Thread Safe : 64bit 아파치(Apache) 서버

  파일을 다운로드하여 압축을 푼 후 C:\bin\ 아래에 폴더 통채로 저장을 합니다.

 

2. php-cs-fixer-v2.phar 다운로드하여 설치를 합니다.
  아래 첨부 파일을 다운로드하여 C:\bin\ 아래에 저장을 합니다.

 

PHP-CS-Fixer-2.16.zip
0.90MB

 

3. Settings > Executables > PHP > Binary/Script Path에 방금 저장한 php 실행 파일의 경로를 입력합니다.

C:\bin\php-7.4.11-Win32-vc15-x64\php.exe

 

4. Settings > Executables > PHP-CS-Fixer > Binary/Script Path에 방금 저장한 php-cs-fixer-v2.phar 파일의 경로를 입력합니다.

C:\bin\php-cs-fixer-v2.phar

atom-beautify 실행 시 에러시 설정 방법

위와 같이 설정을 하고 나면 atom-beautify 실행 시 에러가 나지 않습니다.

이제는 PHP 파일 내에서도 html 코드 정렬을 할 수가 있습니다. 

하지만 PHP 소스코드 정렬은 전혀 되지 않는 듯 합니다. 
자동 정렬 방법을 더 공부해야 겠습니다.

2019/10/17 - [유용한 활용팁] - HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom) 설치 방법

 

HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom) 설치 방법

HTML5, CSS3, JavaScript, PHP 에디터 편집기로 무료인 아톰을 많이 사용합니다. 아톰 설치 방법입니다. 1. 구글 검색 사이트에서 "atom"으로 검색을 합니다. 2. 검색 후 Atom 사이트에 접속을 하시고 아톰을

han288.tistory.com

 

2019/11/06 - [유용한 활용팁] - HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom)에서 글자(폰트,Font) 크기(사이즈,Size) 변경 방법

 

HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom)에서 글자(폰트,Font) 크기(사이즈,Size) 변경 방법

HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom)에서 글자(폰트,Font) 크기(사이즈,Size) 변경 방법하는 방법입니다. 노트북의 해상도를 최고로 하게 되면 실제 에디터에서는 글자가 너무 작게

han288.tistory.com

2019/11/22 - [유용한 활용팁] - 서브라임텍스트3 SFTP/FTP 설치하기, 환경 설정하기

 

서브라임텍스트3 SFTP/FTP 설치하기, 환경 설정하기

서브라임텍스트3(Sublime Text 3) SFTP/FTP 설치하고 환경 설정하기입니다. 서브라임텍스트3(Sublime Text 3) SFTP/FTP 설치 1. 메뉴 → Tools → Command Palette... 를 선택합니다. 2. Package Contro..

han288.tistory.com

2020/08/04 - [유용한 활용팁] - Atom Remote-FTP Project Multiple servers Hosts 연결 방법

 

Atom Remote-FTP Project Multiple servers Hosts 연결 방법

아톰에서 프로젝트별로 여러 원격 FTP 서버(다중 호스트)에 연결하는 방법입니다. (Atom Remote-FTP Project Multiple servers Hosts 연결 방법) 1. remote-ftp 2.2.4 설정 - Beta strategies > Be..

han288.tistory.com

 

반응형


반응형

HTML5, CSS 편집기 아톰(Atom)에서 Emmet을 이용한 A태그(Tag) 생성 방법입니다.

 

HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 단축키

a[#].icon$>span{icon$} + TAB

HTML5, CSS 편집기 아톰(Atom) Emmet 유용한 단축키 - A 태그(Tag) 생성 방법

 

HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 생성

A태그 및 그 안의 SPAN 태그도 같이 한번에 생성하였습니다.

HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 생성

HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 복사

생성된 태그에 뒤에 마우스를 놓고 Ctrl + Shift + D 를 통해서 줄 복사를 합니다.

HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 복사

 

HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 편집 및 완성

줄복사한 내용이 숫자들을 순서에 맞게 변경하여 완료합니다.

HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 편집 및 완성

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  a[#].icon$>span{icon$}
  
  <a href="#" class="icon1"><span>icon1</span></a>
  <a href="#" class="icon2"><span>icon2</span></a>
  <a href="#" class="icon3"><span>icon3</span></a>
  <a href="#" class="icon4"><span>icon4</span></a>
  <a href="#" class="icon5"><span>icon5</span></a>

</body>
</html>

 

2019/10/25 - [유용한 활용팁] - HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 유용한 단축키 활용법 - 줄복사, 줄찾기(검색), 일괄주석, 파일검색

 

HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 유용한 단축키 활용법 - 줄복사, 줄찾기(검색), 일괄주석, 파일검색

HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 사용 시 유용한 단축키입니다. 줄 복사 한줄 내용을 그대로 다음줄에 복사합니다. 단축 키 : Ctrl + Shift + d 주석 일괄 처리 원하는 블럭을 한번에 주..

han288.tistory.com

 

반응형


반응형

HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom)에서 글자(폰트,Font) 크기(사이즈,Size) 변경 방법하는 방법입니다.

노트북의 해상도를 최고로 하게 되면 실제 에디터에서는 글자가 너무 작게 나와서 시인성 및 가독성 떨어집니다.

그래서 코딩하기 적당한 사이즈로 변경을 하는 방법을 정리하였습니다.

글자(폰트,Font) 크기(사이즈,Size)는 본인의 취향에 맞게 조절하시면 됩니다.

 

글자(폰트,Font) 크기(사이즈,Size)를 변경하기 위한 아톰 메뉴

아톰 → File → Settings(Ctrl+콤마)를 클릭합니다.

글자(폰트,Font) 크기(사이즈,Size)를 변경하기 위한 아톰 메뉴

 

글자(폰트,Font) 크기(사이즈,Size) 변경을 위한 Settings 메뉴

Settings → Editor 클릭합니다.

Editor Settings에서 Font Size를 찾아갑니다.

Default: 14로 되어 있는데 원하는 숫자만을 넣습니다. 

글자(폰트,Font) 크기(사이즈,Size) 변경을 위한 Settings 메뉴

변경한 글자(폰트,Font) 크기(사이즈,Size) 아톰에 반영 처리

숫자를 입력 후 변경된 내용을 반영하여야 합니다.

Editor Settings에는 반영하는 버튼이 없습니다.

Settings → Updates를 클릭하여 Avilable Updates 화면으로 들어갑니다.

Avilable Updates 화면에서 Check for Updates를 클릭합니다.

Checking for updates... 가 출력이 되면서 변경된 내용을 아톰에 반영을 합니다.

All of your installed packages are up to date! 라는 메시지가 나오면 반영이 완료 됩니다.

변경한 글자(폰트,Font) 크기(사이즈,Size) 아톰에 반영 처리

 

2019/10/15 - [유용한 활용팁] - 소스코드 편집기 아톰(Atom) FTP(remote-ftp) Package 설치, SFTP 연결 설정, 서버 여러대(다중 호스트) 연결 방법 - FTP접속 오류 해결

 

소스코드 편집기 아톰(Atom) FTP(remote-ftp) Package 설치, SFTP 연결 설정, 서버 여러대(다중 호스트) 연결 방법 - FTP접속 오류 해결

아톰(Atom) Github에서 개발한 문서 및 소스코드 편집기입니다. 구글 오픈소스웹브라우저프로젝트인 크로미엄기반 CoffeeScript로 작성되었으며, 무료로 제공을 하고 있습니다. 또한 플러그인을 통한 확장성을 가..

han288.tistory.com

2019/10/25 - [유용한 활용팁] - HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 유용한 단축키 활용법 - 줄복사, 줄찾기(검색), 일괄주석, 파일검색

 

HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 유용한 단축키 활용법 - 줄복사, 줄찾기(검색), 일괄주석, 파일검색

HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 사용 시 유용한 단축키입니다. 줄 복사 한줄 내용을 그대로 다음줄에 복사합니다. 단축 키 : Ctrl + Shift + d 주석 일괄 처리 원하는 블럭을 한번에 주..

han288.tistory.com

2019/10/28 - [유용한 활용팁] - HTML5, CSS 편집기 아톰(Atom) Emmet 유용한 단축키 - HTML전문, DIV생성, CSS3 width/height/padding/margin 생성

 

HTML5, CSS 편집기 아톰(Atom) Emmet 유용한 단축키 - HTML전문, DIV생성, CSS3 width/height/padding/margin 생성

아톰(Atom)을 사용하여 HTML5를 편집을 위해 Emmet 플러그인을 설치하였습니다. Emmet의 유용한 단축키 활용법입니다. HTML 전문 한번에 만들기 기본적으로 HTML 단축키를 사용하려면 해당 파일의 확장자가 .html..

han288.tistory.com

2019/10/17 - [유용한 활용팁] - HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom) 설치 방법

 

HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom) 설치 방법

HTML5, CSS3, JavaScript, PHP 에디터 편집기로 무료인 아톰을 많이 사용합니다. 아톰 설치 방법입니다. 1. 구글 검색 사이트에서 "atom"으로 검색을 합니다. 2. 검색 후 Atom 사이트에 접속을 하시고 아톰을 다..

han288.tistory.com

 

반응형


반응형

아톰(Atom)을 사용하여 HTML5를 편집을 위해 Emmet 플러그인을 설치하였습니다.

Emmet의 유용한 단축키 활용법입니다.

 

HTML 전문 한번에 만들기

기본적으로 HTML 단축키를 사용하려면 해당 파일의 확장자가 .html이어야 합니다.

또는 아래와 같이 현재 문서의 포맷을 바꿔 주시면 화인이 가능합니다.

아톰에서 신규 페이지를 만들면 untilted라고 페이지가 나옵니다.

이때의 페이지 설정은 Plan Text이며, 이 부분을 마우스로 클릭합니다.

아톰에서 문서 포맷 바꾸기

여기서 HTML로 되어 있는 부분을 선택하시면 아톰은 해당 파일을 HTML로 인식을 합니다.

아톰에서 문서 포맷을 HTML로 바꾸기

한번에 HTML 전문을 만드는 방법은 !(느낌표) + TAB키입니다.

!+탭키를 누르는 화면
! 단축키로 HTML 한번에 만든 화면

DIV 태그 한번에 만들기

원하는 클래스, 아이디가 들어간 DIV와 하위 DIV를 한번에 만드는 방법입니다.

원하는 클래스가 들어간 경우 : .content>div*3 + TAB

원하는 클래스가 들어간 DIV와 하위 DIV 한번에 만드는 단축키

content라는 클래스가 들어간 DIV와 하위 DIV가 한번에 생겼습니다.

원하는 클래스가 들어간 DIV와 하위 DIV 한번에 만들어진 화면

원하는 아이디가 들어간 경우 : #wrap>div*3 + TAB

원하는 아이디가 들어간 DIV와 하위 DIV 한번에 만드는 단축키

wrap이라는 아이디가 들어간 DIV와 하위 DIV가 한번에 생겼습니다.

원하는 아이디가 들어간 DIV와 하위 DIV 한번에 만들어진 화면

 

container class가 들어가 dvi 생성하는 화면

 

스타일시트에서 width, height 값 넣는 단축키

w100 + TAB :  width: 100px

h100 + TAB :  height: 100px

w100p + TAB :  width: 100%

h100p + TAB :  height: 100%

스타일시트에서 width, height 값 넣는 단축키

 

스타일시트에서 margin, padding 값 넣는 단축키

m0 +TAB : margin: 0

p0 + TAB : padding: 0

스타일시트에서 margin, padding 값 넣는 단축키

 

2019/10/15 - [유용한 활용팁] - 소스코드 편집기 아톰(Atom) FTP(remote-ftp) Package 설치, SFTP 연결 설정, 서버 여러대(다중 호스트) 연결 방법 - FTP접속 오류 해결

2019/10/17 - [유용한 활용팁] - HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom) 설치 방법

2019/10/25 - [유용한 활용팁] - HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 유용한 단축키 활용법 - 줄복사, 줄찾기(검색), 일괄주석, 파일검색

반응형


반응형

HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 사용 시 유용한 단축키입니다.

 

줄 복사

한줄 내용을 그대로 다음줄에 복사합니다.

단축 키 : Ctrl + Shift + d

에디터 아톰(atom) 줄복사 단축키

 

주석 일괄 처리

원하는 블럭을 한번에 주석 처리를 합니다.

단축키 : Ctrl + Shift + /(역슬래시)

편집기 아톰(atom) 주석 일괄 처리 단축키

 

줄 찾기

원하는 줄로 한번에 갈 수 있게 합니다.

단축키 : Ctrl + G

에디터 아톰(atom) 원하는 줄 찾기 - 원하는 줄 입력 화면
에디터 아톰(atom) 원하는 줄 찾기 - 원하는 줄로 이동한 화면

 

파일 찾기

프로젝트 내에서 원하는 파일을 일괄로 찾게 합니다.

입력한 텍스가 포함된 모든 파일을 찾습니다.

단축키 : Ctrl + P

에디터 아톰(atom) 원하는 파일 찾기 - 프로젝트 내에서 검색 화면

 

 

 

HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom) 설치 방법

HTML5, CSS3, JavaScript, PHP 에디터 편집기로 무료인 아톰을 많이 사용합니다. 아톰 설치 방법입니다. 1. 구글 검색 사이트에서 "atom"으로 검색을 합니다. 2. 검색 후 Atom 사이트에 접속을 하시고 아톰을

han288.tistory.com

 

 

소스코드 편집기 아톰(Atom) FTP(remote-ftp) Package 설치, SFTP 연결 설정, 서버 여러대(다중 호스트) 연��

아톰(Atom) Github에서 개발한 문서 및 소스코드 편집기입니다. 구글 오픈소스웹브라우저프로젝트인 크로미엄기반 CoffeeScript로 작성되었으며, 무료로 제공을 하고 있습니다. 또한 플러그인을 통한

han288.tistory.com

 

반응형


반응형

HTML5, CSS3, JavaScript, PHP 에디터 편집기로 무료인 아톰을 많이 사용합니다.

아톰 설치 방법입니다.

1. 구글 검색 사이트에서 "atom"으로 검색을 합니다.

구글 검색 사이트에서 아톰 검색 화면

2. 검색 후 Atom 사이트에 접속을 하시고 아톰을 다운로드 합니다.

아톰 다운로드

3. 설치를 다 한 후 코딩에 유용한 플러그인을 설치합니다.
1) FILE → Settings → Install 선택

아톰 플러그인 설치 메뉴 화면


2) 필수 설치 플러그인
- Emmet : HTML , CSS, Javascript, PHP 자동 완성기능

Emmet 플러그인 검색 화면

- pigments : 색상코드의 컬러 표시

pigments 플러그인 검색 화면

- sync-settings : 지금 사용하고 있는 PC 환경설정을 다른 장소의 PC에서도 동일한 환경 설정을 할 수 있게 함

아톰 플러그인 sync-set tings 검색 화면

- atom-beautify : HTML 자동 정렬

atom-beautify  : HTML 자동 정렬

- minimap : 전체 소스를 오른쪽에 보여주고 현재 소스 위치를 표시하여 줌

minimap   : 전체 소스를 오른쪽에 보여주고 현재 소스 위치를 표시하여 줌

- highlight-line : 내가 위치한 Row를 하이라이트하여 줌

highlight-line : 내가 위치한 Row를 하이라이트하여 줌

- tool-bar : 열어논 탭의 파일확장자에 따라 각각 프로그램 아이콘을 보여줌

-  tool-bar  : 열어논 탭의 파일확장자에 따라 각각 프로그램 아이콘을 보여줌

- seti-icons : 아톰 탐색기에 표시되는 각 파일의 확장자 아이콘을 보여줌

-  seti-icons : 아톰 탐색기에 표시되는 각 파일의 확장자 아이콘을 보여줌

- Auto close HTML  : html 태그 자동 닫기 기능

Auto close HTML  : html 태그 자동 닫기 기능

- sublime-style-column-selection, sublime-block-comment : 아톰에서 세로 드래그 기능 사용 가능

sublime-style-column-selection
sublime-block-comment

- atom-live-server : 실시간 소스 보기

atom-live-server  : 실시간 소스 보기

- atom-bracket-hightlight : (), {}, [] 와 같은 괄호의 색깔을 다르게 하여 가독성을 높여줌

atom-bracket-hightlight : (), {}, [] 와 같은 괄호의 색깔을 다르게 하여 가독성을 높여줌

- minimap-hide : 패널 분리한 곳만 미니맵을 보여주게 함

minimap-hide : 패널 분리한 곳만 미니맵을 보여주게 함

- linter-eslint: 자바스크립트 문법에러를 표시해 줍니다. 단, 설치 후에 원하는 규칙을 추가가 필요합니다.

linter-eslint: 자바스크립트 문법에러를 표시해 줍니다. 단,  설치 후에 원하는 규칙을 추가가 필요합니다.

- aligner : key와 value를 이쁘게 정렬하여 줍니다.

aligner : key와 value를 이쁘게 정렬하여 줍니다.

- language-babel : es6 지원

language-babel : es6 지원

- linter-jshint : 자바스크립트 자동완성 표시

linter-jshint  : 자바스크립트 자동완성 표시

- atom-ternjs : javascript, ES6, Node.js, jQuery, AngularJS 자동완성기능 제공

atom-ternjs : javascript, ES6, Node.js, jQuery, AngularJS  자동완성기능 제공

project-plus : 작업 이력을 표시하여 원복하기 편리합니다.

project-plus : 작업 이력을 표시하여 원복하기 편리합니다.

- swackets : 블럭마다 다른 색상 지정하여 코딩할 때 가독성이 좋습니다.

swackets : 블럭마다 다른 색상 지정하여 코딩할 때 가독성이 좋습니다.

여기까지 추천해 드린 플러그인을 설치하여 줍니다.
개인 취향에 따라서 플러그인은 취사 선택하셔도 됩니다.

이제 아톰을 사용할 준비는 되었습니다.

 

만약, 서버에 FTP로 접속하여 작업을 하여야 한다면, 아래 포스팅을 확인하시면 됩니다.

2019/10/15 - [유용한 활용팁] - 소스코드 편집기 아톰(Atom) FTP(remote-ftp) Package 설치, SFTP 연결 설정, 서버 여러대(다중 호스트) 연결 방법 - FTP접속 오류 해결

반응형


반응형

아톰(Atom) Github에서 개발한 문서 및 소스코드 편집기입니다.

구글 오픈소스웹브라우저프로젝트인 크로미엄기반 CoffeeScript로 작성되었으며, 무료로 제공을 하고 있습니다.
또한 플러그인을 통한 확장성을 가지고 있습니다.

아톰을 통해서 서버에 FTP로 접속을 위한 설정 방법을 소개해 드립니다.

아톰의 FTP 접속 방법은 Romote 탭에서 선택한 소스 파일을 먼저 Local에 다운로드를 한 후
수정된 파일으로 업로드하는 형태입니다. (기본 설정을 바꾸지 않으시면 이 설정이 기본 설정입니다.)

얼마전부터 21번 포트를 이용하여 일반 FTP로 서버 접속을 하게 되면,
소스 다운로드가 정상적으로 되지 않는 반면,
제 PC에 있는 파일을 수정하면 정상적으로 서버에는 반영이 되는 접속 오류가 생겼습니다.

호스팅 업체에서는 보안을 이유로 SFTP 접속 권장을 하고 있는데,
FTP 연결 방법을 SFTP로 변경을 하니, 예전과 동일하게 정상적으로 소스 다운로드 후 수정 작업이 가능해졌습니다.

그럼 패키지 설치부터 다중 호스트 연결까지 정리하도록 하겠습니다.

1. 패키지 설치

메뉴 → File → Settings → Install로 이동을 함

패키지 설치를 위한 메뉴

Install Packages에서 "remote-ftp"로 검색을 한 후 "remote-ftp 2.2.2"를 설치

패키지 설치를 위한 Install Packages 검색

2. SFTP 연결

FTP를 연결할 디렉토리 생성

아톰 SFTP 연결을 위한 디렉토리 생성

신규로 생성된 폴더를 Project에 추가

아톰 SFTP 연결을 위해 생성한 디렉토리를 프로젝트에 추가

메뉴 → Packages → Remote FTP → Create SFTP config file 선택

아톰 SFTP Config 파일 생성

.ftpconfig 파일이 생성이 되며, 계정 및 디렉토리 경로를 입력
- 아래 표시된 4곳만 설정하면 접속 가능합니다.

아톰 SFTP 연결을 위한 기본 설정

메뉴 → Packages → Remote FTP → Toggle 선택

아톰 SFT 연결을 위한 탭 활성화

좌측 화면에서 Romote Tab 선택 후 Connect 선택 후 접속 확인

아톰 SFTP로 서버 정상 접속 화면

3. 멀티 FTP 연결 방법
메뉴 → File → Settings → Packages →Settings 선택

아톰 FTP 다중 호스트 설정 메뉴

설정값 중간 정도에 "Beta strategies"에서 Beta Multiple Hosts 체크

아톰 FTP 다중 호스트 설정 값

다른 디렉토리를 추가 후 위와 같이 동일한 방법으로 FTP연결을 하면 2개의 서버를 접속 가능

반응형

+ Recent posts