하.. 일단 노마드코더 강의에서는 맥OS를 사용하는데 윈도우라서 너무 힘들었다ㅠㅠㅠ

어떻게 어떻게 nodejs랑 npm 업데이트하고 choco깔고 명령어 한 줄 치고 에러 수정하고.. 하다보니 결국 됐다!!

 

 

리액트 네이티브란 네이티브 웹앱을 만들기 위한 UI 라이브러리다. 리액트 네이티브를 이용해서 jsx, javaScript로 쓴 코드를 objective c나 java로 바꿔줄 수 있다. 인스타그램, 에어비앤비, 페이스북 등의 많은 글로벌 기업들이 리액트 네이티브를 사용해서 어플리케이션을 만들고 있다는 사실!! 웹사이트를 개발하는 것 처럼 쉽게 어플리케이션을 개발할 수 있기 때문에 많이 사용된다.

사실 나도 안드로이드 스튜디오 써봤는데 진짜 힘들었다. 에뮬레이터는 왤케 느리며.. 일단 코드 짜는건 그렇게 어렵진 않은데 너.무. 느리다.. 

 

시뮬레이터는 Expo.io를 이용해서 돌려본다. xcode나 안드로이드 스튜디오 없이 핸드폰만 연동시켜주면 코드를 수정할 때마다 바로 바로 빠르게 시뮬레이터를 사용할 수 있다. 컴퓨터에서 코드를 수정하면 자동으로 핸드폰에서 어플리케이션이 세이브되기 때문에 간편하다.

 

 

https://expo.io/

 

Expo

A free and open source toolchain built around React Native to help you build native iOS and Android apps using JavaScript and React.

expo.io

expo를 설치하는 방법은 다음과 같다. 우선 node js와 react native를 설치해주고 터미널 창에서

npm install expo-cli --global

expo init my-new-project
cd my-new-project
expo start

 

이렇게 쳐주기만 하면 된다! expo init my-new-project 이 단계에서 blank, tap이 있는데 나는 blank를 선택해 주었고, 만약 하단 네비가 필요하면 tap?을 선택하면 된다.

 

그러고 나서 vscode에서 내가 만든 프로젝트를 열어주고, expo start를 통해 터널이 열리면 qrcode가 뜰것이다. 아 맞다. 사용할 핸드폰에서 expo 어플리케이션도 설치해 줘야함ㅇㅇ. 그러고 나서 qrcode를 핸드폰에서 찍어주면 프로젝트가 핸드폰에서 자동으로 빌드된다!!

빌드된 화면.

 

만약, vscode에서 수정한다면?

 

 

 

이렇게 바로 수정됨. 개쩜..

 

여튼 앞으로 이걸 활용해서 날씨 앱을 만들어 보겠다ㅎㅎ 자세한 강의는 여기에서 들을 수 있따. 모두 리액트의 고수가 되는 그날까지.......

 

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C/dashboard

 

React Native로 날씨앱 만들기 - 인프런

핫한 글로벌 회사들이 널리 쓰고있는 리액트 네이티브로 iOS, Android 앱을 만들어보세요. 중급 모바일 앱 React 온라인 강의

www.inflearn.com

 

'study > react native' 카테고리의 다른 글

[날씨앱] 진짜로 연결하고 날씨 출력하기  (0) 2019.05.24
[날씨앱] 위치 정보와 날씨 받아오기!  (0) 2019.05.24
[날씨앱] 날씨 화면 구성과 아이콘 넣는 방법!  (0) 2019.05.24
[날씨 앱] 우선 로딩되는 화면을 만들어 보자!  (0) 2019.05.08

css에 대한 설명이 거의 없어서 따라치는 정도의 수준이었지만 안드로이드 스튜디오에서 xml로 디자인을 해본 경험이 있어서 왠만한건 이런거구나.. 하고 넘어갈 수 있어서 다행!!

 

 

(css 파일은 깃허브에서 nomadcoders/movie_app 참고해주세요!)

우선 ...으로 저 긴 문장들 줄이는 패키지가 계속 설치가 안되어서 일단은 그 부분은 생략하고 만들었다.ㅜㅠㅜㅠ 그리고 VSCode에서 지금까지 만들었던 것을 빌드하면 터미널 창에 어떻게 만들어야 하는지 자세하게 뜬다!

 

movie_app 루트 폴더에서 package.json은 다음과 같이 변경해주면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  "name": "movie_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5; text-decoration:none">Colored by Color Scripter

 

우선!

"homepage" : "http://jm1224k.github.io/movie_app",

얘를 먼저 적어주고 npm build를 터미널에서 입력한다. 그러면 지금까지 만든 파일이 최적화되고, 빌드된다!

(여기서 jm1224k / movie_app은 본인 아이디와 깃에서 생성한 레포 이름을 적어주시면 됩니다.)

 

그러면 터미널 창에서

"predeploy": "npm run build",

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

이 두 줄을 script 안에 적으라고 뜬다. 그러면 적어주고 저장한 후 다시 빌드해주고, npm run deploy인가..? 아무튼 또 명령어를 입력하라고 나온다. 근데 난 잘 안되어가지구..

그냥 빌드된 폴더를 깃에 gh-pages라는 이름의 브랜치로 올렸다. 그래도 됨. ㅇㅇ.

 

그러면 이렇게 우리가 원하는 웹페이지가 나온다!!!

http://jm1224k.github.io/movie_app

 

Movie App

 

jm1224k.github.io

 

올리는게 젤 오래걸림 ㅠㅠ

'study > react' 카테고리의 다른 글

react로 웹페이지에 정보 추가하기  (0) 2019.04.23
react로 웹페이지에 db가져오기!  (0) 2019.04.23
react로 loading states 만들기!  (0) 2019.04.23
react에서 map을 활용해 list 만들어주기!  (0) 2019.04.22
react로 웹페이지에 component 추가해보기!  (0) 2019.04.22

최대한 짧게 만들어 본 코드입니다. 문제 자체는 어려운 문제가 아니라 풀이는 생략하도록 하겠습니다!

 

 

문제 출처

 

https://www.acmicpc.net/problem/3053

 

3053번: 택시 기하학

문제 19세기 독일 수학자 헤르만 민코프스키는 비유클리드 기하학 중 택시 기하학을 고안했다. 택시 기하학에서 두 점 T1(x1,y1), T2(x2,y2) 사이의 거리는 다음과 같이 구할 수 있다. D(T1,T2) = |x1-x2| + |y1-y2| 두 점 사이의 거리를 제외한 나머지 정의는 유클리드 기하학에서의 정의와 같다. 따라서 택시 기하학에서 원의 정의는 유클리드 기하학에서 원의 정의와 같다. 원: 평면 상의 어떤 점에서 거리가 일정한 점들의 집합

www.acmicpc.net

 

'algorithm codes > baekjoon online judge' 카테고리의 다른 글

17070번: 파이프 옮기기 1 (백준 온라인 저지, C++)  (0) 2019.05.01
17143번: 낚시왕 (백준 온라인 저지, C++)  (0) 2019.04.30
5430번: AC (백준 온라인 저지, C++)  (1) 2019.04.25
1021번: 회전하는 큐 (백준 온라인 저지, C++)  (0) 2019.04.25
1916번: 최소비용 구하기  (0) 2019.04.21

문제 풀이

 

순서의 뒤집기를 말 그대로 뒤집지 않고, reverse라는 bool type의 변수를 두어 뒤집어진 경우에는 뒤에서 삭제, 뒤에서 출력을 해주면 문제 풀이가 가능합니다. 그 외에도 strtok라는 함수를 써서 입력을 받으면 한결 간편하게 입력받기가 가능합니다.

 

 

코드

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
#include <iostream>
#include <string>
#include <cstring>
#include <deque>
 
using namespace std;
 
deque <int> dq;
char arr[400005];
 
int main() {
 
    int t;
    cin >> t;
 
    while (t--) {
        
        memset(arr, '\0', sizeof(arr));
        bool e = false;
        bool r = false;
        dq.clear();
        string p; int n;
        cin >> p >> n >> arr;
 
        char * tmp = strtok(arr, "[,]");
        while (tmp) {
            dq.push_back(stoi(tmp));
            tmp = strtok(NULL, "[,]");
        }
 
        for (int i = 0; i < p.size(); i++) {
            if (p[i] == 'R') {
                if (r) r = false;
                else r = true;
            }
            if (p[i] == 'D') {
                if (dq.empty()) {
                    e = true;
                    break;
                }
                if (r) dq.pop_back();
                else dq.pop_front();
            }
        }
 
        if (e) cout << "error\n";
        else {
            cout << '[';
            for (int i = 0; i < dq.size(); i++) {
                if (r) cout << dq[dq.size() - 1 - i];
                else cout << dq[i];
 
                if (i == dq.size() - 1) continue;
                else cout << ',';
            }
            cout << "]\n";
        }
    }
    return 0;
}
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5; text-decoration:none">Colored by Color Scripter

 

 

제출 결과

 

 

 

문제 출처

 

https://www.acmicpc.net/problem/5430

 

5430번: AC

문제 선영이는 주말에 할 일이 없어서 새로운 언어 AC를 만들었다. AC는 정수 배열에 연산을 하기 위해 만든 언어이다. 이 언어에는 두 가지 함수 R(뒤집기)과 D(버리기)가 있다. 함수 R은 배열에 있는 숫자의 순서를 뒤집는 함수이고, D는 첫 번째 숫자를 버리는 함수이다. 배열이 비어있는데 D를 사용한 경우에는 에러가 발생한다. 함수는 조합해서 한 번에 사용할 수 있다. 예를 들어, "AB"는 A를 수행한 다음에 바로 이어서 B를 수행하는 함수이다.

www.acmicpc.net

 

'algorithm codes > baekjoon online judge' 카테고리의 다른 글

17143번: 낚시왕 (백준 온라인 저지, C++)  (0) 2019.04.30
3053번: 택시 기하학  (0) 2019.04.27
1021번: 회전하는 큐 (백준 온라인 저지, C++)  (0) 2019.04.25
1916번: 최소비용 구하기  (0) 2019.04.21
10866번: 덱 (백준 온라인 저지, C++)  (0) 2019.04.20

문제 풀이

 

빼고자 하는 숫자의 위치를 파악한 후, 2번 연산과 3번 연산 중 더 적게 수행할 수 있는 연산을 수행하여, 1번 연산을 시행하면 문제를 쉽게 풀 수 있습니다.

 

 

코드

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
#include <iostream>
#include <deque>
 
using namespace std;
 
int n, m, cnt;
deque <int> dq;
 
void _op2() {
 
    int a = dq.front();
    
    dq.pop_front();
    dq.push_back(a);
    cnt++;
 
    return;
}
 
void _op3() {
 
    int a = dq.back();
 
    dq.pop_back();
    dq.push_front(a);
    cnt++;
 
    return;
}
 
int main() {
 
    cnt = 0;
    cin >> n >> m;
 
    for(int i = 1; i <= n; i++) {
        dq.push_back(i);
    }
 
    while (m--) {
        
        int t = 0;
        int now; cin >> now;
 
        for (int i = 0; i < dq.size(); i++) {
            if (dq[i] == now) {
                t = i;
                break;
            }
        }
 
        if (t < dq.size() - t) {
            for (int i = 0; i < t; i++) {
                _op2();
            }
        }
        else {
            for (int i = 0; i < dq.size() - t; i++) {
                _op3();
            }
        }
        dq.pop_front();
    }
    cout << cnt << '\n';
 
    return 0;
}
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5; text-decoration:none">Colored by Color Scripter

 

 

제출 결과

 

 

 

문제 출처

 

https://www.acmicpc.net/problem/1021

 

1021번: 회전하는 큐

첫째 줄에 큐의 크기 N과 뽑아내려고 하는 수의 개수 M이 주어진다. N은 50보다 작거나 같은 자연수이고, M은 N보다 작거나 같은 자연수이다. 둘째 줄에는 지민이가 뽑아내려고 하는 수의 위치가 순서대로 주어진다. 위치는 1보다 크거나 같고, N보다 작거나 같은 자연수이다.

www.acmicpc.net

 

'algorithm codes > baekjoon online judge' 카테고리의 다른 글

3053번: 택시 기하학  (0) 2019.04.27
5430번: AC (백준 온라인 저지, C++)  (1) 2019.04.25
1916번: 최소비용 구하기  (0) 2019.04.21
10866번: 덱 (백준 온라인 저지, C++)  (0) 2019.04.20
2902번: KMP는 왜 KMP일까? (백준 온라인 저지, C++)  (0) 2019.04.20

지금까지 제목과 영화 포스터만 추가했었다면, 이제 DB를 토대로 정보를 추가해 보았다.

우선 app.js에서 renderMovies를 수정해주었다. 확실히 각각의 컴포넌트를 세분화하여 호출하고, 호출하는 방식으로 코드를 구성하는게 수정할 때도 편리하고 가독성도 좋은 것 같다.

 

 

각각 받아오는 요소의 이름은 console창에서 요소 검색을 통해 어떤 이름으로 데이터가 저장되어 있는지 확인하고 이와 동일하게 사용하면 된다. 이렇게 수정을 해줬다면 이제 movie.js를 수정해 줄 차례!!

 

 

우선 어떤 타입을 받아와서 사용하는지 확인할 수 있는 코드를 수정해주었다. 또, 이미지에 마우스를 올려놓았을 때 영화의 제목을 알 수 있도록 alt도 추가해 주었다.

 

 

movie라는 함수를 위와 같이 수정해 주었다. 단순히 props를 통해 데이터를 받아와서 사용하는 함수이므로 class를 사용하지 않고 function을 사용해 주었다. function에서는 class처럼 state를 가지거나 하는 기능은 할 수 없다. 그렇지만 더 간단하게 코딩이 가능하다.

 

영화 장르 부분은 array로 구성되어 있으므로 간단한 span을 통해 구현해준다.

 

 

이미지에 마우스를 가져다 댔을 때, 영화의 제목이 나오게 만드는 부분도 아래와 같이 구현할 수 있다.

 

 

 

이제 css로 예쁘게 꾸며주기만 하면 된다! 내가 제일 좋아하는 부분이라 너무 기대가 된다 ㅎㅎ 얼른 완성하고 다른 프로젝트도 해보고싶다!!

'study > react' 카테고리의 다른 글

리액트로 영화 추천 웹페이지 만들기!!  (1) 2019.04.29
react로 웹페이지에 db가져오기!  (0) 2019.04.23
react로 loading states 만들기!  (0) 2019.04.23
react에서 map을 활용해 list 만들어주기!  (0) 2019.04.22
react로 웹페이지에 component 추가해보기!  (0) 2019.04.22

우선 알아야 하는 개념이 몇 가지 있다.

1. AJAX : Asynchronous Javascript And XML(JSON), 비동기적인 웹앱의 개발에 사용된다. 필요한 데이터만을 서버에서 요청하여 받은 후, 클라이언트에서 데이터를 처리한다.

https://ko.wikipedia.org/wiki/Ajax

 

Ajax - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 둘러보기로 가기 검색하러 가기 다른 뜻에 대해서는 에이젝스 문서를 참조하십시오. 다른 뜻에 대해서는 아이아스 문서를 참조하십시오. Ajax(Asynchronous JavaScript and XML, 에이잭스)는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다. 표현 정보를 위한 HTML (또는 XHTML) 과 CSS 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스

ko.wikipedia.org

2. fetch, promise : fetch로 인해 시나리오가 생기게 되고, 이를 관리하게 됨!

 

https://yts.am/api

 

API Documentation - YTS YIFY

Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details.

yts.am

 

여기 사이트에 들어가면 잘 정리된 db가 있다.. 여기서 내가 원하는 것을 꺼내서 사용하면 된다. 내가 사용한 것은 https://yts.am/api/v2/list_movies.json?sort_by=rating 이다.

불러오는 중입니다...

 

 

우선 코드를 한 번에 올려보자면, callApi 함수를 통해 fetch를 해준다. 링크에서 가져온 데이터 베이스를 json으로 바꿔주고 asyncronous type으로 getMovies를 선언해준다. callApi가 실행되는 것을 기다렸다가 state를 바꿔준다. 이후 console창을 살펴보면 poster가 아니라 large_cover_image라고 선언되어 있으므로 이를 변경해주면..!

 

 

 

다음과 같이 영화가 나오는 것을 확인할 수 있다!!!

'study > react' 카테고리의 다른 글

리액트로 영화 추천 웹페이지 만들기!!  (1) 2019.04.29
react로 웹페이지에 정보 추가하기  (0) 2019.04.23
react로 loading states 만들기!  (0) 2019.04.23
react에서 map을 활용해 list 만들어주기!  (0) 2019.04.22
react로 웹페이지에 component 추가해보기!  (0) 2019.04.22

웹페이지를 켰을 때, '로딩중...'과 같은 상태를 구현했다. 우선 state란 현재 상태를 의미하는데, state가 다를 때 마다 render가 발생하게 만들어주는 것이다. 예를 들어 끝까지 스크롤했을 때, 20개의 영화가 더 추가되는 기능 등을 만들어 줄 수 있다.

우선 app.js에서 5sec timer를 만들어, movies 라는 array에 5초 후 movie라는 array가 mapping되도록 만들어준다.

 

 

state가 바뀔때는 setState를 사용해 줘야 한다.

 

 

이 후, movie list를 출력해주는 함수를 위와 같이 만들어 주었다. 이 후, app class내에 render 함수 내에 다음과 같이 입력해준다.

 

 

만약, movies에 movie라는 array가 들어왔다면? -> _renderMovies 출력해주고, 아니라면 loading을 출력해준다.

 

 

이렇게, 처음에는 loading이라는 글자가 뜨다가 ...

 

 

5초 후 영화 화면이 출력된다!!

내 손으로 하나씩 구현해보면서 보람을 느끼는 중 ㅎㅎ

'study > react' 카테고리의 다른 글

react로 웹페이지에 정보 추가하기  (0) 2019.04.23
react로 웹페이지에 db가져오기!  (0) 2019.04.23
react에서 map을 활용해 list 만들어주기!  (0) 2019.04.22
react로 웹페이지에 component 추가해보기!  (0) 2019.04.22
react 로 만든 웹페이지 실행해보기!  (0) 2019.04.22

+ Recent posts

티스토리툴바