[Atom] Atom Editor로 FTP, SFTP 접속하기

Atom Editor 2018. 2. 3. 19:30



■ Atom Editor로 FTP, SFTP 접속하기




※ 아톰 에디터를 사용해서 FTP 및 SFTP로 접근하기 위해서는 Remote-FTP라는 패키지를 따로 설치해 주어야한다.




01. FTPSFTP 연결을 위한 Remote-FTP 를 설치하기위해 세팅 창을 연다.

 ① 상단 메뉴창에서 File을 선택한다.

 ② Settings 메뉴를 클릭한다.




02. 세팅창이 열리면 아래 순서대로 진행하여 Remote-FTP를 설치한다.

 ① Settings 창을 선택한다.

 ② 우측 메뉴에서 Install 항목을 선택한다.

 ③ 검색창에 remote ftp 라고 기입한다.

 ④ packages 버튼을 클릭한다.

 ⑤ remote-ftp 항목이 보이면 Install 버튼을 클릭하여 설치를 진행한다.





03. 설치가 완료되면 이제 Remote-FTP를 사용하여 ftp, sftp 접속을 실행해 보자.

 ① 상단 메뉴창에서 Packages 메뉴를 선택한다.

 ② 설치된 Remote-FTP 항목을 선택한다.

 ③ Toggle을 선택한다.




04. .ftpconfig 파일이 생성되면 저장하고 아래와 같은 순서대로 진행한다.

 ① Edit Configuration 버튼을 클릭한다.

 ② .ftpconfig 파일이 오픈된다.

 ③ 아래와 같이 접속을 위한 값들을 작성하자.

 ④ 작성이 끝나면 .ftpconfig 파일을 저장하고 Connect 버튼을 클릭한다.




※ FTP, SFTP로 접속하기위한 양식은 아래와 같다.

FTP로 접속할 경우

 SFTP로 접속할 경우

{

  "protocol" : "ftp"

, "host" : "호스트 _주소_입력"

, "port" : 21

, "user" : "유저이름_입력"

, "pass" : "비밀번호_입력"

, "promptForPass" : false

, "remote" : "FTP_접속_경로_입력"

, "local" : ""

, "agent" : ""

, "privatekey" : ""

, "passphrase" : ""

, "hosthash" : ""

, "ignorehost" : true

, "connTimeout" : 10000

, "keepalive" : 10000

, "keyboardInteractive" : false

, "keyboardInteractiveForPass" : false

, "remoteCommand" : ""

, "remoteShell" : ""

, "watch" : []

, "watchTimeout" : 500

}

{

  "protocol" : "sftp"

, "host" : "호스트 _주소_입력"

, "port" : 22

, "user" : "유저이름_입력"

, "pass" : "비밀번호_입력"

, "promptForPass" : false

, "remote" : "FTP_접속_경로_입력"

, "local" : ""

, "agent" : ""

, "privatekey" : ""

, "passphrase" : ""

, "hosthash" : ""

, "ignorehost" : true

, "connTimeout" : 10000

, "keepalive" : 10000

, "keyboardInteractive" : false

, "keyboardInteractiveForPass" : false

, "remoteCommand" : ""

, "remoteShell" : ""

, "watch" : []

, "watchTimeout" : 500

}





'Atom Editor' 카테고리의 다른 글

[Atom] Atom Editor로 FTP, SFTP 접속하기  (0) 2018.02.03

[AJAX] AJAX를 사용하여 파일 업로드 하기

jQuery/AJAX 2018. 2. 2. 18:00




참조 : http://b1ix.net/213



■ AJAX를 사용하여 파일 업로드 하기



 웹 페이지를 제작하는 과정에서 파일을 업로드시 페이지를 새로고침 하지 않고 등록해야 하는 경우가 종종 발생한다.

 그러한 경우에 AJAX를 사용하여 파일을 손쉽게 올려보도록 하자.



AJAX로 파일을 업로드 시에 업로드 된 파일 데이터를 넘겨주기 위해서는 아래 사항을 꼭 설정해야 한다.


 ① (form)의 값이 AJAX를 통해서 넘어가기 때문에 from에 enctype="multipart/form-data"를 꼭 필요로 하지 않는다.

 ② FormData : 해당 폼의 모든 값들(file포함)을 해당 객체에 한번에 담아 보내기 위해 사용된다. (ie10부터 사용가능)

 ③ processData

   -. 기본 값은 true이다.

   -. 해당 값이 true일때는 data 값들이 쿼리스트링 형태인 key1=value1&key2=value2 형태로 전달된다.

   -. 하지만 이렇게 하면 file 값들은 제대로 전달되지 못한다.

   -. 그래서 해당 값을 false로 해주어 { key1 : 'value1', key2 : 'value2' } 형태로 전달해 주어야 file 값들이 제대로 전달된다.

 ④ contentTyp

   -. 기본값은 'application/x-www-form-urlencoded'이다. 해당 기본 타입으로는 파일이 전송 안되기 때문에 false로 해주어야 한다.





# 소스코드


01. 파일을 업로드할 페이지의 코드는 아래와 같다.

 ajaxFormUpload.php

<html>
<head>
<title>:: AJAX 파일전송 ::</title>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    function ajaxFileUpload() {


        var form = jQuery("ajaxFrom")[0];
        var formData = new FormData(form);
        formData.append("message", "ajax로 파일 전송하기");
        formData.append("file", jQuery("#ajaxFile")[0].files[0]);

        jQuery.ajax({
              url : "./ajaxFormReceive.php"
            , type : "POST"
            , processData : false
            , contentType : false
            , data : formData
            , success:function(json) {
                var obj = JSON.parse(json);
            }
        });
    }
</script>
</head>
<body>
<form enctype="multipart/form-data" id="ajaxFrom" method="post">
    <input type="file" id="ajaxFile"/>
    <input type="button" onClick="ajaxFileUpload();" value="업로드"/>
</form>
</body>
</html>





02. 업로드된 파일의 결과를 출력할 결과는 아래와 같다.

 ajaxFormReceive.php

<?php
    echo "### POST ###";
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";

    echo "### FILE ###";
    echo "<pre>";
    print_r($_FILES);
    echo "</pre>";
?>




# 출력결과



01. 업로드할 파일을 선택한뒤 파일을 전송한다.




02. 이제 개발자 창을 띄워보면 해당 값들이 정상적으로 전송된 모습을 확인 할 수 있다.




이렇게 전송이 되는 모습을 확인 할 수 있다.


이렇게 AJAX로 파일 전송을 하게 되는 경우의 수증에 하나는.


UI / UX 등 디자인 이나 사용자 편의를 위해서인 경우도 있는데


그러한 이유는 다음 포스팅에 정리해 두었으니 기회가 되면 봐두는것도 좋을 것 이다.


예제활용 : [AJAX] input type="file" 없이 파일 전송하기