안녕하세요. 제이콥입니다.

http://join.steemcoinpan.com/ 에 다국어 설정을 넣어봤습니다. 사용할 언어를 선택하면 그 언어로 모든 정보를 보여줍니다.

i18n 라이브러리는 다국어 설정을 위한 라이브러리입니다. 사전에 미리 언어파일을 준비해놓고, 언어선택을 하면 특정 언어를 보여주도록 합니다.

• https://github.com/wonism/TIL/tree/master/back-end/nodejs/i18n
• https://www.npmjs.com/package/i18n

1. 언어파일 만들기

아래처럼 언어파일을 만듭니다. 저는 한국어와 영어를 지원하니 2개를 만들었습니다.

2. i18n 초기화

i18n 초기 셋팅입니다. 어떤 언어를 기본적으로 사용할 것인지, 어떤 언어를 추가할 것인지 적습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

import I18n from 'i18n-js';

import en from '../locales/en';
import ko from '../locales/ko';

I18n.locale = 'ko';
I18n.fallbacks = true;
I18n.translations = {
  en,
  ko,
};

export default I18n;

3. 사용하기

i18n을 import합니다. 그리고 원하는 문장을 가져옵니다. 예를 들어, 코드에 있는 signup.fail은 언어파일 (ko,en)에 미리 적어놔야합니다.

1
2
3

import I18n from '../common/I18n';
..
info = `${I18n.t('signup.fail')}`

4. 언어 변경

저는 드랍메뉴를 활용해서 언어 변경을 하도록 했습니다. 메뉴에서 특정 언어를 선택하면, locale을 변경하도록 했습니다.

This page is synchronized from the post: ‘i18n 활용한 다국어 지원하기’

글쓰기 책은 처음 읽었다. 이 책을 읽은 이유는 단순하다. 글 잘 쓰고싶어서였다. 딱 나에게 필요한 책이다.

에세이, 신문 기사, 문학평론, 사회 비평, 제품 사용설명서, 보도자료, 문화재 안내문, 성명서, 선언문, 보고서, 자기소개서, 논술 시험, 운동경기 관전평, 신제품 사용후기, 맛집 순례기 같은 것을 잘 쓰고 싶은 독자라면 이 책이 더 나을 것이다.

나는 스팀잇에서 2년동안 글을 써왔다. 이것저것 내 일상들을 기록해왔다. 일기도 쓰고, 개발 글도 쓰고, 여행기도 썻다.

내가 쓴 글들을 잘 정리해서 예쁜 블로그도 만들어볼것이다. 가독성이 좋은 글을 쓰고싶다.

이 책은 소설, 시를 잘 쓸 수 있는 방법을 알려주지 않는다. 적어도, 나쁜글을 안 쓰는 방법을 알려준다. 논리적인 글을 쓰는 방밥을 알려준다. 기억에 남는 것이 몇 개 있다.

• 주제에 집중해라.
• 주장에는 근거가 있어야한다.
• 단문으로 적어라.
• 알아보기 쉽게 적어라. 그 텍스트만 보고 다 이해할 수 있는 글을 적어라.
• 수동태로 적지않기.
• 말하듯이 적어라.

단문이 복문보다 훌륭하거나 아름다워서 단문을 쓰라는 것이 아니다. 뜻을 분명하게 전하는 데 편리하기 때문이다. 게다가 단문은 복문보다 쓰기가 쉽다. 주술관계가 하나뿐이어서 문장이 꼬일 위험이 없다.

This page is synchronized from the post: ‘[독서일기] 유시민의 글쓰기 특강’

안녕하세요.

ORG토큰(귤토큰)으로 @solnamu님의 귤을 사먹어봤습니다.
제가 산 귤은 제주도 서귀포 무농약인증 친환경 노지감귤입니다. 감귤크기는 랜덤입니다. 가족들이랑 진짜 귤 크기가 랜덤이네 하면서 웃었습니다.

귤이 많이 시다는 후기를 봤는데, 제 입맛에는 괜찮더군요. 딱 좋습니다.

작년에 귤은 카카오에서 구매했었습니다. 제가 사먹기도 하고, 지인들에게도 보내기도 했습니다. 카카오에 보면 선물주기로 귤을 선택할 수 있는데요. 여기에 나온 귤이 합리적인 가격에 맛도 있고요. 쉽게 주문할 수 있었으니까요.

이젠 ORG로 구매해야겠습니다!

https://steempeak.com/@solnamu/2kqhiz-org

구매 방법

ORG 토큰은 스팀엔진 거래소, 스팀코인판의 스왑시스템, 그리고 개인거래로 구할 수 있습니다.

토큰을 50개를 구하신 후, @solamu님 계정으로 토큰을 보냅니다. 그리고 아래의 구글 주문서를 제출하면 끝!
https://forms.gle/TPhp3Csi3Dq5S4BGA

This page is synchronized from the post: ‘ORG 토큰으로 귤 사먹기’

안녕하세요. 제이콥입니다.

11월에 개발/공부 로드맵을 적고 개발/공부를 했습니다. 하나씩 해결할 때마다, 밑줄쫙쫙 그었고요. 꽤 많이 지켰습니다. 앞으로도 이렇게 계획을 적어놓고 하나하나 작업해보려고요.

11월 개발/공부 로드맵

0. 글쓰기

• 개발 내용 정리
• 서평

1. 소셜 회원가입

• 스팀코인판 사이트와 연동
• 영어/한글 설정하기
• 도메인 주소 바꾸기 (http://join.steemcoinpan.com)
• 영어로 소개글 작성하기

2. 스팀코인판 월렛

• accelerator ide 설치
• ui 구현
• 스팀엔진 토큰 전송 적용하기

3. Swap 시스템

• 사용자가 갖고 있는 토큰 개수 표시
• 트랜잭션 처리방식 바꾸기

  1 2 3

  1. swap 신청을 queue에 넣는다. 2. queue에서 하나씩 빼서 swap 작업을 수행한다. 3. queue가 비었나 체크한다.

4. 영어

• 하루 영어딕테이션 1회 (30-50분)
• 전화영어 10분

5. 스팀블로그

• 글 자동 업데이트
• 하이브마인드를 활용한 스팀 글 가져오기
• 글 날짜를 수정한 날짜로 업데이트하기

6. 크립토미션

• 회원가입 연동
• 마이페이지 통합
• ios & android 배포

This page is synchronized from the post: ‘12월 개발/공부 로드맵’

안녕하세요. 제이콥입니다.

https://www.steemcoinpan.com/sct/@jacobyu/4rkkun 에서 구글 계정 연동을 통한 스팀잇 회원가입 페이지를 소개했습니다. 구글 계정 인증을 활용해서 회원가입을 할 수 있도록 했습니다. 구글 계정 인증을 하면 특정 사용자가 여러번 아이디 만들기가 어렵죠. 또, 누구나? 구글 계정을 갖고있다고 생각했고요. 구글 계정은 쉽게 자신을 인증할 수 있는 수단입니다.

이 글은 소셜 로그인 인증업체 추가하는 방법, 도메인 인증하기를 다룹니다.

0.추천 라이브러리

웹페이지에 소셜 로그인은 연동할 때, 사용하기 좋은건 파이어베이스입니다.
파이어베이스는 여러 소셜계정을 손쉽게 연동할 수 있도록 해놨습니다.
이 2개를 참고해서 개발하시면 됩니다.
https://firebase.google.com/docs/auth/web/firebaseui?hl=ko
https://github.com/firebase/firebaseui-web

1. 셋업

파이어베이스 대쉬보드 설정 -> 사용할 로그인 인증업체 선택 -> 활성화

라이브러리 설치하기

1
2

$ npm install firebase --save
$ npm install firebaseui --save

2. 소셜 로그인 컴포넌트 코드

코드는 간단합니다.

저는 리액트에서 작업하는데요. 하나의 컴포넌트로 모듈화시켜서 사용하고있습니다. 이렇게 분리를 하면, 어디든 쉽게 적용할 수 있죠.

- import

firebase, react-firebaseui를 사용합니다. config파일은 firebase dashboard에서 받아오시면 됩니다.

1
2
3
4
5
6
7
8
9

import React from 'react';
import * as firebase from "firebase/app";
import "firebase/auth";

import config from '../config'
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

// Initialize Firebase
firebase.initializeApp(config);

- ui config

이건 소셜 로그인 ui 관련 셋팅값입니다. 로그인을 팝업으로 할 것인지,아니면 리디렉션 (새로 열기)를 할 것인지 정할 수 있습니다. 또, 저는 구글만 사용했지만, 여러 로그인 인증업체를 추가할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// Configure FirebaseUI.
uiConfig = {
  // Popup signin flow rather than redirect flow.
  signInFlow: 'popup',
  // We will display Google and Facebook as auth providers.
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  ],
  callbacks: {
    // Avoid redirects after sign-in.
    signInSuccessWithAuthResult: async (currentUser, credential, redirectUrl) => {
      var token = await this.getFirebaseToken();
      this.props.clickCallback(this.props.parent, token);
    }
  }
};

- render

render에서 핵심은 <StyledFirebaseAuth/>입니다. 다른건 부가적인 것이죠. 이 버튼을 누르고 실제로 로그인이 성공했다. 실패했다를 알아야하는데요. 로그인이 성공했을 때, 무엇을 할지는 위에 ui-config에서 설정할 수 있습니다. 저 같은 경우는 callbacks에다가 성공할 경우, clickCallback을 실행하도록 해놨죠.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

render() {
  if (!this.state.isSignedIn) {
    return (
      <div>
        <StyledFirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>
      </div>
);
  }
  return (
    <div>
      {this.props.parent.state.signupSuccess === true? 
        <button onClick={() => {
          window.open('https://steemcoinpan.com/');
        }} className="btn btn-primary btn-block">스팀코인판으로 이동</button>
        :
        <button onClick={() => firebase.auth().signOut()} className="btn btn-primary btn-block">Refresh</button>
      }
    </div>
  );

}

3. 도메인 승인

요거 빡셉니다. 커스텀 도메인을 사용할 경우, 그 도메인이 내꺼라는걸 인증해야합니다. Project -> Authentication -> 아래로 내리면 승인된 도메인 -> 자신의 도메인 추가

• https://console.cloud.google.com/apis/credentials/domainverification?authuser=0&project={your-project-name}
• https://console.firebase.google.com/u/0/project/{your-project-name}/authentication/providers

google cloud platform에서도 도메인을 인증해야합니다. Credentials, Oauth consent screen,Domain verification 모두 들어가서 도메인을 등록하세요.

이 과정에서 html을 서버에 올려야 하는 작업이 있습니다. 저는 히로쿠, react-js 환경에서 개발했는데요. public 폴더에 google cloud platform이 주는 인증 html을 넣어주시면 됩니다.

4. 결론

이 과정에서 가장 어려웠던 건 3번이였습니다.. ㅋㅋ 1번,2번은 제가 올린 링크를 참고하면 쉽게 만드실 수 있을거에요. 궁금한게 있으시면 댓글달아주세요. 감사합니다.

This page is synchronized from the post: ‘웹 페이지에 소셜 로그인 연동 with firebase, google’

https://join.steemcoinpan.com

여러분!! 기존에 계정 생성 어떻게 하셧나요? 어려우셨죠?

지인에들에게 스팀잇을 소개하는 건 꽤 어렵습니다. 스팀잇을 소개하기 어려운 것 중에 하나는 마스터키 소개입니다. 마스터키는 스팀잇, 블록체인이 생소한 사람들에게 높은 진입장벽입니다.

제가 개발중이었던 구글 계정 연동을 통한 스팀잇 회원가입 서비스를 소개합니다. 이 회원가입 페이지가 진입장벽을 조금이나마 낮추지 않을까? 기대해봅니다.

이 페이지는 아래의 기능들을 제공합니다.

• 구글 계정 인증을 통해, 회원가입을 할 수 있습니다.
• 비밀번호는 사용자가 직접 설정할 수 있고요.
• 컴퓨터가 아닌 스마트폰에서도 쉽게 회원가입을 할 수 있습니다.

아래 링크를 들어가서 스팀 계정을 만들어 볼 수 있습니다. 이 링크는 스팀코인판 회원가입 버튼과 연결할 예정입니다.

https://join.steemcoinpan.com

튜토리얼

회원가입 후, 스팀코인판에 로그인하는 것 까지 영상으로 만들어봤습니다. 계정생성이 성공하면 5-10초정도 시간이 걸립니다. 여기에 로딩 애니메이션은 하나 넣도록 하겠습니다.

https://www.youtube.com/watch?v=5FfnMhv1o1o

추가 업데이트

• 계정 중복확인
• 로딩 추가
• 스팀코인판으로 이동 링크 추가
• 계정 중복확인할 때, 소문자로 변환 필요

이전 글

• https://jacobyu.net/categories/개발/steem/회원가입/

궁금한 것 있으면 댓글 달아주세요.

감사합니다.

This page is synchronized from the post: ‘구글 계정 연동을 통한 스팀잇 회원가입’