노마드코더에서 강의를 배우면 뭔가 굉장히 어려운 개념도 쉽게 받아들일 수 있게 되는 느낌이다!

 

우선 저번에 만들었던 movie.js를 조금 수정해주었다.

 

 

자세히 보면 8,9 번째 줄과 18번째 줄이 변경된 것을 알 수 있다. props를 통해 부모에게서 데이터를 받아오는데 이때 부모에서 poster와 title이라는 data를 가져오는 것을 알 수 있다.

 

 

app.js에서 movies라는 array를 생성해 주었다.

그리고 app이라는 class 안에서 이 movies라는 array를 movie라는 새로운 array로 mapping하여 사용하는 것이 바로 map이라는 함수이다.

 

 

이렇게 만들어 주면 movies라는 array에 저장된 데이터를 특별한 인덱스없이 받아오는 것이 가능하게 되고, 몇개가 저장되어 있는지 몰라도 전체를 출력하는 것이 가능하게 된다. 출력한 모습은 다음과 같다!

 

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

react로 웹페이지에 db가져오기!  (0) 2019.04.23
react로 loading states 만들기!  (0) 2019.04.23
react로 웹페이지에 component 추가해보기!  (0) 2019.04.22
react 로 만든 웹페이지 실행해보기!  (0) 2019.04.22
react 알아 보기  (0) 2019.04.21

 배우면 배울 수록 재밌다. 오늘은 저번에 만들어 두었던 웹페이지에 component를 추가해보았다.

우선! vs code를 실행시키고 movie app을 실행시켜 준 후, src 내에 movie.js와 movie.css를 만들어 준다. css에서는 디자인을 담당하게 된다.

 

 

movie.js는 app.js와 비슷한 구성으로 만들어주면 된다. 여기서 "render -> 출력을 담당하는 부분"이라고 생각하면 된다. 

 

 

원래 app.js 안에 있던 내용들을 지워주고, app.css도 .App{} 만 남겨주고 다 지워준다.

 

 

그러면!!

 

 

따란! 이미지와 텍스트가 요소로 들어있는 것을 확인할 수 있다.

(+ 이미지는 구글에서 이미지를 새탭으로 열어준 후, 주소를 입력해주면 넣어줄 수 있다.)

(+ public에서 index.html 안의 title을 수정해주면 저렇게 movie app으로 title을 수정해 줄 수 있다!)

 

자세한 내용은 영상을 참고해 주세요..!! (노마드코더 영상 처음 배울 때 보면 좋은 것 같다..!!)

https://www.inflearn.com/course/reactjs-web/

 

리액트 처음이시라구요? React JS로 웹 서비스 만들기! – 인프런

리액트가 뭔지, 차근차근 처음부터 시작합니다. 리액트로 영화 정보와 랭킹을 알려주는 웹사이트를 직접 함께 클론코딩하면서 만들어봅니다. 1. 강좌 소개 이 강의에서는 리액트의 이론, 기본지식을 알려드리는 것 뿐만 아니라, ReactJS 를 이용하여 간단한 웹사이트 (영화 정보와 랭킹을 알려주는 웹사이트)를 직접 함께 클론코딩하면서 만들어봅니다. 본 강좌는 영어로 진행되기 때문에 한글자막을 꼭 켜주세요! 2. 학습 목표 기초적인 수준이지만 리액트 기본기에 대

www.inflearn.com

 

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

react로 웹페이지에 db가져오기!  (0) 2019.04.23
react로 loading states 만들기!  (0) 2019.04.23
react에서 map을 활용해 list 만들어주기!  (0) 2019.04.22
react 로 만든 웹페이지 실행해보기!  (0) 2019.04.22
react 알아 보기  (0) 2019.04.21

실행에 앞서 필요한 것들이 몇가지 있다.

 

1. vs code

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

2. node js 설치

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

이제 모든 준비가 끝났다! (강의에서는 macOS에서 실행시키지만 저는 window에서 실행시켰습니다.)

우선 가장 먼저 할 일은 node js command prompt를 실행시키는 것이다.

그리고 아래와 같이 명령어를 입력해준다.

 

npm install -g create-react-app

create-react-app movie_app

(여기서 movie_app이 내가 만들고자 하는 app의 이름이 된다.)

 

 

그리고 다음의 명령어를 입력해준다. movie_app 폴더로 들어간 후 react app을 실행시켜 주면 다음과 같은 창이 뜬다!

 

cd movie_app

npm start

 

 

간단한 수정에 들어가 보자.

vs code를 실행시키고, movie_app 폴더를 열어준다.

 

 

여기서 12번째 문장을 수정하고 save해주게 되면 자동으로 컴파일이 시작된다.

 

 

생각보다 간단하다. 빨리 더 많은 기능을 배워서 구현해보고 싶다!

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

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
react 알아 보기  (0) 2019.04.21

최근에 어플리케이션 개발을 공부하면서 react 를 함께 공부하게 되었습니다.

https://facebook.github.io/react-native/

 

React Native · A framework for building native apps using React

A framework for building native apps using React

facebook.github.io

 

React의 장점

 

1. java script 기반이다.

2. component별로 작업이 가능하다.

+ 방대한 커뮤니티...

+참고할 강의!

https://www.inflearn.com/course/reactjs-web/

 

ReactJS 로 웹 서비스 만들기 [리액트 기초 배우기] - 인프런

리액트가 뭔지, 차근차근 처음부터 시작합니다. 리액트로 영화 정보와 랭킹을 알려주는 웹사이트를 직접 함께 클론코딩하면서 만들어봅니다. 1. 강좌 소개 이 강의에서는 리액트의 이론, 기본지식을 알려드리는 것 뿐만 아니라, ReactJS 를 이용하여 간단한 웹사이트 (영화 정보와 랭킹을 알려주는 웹사이트)를 직접 함께 클론코딩하면서 만들어봅니다. 본 강좌는 영어로 진행되기 때문에 한글자막을 꼭 켜주세요! 2. 학습 목표 기초적인 수준이지만 리액트 기본기에 대

www.inflearn.com

 

공부하면서 꾸준히 업데이트 하도록 하겠습니다! (>.<) (+강의에서 만든 movie app을 우선 따라 만들어 보도록 하겠습니다.)

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

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
react 로 만든 웹페이지 실행해보기!  (0) 2019.04.22

문제 풀이

 

 최소 비용일때마다 fee 배열에 저장된 최소비용을 갱신해줍니다. fee[finish]에 start node에서 finish node로 가는 최소 비용이 저장됩니다.

 

 

코드

 

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
#include <iostream>
#include <vector>
#include <queue>
#include <cstring>
 
using namespace std;
 
int n, m, finish;
int fee[1001];
vector <pair<int,int>> graph[1001];
 
int go(int start) {
 
    queue<int> q;
    q.push(start);
    fee[start] = 0;
 
    while (!q.empty()) {
        int x = q.front();
        q.pop();
 
        for (int i = 0; i < graph[x].size(); i++) {
            int nx, cost;
            nx = graph[x][i].first;
            cost = graph[x][i].second;
            if (fee[nx] == -1 || fee[x] + cost < fee[nx]) {
                fee[nx] = fee[x] + cost;
                if (nx != finish) {
                    q.push(nx);
                }
            }
        }
    }
    return fee[finish];
}
 
int main() {
 
    memset(fee, -1, sizeof(fee));
    cin >> n >> m;
 
    while (m--) {
        int b, e, c; cin >> b >> e >> c;
        graph[b].push_back(make_pair(e, c));
    }
 
    int start; cin >> start >> finish;
 
    cout << go(start) << '\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/1916

 

1916번: 최소비용 구하기

첫째 줄에 도시의 개수 N(1 ≤ N ≤ 1,000)이 주어지고 둘째 줄에는 버스의 개수 M(1 ≤ M ≤ 100,000)이 주어진다. 그리고 셋째 줄부터 M+2줄까지 다음과 같은 버스의 정보가 주어진다. 먼저 처음에는 그 버스의 출발 도시의 번호가 주어진다. 그리고 그 다음에는 도착지의 도시 번호가 주어지고 또 그 버스 비용이 주어진다. 버스 비용은 0보다 크거나 같고, 100,000보다 작은 정수이다. 그리고 M+3째 줄에는 우리가 구하고자 하는 구간

www.acmicpc.net

 

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

5430번: AC (백준 온라인 저지, C++)  (1) 2019.04.25
1021번: 회전하는 큐 (백준 온라인 저지, C++)  (0) 2019.04.25
10866번: 덱 (백준 온라인 저지, C++)  (0) 2019.04.20
2902번: KMP는 왜 KMP일까? (백준 온라인 저지, C++)  (0) 2019.04.20
4307번: 개미  (0) 2019.04.18

코드

 

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
#include <iostream>
#include <string>
 
using namespace std;
 
int d[20001];
 
int main() {
 
    int n, x; cin >> n;
    int b = 10000, e = 10000;
 
    while(n--) 
    {
        string s; cin >> s;
 
        if (s == "push_front")
        {
            cin >> x;
            d[b] = x;
            b--;
        }
        else if (s == "push_back")
        {
            cin >> x;
            e++;
            d[e] = x;
        }
        else if (s == "pop_front")
        {
            if (e - b == 0) {
                cout << "-1\n";
            }
            else {
                b++;
                cout << d[b] << '\n';
            }
        }
        else if (s == "pop_back")
        {
            if (e - b == 0) {
                cout << "-1\n";
            }
            else {
                cout << d[e] << '\n';
                e--;
            }
        }
        else if (s == "size")
        {
            cout << e - b << '\n';
        }
        else if (s == "empty")
        {
            if (e - b == 0) {
                cout << "1\n";
            }
            else {
                cout << "0\n";
            }
        }
        else if (s == "front")
        {
            if (e - b == 0) {
                cout << "-1\n";
            }
            else {
                cout << d[b + 1] << '\n';
            }
        }
        else if (s == "back")
        {
            if (e - b == 0) {
                cout << "-1\n";
            }
            else {
                cout << d[e] << '\n';
            }
        }
    }
 
    return 0;
}

 

 

채점 결과

 

 

 

문제 출처

 

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

 

10866번: 덱

첫째 줄에 주어지는 명령의 수 N (1 ≤ N ≤ 10,000)이 주어진다. 둘쨰 줄부터 N개의 줄에는 명령이 하나씩 주어진다. 주어지는 정수는 1보다 크거나 같고, 100,000보다 작거나 같다. 문제에 나와있지 않은 명령이 주어지는 경우는 없다.

www.acmicpc.net

 

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

1021번: 회전하는 큐 (백준 온라인 저지, C++)  (0) 2019.04.25
1916번: 최소비용 구하기  (0) 2019.04.21
2902번: KMP는 왜 KMP일까? (백준 온라인 저지, C++)  (0) 2019.04.20
4307번: 개미  (0) 2019.04.18
1874번: 스택 수열  (0) 2019.04.16

문제 풀이

 

아스키 코드를 활용하여 대문자인 경우 출력해주었습니다.

 

 

코드

 

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
#include <iostream>
#include <string>
 
using namespace std;
 
int main() {
 
    string s;
    cin >> s;
 
    for (int i = 0; i < s.size(); i++) {
        
        int a = s[i];
 
        if (i == 0) {
            cout << s[i];
        }
        else if (a >= 65 && a <= 90) {
            cout << s[i];
        }
    }
 
    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/2902

 

2902번: KMP는 왜 KMP일까?

문제 KMP 알고리즘이 KMP인 이유는 이를 만든 사람의 성이 Knuth, Morris, Prett이기 때문이다. 이렇게 알고리즘에는 발견한 사람의 성을 따서 이름을 붙이는 경우가 많다. 또 다른 예로, 유명한 비대칭 암호화 알고리즘 RSA는 이를 만든 사람의 이름이 Rivest, Shamir, Adleman이다. 사람들은 이렇게 사람 성이 들어간 알고리즘을 두 가지 형태로 부른다. 첫 번째는 성을 모두 쓰고, 이를 하이픈(-)으로 이어 붙인 것이다. 예

www.acmicpc.net

 

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

1916번: 최소비용 구하기  (0) 2019.04.21
10866번: 덱 (백준 온라인 저지, C++)  (0) 2019.04.20
4307번: 개미  (0) 2019.04.18
1874번: 스택 수열  (0) 2019.04.16
10828번: 스택 (백준 온라인 저지, C++)  (0) 2019.04.15

문제 풀이

 

 개미가 부딪혔을 경우, 개미의 방향이 반대가 된다는 조건에 의해 개미를 각각으로 생각하여 풀이할 수도 있습니다. 그러나 1차원의 경우 부딪혀서 반대가 되어도 결국 교차한 것과 같게 되므로 단순히 개미의 진행방향만 고려하여 문제를 풀이하면 쉽게 문제를 풀 수 있습니다.

 

 

코드

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#include <iostream>
#include <algorithm>
using namespace std;
int main() {
    int t;
    cin >> t;
    while (t--) {
        int l, n, x;
        cin >> l >> n;
        int mn = -1, mx = -1;
        while (n--) {    
            cin >> x;
            mn = max(mn, min(x, l-x));
            mx = max(mx, max(x, l-x));     
        }
        cout << mn << ' ' << mx << '\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/4307

 

4307번: 개미

문제 개미 여러 마리가 길이가 lcm인 막대 위에 있다. 각 개미의 이동 속도는 모두 일정하며, 1cm/s이다. 개미가 막대의 마지막까지 걸어간다면, 개미는 그 즉시 떨어지게 된다. 또, 두 개미가 만나게 된다면, 방향을 반대로 바꾸어 걸어가게 된다. 가장 처음에 막대 상에서 개미의 위치를 알고 있다. 하지만, 개미가 어느 방향으로 움직이는 지는 알 수가 없다. 이때, 모든 개미가 땅으로 떨어질 때까지 가능한 시간 중 가장 빠른 시간과 느린 시간을 구하는

www.acmicpc.net

 

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

10866번: 덱 (백준 온라인 저지, C++)  (0) 2019.04.20
2902번: KMP는 왜 KMP일까? (백준 온라인 저지, C++)  (0) 2019.04.20
1874번: 스택 수열  (0) 2019.04.16
10828번: 스택 (백준 온라인 저지, C++)  (0) 2019.04.15
4948번: 베르트랑 공준  (0) 2019.04.15

+ Recent posts

티스토리툴바