'전체 글'에 해당되는 글 916건

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

1. 도네리카노 사용하기

https://donaricano.com/

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

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

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

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

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

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

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

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

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

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

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

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

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

리엑트네이티브

리엑트 네이티브를 처음 설치하는 사람이라면 조금은 혼동이 될 수 있다. 유튜브나 블로그에 적힌 글을 보면 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

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

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

1. 리엑트 네이티브란?

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

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

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

https://cogi.kr/rn

https://cogi.kr/rn2

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

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

장점

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

단점

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

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