mminky's

[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를 하면 잘 동작하는 것을 확인 할 수 있다 :)

코드블럭에서는 highlight가 잘 보이는데

글을 게시하면 그냥 밋밋한 글자로 나옵니다.

이는 별도의 플러그인으로 설정해야 하기 때문입니다.

1) 티스토리 메인에서 -> '설정'으로 들어갑니다.

2) 좌측의 '플러그인' 탭을 클릭합니다.

3) '검색'을 클릭 후 '코드'를 검색합니다.

4) '코드 문법 강조'를 클릭합니다.

5) 원하는 테마 선택 후 '적용'버튼 클릭합니다.

저는 다크테마가 좋아서 'Atom One Dark'를 선택했습니다.

테마 선택 해서 적용 후 블로그에서 확인해보고

마음에 드는 테마 선택하시면 될 것 같습니다 :)

[Atom One Dark 적용모습]

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

[vsCode 줄맞춤 단축키]

원하는 구간 선택 후

Ctrl + k + f

webview와 react native를 이용해 간단한 안드로이드 앱을 만들기 위해서는 다음이 준비되어야합니다.

1. cmd(명령 프롬프트 창)

2. npm, node설치 (cmd창에서 npm -v, node -v 등의 명령어로 확인가능)

3. Visual Studio Code

4. expo-cli 설치

https://mminky.tistory.com/32

5. WebView 설치(https://www.youtube.com/watch?v=Y422rxe6XRU)

6. 안드로이드 스튜디오(시뮬레이터)

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

1) 안드로이드 스튜디오의 시뮬레이터인 AVD를 실행시킵니다.

2) 윈도우검색->cmd 혹은 명령프롬프트 창을 검색 후 실행시킵니다.

cd Document

-> Document 디렉토리(폴더)로 이동

expo init 프로젝트명

-> expo 프로젝트 생성

cd 프로젝트명

-> 해당 프로젝트 프로젝트 폴더로 이동

expo install react-native-webview

-> webview 설치

3) Visual Studio Code 열기

파일검색기창을 연 후 Documents(문서)폴더로 이동합니다.

거기서 프로젝트폴더(project_0714)를 visual studio code창으로 드래그&드랍 합니다.

그리고 App.js의 내용을 다음과 같이 변경합니다.

//App.js
import React from 'react';
import { WebView } from 'react-native-webview';
 
export default class App extends React.Component {
  render(){
    return(
      <WebView
      source={{uri:'https://google.com'}}
      style={{marginTop:20}}
      />
    );
  }
}

ctrl+s로 저장합니다.

3) cmd창

npm start

-> 해당 프로젝트 프로젝트 폴더로 이동 후 실행

인터넷 창이 뜨면 Android~를 클릭합니다.

그리고 cmd창에 qr코드창이 나오면 'a'키를 눌러서 시뮬레이터로 실행시킵니다.

[결과]

[React Native]란 하이브리드 앱 개발 프레임을 의미합니다.

아래 영상에 react native와 flutter에 대한 설명이 잘 되어있는 것 같아 링크 첨부합니다.

www.youtube.com/watch?v=siow15Yn8r8

react native의 개발 방법에는 2가지가 있습니다.

expo-cli와 react native cli입니다.

그 중 저는 expo-cli를 설치했습니다.(아래 영상 참고)

www.youtube.com/watch?v=0DhQd_EK1Ng&t=183s

마우스 이용하지 않고 코드를 선택하는 방법은

Shift + 방향키 입니다.

shift + (→) 하면 한 단어씩 선택됨

shift + (↓) 하면 한 줄씩 선택됨

[ shift + (↓) 예시 ]

결론부터 말씀드리자면 File > Open으로 열었기 때문에 project로만 뜨는 것 입니다.

따라서 File > New > Import Project를 해야 제대로 열리는 것을 확인 할 수 있습니다.

[ Open으로 열었을 때 ]

Android라는 글도 보이지 않고

빌드도 할 수 없습니다.(Add configuration이라는 글자만 나타남)

[ Import Project로 열었을 때 ]