반응형

ReactNative 개발 환경 설정을 진행할 때 사용하는 방법은 2가지가 있습니다.

  1. Expo CLI Quickstart
  2. React Native CLI Quickstart

이번에는 Expo CLI Quickstart를 사용하기 위한 개발 설정을 설명해보겠습니다.

 

우선 필요한 프로그램을 설치합니다.

1. Node를 설치합니다.

 - 12 LTS 버전 이상 설치 필요.

 

2. 'expo-cli'를 npm을 사용해서 설치합니다.

 - 전역 설치(-g)로 설치합니다.

npm install -g expo-cli

expo-cli 전역 설치 명령어 실행 화면
expo-cli 전역 설치 완료 화면

 

3. expo 명령어를 사용하여 React Native 프로젝트를 생성합니다.

expo init AwesomeProject

cd AwesomeProject
npm start # you can also use: expo start

 

4. 프로젝트 생성 후 'npm start'로 프로젝트를 실행합니다.

npm start로 프로젝트 실행한 화면

5. 실행된 화면을 확인합니다.

실행 화면 ( http://localhost:19002/ )

 

 

❗ 설정 중 예외상황

- 윈도우 터미널 1.0에서 실행 시 아래와 같은 에러 발생, 일반 cmd 창에서 실행 시 정상 동작 함.

 

반응형
반응형

이번 글에서는 Mac에서 ReactNative iOS 프로젝트를 시작하는 방법에 대해 다뤄보겠습니다.

 

개발 환경 설정이 되어 있지 않으시다면 이전 글을 보고 진행해주세요.

 

0. 개발 환경 설정

 

1. React Native Command Line Interface 를 이용하여 프로젝트 생성

프로젝트를 생성하고자 하는 폴더로 이동 후 터미널에서 아래 명령어를 실행합니다.

➜  initReactNative npx react-native init initReactNative

init 실행 후 화면

2. 위의 단계가 완료되면, 가이드대로 아래 명령어를 실행합니다.

init 명령어 완료

➜  initReactNative npx react-native run-ios

 

3. iOS 시뮬레이터와 Metro 터미널이 실행됩니다.

npx react-native run-ios 실행 화면
iOS 시뮬레이터 실행 화면

 

Metro 터미널 실행 화면

 

4. 이제 iOS 시뮬레이터에 앱이 설치되고 실행되게 됩니다.

React Native iOS 프로젝트 실행 화면

 

이제 React Native iOS 앱을 개발해보세요.

반응형
반응형

React Native 프로젝트를 진행하며 Chart를 구현해야 해서

Chart를 사용하기 위한 준비 단계를 간략하게 정리하였습니다.

 

Chart를 그리기 위해 선택한 라이브러리는 'react-native-svg-charts'입니다.

 

우선 다운로드 수가 많은 ReactNative chart 라이브러리를 검색하여

주간 다운로드 수가 2만이 넘는 라이브러리를 선택하였고(victory-native, react-native-svg-charts)

그 중, Used by가 더 많고 간단하게 사용할 수 있어보이는 'react-native-svg-charts'를 선택하였습니다.

 

1. 사전 준비

1-1. 'react-native-svg'를 설치합니다.

>npm install react-native-svg

1-2. 설치한 'react-native-svg'를 link합니다.

>react-native link react-native-svg

 

2. 라이브러리 설치

>npm install react-native-svg-charts

 

3. 간단한 차트를 그리는 코드를 작성합니다.

 

import React from 'react';

import { BarChart, Grid } from 'react-native-svg-charts'

class App extends Component {
    
    render() {
        const fill = 'rgb(134, 65, 244)'
        const data = [50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80]

        return (
            <BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>
                <Grid />
            </BarChart>
        )
    }
}

export default App;

 

4. 동작 확인

앱에서 차트가 그려지는지 확인합니다.

정상적으로 동작하는 경우 아래 화면처럼 chart가 표시됩니다.

react-native-svg-charts

 

반응형
반응형

docker를 사용하여 nginx를 설정하고 실행하는 법을 알아보겠습니다.

 

0. Docker 설치하기

 

1. nginX Image pull

docker pull nginx

 

2. 테스트용 index.html 만들기

<html>
<body>
Hello NginX with Docker!
</body>
</html>

 

3. docker로 nginX 실행하기

docker run --name hello-nginx -v D:\Docker\nginx\html:/usr/share/nginx/html -d -p 80:80 nginx

※ 명령어 설명

# nginx 이미지에 option을 주면서 실행
run nginx 

# 도커 컨테이너 이름을 설정
--name 

# local에 있는 파일or폴더를 nginx 도커의 컨테이너 안의 폴더와 mount
-v

# 백그라운드에서 실행
-d

# 포트 설정 (호스트 포트:도커 컨테이너 포트)
-p

 

4. Docker 컨테이너 실행 확인

>docker run --name hello-nginx -v D:\Docker\nginx\html:/usr/share/nginx/html -d -p 80:80 nginx
f296b29da0f2c9daeb5cd19a608474ed631a70a717a5d04fb1abd1143d121e62

>docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                NAMES
f296b29da0f2        nginx               "/docker-entrypoint.…"   18 seconds ago      Up 17 seconds       0.0.0.0:80->80/tcp   hello-nginx

 

5. localhost 접속 후 확인

[옵션]

nginX conf 설정을 변경하여 반영하고 싶을 경우.

 

1. 설정 파일 생성 (nginx.conf)

생성한 경로

nginx/conf/nginx.conf 

# nginx.conf 파일
# 컨테이너 내부에 /etc/nginx/conf.d/nginx.conf 경로에 존재

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;

    #security
    server_tokens off;
}

 

2. Dockerfile 생성

생성한 경로

nginx/Dockerfile

#Dockerfile
FROM nginx:latest

COPY config/nginx.conf /etc/nginx/conf.d/nginx.conf

CMD ["nginx", "-g", "daemon off;"]

EXPOSE 80

 

3. Docker 이미지를 생성

Dockerfile이 있는 경로에서 실행할 것.

docker build --tag nginx-test:1.0 .

 

4. 생성한 Docker 이미지 확인 후 실행

>docker images
REPOSITORY                TAG                 IMAGE ID            CREATED             SIZE
nginx-test                1.0                 6e43841d9356        4 weeks ago         133MB
>docker run nginx-test:1.0

 

반응형
반응형

Splash Screen이란?

앱을 실행했을 때 1~2초 정도 나오는 화면을 말합니다.

NETFLIX 앱의 Splash Screen

React Native 앱을 개발할 때 Splash Screen을 적용하는 법을 설명드리겠습니다.

 

0. React Native 앱 기본 설정이 되어 있지 않으시다면 아래 글을 참고하여 진행해주세요.

React native 시작하기 Part.1

 

React Native 시작하기 Part.1

이전 글에서 환경 설정을 모두 마쳤다면, 이제 React Native App을 생성 후 실행해보겠습니다. 환경 설정을 하지 않으신 분이라면 이전 글을 보고 환경 설정을 진행해주세요. frontmulti.tistory.com/61 React

frontmulti.tistory.com

 

1. Splash Screen을 사용하기 위한 오픈소스 라이브러리(react-native-splash-screen)를 다운로드합니다.

 

npm i react-native-splash-screen --save

 

2. 다운로드한 라이브러리의 plugin을 install 합니다.

react-native link react-native-splash-screen

 

3. Android의 MainActivity.java 파일을 수정합니다.

해당 파일의 경로는 'android/app/src/main/java/com/{앱 이름}/MainActivity.java'입니다.

import android.os.Bundle; // add
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // 추가해주세요.

public class MainActivity extends ReactActivity {

  // add onCreate with SplashScreen.show(this)
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this); // 추가해주세요.
    super.onCreate(savedInstanceState);
  }
  
  //...
}

 

4. 'launch_screen.xml' 파일을 'android/app/src/main/res/layout' 경로에 생성합니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:contentDescription="Splashscreen"
        android:scaleType="fitCenter"
        android:background="@color/splashprimary"
        android:src="@drawable/splashscreen"/>
</RelativeLayout>

 

5. Splash Screen에 보일 이미지 파일을 적용합니다.

 

(옵션) 해상도가 다른 여러 기기에 이미지 파일을 적용하기 원하신다면,

다양한 픽셀 밀도 지원 사이트를 참고하셔서 적용하세요.

 

다양한 픽셀 밀도 지원  |  Android 개발자  |  Android Developers

Android 기기는 다양한 화면 크기(핸드셋, 태블릿, TV 등)로 제공될 뿐만 아니라 화면의 픽셀 크기도 다양합니다. 즉, 한 기기에서는 제곱인치당 160픽셀을 사용하지만 다른 기기에서는 같은 공간에

developer.android.com

지금은 하나의 이미지를 기준으로 적용시켜 보겠습니다.

5-1. Splash Screen에 보여질 이미지 파일을 준비하세요.

5-2. 준비된 파일을 'android/app/src/main/res/drawable-XXX'로 시작하는 폴더에 복사 & 붙여 넣기 하세요.

저는 'splash_image.png'라는 파일을 만들고 아래 폴더들에 복사하였습니다.

splash_image.png 복사 & 붙여넣기

6. 4번에서 작성한 코드와 매핑되는 파일들을 생성합니다.

6-1. '@drawable/splashscreen'에 매핑되는 'splashscreen.xml' 파일을 'android/app/src/main/res/drawable' 경로에 생성합니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/splashprimary" />
    <item>
        <bitmap
                android:gravity="center"
                android:src="@drawable/splash_image" />
    </item>

</layer-list>

 

6-2. '@color/splashprimary'에 매핑되는 'colors-splash.xml' 파일을 'android/app/src/main/res/values' 경로에 생성합니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="splashprimary">#FFFFFF</color>
</resources>

colors-splash.xml

7. 이제 드디어 React Native 코드 부분의 App.js 파일을 수정합니다.

import SplashScreen from 'react-native-splash-screen';

class App extends Component {
    
    componentDidMount() { 
        setTimeout(() => {
            SplashScreen.hide();
        }, 500);
    }
    
    render() {
        return ()
    }
}

Splash Screen 라이브러리를 import 하고 componentDidMount 라이프 사이클 중에 timeout으로 Splash Screen을 얼마나 화면에 표시할지를 지정합니다.

500 -> 0.5 sec입니다.

 

이제 앱을 실행하여 Splash Screen을 확인해보세요.

 

궁금한 점이 있으시면 댓글 달아주세요~😀

반응형
반응형

ReactNative 개발 환경 설정을 진행할 때 사용하는 방법은 2가지가 있습니다.

  1. Expo CLI Quickstart
  2. React Native CLI Quickstart

Expo CLI Quickstart의 경우 쉽게 설정할 수 있지만, 몇 가지 제약 사항으로

React Native CLI 를 이용해서 개발환경을 설정해보겠습니다.

 

우선 필요한 프로그램들을 설치합니다. 공식 문서에서 설치하라고 하는 프로그램은 아래와 같습니다.

  • Node
  • Watchman
  • React Native command line interface
  • XCode

1. Node와 Watchman을 설치합니다.

Node와 Watchman의 경우 Homebrew를 이용해서 설치하면 됩니다.
Homebrew가 설치되어 있지 않으시면 https://brew.sh/ 에 방문하셔서 가이드에 따라 설치하시면 됩니다.

brew install 
brew install watchman

Node이 경우 10 버전 이상이 설치되어야 합니다.

 

2. Xcode 및 iOS시뮬레이터를 설치합니다.

 

2-1. Xcode의 경우 App Store에서 설치할 수 있습니다.

설치 링크 

 

‎Xcode

‎Xcode includes everything developers need to create great applications for Mac, iPhone, iPad, Apple TV, and Apple Watch. Xcode provides developers a unified workflow for user interface design, coding, testing, and debugging. The Xcode IDE combined with

apps.apple.com

Xcode의 버전은 9.4 또는 그 이상이 설치되어야 합니다.

App Store Xcode 개발자 도구

Xcode를 설치하셨으면, 이제 Xcode Command Line Tools을 설정해야 합니다.

Xcode를 실행하시고, 'Preferences' 메뉴를 선택합니다.

Xcode 실행 후 Preferences 메뉴 선택

'Preferences' 메뉴 - Locations 메뉴를 선택합니다.

그리고 'Command Line Tools'에서 Xcode {최신 버전}를 선택합니다.

2-2. iOS 시뮬레이터를 설치합니다.

Xcode > Preferences 메뉴 중 Components 탭을 선택합니다.

사용하고자 하는 iOS 버전의 시뮬레이터를 설치합니다.

시뮬레이터 왼쪽에 버튼을 클릭하면 다운로드가 시작됩니다.

시뮬레이터 목록

2-3. CocoaPods을 설치합니다.

CocoaPods란 라이브러리 의존성 관리 매니저입니다.

터미널에서 아래 명령어를 실행하여 설치해 주세요.

sudo gem install cocoapods

CocoaPods 설치 화면

이제 필요한 프로그램들 설치와 설정이 완료되었습니다.

 

 

반응형
반응형

웹개발을 주로 하다보니

인터넷을 하다가 접속한 사이트가 어떤 기술들로 만들어져있는지 궁금할 때가 있었습니다.

 

그런 궁금증을 해결할 수 있게 해주는 크롬 확장프로그램을 발견하여 공유드리려고 합니다.

 

 

준비하기

Wappalyzer 크롬 확장 프로그램 사이트

Wappalyzer 크롬 확장 프로그램

 

 

사용하기

확장 프로그램을 설치하고 나면 편하게 웹사이트를 둘러보다가

크롬 우측 상단에 'Wappalyzer' 아이콘을 선택하면 됩니다.

참 쉽죠?

 

Wappalyzer 아이콘

아래 이미지는 어떤 웹사이트의 기술을 표시한 걸까요?

어떤 사이트의 기술 스택일까요?

정답은 바로~~~

 

 

 

지금 글을 쓰고 있는 tistory의 웹사이트 기술이었습니다.

 

자바스크립트 프레임워크는 React를 사용하였고, 텍스트 에디터는 TinyMCE를 사용했네요.

처음보는 텍스트 에디터 툴인데 나중에 구현 할 일이 있으면 참고하면 좋겠네요.

저는 이런 식으로 유용하게 사용하고 있습니다.

 

결론

웹 기술은 빠르게 변하기 때문에 어떤 기술들이 쓰여지고 있는지 보는 것만으로도 

트렌드를 따라가는데 큰 도움이 된다고 생각합니다.

여러분도 자주 방문하는 사이트가 어떤 기술 스택을 가지고 있는지 궁금하지 않으신가요?

 

이곳이 이런 기술을 쓰고 있었어? 라는 곳이 있다면 댓글로 알려주세요~

같이 공유하면 서로 큰 도움이 될 것 같습니다.

반응형

'Frontend' 카테고리의 다른 글

[css] em, rem 이란  (0) 2021.02.20
반응형

여러분은 코딩을 하다가 이런 생각해 본 적 없으신가요?

 

하루에 몇 시간씩 코딩할까?

가장 많이 사용하는 언어는 무엇이지?

Editor는 어떤 걸 가장 많이 사용할까?

 

저는 코딩하다 문득 위와 같은 궁금증이 생겼습니다.

그러다가 WakaTime이란 서비스를 알게 되었고 그 이후로 계속 사용해오고 있습니다.

여러분들도 저와 같은 궁금증을 느끼셨으면 사용해 보시길 권해드립니다.

 

 

간략하게 설명드리면 사용하시는 IDE에 wakatime plugin을 설치하여 사용하게 됩니다.

 

자세한 설치 및 사용 방법은 아래와 같습니다.

 

1. WakaTime 사이트 방문 후 가입

wakatime.com

GitHub 계정과 연동도 가능합니다.

 

WakaTime

Open source IDE plugins for programmers.

wakatime.com

2. WakaTime 로그인 후 API Key를 복사

WakaTime API Key는 [프로필] - [Settings] - [Account] : API key 항목에서 찾을 수 있습니다.

아래 그림에 따라 API Key를 복사 해 둔 후 3번 단계를 진행해 주세요.

WakTime 로그인 후 [프로필] - [Settings] 선택
API Key 표시 화면

 

 

3. 사용 중인 IDE에 WakaTime plugin 설치


저는 VS Code를 기준으로 설명드리겠습니다.

3-1. VS Code 실행, [File] - [Preferences] - [Extension] 선택

[File] - [Preferences] - [Extension]

3-2. Extensions: Marketplace에서 'wakatime' 검색 후 'Install'

3-2. 'F1'키 입력 후 'WakaTime API Key' 입력

3-3. 복사해 둔 API Key 입력

 

이제 VS Code에 WakaTime Plugin 설정을 모두 마쳤습니다.

 

참고로, WakaTime이 지원하는 IDE 목록은 아래와 같습니다. (wakatime.com/plugins)

지원 목록

 

4. Dashboard를 통해 다양한 정보를 확인합니다.

 

5. 참고로 Free버전에서는 일부 제약사항이 존재합니다.

전 Free버전으로 사용하고 있고, 개인 사용자라면 Free에서 제공하는 기능으로도 충분히 활용 가능하다고 생각합니다.

팀 또는 프로젝트에서 활용하고 싶으신 분은 아래 가격을 참고해주세요.

 

[Free인 경우]

- 2주 동안의 Dashboard history 제공

- 주간 & 일간 이메일 리포트

- integration 제약

- private leaderboard for 3 friends

 

 

반응형

+ Recent posts