ajax 란?

ajax란 Asynchronous Javascript and XML의 약자로 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다.

ajax 사용하기

먼저 아래의 예제를 보자. 아래는 data에 user에 대한 정보를 담아 유저를 생성하는 API를 호출하는 간단한 예제이다.

let data = {
  userId: userId,
  userPw: userPw
};
data = JSON.stringify(data);
 
let url = "http://localhost:3000/users";
 
let xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', "application/json");
xhr.send(data);
 
xhr.addEventListener('load', function() {
  let result = JSON.parse(xhr.responseText);
 
  switch(xhr.status) {
    case 200:
      // 성공 처리
      break;
    case 404:
      // 예외 처리
      break;
  }
 
  // console.log(xhr.responseText);
  // console.log(xhr.status);
  // console.log(result);
});

먼저 XMLHttpRequest 객체를 생성한다.

let xhr = new XMLHttpRequest();

open() 를 통해 POST, GET, PUT, DELETE 인지 정할 수 있다.

세 번째 인자로 true를 주면 async를 의미하고 false를 주면 sync를 의미한다.

xhr.open('POST', url, true);

send()를 통해 data를 전송한다.

xhr.send(data);

load 이벤트를 등록하여 서버로부터 response가 올 때의 행동을 구현할 수 있다.

xhr.status 는 서버로부터 전송받은 status code를 의미한다. 상황에 맞게 처리하면 된다.

xhr.responseText 는 서버로부터 받은 데이터를 의미하는데 String 형태로 받기 때문에 상황에 따라 JSON 형태로 파싱하여 사용해야 한다.

xhr.addEventListener('load', function() {
  let result = JSON.parse(xhr.responseText);
 
  switch(xhr.status) {
    case 200:
      // 성공 처리
      break;
    case 404:
      // 예외 처리
      break;
  }
});

정리

ajax를 통해 동적인 웹 브라우저를 구현할 수 있게 되었다. 하지만 직접 사용하다보니 jquery의 한계점을 조금은(?) 경험하게 되었다.

DOM 이 수정되면 기존의 jQuery는 알지 못하여 이벤트를 매번 관리를 해주어야 한다. ajax 로직이 생각보다 커졌다. 프론트 엔드 프레임워크를 사용하면 이 문제점을 보완할 수 있다고 하니 프레임워크를 공부해봐야 겠다.

'IT > FrontEnd' 카테고리의 다른 글

XMLHttpRequest 간단 소개  (0) 2018.03.23

도큐먼트들로부터 특정 필드 삭제하기

만약 user이라는 모델에 특정 필드 A를 삭제하고 싶다면 mongodb 에 다음과 같은 명령어를 사용할 수 있다.

db.users.update({}, {$unset: {A:1}})

위의 명령어가 의미하는 것은 그냥 아무거나 하나의 도큐먼트의 A 필드를 삭제하겠다는 것을 의미한다.

만약 다수의 도큐먼트를 처리하기 위해서는 다음과 같이 옵션을 추가하면 된다.

db.users.update({}, {$unset: {A:1}}, {multi: true})

정리

$unset 옵션은 특정 필드의 삭제를 의미한다.

반대로 $set은 특정 필드의 값을 정한다.

위의 원리를 이용하면 특정 필드의 값도 한꺼번에 set할 수 있다.

아래 예제는 모든 도큐먼트에 A 필드에 3이라는 값을 set 하는 예제이다.

db.users.update({}, {$set: {A:3}}, {multi: true})


'IT > Mongodb' 카테고리의 다른 글

서브 도큐먼트 검색 후 값 변경  (0) 2018.02.07
$elemMatch vs $in  (0) 2017.10.31
ISO Date 값이 한국 시간과 다를때  (1) 2017.10.31
스키마 모델링 어떻게 해야 하나  (0) 2017.10.21

Atom Remote-FTP 패키지를 이용해 서버와 파일 전송하기

서버에 작업하였던 파일들을 로컬 디렉토리로 옮기고 싶을 때가 있다. 로컬에서 서버로 ssh 접속하였지만 반대로 서버측에서 로컬 컴퓨터로 접속하여 파일을 보내고 싶을 때는 로컬 컴퓨터에서 ftp 혹은 관련 프로토콜을 서비스 할 수 있어야 한다.

그런데 atom의 Remote-FTP 패키지를 이용하면 FileZila 처럼 원하는 remote path를 지정하여 파일을 가져오거나 업로딩 할 수 있다.

  1. 패키지 설치 후 프로젝트를 연다.

  2. Package -> Remote-FTP -> Toggle 을 클릭한다.

  3. Package -> Remote-FTP -> Create (s)FTP config file을 클릭하여 config file을 프로젝트에 추가한다.(.ftpignore 파일이 생성된다.)

  4. 메뉴의 connect, disconnect를 이용하여 연결 후 upload, download를 통해 파일 업로딩 및 다운로드를 할 수 있다.

.ftpignore 파일은 아래와 같이 remote path와 host, user, pass의 정보를 입력하면 된다.

{
    "protocol": "sftp",
    "host": "xxx.xxx.xxx.xxx",
    "port": 22,
    "user": "userName",
    "pass": "password",
    "promptForPass": false,
    "remote": "/var/lib/tomcat7/webapps/ROOT/file",
    "local": "",
    "agent": "",
    "privatekey": "",
    "passphrase": "",
    "hosthash": "",
    "ignorehost": true,
    "connTimeout": 10000,
    "keepalive": 10000,
    "keyboardInteractive": false,
    "keyboardInteractiveForPass": false,
    "remoteCommand": "",
    "remoteShell": "",
    "watch": [],
    "watchTimeout": 500
}
 


'IT > BackEnd' 카테고리의 다른 글

Mysql UDF 작성  (0) 2019.03.20
Crawling을 위한 Selenium, Chrome Driver 설치  (0) 2018.07.15
SSL 인증서 발급 및 Nginx 적용. 그리고 체인 이슈 해결하기  (1) 2018.02.28
JWT  (0) 2017.09.27
var Group = new Schema({
  "group": [{
    tag: String,
    name: String
  }]
})

위와 같은 스키마가 있을 때 find를 통해 같은 tag 값을 갖는 리스트를 얻고 싶을 때 다음과 같은 query를 작성할 수 있다.

Group.find({group: {$elemMatch : {tag: tag}}})

$elemMatch를 통해 group 배열 안에 있는 {tag: tag}에 해당하는 도큐먼트가 있다면 데이터를 찾아내 리스트로 출력한다.


$in 이 좀 헛갈렸는데 $in은 해당 키 값에 해당하는 value 값들 중에서 일치하는 documents를 찾는다.

이게 뭔 차이냐먼.. 내 생각에는 $in을 사용해보니 계속 parse error 나는 것 보니까 {tag: tag} 를 value로써 인식하지 못하는 것 같다.

$elemMatch를 사용하지 않는 또 다른 방법이 있다.

Group.find({"group.tag": tag})

위 방식은 '.' 으로 path를 지정해서 찾는 경우이다.

어댑터 뷰

화면에 동적으로 변경되는 컨텐츠를 채울 때 사용하는 뷰

리스트 뷰

항목들을 수직 방향의 목록 형태로 보여주는 어댑터 뷰 - 상하 스크롤 가능 - 일반적으로 목록의 한 항목을 선택하여 일정한 작업 수행

생성 방법1 - element

  1. 레이아웃 파일에 ListView element 를 선언한다.

  2. 액티비티 파일에 어댑터를 생성한다.

  3. 생성한 어댑터를 레이아웃 파일에 선언한 ListView 리소스와 연결시킨다.

public class MainActivity extends AppCompatActivity {
  private ListView m_ListView;
  private ArrayAdapter<String> m_Adapter;
 
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
 
    String[] values = {"String1", "String2", "String3"};
 
    m_Adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, values);
 
    m_ListView = (ListView)findViewById(R.id.list);
 
    m_ListView.setAdapter(m_Adapter);
 
    m_ListView.setOnItemClickListener(onClickListItem);
  }
 
  private AdapterView.OnItemClickListener onClickListItem = new AdapterView.OnItemClickListener() {
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
      Toast.makeText(getApplicationContext(), m_Adapter.getItem(position), Toast.LENGTH_SHORT).show();
    }
  };
}

ListView 아이템 터치시 이벤트를 처리할 리스너를 구현해야 한다.

private AdapterView.OnItemClickListener onClickListItem = new AdapterView.OnItemClickListener() {
 
  @Override
  public void onItemClick<AdapterView<?> parent, View view, int position, long id) {
    Toast.makeText(getApplicationContext(), m_Adapter.getItem(position), Toast.LENGTH_SHORT).show();
  }
};

생성 방법2 - ListActivity 상속

  1. 액티비티에 ListActivity를 상속 받는다.

  2. 어댑터를 생성한다.

  3. setListAdapter 라는 ListActivity에 선언한 함수를 사용하여 어댑터를 액티비티에 설정한다.

public class MainActivity extends ListActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.activity_main);
 
        String[] values = {"하스스톤", "몬스터 헌터", "디아블로", "와우", "리니지", "안드로이드", "아이폰"};
 
        // Android에서 제공하는 표준 레이아웃에 String 문자열 하나를 출력하는 layout으로 어댑터 생성
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, values);
 
        // ListView에 어댑터 연결
        setListAdapter(adapter);
    }
 
    @Override
    protected void onListItemClick(ListView l, View view, int position, long id) {
        String item = (String)getListAdapter().getItem(position);
        Toast.makeText(getApplicationContext(), item + " selected", Toast.LENGTH_SHORT).show();
    }
}

직접 AdapterView의 리스너를 선언하여 구현 및 설정하였던 생성방법 1과 달리 ListActivity를 상속받게 되면 아래와 같은 함수를 사용할 수 있다.

setListAdapter(adapter);
 
@Override
protected void onListItemClick(ListView l, View view, int position, long id);

생성 방법 1과 달리 주의 깊게 봐야할?점은 아래의 코드 같다.

super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);


'IT > Android' 카테고리의 다른 글

Popup Menu 생성  (0) 2017.10.23
AlertDialog를 이용하여 RatingBar 띄우기  (0) 2017.10.23
Intent  (0) 2017.10.23
Action Bar  (0) 2017.10.23
Dialog  (0) 2017.10.23

mongodb에서 Date 타입을 사용하다보면 시간 기준이 한국 시간과 다르다는 것을 확인할 수 있다. 한국 시간보다 7시간이 더 늦음을 확인할 수 있다.

Date.UTC() 함수가 있는데 Date.UTC 함수는 현지 시간 대신 국제 표준시(UTC)를 사용한다. 그래서 위 함수를 이용해서 표준 시를 구할 수 있다.

function getCurrentDate() {
  var date = new Date();
 
  var year = date.getFullYear();
  var month = date.getMonth();
  var today = date.getDate();
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  var milliseconds = date.getMilliseconds();
 
  return new Date(Date.UTC(year, month, today, hours, minutes, seconds, milliseconds));
}


'IT > Mongodb' 카테고리의 다른 글

서브 도큐먼트 검색 후 값 변경  (0) 2018.02.07
도큐먼트 필드 삭제하기  (0) 2017.12.30
$elemMatch vs $in  (0) 2017.10.31
스키마 모델링 어떻게 해야 하나  (0) 2017.10.21

Popup menu

특정 뷰에 고정된 모달 메뉴이다.

@Override
    public void onClick(View view) {
        PopupMenu popup = new PopupMenu(this, view);
 
        MenuInflater inflater = popup.getMenuInflater();
        inflater.inflate(R.menu.actions, popup.getMenu());
 
        popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                if(item.getItemId()==R.id.apple) {
 
                } else if(item.getItemId()==R.id.grape) {
 
                }
                return false;
            }
        });
        popup.show();
    }

해당 위젯 클릭시 PopupMenu 를 생성한다.

'IT > Android' 카테고리의 다른 글

리스트 뷰  (0) 2017.10.31
AlertDialog를 이용하여 RatingBar 띄우기  (0) 2017.10.23
Intent  (0) 2017.10.23
Action Bar  (0) 2017.10.23
Dialog  (0) 2017.10.23

AlertDialog를 이용하여 RatingBar 띄우기

class MyOnLongClickListener implements View.OnLongClickListener {
    @Override
    public boolean onLongClick(View view) {
        if(view.getId()==R.id.button3) {
            showDialog();
            return true;
        }
        return false;
    }
}

LongClick 후에 RatingBar를 띄우기 위해 다음과 리스너를 생성한다.

public void showDialog() {
        final AlertDialog.Builder popDialog = new AlertDialog.Builder(this);
        final RatingBar ratingBar = new RatingBar(this);
        ratingBar.setMax(5);
 
        popDialog.setTitle("RatingBar");
        popDialog.setView(ratingBar);
 
        popDialog.setPositiveButton(android.R.string.ok,
                new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        dialogInterface.dismiss();
                    }
                })
                .setNegativeButton("Cancel",
                        new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialogInterface, int i) {
                                dialogInterface.cancel();
                            }
                        });
 
        popDialog.create();
        popDialog.show();
    }

AlertDialog.Builder에는 AlertDialog에 생성에 필요한 API를 제공하고 있다. setPositiveButton과 setNegativeButton을 이용하여 OK/Cancle 버튼을 버튼을 만든다.

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.actions, menu);
        return true;
    }

onCreateOptionsMenu 함수를 이용하게 되면 코드로 옵션 메뉴를 생성할 수 있다. 하지만 먼저 menu 리소스가 필요하다.

'IT > Android' 카테고리의 다른 글

리스트 뷰  (0) 2017.10.31
Popup Menu 생성  (0) 2017.10.23
Intent  (0) 2017.10.23
Action Bar  (0) 2017.10.23
Dialog  (0) 2017.10.23

+ Recent posts