Toward Better Documentation

뛰어난 개발자 경험을 제공하려면 탄탄한 문서가 필수다. 좋은 문서를 만드는 데는 여러 요소가 필요하다. 이상적인 문서는 간결하고 유용하며 정확하고 완전해야 한다. 또한 사용자에게 즐거운 경험을 제공해야 한다. 최근 여러분의 피드백을 바탕으로 문서를 개선하기 위해 노력했고, 그 과정에서 이뤄진 몇 가지 개선 사항을 공유하고자 한다.

인라인 예제

새로운 라이브러리, 프로그래밍 언어, 프레임워크를 배울 때 가장 아름다운 순간은 코드를 처음 작성하고 실행해 보며 실제로 작동하는 것을 확인하는 순간이다. 여러분이 실제로 무언가를 만들어냈을 때 느끼는 그 감동을 문서에 담고 싶었다. 다음과 같이 말이다:

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class ScratchPad extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <Text style={{fontSize: 30, flex: 1, textAlign: 'center'}}>
          Isn't this cool?
        </Text>
        <Text style={{fontSize: 100, flex: 1, textAlign: 'center'}}>
          👍
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('ScratchPad', () => ScratchPad);

Devin Abbott의 도움으로 react-native-web-player 모듈을 사용한 이 인라인 예제는 React Native의 기본을 배우는 데 매우 효과적인 방법이다. 우리는 React Native 초보자를 위한 튜토리얼을 가능한 한 이러한 예제를 사용하도록 업데이트했다. 예제 코드를 조금만 수정해도 어떤 결과가 나오는지 궁금하다면, 이 방법이 직접 실험해 보기에 매우 적합하다. 또한 개발자 도구를 만들고 있다면, 여러분의 사이트에 React Native 샘플을 라이브로 보여주고 싶을 때 react-native-web-player를 사용하면 간단히 구현할 수 있다.

코어 시뮬레이션 엔진은 Nicolas Gallagher의 react-native-web 프로젝트에서 제공된다. 이 프로젝트는 Text나 View와 같은 React Native 컴포넌트를 웹에서 표시할 수 있는 방법을 제공한다. 모바일과 웹 경험을 공유하는 코드베이스를 구축하고 싶다면 react-native-web을 확인해 보길 바란다.

더 나은 가이드

React Native의 일부 영역에서는 다양한 방법으로 작업을 수행할 수 있다. 여러분의 피드백을 통해 더 나은 가이드가 필요하다는 것을 알게 되었다.

새로운 네비게이션 가이드를 제공한다. 이 가이드에서는 Navigator, NavigatorIOS, NavigationExperimental 등 다양한 접근 방식을 비교하고 어떤 것을 사용해야 하는지 조언한다. 중기적으로는 이러한 인터페이스를 개선하고 통합하는 작업을 진행 중이다. 단기적으로는 더 나은 가이드가 여러분의 작업을 더 쉽게 만들어 줄 것이다.

또한 새로운 터치 처리 가이드도 준비했다. 이 가이드는 버튼과 같은 인터페이스를 만드는 기본 개념과 터치 이벤트를 처리하는 다양한 방법에 대해 간략히 설명한다.

플렉스 박스(Flexbox) 영역도 개선했다. 플렉스 박스를 사용한 레이아웃 처리와 컴포넌트 크기 조절에 대한 튜토리얼을 포함한다. 또한, React Native에서 레이아웃을 제어하는 모든 props 목록도 제공한다. 이 목록은 간단하지만 유용한 정보를 담고 있다.

시작하기

React Native 개발 환경을 컴퓨터에 설정할 때, 여러 가지 설치와 설정 작업이 필요하다. 설치 과정을 정말 재미있고 흥미롭게 만들기는 어렵지만, 최소한 빠르고 간편하게 만들 수는 있다.

우리는 새로운 시작하기 워크플로우를 구축했다. 이 워크플로우는 개발 운영체제와 모바일 운영체제를 미리 선택할 수 있게 해서, 모든 설정 지침을 한 곳에 간결하게 제공한다. 또한 설치 과정을 직접 테스트하여 모든 것이 작동하는지 확인하고, 각 결정 지점에 명확한 권장 사항을 제공하도록 했다. 동료들을 대상으로 테스트한 결과, 이 방법이 개선된 것임을 확신한다.

또한 기존 앱에 React Native 통합하기 가이드도 작업했다. Facebook 앱과 같은 가장 큰 규모의 앱들 중 많은 수가 React Native로 앱의 일부를 구축하고, 나머지 부분은 일반 개발 도구로 만든다. 이 가이드가 더 많은 사람들이 이런 방식으로 앱을 개발하는 데 도움이 되길 바란다.

여러분의 도움이 필요합니다

여러분의 피드백은 우리가 무엇을 우선순위로 해야 할지 알려준다. 어떤 사람들은 이 글을 읽고 "더 나은 문서? 휴. X의 문서는 여전히 엉망이야!"라고 생각할지도 모른다. 그건 좋다. 우리는 그런 에너지가 필요하다. 피드백을 주는 가장 좋은 방법은 피드백의 종류에 따라 다르다.

문서에서 잘못된 설명이나 실제로 작동하지 않는 코드와 같은 오류를 발견하면 이슈를 제출해라. "Documentation" 태그를 붙여서 적절한 사람에게 쉽게 전달될 수 있도록 해라.

특정한 오류는 없지만 문서의 어떤 부분이 근본적으로 혼란스럽다면, GitHub 이슈로 제출하기보다는 Canny에 해당 문서 영역에 대한 도움이 필요한 부분을 게시해라. 이렇게 하면 가이드 작성과 같은 일반적인 작업을 할 때 우선순위를 정하는 데 도움이 된다.

여기까지 읽어줘서 고맙고, React Native를 사용해줘서 고맙다!