Publisher to React Native Developer

겨울의 초절정인 2월 중순, 에임스에 웹 퍼블리셔로서 입사하게 되었습니다. 그로부터 약 8개월 후, 저는 React를 거쳐 React Native로 애플리케이션을 개발하고 있습니다. 오랜 시간은 아니어도 지금의 포지션에 위치하기에 대해 얘기해 보려고 합니다.

웹 퍼블리셔(Web Publisher)란?

퍼블리싱은 웹 사이트를 제작할 때, 웹 디자이너가 디자인한 것을 웹 표준성과 접근성에 부합하도록 웹 사이트를 제작하고 편집하는 일을 합니다. 사실 퍼블리셔는 우리나라에서만 사용하는 단어로, 최근 들어서는 JS의 중요도가 높아짐에 따라 JS를 다루는 사람들도 많아지고 있습니다. 실제 외국뿐만 아니라 우리나라의 대기업들 채용공고를 보면 퍼블리셔가 아닌 프론트엔드 개발자로서 채용하는 경우가 더 많습니다. 사실 굉장히 의견이 분분하고 혼란스러운 것이 퍼블리셔와 프론트 엔드 개발자의 경계입니다. 많은 사람이 의견을 내고 있지만 명확하게 정해진 것은 없다고 생각합니다. 하지만, 그럼에도 불구하고 명확한 차이는 분명히 존재합니다.

저 역시 위와 같은 이유로 퍼블리셔로서의 미래에 대해 많이 고민할 수 밖에 없었고, 그렇기에 프론트엔드 개발자로서 역량을 배울 기회가 있다면 적극적으로 얻고자 했습니다.

JQuery Ajax(Asynchronous Javascript And XML)

물론 자바스크립트를 못 한다고 해서 퍼블리셔가 아닌 것은 아닙니다. 필요한 기능에 따라 Jqeury 플러그인을 가져다 쓰면 되기 때문입니다. 요즘에는 이전과는 달리 웹 퍼블리셔도 JS를 다루기 시작하면서 제이쿼리 ajax를 통해 클라이언트에서 서버로 데이터를 요청하고 결과를 받는 경험을 해 볼 수 있게 되었습니다.

$.ajax({
    // URL은 필수
    url : '요청 URL 주소를 입력합니다.'
    // 필요한 Option을 선택해서 구현합니다. ('[]'는 반복해서 사용할 수 있다는 의미입니다.)
    [, Options]
});

Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미합니다. 서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있도록 하는 것이 ajax의 장점 중 하나입니다. 페이지 전체를 로드하여 렌더링할 필요가 없고 갱신이 필요한 일부만 로드하여 갱신하면 되므로 빠른 퍼포먼스와 부드러운 화면 표시 효과를 기대할 수 있습니다. 서버는 HTML, XML, JSON 등을 반환하는데 Ajax을 위한 데이터 형식은 JSON(JavaScript Object Notation)을 사용하는 것이 일반적 입니다.

React

리액트(React, React.js 또는 ReactJS)는 선언적, 효율적으로 유연하게 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리의 하나로, 페이스북과 개별 개발자 및 기업들 공동체에 의해 2013년에 오픈 소스로 공개되어 지금도 계속 업데이트 중인 프로젝트입니다. 사실 리액트를 사용하지 않아도 얼마든지 웹 페이지를 html, css를 이용해 만들 수 있습니다. 그러나 리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 손쉽게 만들 수 있게 됩니다.

1. 자바스크립트 라이브러리란?

페이지를 정적으로 보여주는 게 아닌 동적으로 보여주고 싶다면 자바스크립트를 이용하면 됩니다. UI 라이브러리를 사용하는 이유는 우리가 관리하기 귀찮은 DOM 관리 등을 UI 라이브러리가 해주고 개발자는 기능 개발(상태관리)에만 집중할 수 있도록 해주기 때문입니다. 자바스크립트 라이브러리는 웹 개발 시 DOM 관리 및 상태 값 업데이트 관리 등 귀찮은 것들을 최소화하고 오직 기능 개발, 사용자 인터페이스(UI)를 구현하는 것에 집중하기 위해 만들어진 프로젝트들로 “React, Angular, Vue”가 자바스크립트 라이브러리에 속합니다.

2. React Component

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. 이러한 Component는 재사용이 가능한 API로 다른 Component에서 재사용이 가능하며 또는 다른 앱에서도 재사용이 가능합니다. 리액트에서는 Component 안에 정의된 render() 함수를 통해 사용자 화면에 보여 줄 수 있습니다. render() 함수는 html 문자열을 그대로 반환하는 것이 아니라 해당 Component의 모습과 동작이 정의된 객체를 반환하게 됩니다. 최종적으로 최상위 Component까지 렌더링이 완료되면 우리가 흔히 아는 HTML 마크업 문자를 생성하고 DOM 객체에 적용하게 됩니다.

3. 컴포넌트 예제

    class HelloMessage extends React.Component {
        render() {
            return (
            <div>
                Hello {this.props.name}
            </div>
            );
        }
    }

        ReactDOM.render(
        <HelloMessage name="Aims!" />,
        document.getElementById('hello-example')
        );

결과: Hello Aims!

React Native

React Native(이하 RN)는 리액트의 접근 방법을 모바일로 확장한 Facebook의 오픈소스 프로젝트입니다. 애플리케이션을 개발한다고 한다면 IOS는 Kotlin과 Java가 대표적이고 IOS는 Objective-C와 Swift로 개발하는 것이 일반적입니다. 이 일반적인 언어들로 개발하는 것은 각각의 OS에 최적화되어 있습니다. 하지만 각각의 언어로 개발하기 위해선 개발자들은 두 가지 언어와 OS를 모두 이해해야 합니다. 이를 해결하기 위해 등장한 것이 하이브리드 웹앱입니다.

웹을 구동하면 앱 화면은 웹(Web) 화면으로 표시하고 필요한 기능 웹 기술로 구현합니다. 초창기 하이브리브 웹 기술은 브라우저를 사용했기 때문에 브라우저에서 제공하는 성능 이상으로는 발휘할 수 없었습니다. 이를 보안을 유지하기 위해 페이스북은 웹 브라우저를 사용하지 않고 네이티브 브릿지(Native Bridge)를 사용하는 리액트 네이티브를 발표합니다.

리액트 네이티브는 네이티브 브릿지를 통해 네이티브 스레드(Native Thread)와 통신하면서 웹앱과 다르게 성능을 최적화시킵니다. Javascript로 코딩한 React의 컴포넌트는 RN 플랫폼을 거쳐 IOS, Android Native 코드로 각각 변환됩니다.

React Native의 개발과정

1. Expo 와 React Native CLI

앱을 초기화하고 개발하는 방법에는 Expo와 React Native CLI의 두 가지 방법이 있습니다. Expo는 도구의 첫 번째 범주에 속하며 약간의 유연성을 희생하면서 보다 강력하고 개발자 친화적인 개발 워크 플로를 제공합니다. Expo로 부트스트랩 된 앱은 또한 BarcodeScanner, MapView, Image Picker 등과 같이 Expo SDK에서 제공하는 많은 유용한 기능에 액세스 할 수 있습니다.

반면에, react-native init 명령을 통해 React Native CLI로 앱을 초기화하면 개발의 용이성 대신 유연성이 제공됩니다. react-native init 명령으로 생성된 React Native 앱은 개발자에게 숨겨진 네이티브 코드가 없기 때문에 순수한 React Native 앱이라고 합니다.

2. React Native CLI를 선택한 이유

Expo 공식 문서에는 다음과 같이 쓰여 있습니다.

“EXPO 안에 들어가는 앱은 순수 JavaScript로 작성되고, 절대로 네이티브 iOS나 Android 레이어까지 내려가지 않는다. 이것은 EXPO의 핵심 철학이고, EXPO를 빠르게, 사용하기 좋게 만들어주는 부분이다.”

따라서, 구현 가능한 기능의 범위가 EXPO에서 제공하는 기능들을 벗어날 수 없기 때문에, EXPO에서 지원하지 않는 Bluetooth 컨트롤이나, 네이티브 언어로 된 모듈을 이용하려 할 때 eject 명령을 사용하게 됩니다.

특히, 국내에서 서비스해야 하는 앱이라면 카카오 로그인이나 네이버 로그인, 네이버 지도나 카카오 지도 등을 사용해서 앱을 만들어야 하는 케이스가 매우 많을 것입니다. 실제로 React Native CLI로 개발을 시작하게 된 이유 또한 애플리케이션에서 구현해야 하는 기능 중에 위의 기능들이 포함되어 있었기 때문입니다.

3. 현재까지 개발하면서 느낀점

1) JS를 다룰 줄 안다고 React를 바로 구현할 수 있는 것은 아니다.

많은 인터넷 강의를 보면 대부분 React 또는 RN 구현을 위해 필요한 조건으로 약간의 퍼블리셔의 지식(html, css, JS 등)을 요구합니다. 그러나 막상 시작하면 ES6와 화살표 함수와 같은 이전에 보지 못했던 지식에 당황 할 수 있습니다. 그런데도 많은 퍼블리셔들이 React를 선택하는 이유에는 React 기반 애플리케이션에서 쓰이는 몇몇 자바스크립트만 알게 되면 무리 없이 개발에 들어갈 수 있다는 점이 있습니다. 그렇기 때문에 비교적 진입장벽이 낮다고 볼 수 있습니다.

2) React와 RN은 개발환경 설치에서부터 시작한다.

이번 RN을 사용해 개발한 애플리케이션 환경설치 중에 노트북을 초기화한 뼈아픈 기억이 있어서 더더욱 중요하게 생각하는 부분입니다. 공식문서를 통해 정확하게 보지 않고 설치하게 되면 사용하는 Node와 Expo, React Native CLI 등 버전 정보가 맞지 않아 남들 다 보는 시작화면을 보지도 못하는 경우가 생길 수 있기 때문입니다

3) 개발을 한 달 하면 영어 실력이 늘어있을 것만 같았다. (~~하지만 제자리..~~)

한국어로 쓰여있는 RN 관련 자료들을 보면 “국내자료가 많아졌으면 좋겠다”라는 사람들을 자주 보게 됩니다. 그만큼 React 또는 RN의 관련자료는 대부분이 영어와 그 외의 언어(그렇다고 한국어는 아님….)로 되어 있어 꼭 화면 어딘가에 켜져 있는 구글 번역기와 떼려야 뗄 수 없는 사이가 됩니다. 가끔가다 오아시스처럼 한국어로 되어 있는 자료를 만나더라도 구축된 버전이 달라서 사용하지 못하는 경우가 생길 수도 있으니 꼭 버전 정보를 미리 확인해야 합니다.

4) 유용하게 사용한 참고 사이트

퍼블리셔에서 완전히 프론트엔드 개발자로서 완전히 자리 잡은 게 아닌 만큼 두 분야에서의 역량을 충분히 쌓아가는 것이 가장 우선순위의 목표입니다. 이번 글이 지금까지 겪은 과정들을 간단하게 이야기했다면, 다음 문서에서는 본격적으로 RN을 통해 애플리케이션을 개발하면서 느낀 점과 그 과정에 대해 자세하게 이야기하고자 합니다.

다음 포스팅을 작성해줄 분은 바로 에임스의 안드로이드 개발자이신 이수현 연구원입니다.