mminky's

안드로이드 sdk ver.28 부터는 텍스트로 url을 접근하는 것이 막혔다고 합니다.

AVD 시뮬레이터로 실행하니 다음과 같은 에러가 발생했습니다.

net::ERR_CLEARTEXT_NOT_PERMITTED

[config.xml]

<platform name="android">
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
            <application android:networkSecurityConfig="@xml/network_security_config" />
            <!-- cleartextTraffic 허용 -->
            <application android:usesCleartextTraffic="true" />
        </edit-config>

<application android:usesCleartextTraffic="true" /> 부분을 추가했습니다.

[network_security_config.xml]

(resources/android/xml/network_secutiry_config.xml)

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <!-- 이부분 추가 -->
        <trust-anchors>
           <certificates src="system" />
        </trust-anchors>
        <domain includeSubdomains="true">localhost</domain>
        <!-- 허용할 사이트 추가 -->
        <domain includeSubdomains="true">google.com</domain>
        <domain includeSubdomains="true">youtube.com</domain>
    </domain-config>
</network-security-config>

다음의 코드들을 추가했습니다.

<trust-anchors> 
           <certificates src="system" /> 
 </trust-anchors>

허용할 사이트를 추가했습니다.(구글, 유튜브)

이 때 http를 뺀 주소로 적습니다.

<domain includeSubdomains="true">google.com</domain>

<domain includeSubdomains="true">youtube.com</domain>

우선 안드로이드 스튜디오 > AVD manager > AVD 실행으로 안드로이드 시뮬레이터를 켜둡니다.

프롬프트 창을 통해 build를 합니다.

(build하는데 시간이 좀 걸려요!)

ionic cordova build android

그리고 run을 합니다.

cordova run android

아주 성공적으로 실행이 됩니다‧⁺◟( ᵒ̴̶̷̥́ ·̫ ᵒ̴̶̷̣̥̀ )

------------------------------------------------------------------------------------

처음에 시행 착오가 좀 있어서 성공하니 눈물이 나네요..(T^T)

제가 시도했던 방법들입니다.

* Gradle 설치

: gradle이 없다고 에러가 나서 설치를 했습니다.

https://mminky.tistory.com/46

* ionic platform add android 하니깐 에러가 나서 다음과 같이 했습니다.

(근데 이거는 그냥 ionic이 아니라 처음부터 cordova로 했으면 됐을 것 같기도 해요)

// 기존 설정된거 제거
cordova platform rm android

// 새로 추가
cordova platform add android

우선 gradle 사이트에 접속합니다.

https://gradle.org/releases/

20.07.23 기준으로 6.5.1 이 가장 최신 버전이네요

1. 실행파일 다운로드

저는 binary-only로 다운받아 보겠습니다. (클릭)

binary-only : 실행파일만 있음

complete : 실행파일 + 문서들

2. Gradle 디렉토리 생성

C:\에 Gradle이라는 폴더를 생성합니다.

그리고 생성한 'Gradle'폴더에 다운받은 gradle-6.5.1-bin 파일을 압축풀기 합니다.

3. 환경변수 설정

우선 내PC > 속성을 클릭합니다.

'고급 시스템 설정'을 클릭합니다.

'환경 변수' 클릭합니다.

시스템변수> 새로만들기

변수 이름: GRADLE_HOME
변수 값: C:\Gradle\gradle-6.5.1

시스템변수> Path더블클릭 > 새로만들기

%GRADLE_HOME%\bin

입력 후 확인>확인>확인

설정 완료!!

--------------------------------------------------------------------------

cmd창을 실행시킵니다.

gradle -v

다음과 같이 버전이 잘 나온다면 설치가 잘 된 것 입니다 ")

[home.page.html]

<ion-header>
  <ion-toolbar>
    <ion-title>
      open_page
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button (click)="openWebpage()">open_page</ion-button>
</ion-content>

[home.page.ts]

import { Component } from '@angular/core';
import {InAppBrowser, InAppBrowserOptions} from '@ionic-native/in-app-browser/ngx'
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private iab: InAppBrowser,) {}
  
  openWebpage(){
    const url = 'https://www.google.co.kr/';
    const options: InAppBrowserOptions = {
      zoom: 'yes'
    }
    //opening a URL and returning an InAppBrowserObject
    const browser = this.iab.create(url,'_self',options);
  }
}

[app.module.ts]

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
//in-app-browser import
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    InAppBrowser, //add
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

[결과]

open_page라는 파란 버튼을 클릭하면

구글 사이트가 나타난다.

* 혹시 버튼을 클릭하지 않고 바로 웹사이트를 띄울 수 있는 방법을 아시는 분은 댓글 부탁드려요!!


※ 제 글이 도움이 되었다면 공감 부탁드려요 :)

[React Native]

https://www.youtube.com/watch?v=cRhHBpYK8I4&list=PL7jH19IHhOLPEhP6oPSgK6r-neUVVA-pi&index=1

react native로 날씨앱을 만들어보는 과정 입니다.

react js 강좌를 듣고 들으면 더 이해하기 쉽습니다.

한글 자막이 잘 되어있어서 추천합니다 :)

[Ionic]

https://www.youtube.com/watch?v=8jxtycBwoTw&list=PL7hySDKlnYfsy5sR3c6XNZLoDGm7Irq7K&index=1

2019년 9월 강의라서 약간의 차이가 있습니다.

하지만 설명을 질리지 않을 말큼 끊어서 하시기 때문에

이해도 잘 되고 추천합니다!

https://openweathermap.org/

우선 회원가입을 해야합니다.

sign in -> Create an Account

사용자이름/

이메일/

비밀번호/ 비밀번호 확인

입력 후 아래 두 개의 약관을 체크 한 후 가입하면 됩니다 :)

로그인을 한 후 username을 클릭합니다.

그리고 API keys라는 탭을 클릭하면 끝!

[Error]

PS C:\Users\user\Documents\weather-app> expo install expo-location
expo : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\user\AppData\Roaming\npm\expo.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Po
licies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
위치 줄:1 문자:1
+ expo install expo-location
+ ~~~~
    + CategoryInfo          : 보안 오류: (:) [], PSSecurityException  
    + FullyQualifiedErrorId : UnauthorizedAccess

[해결책]

1) PowerShell을 윈도우 검색창에 검색 후 '관리자로 실행'한다.

2) Set-ExecutionPolicy -ExecutionPolicy Unrestricted 입력 후

   질문이 나오면 'A' (모두 예) 키를 입력한다.

* 관리자 모드로 실행하지 않으면 다음과 같은 에러가 뜬다.

PS C:\Users\user> Set-ExecutionPolicy -ExecutionPolicy Unrestricted
Set-ExecutionPolicy : 레지스트리 키 'HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\PowerShell\1\ShellIds\Microsoft.PowerShell'
에 대한 액세스가 거부되었습니다. 기본(LocalMachine) Scope에 대한 실행 정책을 변경하려면 "관리자 권한으로 실행" 옵션으로
 Windows PowerShell을 시작하십시오. 현재 사용자에 대한 실행 정책을 변경하려면 "Set-ExecutionPolicy -Scope CurrentUser"
를 실행하십시오.
위치 줄:1 문자:1
+ Set-ExecutionPolicy -ExecutionPolicy Unrestricted
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : PermissionDenied: (:) [Set-ExecutionPolicy], UnauthorizedAccessException
    + FullyQualifiedErrorId : System.UnauthorizedAccessException,Microsoft.PowerShell.Commands.SetExecutionPolicyComma
   nd

3. 그리고 다시 expo install expo-location를 하면 잘 동작하는 것을 확인 할 수 있다 :)

nomad Coders의 React JS로 영화 웹 서비스 만들기 영상을 참고하여 만들었습니다.

결과 : https://mmingyy.github.io/movie_app/

코드 :

[App.js]

import React from 'react';

import axios from 'axios';

import Movie from './Movie';



class App extends React.Component {

  state = {

    isLoading: true,

    movies: []

  };

  getmovies = async () => {

    const { data: { data: { movies } } } = await axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating");

    this.setState({ movies, isLoading: false });//{movies(state꺼):movies(axios꺼)}

  };

  async componentDidMount() { //render시 호출됨

    this.getmovies();

  }

  render() {

    const { isLoading, movies } = this.state;//state로부터 isLoading,movies가져옴

    return (<section class="container">

      {isLoading ? (

        <div class="loader">

          <span class="loader__text">Loading..</span>

        </div>

      ) : (

          <div class="movies">

            {movies.map(movie => (

              <Movie

                key={movie.id}//list의 child는 unique한 key prop가져야

               id={movie.id} year={movie.year}

   title={movie.title} summary={movie.summary}

         poster={movie.medium_cover_image} />

            ))}</div>

      )}

          </section>

    );

  }

}

export default App;

[Movie.js]

import React from 'react';

import PropTypes from 'prop-types';



function Movie({ year, title, summary, poster }) {

    return (<div class="movie">

        <img src={poster} alt={title} title={title}/>

        <div class="movie__data">

         <h3 class="movie__title">{title}</h3>

         <h5 class="movie__year">{year}</h5>

       <p class="movie__summary">{summary}</p>

        </div>

    </div>

    );

}

Movie.propTypes = {

    id: PropTypes.number.isRequired,

    year: PropTypes.number.isRequired,

    title: PropTypes.string.isRequired,

    summary: PropTypes.string.isRequired,

    poster: PropTypes.string.isRequired

};

export default Movie;

[package.json]

"scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "deploy": "gh-pages -d build",

    "predeploy": "npm run build"

  },

 
  //사이트 넣어줘야 함 (gh-pages 이용)
  "homepage": "https://mmingyy.github.io/movie_app"

------------------------------------------------------------------------------------------------------------------------

참고 : nomadcoders.co/react-fundamentals