재밌는 Coding

1. 시험환경

    · React Native

    · expo cli

    · vsCode

    · Android Studio / AVD(Android Virtual Device)

2. 목적

    · expo cli를 이용하여 프로젝트를 생성하고 실행한다.

    · 핸드폰 단말기에 Expo Go 앱을 설치하여 배포 앱을 확인한다.

3. 적용

    ① [휴대폰] Android 및 iPhone 단말기에 "Expo Go" 앱을 설치한다.

        - 윈도우 개발환경에서는 iPhone 에뮬레티어를 실행할 수 없기 때문에 iPhone 단말기를 준비해야 한다.

    ② 안드로이드 에뮬레이터를 사용하기 위해 Android Studio 및 AVD를 설치한다.

        - 참고 : https://languagestory.tistory.com/174

        - 참고 : https://languagestory.tistory.com/175

    ③ node.js를 설치한다.

        - 참고 : https://languagestory.tistory.com/24

    ④ expo 최신 패키지를 설치한다.

        - npm install expo@latest

    ⑤ expo cli를 이용하여 프로젝트를 생성한다.

        - npx create-expo-app [프로젝트명]

    ⑥ 생성된 프로젝트 폴더로 이동하여 프로젝트를 실행한다.

        - cd [프로젝트명]

        - npx expo start

    ⑦ 안드로이드) AVD 실행 후 ⑥에서 실행한 콘솔은 유지하고 별도의 콘솔에서 아래 명령어를 실행한다.

        - npm run android

    ⑧ 아이폰) ⑥ 실행시 나타나는 QR 코드를 핸드폰 "Expo Go" 앱을 열어서 코드스캔한다.

        - QR 스캔 핸드폰은 개발 PC와 동일 네트워크에 있어야 함에 주의한다.

4. 결과

    · 핸드폰에서 실행된 앱을 확인한다.

1. 시험환경

    ˙ 윈도우

    ˙ nginx

2. 목적

    ˙ 윈도우 환경에서 nginx를 설치하고 실행하는 방법을 알아보자.

3. 적용

    ① NGINX 다운로드 사이트에 접속하여 Windows용 nginx를 다운로드 받는다.

        - URL : https://nginx.org/en/download.html

    ② 다운받은 파일을 압축해제한다.

    ③ conf/nginx.conf 파일을 메모장 등 Editor 등으로 열어서 웹서비스 디렉토리(location /)를 확인한다.

        - 기본값은 html 경로에 index.html, index.htm 파일로 설정되어 있다.

    ④ (선택) 웹서비스 디렉토리 변경이 필요한 경우 경로 및 파일을 변경한다.

        - 주의: 문장끝에 세미콜론(;) 추가

    ⑤ nginx.exe 파일을 실행한다.

    ⑥ 최초 실행시 엑서스 허용을 해야 한다.

4. 결과

    ˙ 브라우저에서 접속하여 서비스가 동작여부를 확인한다.

        - URL : http://localhost:80

    ˙ 실행중인 nginx를 종료하기 위한 명령어는 아래와 같다.

        - > nginx  -s  stop

1. 시험환경

    ˙ AWS EC2 Ubuntu v20.04

    ˙ Nginx   

    ˙ React

2. 목적

    ˙ Nginx 웹서버를 이용하여 React 빌드 파일을 배포하는 방법을 알아보자.

    ˙ Nginx 설정을 최소화하여 단일 App을 빠르게 배포하는 경우의 해결책을 제시한다.

3. 적용

    ① Nginx 설치를 설치한다.

        - 참고 : https://languagestory.tistory.com/189

    ② React 프로젝트를 빌드하면 "build" 폴더에 배포 패키지가 생성된다.

        - build 명령어 : $ npm run build

    ③ Nginx 기본경로에 있는 기본 파일(html)을 삭제 후 react 빌드 파일(build 하위 모든 파일)을 옮긴다.

        - Nginx 배포 기본 파일 삭제 : $sudo  rm  -rf  /var/www/html/

        - Nginx 배포 기본 경로 이동 : $sudo  cp  -R  [프로젝트]/build/*  /var/www/html/

    ④ Nginx를 재시작한다.

        - $sudo systemctl restart nginx

4. 결과

    ˙ 브라우저에 접속하여 Nginx를 이용하여 배포된 프로그램이 실행되는지 확인한다.