[ReactNative] 리엑트네이티브 설치하기

Front-End/ReactNative 2019. 11. 28. 19:29
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
블로그 이미지

리딩리드

,

[ReactNative] 리엑트 네이티브란?

Front-End/ReactNative 2019. 11. 28. 14:12
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
블로그 이미지

리딩리드

,

[socket.io] 7. socket.io를 이용한 채팅프로그램 - 타이핑중추가

Front-End/socket.io 2019. 11. 28. 13:22
donaricano-btn

1. 타인의 타이핑 확인

채팅을 하다보면 누군가가 글을 입력하고 있다는 알림을 보신적이 있습니다. 특히 slack을 애용하신다면 자주 보셨을 거라 생각합니다. 이번에는 저희가 만든 채팅프로그램에 누군가 입력중이라는 표시를 추가해보도록 하겠습니다.

2. 클라이언트 socket

index.html

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
      #nick { position: absolute; right: 0; top: 0;}
      #typing { position: absolute; right: 0; bottom: 80px; outline: 1px solid green}
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
      <input id="nick" placeholder="Enter your name"/>
    <div id="typing"></div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      $(function () {
        var socket = io();
        $('form').submit(function(e){
          e.preventDefault(); // prevents page reloading
          socket.emit('chat message', $('#nick').val() + ':' +$('#m').val());
          $('#m').val('');
          return false;
        });
        socket.on('chat message', function(msg){
           $('#messages').append($('<li>').text(msg));
         });
        socket.on('typing', function(msg){
            $('#typing').text(msg);
         });
        $('#m').on('keyup', function(e){
          if (e.target.value) {
            socket.emit('typing', $('#nick').val());
          }
        })
      });
    </script>

  </body>
</html>

- <div id="typing"></div>: 타이핑중이라는 표시를 해줄 태그를 추가했습니다.
- keyup 이벤트: 기존 인풋 박스에 keyup 이벤트를 생성하여 키보드입력이 있을시 서버소켓으로 타이핑중인 nickname을 날립니다.
- socket.on('typing'): 서버에서 받아온 typing 관련 메시지를 태그에 출력합니다
- #typing: 태그에 스타일을 추가합니다.

3. 서버 socket

index.js

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

app.get('/', function(req, res){
	res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
	socket.broadcast.emit('chat message', 'user connection...');
	socket.on('chat message', function(msg){
		socket.broadcast.emit('typing', '');
		io.emit('chat message', msg);
	});
	socket.on('disconnect', function(){
		socket.broadcast.emit('chat message', 'user disconnection...');
	});
	socket.on('typing', function(msg){
		if(msg !== '') {
			socket.broadcast.emit('typing', msg + ' is typing...');
		}
	});
});

http.listen(3000, function () {
	console.log('listening on*: 3000');
});

- socket.on('typing'): 클라이언트에서 오는 typing 메시지를 리슨하고 있습니다. 그리고 broadcast를 통해 저를 제외한 다른 사람들에게 타이핑 중이라는 메시지를 보냅니다.
- 입력을 끝내고 send를 눌렀을때 받는 chat message 이벤트에 typing 메시지값을 '' 로 전송하여 타이핑이 끝났음을 클라이언트에게 표시합니다.

위 화면처럼 잘 나왔다면 성공입니다.

4. 마무리

조금 아쉬운 부분은 socket.io api 문서를 참고하여 더욱 다양한 기능을 앞으로 추가해야될것 같습니다.

'Front-End > socket.io' 카테고리의 다른 글

[socket.io] 6. socket.io를 이용한 채팅프로그램 - 닉네임추가  (0) 2019.11.27
[socket.io] 5. socket.io를 이용한 채팅프로그램 - 유저접속추가  (0) 2019.11.26
[socket.io] 4. socket.io를 이용한 채팅프로그램 - 이벤트처리 & 채팅완성  (0) 2019.11.26
[socket.io] 3. socket.io를 이용한 채팅프로그램 - socket.io 연동  (0) 2019.11.25
[socket.io] 2. socket.io를 이용한 채팅프로그램 - 프로젝트 설정  (0) 2019.11.21
블로그 이미지

리딩리드

,

[socket.io] 6. socket.io를 이용한 채팅프로그램 - 닉네임추가

Front-End/socket.io 2019. 11. 27. 11:20
donaricano-btn

socket.io 글들을 순차적으로 진행하시면 socket.io를 이해하는데 더욱 도움이 됩니다.

1. 닉네임추가

기존에 완성했던 채팅창에는 누구의 글인지 알 수가 없었습니다. 이제는 닉네임을 추가해서 조금더 채팅창 처럼 보이도록 하겠습니다. 

2. 클라이언트 socket.io

index.html

<style>
...
#nick { position: absolute; right: 0; top: 0;}
</style>

<body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
      <input id="nick" placeholder="Enter your name"/>// 닉네임 form 추가
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      $(function () {
        var socket = io();
        $('form').submit(function(e){
          e.preventDefault(); // prevents page reloading
          socket.emit('chat message', $('#nick').val() + ':' +$('#m').val());
          $('#m').val('');
          return false;
        });
        socket.on('chat message', function(msg){
           $('#messages').append($('<li>').text(msg));
         });
      });
    </script>
  </body>

- 먼저 닉네임을 만들 input 박스를 추가합니다.
- socket.emit() 부분에 닉네임을 포함한 msg 를 만들어 전송합니다
- style 부분에 저희가 만든 input에 absolute 포지션을 추가합니다.

3. 테스트

창을 여러게 열고 이름을 입력해보겠습니다.

이름이 잘 노출되나요??? 위와같이 나왔다면 성공입니다.
저는 클라이언트 사이드에서 임의로 닉네임을 추가했지만 만약 서버에 회원정보가 있다면 서버에서 클라이언트로 아이디를 추가해서 내려주는 구조로 만드는것이 좋을 것 같습니다.

'Front-End > socket.io' 카테고리의 다른 글

[socket.io] 7. socket.io를 이용한 채팅프로그램 - 타이핑중추가  (0) 2019.11.28
[socket.io] 5. socket.io를 이용한 채팅프로그램 - 유저접속추가  (0) 2019.11.26
[socket.io] 4. socket.io를 이용한 채팅프로그램 - 이벤트처리 & 채팅완성  (0) 2019.11.26
[socket.io] 3. socket.io를 이용한 채팅프로그램 - socket.io 연동  (0) 2019.11.25
[socket.io] 2. socket.io를 이용한 채팅프로그램 - 프로젝트 설정  (0) 2019.11.21
블로그 이미지

리딩리드

,

공지사항

카테고리

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바