saii 잡다한 블로그

초보 입장으로 Api 사용하는 게 어렵습니다. 저는 Node.js 개발자가 아니라서 조금 어려웠습니다.

보통 회원가입이나 인증할때 많이 쓰는데요. 다른 방법도 많지만 가장 기본적인 SMS를 통한 인증을 포스팅하려고 합니다.

추후에 카카오톡이나 FCM으로 구현한 것을 포스트 하겠습니다.

우선 네이버 클라우드 플랫폼을 가입합니다. 

www.ncloud.com/

회원가입을 한 후 콘솔 눌러서 들어옵니다.

그 후 콘솔에서 Products & Service 에서  Simple & Easy Notification Service 를 찾아줍니다.

컨트롤 + F 해서 찾으면 빠르겠죠?

우선 프로젝트부터 생성 합니다. PUSH , SMS Biz Message 3개가 있는데 오늘은 SMS만 사용할 겁니다.

생성을 하면 밑에 이미지처럼 나옵니다. 그러면 구석에 서비스 ID를 클릭해서 OPEN API Key ID를 복사해둡니다.

다음은 인증키를 준비해야합니다.

www.ncloud.com/mypage/manage/authkey

위에 링크를 들어가서 PW를 입력하면 밑에 인증키가 없이 나옵니다. 생성하시면 인증키가 만들어지는데

Access Key ID, Secret Key 복사 해둡니다.

이제부턴 API를 참조하면서 해야합니다.

apidocs.ncloud.com/ko/ai-application-service/sens/sms_v2/

우선 서버단에서 만들어줘야하니깐 헤더는 우선 이렇습니다.

request 보낼때 같이 보낼 body 부분 입니다.

사실 복잡한 것 같지만 실제 코드로 보면 간단합니다.

네이버는 시그니처키를 만들어줘서 보내야합니다. 사실 저는 아직 여기까지 이해하지 않았기 때문에 그냥 시키는대로 만들었습니다. HmacSHA256으로 암호화한 후 Base64로 인코딩합니다.

apidocs.ncloud.com/ko/common/ncpapi/

준비는 끝났습니다. 코드만 작성하면 됩니다. 그렇기 때문에 header와 body만 잘 적어주면 됩니다.

시그니처 생성 방법을 모르시겠으면 제 코드 참고하시면 좋겠네요.

var CryptoJS = require("crypto-js");
var SHA256 = require("crypto-js/sha256");
var Base64 = require("crypto-js/enc-base64");

function send_message(phone) {
  var user_phone_number = phone;
  var user_auth_number = Math.random().toString(36).slice(2);
  var resultCode = 404;

  const date = Date.now().toString();
  const uri = "service ID 채워넣으세요~";
  const secretKey = "secret key ID 채워넣으세요~";
  const accessKey = "access key ID 채워넣으세요~";
  const method = "POST";
  const space = " ";
  const newLine = "\n";
  const url = `https://sens.apigw.ntruss.com/sms/v2/services/${uri}/messages`;
  const url2 = `/sms/v2/services/${uri}/messages`;

  const hmac = CryptoJS.algo.HMAC.create(CryptoJS.algo.SHA256, secretKey);

  hmac.update(method);
  hmac.update(space);
  hmac.update(url2);
  hmac.update(newLine);
  hmac.update(date);
  hmac.update(newLine);
  hmac.update(accessKey);

  const hash = hmac.finalize();
  const signature = hash.toString(CryptoJS.enc.Base64);

  request(
    {
      method: method,
      json: true,
      uri: url,
      headers: {
        "Contenc-type": "application/json; charset=utf-8",
        "x-ncp-iam-access-key": accessKey,
        "x-ncp-apigw-timestamp": date,
        "x-ncp-apigw-signature-v2": signature,
      },
      body: {
        type: "SMS",
        countryCode: "82",
        from: "발신번호 입력하세요~~",
        content: `인증번호 ${user_auth_number} 입니다.`,
        messages: [
          {
            to: `${user_phone_number}`,
          },
        ],
      },
    },
    function (err, res, html) {
      if (err) console.log(err);
      else {
        resultCode = 200;
        console.log(html);
      }
    }
  );
  return resultCode;
}

풀 코드입니다. 제가 자바스크립트 개발자가 아니라서 조금 불편했습니다. 이거를 안드로이드 어플과 연동하여서 사용하면 될 것 같습니다. 

모듈은 npm install로 설치해 주셔야 합니다.

Ubuntu Server 20.04 LTS IP 고정 할당 입니다.

대부분 DHCP 만 썼었는데 서버인 만큼 IP 고정 할당을 해보려고 합니다.

우선 root 계정으로 하거나 아니면 vi 할때 sudo 추가 하셔야 됩니다.(root 권한으로 안하면 변경이 안됩니다.)

vi /etc/netplan/00-installer-config.yaml

※ 마지막 파일은 다를수도 있습니다. cd로 가서 ls 해보는걸 추천.

vi로 들어가면 밑에 사진 처럼 나옵니다.

그러면 dhcp4를 지워지고 밑에 정보를 추가해주시면 됩니다.

addresses와 gateway4는 자신의 환경에 맞춰서 변경 해주세요

network:
  ethernets:
    ens160:
      addresses:
      - 192.168.1.60/24
      gateway4: 192.168.1.1
      nameservers:
        addresses:
        - 8.8.8.8
        search:
        - 8.8.4.4
  version: 2

그리고 변경하고 나와서

netplan apply 명령어 실행하시면 됩니다.

nodemon은 디렉토리의 파일 변경이 감지되면 노드 애플리케이션을 자동으로 다시 시작하여 node.js 기반 애플리케이션을 개발하는 데 도움이되는 도구입니다.

그렇기 때문에 소스를 변경하면 다시 끄고 시작하지 않아도 됩니다. 

npm install -g nodemon

https://www.npmjs.com/package/nodemon

TextInputEditText hint

TextInputEditText 클릭하면 힌트가 위로 올라가면서 작아집니다.

우선 이 색상을 선택하려면 TextInputLayout 태그에서 app:hintTextColor 속성을 선택해주면 됩니다.

app:hintTextColor="@color/color_4b6d9d" 이런식으로 속성을 정의 해주시면 됩니다.

TextInputEditText 커서 

우선 조금 특이한점은 color로 설정하는 것이 아닌 drawable로 설정해야 합니다. 

즉 xml 파일입니다. 그리 어려운건 아닙니다. 밑에 처럼 xml 파일 만들고 코딩하면 됩니다. 색상도 color로 속성으로 지정하면 됩니다.

TextInputEditText 안에 android:textCursorDrawable="@drawable/cursor_color" 이런식으로 속성을 정의 해주시면 됩니다. 

TextInputEditText 밑줄

밑줄은 TextInputEditText 태그에서 android:backgroundTint="@color/color_4b6d9d" 속성을 정의해주시면 됩니다.

정리하자면 밑에 그림을 참고하시면 됩니다.

values > style.xml 에서

우선 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

DarkActionBar > NoActionBar로 바꿔줍니다.

menu 폴더 밑에 xml 파일 하나 만들어줍니다.

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/toolbar_download_button"
        android:title="다운로드"
        android:icon="@drawable/ic_file_download_black_24dp"
        app:showAsAction="ifRoom"/>
</menu>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/toolbar_title"
                android:text="toolbar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                android:layout_gravity="center" />

        </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

MainActivity.java

OnCreate() 메서드에서 toolbar와 actionBar 설정을 해줍니다.

Ctrl + O 를 눌러서 onCreateOptionsMenu(), onOptionsItemSelected() 를 선언해줍니다.

public class BlockchainStorageDetailActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_blockchain_storage_detail);

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayShowTitleEnabled(false); // 기존 title 지우기
        actionBar.setDisplayHomeAsUpEnabled(true); // 뒤로가기 버튼 만들기
    }





    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.toolbar_blockchain_storage_download, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case R.id.toolbar_download_button:{
                break;
            }
            case android.R.id.home:
                finish();
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

onOptionsItemSelected() 메서드는 클릭 이벤트이니 case 선언 하고 이벤트 작성하시면 됩니다.

콜백함수란 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미한다. callback은 쉽게 말하자면 어떤 일을 다른 객체에게 시키고, 그 일이 끝나는 것은 기다리지 않고 끝나고 부를 때까지 다른 일을 하는 것을 말한다. 만약 1번 함수를 실행을 하고 1번 함수의 실행이 끝마친 다음에 2번 함수를 실행해야 하는 경우가 생긴다면 콜백을 이용하면 된다.

일반적인 함수 구조

일반적으로는 파라미터를 받아 함수 내부에서 사용하여 결과값을 return 할 수 있는 구조로 되어 있다. 

콜백 함수 구조

콜백 함수는 다른 함수에 파라미터로 이용되는 함수이며 어떤 함수에 의해 호출되어지는 함수이다.