React native로 쉽게 채팅 어플리케이션 구현해보자 - 1 ( 개발툴 설치하기)

카카오톡같은, 또는 페이스북 메시지 같은 채팅은 어떻게 만드는걸까?

채팅이라는 기능이 많은곳에 사용이 되고 있는데요

요즘 인기가 있는 React Native라는 친구를 이용해서 간단한 채팅 어플을 만들어 보겠습니다.

위 포스팅은 JavaScript와 Android Studio에 대한 간단한 지식을 요구합니다.

일단 시작하기 전에 우리가 만들어 볼 어플리케이션의 데모 부터 보고 시작하겠습니다.

간단하면서도 깔끔한 디자인이 돋보이는 라이브러리입니다.

위 어플리케이션을 만들기 위한 준비물들을 알아보겠습니다.


클라이언트

• React Native
• Node.js
• Visual Studio Code ( 사용하시는 에디터가 있으면 필요 없습니다 )
• Gifted Chat (npm)

서버

• Socket.io (npm)
• Express (npm)

설치방법

1. React Native + Node.js
   
   
   FaceBook 에서 개발한 JS기반 하이브리드 웹앱 프레임워크 입니다.
   https://facebook.github.io/react-native/docs/getting-started.html
   React Native 를 설치하기 위해선 일단, 3가지 프로그램의 설치가 선행되어야하는데요,
      - Node.js
      - python ( 2.7 ) * 3 버전은 지원되는지 잘 모르겠습니다..
      - jdk 8++
   위 프로그램들을 개별적으로 설치하시거나, 한번에 설치하는 방법이 있는데요.
   한번에 설치하는것은 Chocolatey 라는 친구를 이용해서 설치하면 됩니다.
   
   CMD 창을 관리자권한으로 열어주시고,
   
   
   @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
   
   위 명령어를 복사해서 붙여넣기 해주신 뒤에, 엔터를 눌러주시면 설치가 시작됩니다.
   그 다음 설치가 완료되면 cmd창을 재실행 시킨뒤(재실행 해야 choco를 이용할수있어요)
   
   choco install -y nodejs.install python2 jdk8
   이라는 명령어를 cmd 창에 입력해주세요, (관리자 권한)
   (*만약 미리 설치가 되어있는 프로그램이 있으면 빼주세요)
   
   이제 React Native 프로젝트를 만들어주는 npm 노드 모듈을 설치할겁니다.
   
   " npm install -g react-native-cli " 를 cmd 창에서 입력해주세요,
   
   
   방금 설치한 모듈은 안드로이드 스튜디오로 치면 New Project 같은 기능을 해줍니다.
   
   프로젝트를 담아둘 폴더를 하나 만들어주세요, cmd에 익숙해져야 하기 때문에 cmd로 한번 해보겠습니다.
   cmd로 알맞은 경로로 이동한 뒤, " mkdir 폴더이름 " 을 입력해주세요
   그다음, 생성한 폴더로 이동해주세요 ( *** 폴더 경로 이동 명령어는 cd입니다)
   
   
   이제 React Project를 만들어 볼텐데요, 이동한 폴더에서
   " react-native init 프로젝트이름 " 으로 프로젝트를 생성해 주세요. ( 시간이 약간 걸립니다 )
   이제 프로젝트를 만들어 설치하기 위한 작업을 시작하겠습니다.
   프로젝트를 컴파일 하기 위해서는 Android SDK가 필요한데요, Android Studio를 설치해 주세요.
   https://developer.android.com/studio/index.html
   그 다음, SDK Manager라는 곳에 들어가 아래 4가지를 설치하시면 됩니다.
      - Google APIs
      - Android SDK Platform 23
      - Intel x86 Atom_64 System Image
      - Google APIs Intel x86 Atom_64 System Image
   
   
   
   
   각자 User 이름에 맞게 시스템 환경변수도 추가해주세요
   
   
   
   이제 프로젝트를 컴파일 하기 위한 모든 준비가 끝났습니다.
   
   가상 기기를 띄우거나, 실제 기기를 연결한 후 usb 디버깅 체크해주고,
   cmd에서 아까 프로젝트를 init 했던 디렉토리로 들어가
   " react-native run-android" 를 cmd 창에서 입력해주세요.
   아래와 같은 화면이 떴다면 성공입니다.
   
   
   

2. Visual Studio Code
   
   코드를 입력하고 수정하기 위해서 editor가 필요한데요, 저는 이 에디터가 가장 가볍고 편한것 같습니다.
   https://code.visualstudio.com/

3. GiftedChat 설치하기.
   
   
   GiftedChat은 채팅 ui 라이브러리입니다.
   GiftedChat github : https://github.com/FaridSafi/react-native-gifted-chat
   깃허브 페이지에 메소드나 예제 코드가 많으니 이곳을 참조하시면 좀 더 향상된 ui를 제작할 수 있습니다.
   
   이제 프로젝트에 GiftedChat을 설치하기 위해 아까 만들어 두었던 폴더를 들어가주세요,
   그다음 cmd에서 " npm install react-native-gifted-chat --save " 를 입력해서 설치해주세요.

이 과정까지 다 마치시면 채팅 어플을 만들기 위한 준비가 모두 끝났습니다

일단 이번 포스팅에서는 개발툴 설치와 간단한 설명을 했는데요
긴 글 읽어주셔서 감사하고 다음 포스팅부터 본격적인 개발에 들어가 보도록 하겠습니다.

설치하시면서 안되는점이나 오류는 얼마든지 댓글로 물어봐주세요!