재밌는 Coding

1. 시험환경

    ˙ 윈도우

    ˙ node.js, npm

    ˙ 안드로이드 스튜디오

    ˙ Gradle

2. 목적

    ˙ HTML, CSS, JS를 이용하여 구축한 웹(web) 페이지를 안드로이드 앱(App)으로 빌드하는 방법을 알아보자.

    ˙ 웹앱 포팅을 위한 Cordova 패키지 및 사전 필수 프로그램을 설치하는 방법을 알아보자.

3. 적용

    ① node.js를 설치하면 npm이 함께 설치되는데, npm을 이용하여 cordova 패키지를 설치하기 위한 목적이다.

        - 설치 방법 참고 URL : https://languagestory.tistory.com/24

    ② 안드로이드 스튜디오(Android Studio)를 설치한다.

        - 설치방법 참고 URL : https://languagestory.tistory.com/174

    ③ Gradle을 설치한다. (★중요: Cordova에서 지원하는 현재 Gradle 버전은 7이다.)

        - 설치방법 참고 URL : https://languagestory.tistory.com/243

    ④ cordova 패키지를 설치한다.

        - 설치 명령어 : npm install -g cordova

    ⑤ Cordova 프로젝트를 생성한다.

        - 명령어 : cordova  create  [경로]  [패키지]  [프로젝트명]

    ⑥ www 폴더 이하를 삭제하고 빌드하고자 하는 대상 웹(HTML, CSS, JS) 파일을 복사한다.

        - 이 단계를 생략하는 경우 Cordova 프로젝트에서 제공하는 기본 페이지로 빌드된다.

    ⑦ Cordova Platform을 추가 및 빌드한다.

        - 명령어 : cordova  platform  add  [android]

        - 명령어 : cordova  build  [android]

    ⑦ Build 성공 시 에뮬레이터 또는 실제 단말기(USB 연결)에서 테스트 명령어를 실행한다.

        - 에뮬레티어 실행 : cordova  emulate  [android]

        - 실제 단말기 실행 : cordova  run  [android]

4. 결과

    ˙ apk 빌드 파일이 생성 되었는지 확인한다.

        - apk 빌드 경로 : [Cordova 프로젝트 경로]\platforms\android\app\build\outputs\apk\debug

1. 시험환경

    ˙ 윈도우 11

    ˙ gradle v7

2. 목적

    ˙ Gradle 설치를 위한 필수 프로그램으로 JDK(v7 이상)를 설치해야 한다.

    ˙ 윈도우 환경에서 gradle v7을 설치하자.

3. 적용

    ① 윈도우 환경에서 JDK를 설치한다.

        - JDK 설치 참고 : 

    ② Gradle Release 사이트에서 패키지를 다운로드 받는다.

        - Gradle 다운로드 URL : https://gradle.org/releases/

    ③ Window에서는 설치 단계 없이 압축파일을 해제하는 것으로 끝난다.

        - 설치(압축해제) 디렉토리 : C:\Program Files\gradle-7.6.1

    ④ 시스템 Path에 Gradle 설치(압축해제) 경로의 lib 폴더를 추가한다.

        - Path 추가 : C:\Program Files\gradle-7.6.1\bin

4. 결과

    ˙ Gradle ver.7 대역으로 설치된 것을 확인할 수 있다.

        - $ gradle -v

1. 시험환경

    ˙ 우분투(ubuntu) 리눅스 v22.04

    ˙ gradle v7

2. 목적

    ˙ Gradle 설치를 위한 필수 프로그램으로 JDK(v7 이상)를 설치해야 한다.

    ˙ 우분투(ubuntu) 리눅스 환경에서 gradle v7을 설치하자.

3. 적용

    ① JAVA 프로그램이 설치되어 있지 않은 경우, "JAVA 버전 확인" 명령어 입력 시 설치 명령어를 확인할 수 있다.

        - JAVA 버전 확인 : $ java -v

    ② JRE가 설치되어 Gradle 설치를 위한 기본 준비가 되었음을 확인한다.

    ③ gradle repository가 설정되지 않은 환경에서 ubuntu v.22가 기본적으로 제공하는 버전은 4이다.

        - 오류 개선 등의 이유로 version 7 이상 사용을 권장한다.

    ④ Ubuntu 리눅스에 PPA 저장소를 추가한다.

        - $ sudo apt -y install vim apt-transport-https dirmngr wget softwareproperties-common
        - $ sudo add-apt-repository ppa:cwchien/gradle

    ⑤ 패키지를 업데이트하고,  등록된 PPA에 의해서 Gradle을 설치한다.

        - $ sudo sudo apt-get update
        - $ sudo sudo apt -y install gradle

4. 결과

    ˙ Gradle ver.7 대역으로 설치된 것을 확인할 수 있다.

        - $ gradle -v

1. 시험환경

    ˙ 우분투(ubuntu)

    ˙ crontab

2. 목적

    ˙ 리눅스 부팅 또는 재부팅 후 특정 스크립트 파일을 자동실행 하는 방법을 알아보자.

    ˙ crontab 설치 및 설정 명령어를 알아보자.

3. 적용

    ① 우분투(ubuntu) 환경에서 cron을 설치한다.

        - 명령어 : $ sudo apt update -y

        - 명령어 : $ sudo apt install -y cron

    ② cron 서비스를 시작한다.

        - 명령어 : $ sudo service cron start

    ③ cron systemctl을 활성화한다.

        - 명령어 : $ sudo systemctl enable cron.service

    ④ cron systemctl 등록 및 서비스 상태를 확인한다.

        - 명령어 : $ sudo systemctl list-unit-files | grep cron

        - 명령어 : $ sudo service cron status

    ⑤ 시스템 기동 후 자동 실행할 스크립트 파일을 설정한다.

        - 명령어 : $ crontab -e

           @reboot  [/home/ubuntu/startup.sh]

    ⑥ cron 설정 정보를 확인한다.

        - 명령어 : $ crontab -l

4. 결과

    ˙ 시스템을 재부팅하여 설정한 스크립트가 자동 실행되는지 확인한다.

1. 시험환경

    ˙ react.js

    ˙ npm

2. 목적

    ˙ 사용자가 http로 웹 서비스 요청시 https로 redirection 하여 서비스할 수 있도록 설정한다.

3. 적용

    ① react-https-redirect 패키지를 설치한다.

        - 명령어 : npm install --save react-https-redirect

    ② src/index.js에서 HttpRedirect 컴포넌트를 추가하고 <App/>을 감싸준다.

4. 결과

    ˙ 서비스 도메인으로 http 요청시 https로 전환(redirection)하여 서비스 하는 것을 확인한다.

    ① react.js 프로젝트 기동 시 콘솔로그<F12>에서 WebSocket Connection failed 메시지가 나타난다.

    ② 프로젝트 최상위 폴더의 .env 파일에서 WDS_SOCKET_PORT=0 설정

        - 원인 : cra에서 기본 포트를 3000포트로 설정해서 ws와 충돌 발생

1. 시험환경

    ˙ 윈도우 커맨드

    ˙ 리눅스(ubuntu)

    ˙ AWS CodeCommit, IAM

2. 목적

    ˙ AWS CodeCommit을 사용하기 위한 사전 설정 절차를 알아보자.

    ˙ AWS CodeCommit에서 생성한 Repository에 코드를 업로드(push)하는 방법을 알아보자.

3. 적용

    ① Host PC에 Git을 설치한다.

        - Host PC가 윈도우(window)인 경우 : https://languagestory.tistory.com/40

        - Host PC가 리눅스(ubuntu)인 경우 : $ sudo apt-get install git

    ② Host PC에 AWS CLI(AWS Command Line Interface)를 설치한다.

        - https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html

    ③ AWS CodeCommit 권한이 부여된 IAM 계정을 만들고, 보안 자격증명(CodeCommit ID/PW)을 생성한다.

    ④ AWS CodeCommit에 New Repository를 생성한다. (또는 기존 Repository 사용)

        - HTTPS, SSH 복사 버튼 클릭시 Repository의 URL 주소가 복사된다.

    ⑤ Git에서 클라이언트와 서버 간 전송되는 데이터를 암호화하기 위하여 HTTPS credential 설정한다.

        - Host PC가 윈도우(window)인 경우 : 큰 따옴표("")

        - Host PC가 리눅스(ubuntu)인 경우 : 작은 따옴표('')

    ⑥ 원격지 Repository를 Host PC의 프로젝트 폴더(.)에 복제(clone)한다.

        - 명령어 : git clone [git-repository-url] .

        -  git-repository-url : ④번 절차에서 HTTPS 복사

        - 원격 Repository 복제시 팝업창에 보안자격증명 ID/PW(③번 절차)를 입력한다.

    ⑦ Host PC의 프로젝트 폴더(.)에 소스코드를 생성 및 작업 한다.

    ⑧ Host PC의 프로젝트 폴더에 만들어진 코드를 원격지 Repository에 commit & push 한다.

        - git add *
        - git commit -m "message"
        - git push

4. 결과

    ˙ Host PC에서 생성한 프로젝트 코드가 AWS CodeCommit Repository에 업로드(push)된 것을 확인한다.

1. 시험환경

    ˙ AWS

    ˙ VPC, Subnet, NACL(Network Access Control List), Security Group, Routing, IGW, EC2

2. 목적

    ˙ AWS 콘솔에서 VPC, Subnet, NACL, 보안그룹 등을 이용하여 네트워크를 구성한다.

    ˙ Private Subnet에서 생성된 EC2에 접속하기 위한 AWS 네트워크 구성법을 알아보자. 

3. 적용

    ① VPC를 생성한다.

        - VPC 이름 : study-vpc

    ② VPC 안에서 서브넷(subnet) 2개를 생성한다.

        - 서브넷 이름 : study-public-subnet

        - 서브넷 이름 : study-private-subnet

    ③ 라우팅 테이블을 생성하고 명시적으로 서브넷에 연결한다.

        - 기본 라우팅 테이블 : study-private-routing

        - 라우팅 테이블 생성 : study-public-routing

    ④ Public Subnet에 인터넷 연결을 위한 인터넷 게이트웨이를 생성한다.

        - IGW : study-igw

    ⑤ NACL을 생성한다. (NACL은 stateless 성격을 갖으므로 Inbound/Outbound 모두 설정해야 한다.)

        - 기본 라우팅 테이블 : study-private-nacl

        - 라우팅 테이블 생성 : study-public-nael

        - 여기서는 모든 Inbound/Outbound를 허용하였다.

    ⑥ 보안그룹(security group)을 설정한다.

        - ec2-public-sg : 모든 소스에 대하여 ssh 접속 포트 허용 설정

        - ec2-private-sg : 소스가 "ec2-public-sg"인 경우만 허용 설정 했음에 주의 (★중요)

    ⑦ Public/Private 서브넷에서 각각 EC2를 생성한다.

4. 결과

    ˙ Public 서브넷에 있는 EC2에 접속한 후 Private 서브넷에 있는 EC2를 접속한다.