donaricano-btn

 

안녕하세요. 요즘 유튜브와 BJ방송을 보면 많은 사람들이 크리에이터에게 후원을 합니다. 이젠 블로그에서도 후원을 받을 수 있습니다. 어떻게 받을 수 있는지 알아보겠습니다.

1. 도네리카노 사용하기

https://donaricano.com/

 

유튜브, 블로그, BJ, 아티스트의 손쉬운 후원문화로 세상에 좋은 변화를 만듭니다. | 도네리카노

유튜버, 블로거, BJ, 아티스트, 디자이너, 예술가에게 향긋한 커피 한잔을 선물하세요. 커피 한잔이 세상에 좋은 울림이 됩니다.

donaricano.com

- 도네리카노라는 서비스입니다. 도네리카노를 통해 네이버, 티스토리 블로그에서 후원버튼을 만들 수 있습니다. 또한 자신의 개인 카카오 QR코드를 업로드하기 때문에 수수료없이 무료로 후원 받을 수 있습니다. 

2. 도네리카노 회원가입 및 마이페이지 꾸미기

- 회원가입을 하게되면 마이페이지로 이동하게 됩니다. 마이페이지는 사용자들에게 노출되는 페이지입니다. 그렇기 때문에 대쉬보드를 클릭하여 개성있는 글과 함께 자신의 카카오 QR코드 이미지를 업로드하여 업데이트 합니다. 화면에 보이는 펜을 누루면 업데이트를 할 수 있습니다.

3. 마이페이지에서 확인하기

- 이제 자신의 마이페이지를 확인하면 알맞게 적용된것을 볼 수 있습니다.

후원 하시는 분들이 도네리카노 버튼을 클릭하면 보이게되는 페이지 입니다. 

4. 도네리카노 버튼 블로그에 적용하기

- 다시 대쉬보드로 돌아가면 하단에 주황버튼 두개가 보입니다.

오른쪽 버튼을 클릭합니다. 그럼 아래와 같은 창이 뜨는걸 확인 할 수 있습니다.

알맞은 버튼에 크기를 선택하여 소스코드를 복사합니다. 자세한 사용방법은 사용방법 보기 버튼을 클릭하시면 나옵니다. 저는 티스토리에 추가하는것이 목표이기 때문에 티스토리에 적용하는 블로그 주소를 참고했습니다.

https://blog.naver.com/tipup_manager/221987927495

 

티스토리에 도네리카노 적용하기

안녕하세요. #도네리카노 입니다. 이번 글에서는 #티스토리에 도네리카노 버튼을 적용하는 방법을 알아보도...

blog.naver.com

저도 서식을 만들어 추가했습니다! 예전에 buy me a coffee 라는 서비스도 있었지만 외국버전이고 paypal을 사용해야되서 짜증났지만 도네리카노라는 서비스를 통해 블로거도 편하게 후원받을 수 있어서 좋은것 같습니다 ㅎ

블로그 이미지

리딩리드

,
donaricano-btn

React-testing-library 란?

리엑트를 개발하다보면 TDD에 관해서 한번씩 생각하게 합니다. 화면에 소스가 렌더링 되기전에 커맨드라인으로 미리 확인 할 수 있다면 개발속도가 더 빠를까라는 생각을 하게 됩니다. 그러나 개발의 생산성을 올리기위해 TDD를 진행한다면 이 방법은 해답이 될 수도 있고 아닐 수도 있습니다.

TDD는 오히려 빠른개발을 방해할 수도 있습니다. 하지만 더 견고한 어플리케이션을 제작할 수 있다는 사실은 반론할 수 없습니다. 더 견고하고 신뢰할 수 있는 웹 서비스를 만들기 위해서 react-testing-library를 사용합니다.

react-testing-library는 결국 react 컴포넌트의 DOM테스트를 하기위한 TDD 도구로 사용됩니다. Testing-library란 패키지안에 react-testing-libary가 존재하며 설치방법 또한 npm 을 이용하여 간편하게 설치가 가능합니다.

npm install --save-dev @testing-library/react

react 테스팅 도구로 과거에는 enzyme을 사용했지만 react 의 공식문서에서 react-testing-library 를 테스트 도구로 사용하는것을 권장하고 있습니다. 지금부터 react-testing-library의 사용법을 천천히 따라가 보도록 하겠습니다.

https://testing-library.com/docs/react-testing-library/intro

 

Testing Library · Simple and complete testing utilities that encourage good testing practices

Simple and complete testing utilities that encourage good testing practices

testing-library.com

 
블로그 이미지

리딩리드

,
donaricano-btn

리엑트네이티브

리엑트 네이티브를 처음 설치하는 사람이라면 조금은 혼동이 될 수 있다. 유튜브나 블로그에 적힌 글을 보면 expo-cli 를 이용한 간단한 방법 소개가 많다. 
그 이유는 그만큼 react-native 를 빠르게 접할 수 있으며 누구나 어느 환경에서든 개발을 할 수 있기때문이다. 하지만 간편함에는 한계가 있다고 생각합니다.

expo-cli와 react-native-cli 차이

expo-cli

- 간편한시작이 가능합니다.
- 배포가 편하고 업데이트는 expo에 publish 만 해주면 끝납니다

- Expo 에서 제공하는 API 만 사용할 수 있습니다.
- native  파일을 제어할 수 없습니다.
- 나중에 프로젝트가 커지면 Expo 파일을 ejet 해서 사용해야 합니다.

react-native-cli

- OS 환경에 따른 셋팅이 필요합니다.
- 개발툴 또한 xcode, android studio를 필요로 합니다.
- expo에서 불가능했던 native의 필요한 부분을 컨트롤 할 수 있습니다.

결국은 expo에서 시작했지만 프로젝트의 요구사항이 다양해진다면 어쩔 수 없이 react-native-cli로 넘어가게 됩니다.

리엑트네이티브 설치

설치는 react-native 페이지를 참고합니다.

https://facebook.github.io/react-native/docs/getting-started

 

React Native · A framework for building native apps using React

A framework for building native apps using React

facebook.github.io

위페이지에서 expo-cli 와 react-native-cli를 이용한 설치방법을 알 수 있습니다.
react-native-cli를 선택하게 되면 OS 구분에 따른 설치방법이 나옵니다. 저는 로컬에 macOs를 이용한 방법으로 설치했습니다.

 

문서가 꽤나 잘 정리되어있습니다. 하지만 maxOs 환경에서 설치시에 먼저 xcode 업데이트를 체크해주시기 바랍니다. 
저는 처음에 설치할때 xcode 버전문제로 조금 고생을 했습니다 ㅠㅠ

'Front-End > ReactNative' 카테고리의 다른 글

[ReactNative] 리엑트 네이티브란?  (0) 2019.11.28
블로그 이미지

리딩리드

,
donaricano-btn

1. 리엑트 네이티브란?

요즘 크로스플랫폼이라는 단어를 많이 사용하게됩니다. 크로스플랫폼 혹은 멀티플랫폼이라고도 하는 개발 도구들이 우후죽순 생겨나기 시작했습니다. 

크로스플랫폼도구란 하나의 언어로 다양한 플랫폼인 web, ios, android 등을 개발할 수 있는 도구를 말합니다. 예를 들어 angular의 ionic, 구글의 flutter, c#으로 개발하는 xamarin, 마지막으로 리엑트 네이티브까지 개발자들은 행복한 고민에 놓일 수 있습니다.

이런 도구들 중 가장 핫하게 뜨고있는 리엑트 네이티브는 2017년 부터 지금까지 독주를 이어오고 있습니다. 

https://cogi.kr/rn

 

코기(cogi) - 알기쉬운 단축 URL

 

cogi.kr

https://cogi.kr/rn2

 

코기(cogi) - 알기쉬운 단축 URL

 

cogi.kr

위의 URL을 통해 흥미로운 비교를 해보시기 바랍니다. 

도구들 중에 저희가 집중하고있는 것은 리엑트 네이티브 입니다.

장점

- 어마어마한 생산성
- UI 패키지
- 라이브리로딩
- 코드푸시
- 자바스크립트 코드를 이용한 문법

단점

- 뷰 스택이 쌓일수록 느림
- expo-cli 사용시 native 기술 한계
- native-cli 사용시 os 영역이 존재

제가생각하는 최대의 장점은 누구에게나 친숙한 자바스크립트 코드를 이용하여 native 앱을 제작할 수 있다는 점입니다. 

 

 

'Front-End > ReactNative' 카테고리의 다른 글

[ReactNative] 리엑트네이티브 설치하기  (0) 2019.11.28
블로그 이미지

리딩리드

,