[VUE.JS] VUE[뷰] 시작해보기





요새 프론트 엔드 라이브러리로 핫하다는 vue를 접해 보았다.


접했다는게 정말 손끝으로 살짝 건들여본 정도 ㅋㅋㅋ



얼마전 node.js 와 react.js를 하고 아주아주 기초적인 파이썬을 해보고


이번엔 vue를 건들여 본다 ㅋㅋ





react를 공부해놓고 왜 이번엔 vue 를 사용하는가 라는 물음에 대한 대답은


"그냥! 개발자라면 새로 나왔다는거 한번쯤 건들여 봐야지!"


라고 할수 있겠지만;;;



일단 문서상으론 react보다 뛰어나다고 하니 한번 해보는게 나쁘진 않을 것 같은데


스택오버플로우에서 참고할 레퍼런스들이 아주 적고


react나 angular에 비해서 실제 업무에 적용된 사례가 적기도 해서


현업에서 바로 실서비스에 적용 하는건 아직 무리라고 보고


그냥 한번쯤 해보는건 좋을 것 같다.



이번에 하는 포스팅은 뭔가 대단하게 셋팅을 하고 설정파일들을 만지작 거리는게 아니라


정말 아주 간단하게



CDN으로 불러와서 마치 제이쿼리 쓰듯 사용해 보는 것에 대해서 포스팅 해보도록 한다.







일단 뭐 프로젝트 만들 필요도 없이 맛만 볼거니까


jsBIn 이나 jsfiddle 에서 사용해 보는 것만 테스트 해보도록 하자




jsbin


https://jsbin.com/xojatohopi/edit?html,js,output





jsbin 의 기본적인 화면이다.


여기서 아주아주 간단하게


제이쿼리 집어넣듯



<script src="https://unpkg.com/vue/dist/vue.js"></script>


한줄을 추가해 주도록 하자



1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 hello
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs




이렇게 한줄을 추가 해주면


우린 vue.js 를 사용할 준비가 끝난 것이다.



그럼 이제 body 안에


간단한 문장을 써보도록 하자




.








<h1>hello, yamea</h1>


이라는 한줄을 추가 했는데


이것만 가지고는 vue의 어떤 뭘 사용하는지 모르겠다



여기서 살짝만 변형 시켜 보자



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
 
</head>
<body>
  <div id="app">
    <h1>hello, {{name}}</h1>
  </div>
  
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs




이렇게 작성 하면




이렇게 나온다



이제 vue의 기능을 이용해 저 {{name}} 의 텍스트를 바꿔 보도록 하자



자바스크립트에 아래 코드를 추가 해준다



1
2
3
4
5
var app = new Vue({
  el:'#app',
  data:{name:"cheesu's yamea"}
  
});
cs




이런 스크립트 코드를 추가 해주면





짠!


이렇게 된다


마치 EL태그의 jstl 을 스크립트로 사용하는 것 같은 기분이 든다



그럼 여기서 추가로 한가지만 더 해보도록 하자



위의 콘솔 버튼을 클릭해서





app.name = "추천 눌러줘"


를 입력하고 엔터를 누르면 {{name}}의 내용이 바뀐다!





기본적인 기능은 여기까지다



아주 쉽지 않은가?


와.. 이정도면 그냥 써먹어도 되겠다


react를 처음 접할때보다 뭔가 장벽이 어마무시하게 낮아진 기분이다.


react보다 vue의 러닝커브가 훨씬 작다고 하니


간단하게 사이드 프로젝트 정도는 해볼만 한 것 같다.



나도 여기까지 밖에 안해봤으니


다음 포스팅에선 조금더 심화적인 단계로 넘어가 보도록 하자.

[안드로이드] FCM 웹(JAVA)서버에서 푸시메세지 보내기


안드로이드의 기존 GCM에서 FCM으로 바뀌었다


구글 클라우드 메세지에서 파이어베이스 클라우드 메세지로 바뀐건진 정확히 모르겠지만..



일단 뜬금없이 웹개발하다가 갑자기 회사에서 안드로이드 개발할 일이 생겼지만


웹뷰로 때워버리자! 라고 외친 후 만들어 놓고 보니 안드로이드 알림 메세지가 가야 한단다...



하....


그래서 뭐 삽질좀 하고 여기저기 뒤적뒤적이면서 구현을 했다




일단 가장 먼저


https://console.firebase.google.com/u/0/


당연히 구글 아이디는 있을것이지 콘솔 파이어베이스로 들어가


알람메세지 구현알 어플을 등록해준다.


이곳의 도움을 많이 받았다. 기초 설정은 여기 보고 따라하자


사실 저 블로그만 봐도


어지간하면 구현 가능하다.



진짜 생각보다 좀 간단하다.



1. Android JAVA 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import android.content.SharedPreferences;
import android.util.Log;
 
import com.google.firebase.iid.FirebaseInstanceId;
import com.google.firebase.iid.FirebaseInstanceIdService;
 
import java.io.IOException;
 
import okhttp3.FormBody;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;
 
 
public class MyFirebaseInstanceIDService extends FirebaseInstanceIdService {
 
    private static final String TAG = "MyFirebaseIIDService";
 
    /**
     * Called if InstanceID token is updated. This may occur if the security of
     * the previous token had been compromised. Note that this is called when the InstanceID token
     * is initially generated so this is where you would retrieve the token.
     */
    // [START refresh_token]
    @Override
    public void onTokenRefresh() {
        // 설치할때 여기서 토큰을 자동으로 만들어 준다
        String refreshedToken = FirebaseInstanceId.getInstance().getToken();
        Log.d(TAG, "Refreshed token: " + refreshedToken);
 
        // 생성한 토큰을 서버로 날려서 저장하기 위해서 만든거
        sendRegistrationToServer(refreshedToken);
    }
    
    private void sendRegistrationToServer(String token) {
        // Add custom implementation, as needed.
 
        // OKHTTP를 이용해 웹서버로 토큰값을 날려준다. 
        OkHttpClient client = new OkHttpClient();
        RequestBody body = new FormBody.Builder()
                .add("Token", token)
                .build();
 
        //request
        Request request = new Request.Builder()
                .url("토큰 저장할라고 보낼 URL")
                .post(body)
                .build();
 
        try {
            client.newCall(request).execute();
        } catch (IOException e) {
            e.printStackTrace();
        }
 
    }
}
cs




여기서 우리가 잘 봐야 할 건


30번 라인과 


37번라인의 sendRegistrationToServer 메소드다


30번라인에서 토큰을 생성하는데 여기선 어플을 설치할때 한번 생성한다.


그럼 만들어지자마자 


37번라인 메소드로 날려서 HTTP로 전송한다.


그럼 웹서버에서 저 토큰을 받고 저장을 하게 되고


그 해당 토큰으로 메세지를 날려주면 되는 것이다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import android.app.NotificationManager;
import android.app.PendingIntent;
import android.content.Context;
import android.content.Intent;
import android.media.RingtoneManager;
import android.net.Uri;
import android.support.v4.app.NotificationCompat;
 
import com.google.firebase.messaging.RemoteMessage;
 
 
public class MyFirebaseMessagingService extends com.google.firebase.messaging.FirebaseMessagingService {
    private static final String TAG = "FirebaseMsgService";
 
    // [START receive_message]
    @Override
    public void onMessageReceived(RemoteMessage remoteMessage) {
 
        //추가한것
        sendNotification(remoteMessage.getData().get("message"));
    }
 
    private void sendNotification(String messageBody) {
        Intent intent = new Intent(this, MainActivity.class);
        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
        PendingIntent pendingIntent = PendingIntent.getActivity(this0 /* Request code */, intent,
                PendingIntent.FLAG_ONE_SHOT);
 
        Uri defaultSoundUri= RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
        NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this)
                .setSmallIcon(R.mipmap.ic_launcher)
                .setContentTitle("FCM Push Test"// 이부분은 어플 켜놓은 상태에서 알림 메세지 받으면 저 텍스트로 띄워준다.
                .setContentText(messageBody)
                .setAutoCancel(true)
                .setSound(defaultSoundUri)
                .setContentIntent(pendingIntent);
 
        NotificationManager notificationManager =
                (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
 
        notificationManager.notify(0 /* ID of notification */, notificationBuilder.build());
    }
 
}
 
cs

MyFirebaseMessagingService.java 얘는 알림메세지를 받았을때 처리하는건데

사실 딱히 건들일거 없이 그대로 사용 하면 된다.








일단 저 블로그에서


MyFirebaseInstanceIDService.java 와

MyFirebaseMessagingService.java



이 두개를 구현했다면 




여기로 들어와서 앱단위로 앱선택하고 보내면


모든 앱 설치자들에게 메세지가 날아간다.



하지만 우린 웹서버에서 푸시메세지를 날려주고 싶을 것이다.


알람이라면 뭐 값이 변한다거나 새로운 정보가 등록 되었을때 날려줘야 하니까


그때마다 저기 접속해서 날려주기엔 너무 귀찮으니까 분명히


웹서버에서 인터벌을 돌리든 트리거를 걸든 해서 웹서버에서 날려주고 싶을 것이다


그런데 웹서버에서 날려주는건


잘 안나와있고 복사 붙여넣기 해도 안되는 경우도 있고 하니까


내가 해서 성공한 코드를 보자










2. JAVA Web Server 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
@RequestMapping(value="mobile/sendFCM")
    public String index(Model model, HttpServletRequest request, HttpSession session, MobileTokenVO vo)throws Exception{
            
            List<MobileTokenVO> tokenList = fcmService.loadFCMInfoList(vo); 
            
                String token = tokenList.get(count).getDEVICE_ID();
                
                final String apiKey = "파이어 베이스의 서버 API키를 여기에 넣는다";
                URL url = new URL("https://fcm.googleapis.com/fcm/send");
                HttpURLConnection conn = (HttpURLConnection) url.openConnection();
                conn.setDoOutput(true);
                conn.setRequestMethod("POST");
                conn.setRequestProperty("Content-Type""application/json");
                conn.setRequestProperty("Authorization""key=" + apiKey);
 
                conn.setDoOutput(true);
                
                String userId =(String) request.getSession().getAttribute("ssUserId");
 
                // 이렇게 보내면 주제를 ALL로 지정해놓은 모든 사람들한테 알림을 날려준다.
                String input = "{\"notification\" : {\"title\" : \"여기다 제목 넣기 \", \"body\" : \"여기다 내용 넣기\"}, \"to\":\"/topics/ALL\"}";
                
                // 이걸로 보내면 특정 토큰을 가지고있는 어플에만 알림을 날려준다  위에 둘중에 한개 골라서 날려주자
                String input = "{\"notification\" : {\"title\" : \" 여기다 제목넣기 \", \"body\" : \"여기다 내용 넣기\"}, \"to\":\" 여기가 받을 사람 토큰  \"}";
 
                OutputStream os = conn.getOutputStream();
                
                // 서버에서 날려서 한글 깨지는 사람은 아래처럼  UTF-8로 인코딩해서 날려주자
                os.write(input.getBytes("UTF-8"));
                os.flush();
                os.close();
 
                int responseCode = conn.getResponseCode();
                System.out.println("\nSending 'POST' request to URL : " + url);
                System.out.println("Post parameters : " + input);
                System.out.println("Response Code : " + responseCode);
                
                BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream()));
                String inputLine;
                StringBuffer response = new StringBuffer();
 
                while ((inputLine = in.readLine()) != null) {
                    response.append(inputLine);
                }
                in.close();
                // print result
                System.out.println(response.toString());
                
 
        return "jsonView";
    }
cs



위의 코드처럼 쓰면 된다.



8번 라인의 API키는 






저 파이어베이스 콘솔에서 빨간동그라미 누르고 프로젝트 설정의 클라우드 메세징으로 가면


서버키가 나와있다 그 서버키를 넣으면 된다. 




그런데 20번 21번 라인의  주제가 ALL인걸 어떻게 지정 하냐고?


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
 
        // 웹뷰 셋팅팅
       mWebView = (WebView)findViewById(webView);
        mWebView.getSettings().setJavaScriptEnabled(true);
 
        mWebView.loadUrl(myUrl+"/mobile/login");
        mWebView.setWebChromeClient(new WebChromeClient());
        mWebView.setWebViewClient(new WebViewClientClass());
 
        mWebView.addJavascriptInterface(new AndroidBridge(), "android");
 
 
        //이렇게 ALL 추가 하면 이 디바이스는 ALL을 구독한다는 얘기가 된다.
        FirebaseMessaging.getInstance().subscribeToTopic("ALL");
 
    }
cs



안드로이드의 MainActivity.java 의 oncreate에다가 저 18번 라인을 추가 해주자


그런데 주제 등록은 즉시 안되고 몇시간 기다리거나 몇일 기다려야 등록 되는 경우도


있다고 하니까 급하게 하진 말자.




그리고 24번 라인에 들어가는 토큰은 MyFirebaseInstanceIDService.java 의 36번 메소드에 날려준 값이다


여기까지가 기초적인 FCM을 이용한 메세지 보내는 방법이다!


다음강좌는


저 토큰아이디를 어떻게 사용자 ID랑 묶어서 저장하고 원하는 사용자에게


보낼 수 있는지 알아보자



2017/07/10 - [Yame Programmer/Android] - [안드로이드] FCM 토큰 저장방법 개별 보내는 방법 SharedPreferences 사용



[리니지M] 마법인형과 변신 방법


리니지 M 홈페이지에 올라와 있는 글이다.


리니지M에서 중요한 변신과 마법인형의 경우, 원작의 요소를 리니지M 환경에 맞춰서 계승한 컨텐츠 입니다.
이에 대해 리니지M에서 마법인형과 변신에 대해 정보를 안내 드리고자 합니다. .

● 변신 카드
- 기존 PC에서는 변신의 기준이 직업별 레벨이었으나, 리니지M에서는 변신카드 획득을 통해 해당 변신 카드의 보유 여부가 기준이 됩니다.
- 변신카드는 총 5개의 등급으로 구분됩니다.


- 변신카드는 1번이라도 획득하면, 고객님의 계정 어떤 캐릭터라도 변신이 가능합니다.
예시] 52레벨 기사 캐릭터로 군터 변신카드 획득 후 신규 캐릭터를 생성하면,  1레벨 캐릭터가 군터 변신 선택 가능

- 변신카드의 대상으로 변신을 위해서는 꼭! 변신 주문서를 상점에서 구입하여, 사용 하셔야 합니다.
- 변신카드 목록 중 획득한 변신 카드의 조합에 따라 변신 컬렉션이 발동됩니다.
변신 컬렉션은 계정 단위로 적용되며, 더 많은 변신 카드를 수집할수록 더 많은 효과가 계정에 적용 됩니다.
- 변신 카드의 경우, 계정 최초 1회 획득 이후에는 변신 카드가 자동으로 쌓이며, 동일 등급의 변신 카드 4장이 있을 경우
상위 단계 카드를 획득 할 수 있는 [변신 카드 합성]이 가능합니다.  



예시1]
희귀 등급 아크 위자드 카드를 5장 획득 -> 계정 최초 변신목록 획득 1장을 제외한 4장의 카드가 보관

예시2]
합성 가능 사례 : 일반 등급 오크 변신 카드 5장 -> 합성 기회 1회
합성 불가 사례 : 일반 등급 오크 변신 카드 2장, 희귀 등급 데스나이트 변신 카드 2장 -> 합성 불가

- 변신 카드 중 일부 카드의 경우에는 오직 [변신 카드 합성] 으로만 획득 가능한 카드가 존재 합니다.
- 합성에 성공할 경우, 상위 등급의 변신 카드 중 1개를 랜덤하게 획득합니다. 실패할 경우에는 재료로 쓰인 4장의 카드 중
1장만 돌려 받게 됩니다.


● 마법인형 카드
- 마법인형 카드는 1번이라도 획득하면, 고객님의 계정 어떤 캐릭터라도 소환이 가능합니다.
예시] 52레벨 기사 캐릭터로 나이트발드 마법인형 카드 획득 후 신규 캐릭터를 생성하면, 1레벨 캐릭터가 나이트발드 마법인형 소환가능
- 마법인형은 총 5개의 등급으로 구분됩니다.


- 마법인형을 소환하기 위해서는 꼭! 마법인형 소환 주문서를 상점에서 구입하여, 사용 하셔야 합니다.
- 마법인형 카드 목록 중 획득한 마법인형의 조합에 따라, 마법인형 컬렉션이 발동됩니다.
마법인형 컬렉션은 계정 단위로 적용되며, 더 많은 마법인형 카드를 수집할수록 더 많은 효과가 계정에 적용 됩니다.
- 마법인형 카드의 경우, 계정 최초 1회 획득 이후에는 마법인형 카드가 자동으로 쌓이며, 동일 등급의 마법인형 카드 4장이
있을 경우, 상위 단계 카드를 확률적으로 획득 할 수 있는 [마법인형 카드 합성]이 가능합니다.  
예시1]
일반 등급 늑대인간 마법인형 카드를 5장 획득 -> 계정 최초 마법인형 목록 획득 1장을 제외한 4장의 카드가 보관
예시2]
합성 가능 사례 : 일반 등급 늑대인간 마법인형 카드 5장 -> 합성 기회 1회
합성 불가 사례 : 일반 등급 늑대인간 마법인형 카드 2장, 고급 등급 장로 마법인형 카드 2장 -> 합성 불가
- 마법인형 카드 중 일부 카드의 경우에는 오직 [마법인형 카드 합성] 으로만 획득 가능한 카드가 존재 합니다.
- 합성에 성공할 경우, 상위 등급의 마법인형 카드 중 1개를 랜덤하게 획득합니다. 실패할 경우에는 재료로 쓰인 4장의 카드 중 1장만 돌려 받게 됩니다.


+ Recent posts