문제

 

배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다.

예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면

  1. array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다.
  2. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다.
  3. 2에서 나온 배열의 3번째 숫자는 5입니다.

배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요.

제한사항

  • array의 길이는 1 이상 100 이하입니다.
  • array의 각 원소는 1 이상 100 이하입니다.
  • commands의 길이는 1 이상 50 이하입니다.
  • commands의 각 원소는 길이가 3입니다.

입출력 예

array commands return
[1, 5, 2, 6, 3, 7, 4] [[2, 5, 3], [4, 4, 1], [1, 7, 3]] [5, 6, 3]

입출력 예 설명

[1, 5, 2, 6, 3, 7, 4]를 2번째부터 5번째까지 자른 후 정렬합니다. [2, 3, 5, 6]의 세 번째 숫자는 5입니다.
[1, 5, 2, 6, 3, 7, 4]를 4번째부터 4번째까지 자른 후 정렬합니다. [6]의 첫 번째 숫자는 6입니다.
[1, 5, 2, 6, 3, 7, 4]를 1번째부터 7번째까지 자릅니다. [1, 2, 3, 4, 5, 6, 7]의 세 번째 숫자는 3입니다.

 


문제 설명

 

이차원 vector의 접근만 기억하고 있으면 문제에 나온대로 푸는 간단한 문제다. 이차원 벡터는 이차원 배열과 비슷하게 접근해준다는 것을 기억하고 들어가자.

 

우선, 내가 고생했던 점은 vector 컨테이너의 STL을 다 공부하지 않은 상태라 assign() 함수를 제대로 쓰지 못해 이상하게 헤맸다는 것이다... STL 공부를 성실히 하자는 조언을 얻었다. 

 

* assign(원소의 개수, 값) 

 

vector<int> tmp1, tmp2 선언해서 넣었다가 초기화했다가 난리를 쳤는데, 그냥 인덱스값에 commands[i][1] 이렇게 깔끔하게 적어서 하는 방향으로 코드를 고쳤다.

 

STL 공부하자...!!!!

 


C++ 코드

#include <string>
#include <vector>
#include <algorithm>

using namespace std;

vector<int> solution(vector<int> array, vector<vector<int>> commands) {
    vector<int> answer;

    for(int i = 0; i< commands.size() ; i++){
        vector<int> tmp;
        tmp.assign(array.begin() + commands[i][0]-1, array.begin()+commands[i][1]);
        sort(tmp.begin(), tmp.end());
        
        answer.push_back(tmp[commands[i][2]-1]);
    }
    
    return answer;
}

간만에 1시간 안걸려서 푼듯하다

 

* 물론 assign 안쓰고 잘 푸는 사람 많더라 허허

문제

 

0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요.

예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다.

0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요.

제한 사항

  • numbers의 길이는 1 이상 100,000 이하입니다.
  • numbers의 원소는 0 이상 1,000 이하입니다.
  • 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다.

입출력 예

numbers return
[6, 10, 2] "6210"
[3, 30, 34, 5, 9] "9534330"

 


 

문제 해결 방법

 

1. 빈 문자열로 수를 초기화한다.

2. 가장 크게 만들 수 있는 수를 고른다.

3. 그 수를 현재 수에 이어 붙인다.

4. 모든 수를 다 사용할 때까지 반복한다.

 

 

예제 적용

[3, 30, 34, 5, 9] ""
[3, 30, 34, 5] "9"
[3, 30, 34] "95"
[3, 30] "9534"
[30] "95343"
[] "9534330"

-> O(N^2) 복잡도

--> 더 나은 해결방법 : sort 적용해보기

 

 

더 나은 문제 해결 방법

 

1. 빈 문자열로 수를 초기화한다.

2. 수의 목록을 (크게 만드는 것 우선으로) 정렬한다. -> O(NlogN)

3. 목록에서 하나씩 꺼내어 현재 수에 이어 붙인다.

4. 모든 수를 다 사용할 때까지 반복한다.

 

"크게 만드는 수"의 기준 -> 커봐야 1000이하라고 했으니 4자리만 비교한다

34  3434|34...

vs

343 3433|43....

 

 

알고리즘 설계 -> 구현

 

- 대소 관계 비교를 위한 기준 마련

- 기준을 통해 주어진 배열 정렬

- 정렬된 배열을 이용하여 문자열 표현 완성

 


코드 (테스트케이스 1개 통과X)

#include <string>
#include <vector>
#include <algorithm>

using namespace std;

// 정렬의 기준 판단
bool cmp(int a, int b){
    string s1 = to_string(a) + to_string(b);
    string s2 = to_string(b) + to_string(a);
    return s1 > s2;
}

string solution(vector<int> numbers) {
    string answer = "";
    sort(numbers.begin(), numbers.end(), cmp);
    for (auto& i : numbers) {
        answer += to_string(i);
    }
    return answer;
}

 

위 코드는 대부분의 테스트 케이스를 통과하는데 딱 하나의 케이스를 통과하지 못한다. 바로 "00" 과 같이 numbers가 전부 0으로 이루어진 문자열일 경우 깔끔하게 "0" 이 출력되는 것이 아니라 "000"과 같이 잘못된 답안이 출력되기 때문이다. 따라서 마지막 return문을 약간 수정했다.

 

 

최종 코드 C++

#include <string>
#include <vector>
#include <algorithm>

using namespace std;

// 정렬의 기준 판단
bool cmp(int a, int b){
    string s1 = to_string(a) + to_string(b);
    string s2 = to_string(b) + to_string(a);
    return s1 > s2;
}

string solution(vector<int> numbers) {
    string answer = "";
    sort(numbers.begin(), numbers.end(), cmp);
    for (auto& i : numbers) {
        answer += to_string(i);
    }
    return answer[0] == '0' ? "0" : answer;
}

 

드디어 만점!

 

 

시간 복잡도

 

bool cmp(int a, int b){
    string s1 = to_string(a) + to_string(b);
    string s2 = to_string(b) + to_string(a);
    return s1 > s2;
}

위 함수는 문자가 몇개든 시간 복잡도에 영향을 주지 않는다.

 

sort(numbers.begin(), numbers.end(), cmp);

해당 함수는 O(NlogN)의 시간이 소요된다. 사실, 순서 관계에 따라 원소 N개인 배열을 정렬하는 데에는 O(NlogN)보다 더 낮은 복잡도를 가진 알고리즘은 없다. 

 

for (auto& i : numbers) {
     answer += to_string(i);
}

for 순환문은 N에 비례하는 복잡도 O(N)를 가진다. 

 

--> 전체 solution 함수의 복잡도는 O(NlogN)이다. 

문제

 

라면 공장에서는 하루에 밀가루를 1톤씩 사용합니다. 원래 밀가루를 공급받던 공장의 고장으로 앞으로 k일 이후에야 밀가루를 공급받을 수 있기 때문에 해외 공장에서 밀가루를 수입해야 합니다.

해외 공장에서는 향후 밀가루를 공급할 수 있는 날짜와 수량을 알려주었고, 라면 공장에서는 운송비를 줄이기 위해 최소한의 횟수로 밀가루를 공급받고 싶습니다.

현재 공장에 남아있는 밀가루 수량 stock, 밀가루 공급 일정(dates)과 해당 시점에 공급 가능한 밀가루 수량(supplies), 원래 공장으로부터 공급받을 수 있는 시점 k가 주어질 때, 밀가루가 떨어지지 않고 공장을 운영하기 위해서 최소한 몇 번 해외 공장으로부터 밀가루를 공급받아야 하는지를 return 하도록 solution 함수를 완성하세요.

dates[i]에는 i번째 공급 가능일이 들어있으며, supplies[i]에는 dates[i] 날짜에 공급 가능한 밀가루 수량이 들어 있습니다.

제한사항

  • stock에 있는 밀가루는 오늘(0일 이후)부터 사용됩니다.
  • stock과 k는 2 이상 100,000 이하입니다.
  • dates의 각 원소는 1 이상 k 이하입니다.
  • supplies의 각 원소는 1 이상 1,000 이하입니다.
  • dates와 supplies의 길이는 1 이상 20,000 이하입니다.
  • k일 째에는 밀가루가 충분히 공급되기 때문에 k-1일에 사용할 수량까지만 확보하면 됩니다.
  • dates에 들어있는 날짜는 오름차순 정렬되어 있습니다.
  • dates에 들어있는 날짜에 공급되는 밀가루는 작업 시작 전 새벽에 공급되는 것을 기준으로 합니다. 예를 들어 9일째에 밀가루가 바닥나더라도, 10일째에 공급받으면 10일째에는 공장을 운영할 수 있습니다.
  • 밀가루가 바닥나는 경우는 주어지지 않습니다.

입출력 예

stock dates supplies k result
4 [4,10,15] [20,5,10] 30 2

입출력 예 설명

  • 현재 밀가루가 4톤 남아 있기 때문에 오늘과 1일 후~3일 후까지 사용하고 나면 모든 밀가루를 다 사용합니다. 따라서 4일 후에는 반드시 밀가루를 공급받아야 합니다.
  • 4일째 공급받고 나면 15일 이후 아침에는 9톤의 밀가루가 남아있게 되고, 이때 10톤을 더 공급받으면 19톤이 남아있게 됩니다. 15일 이후부터 29일 이후까지 필요한 밀가루는 15톤이므로 더 이상의 공급은 필요 없습니다.
  • 따라서 총 2회의 밀가루를 공급받으면 됩니다.

풀이

 

왜 나는 문제 이해만 제대로 하는데 이렇게 오랜 시간이 걸리는지 모르겠다. 우선 문제를 잘못 이해해서 무조건 supplies를 순서대로 지급받는 식으로 코드를 짰더니 ㅋㅋㅋㅋㅋ 정확성에서 1가지 케이스(아마 예제의 테스트 케이스?) 빼고 전부 실패가 떴다. 

 

그래서 이 문제가 힙이지...! 하면서 우선순위 큐로 접근해서 한번 문제를 풀어보았다.


 

코드

 

이 코드는 우선 정확성에서 상당히 점수를 갉아먹은 코드다.

#include <string>
#include <vector>
#include <queue>

using namespace std;

int solution(int stock, vector<int> dates, vector<int> supplies, int k) {
    int answer = 0;
    int Dday = k-1;
    priority_queue<int, vector<int>, less<int>> q;
    
    for(auto& i : supplies) {
        q.push(i);
    }
    
    if(stock>=k) return answer;
    while(Dday>1){
        if( (Dday-1) <=stock) break;
        
        if(stock==0) {
            stock+=q.top();
            q.pop(); answer++;
        }
        stock--; Dday--;
    }
    return answer;
}

슬픈 화면 .... ㅠㅠㅠ

 

왜 이렇게 나왔나 하고 고민해보니까, 생각해보니 저 코드에는 dates와는 관계없이 모든 supplies를 우선순위 큐에 넣고 있었다. 즉, dates중 공급을 받을 수 있는 날짜의 supplies만 우선순위 큐에 넣는 코드가 빠져있던 것이다. ㅠㅠ 이걸 놓쳐서 계속 애꿎은 조건문만 수정하면서 헤맸다.

 

그래서 dates중 공급을 받을 수 있는 날짜를 어떻게 계산하는가 고민해보니 Dday로 접근할 게 아니라 현재 날짜(day)로 접근을 하는게 맞겠다 싶어 코드를 전면 수정했다. day가 지남에 따라 dates에서 공급받을 수 있는 항목이 생기니까 말이다. 먼저 세워놓았던 Dday의 개념은 for문의 조건에 넣어두었다. 

 

최종 코드 C++

#include <string>
#include <vector>
#include <queue>

using namespace std;

int solution(int stock, vector<int> dates, vector<int> supplies, int k) {
    int answer = 0;
    int index = 0;
    priority_queue<int, vector<int>, less<int>> q;
    
    for(int day = 0; day < k ; day++){
        if(dates[index] == day) {
            q.push(supplies[index]);
            index++;
        }
        if(stock==0){
            stock+=q.top();
            q.pop();
            answer++;
        }
        stock--;
    }
    
    return answer;
}

2시간 걸린것같다 에휴

 

최종 풀이

 

1. 새로운 밀가루를 지급받는 날짜 k까지 날마다 stock은 감소, 현재 날짜 day는 증가

2. day가 증가함에 따라 새롭게 지급받을 수 있는 dates가 열림. 이 dates[index]에 따라 supplies[index]를 우선순위 큐에 넣어줌

3. stock==0이 되면 우선순위 큐에서 가장 큰 값(top)을 가져오고, 해당 값을 큐에서 제거. answer 증가

 

위와 같은 코드로 진행을 하면... 참 이상적일텐데 아예 아무것도 안 보고 해보자! 하면서 무한 삽질을 시작했더니 참 한심한(...) 접근을 많이 했다. 알고리즘 문제를 처음 풀어보면 다 이러는 걸까 ㅠㅠ 다들 되게 척척 잘 푸는 것 같아서 약간 기가 죽는다... ㅠㅠ 매일하다보면 늘겠지...? 파이팅이다

문제


매운 것을 좋아하는 Leo는 모든 음식의 스코빌 지수를 K 이상으로 만들고 싶습니다. 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 Leo는 스코빌 지수가 가장 낮은 두 개의 음식을 아래와 같이 특별한 방법으로 섞어 새로운 음식을 만듭니다.

 

섞은 음식의 스코빌 지수 = 가장 맵지 않은 음식의 스코빌 지수 + (두 번째로 맵지 않은 음식의 스코빌 지수 * 2)

 

Leo는 모든 음식의 스코빌 지수가 K 이상이 될 때까지 반복하여 섞습니다.
Leo가 가진 음식의 스코빌 지수를 담은 배열 scoville과 원하는 스코빌 지수 K가 주어질 때, 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 섞어야 하는 최소 횟수를 return 하도록 solution 함수를 작성해주세요.

제한 사항

  • scoville의 길이는 1 이상 1,000,000 이하입니다.
  • K는 0 이상 1,000,000,000 이하입니다.
  • scoville의 원소는 각각 0 이상 1,000,000 이하입니다.
  • 모든 음식의 스코빌 지수를 K 이상으로 만들 수 없는 경우에는 -1을 return 합니다.

입출력 예

scoville K return
[1, 2, 3, 9, 10, 12] 7 2

입출력 예 설명

  1. 스코빌 지수가 1인 음식과 2인 음식을 섞으면 음식의 스코빌 지수가 아래와 같이 됩니다.
    새로운 음식의 스코빌 지수 = 1 + (2 * 2) = 5
    가진 음식의 스코빌 지수 = [5, 3, 9, 10, 12]

  2. 스코빌 지수가 3인 음식과 5인 음식을 섞으면 음식의 스코빌 지수가 아래와 같이 됩니다.
    새로운 음식의 스코빌 지수 = 3 + (5 * 2) = 13
    가진 음식의 스코빌 지수 = [13, 9, 10, 12]

모든 음식의 스코빌 지수가 7 이상이 되었고 이때 섞은 횟수는 2회입니다.


풀이

 

이 문제는 수가 많은 것과 적을 때가 크게 중요하지 않은 문제이다. 우선 입출력 예시를 살펴보면 해당 배열은 정렬되어 있다. (만약 정렬되지 않은 경우, 고려해야 할 경우를 줄이기 위해 오름차순으로 정렬을 하도록 한다!)

 

< 입출력 예시를 통해 문제 살펴보기 >

 

1회차 : 1 2 3 9 10 12    K=7

섞기 ) 1+(2*2) = 5  ---> 정렬이 이미 되어있는 배열이므로, 3 뒤에 원소를 삽입한다.

 

2회차 : 3 5 9 10 12   K=7

섞기 ) 3+(5*2) = 13  ----> 12 뒤에 원소를 삽입한다.

 

3회차 : 9 10 12 13   K=7

스코빌 지수 K보다 가장 작은 원소 9가 더 크므로 몇번 섞었는지에 대한 count를 return한다.

 

< 알고리즘의 복잡도 >

 

- 최악의 경우 : 모든 음식을 전부 살펴보는 경우.

음식이 n개인 경우, n-1회를 살펴보아야 한다.

 

- 각 단계(섞기)에서 요구되는 계산량 

  : 정렬된 리스트 순서에 맞춰 원소 삽입 -> 정렬된 리스트의 길이에 비례함

    --> O(n)

 

- 전체 문제 풀이의 복잡도

 : n번의 단계를 거쳐, 각 단계에서 n에 비례하는 계산을 하므로, 최종적으로 O(n^2) ---> 지나치게 높다!

   --> 뭔가 더 좋은 방법? : 힙!

 

< 보다 나은 방법 >

최소/최대 원소를 빠르게 꺼낼 수 있으면 BEST! -> 힙(Heap) 사용

 

힙의 종류

- max heap : 최대 원소를 빠르게 꺼낼 수 있음

- min heap : 최소 원소를 빠르게 꺼낼 수 있음

 

힙의 특징 : 최소/최대 원소를 빠르게 찾을 수 있음 (상수 시간 소요)

 

힙의 연산 : 힙 구성(heapify), 삽입(insert), 삭제(remove) 

* 힙 구성 : 배열로 힙 생성 : O(NlogN) -> 하나의 원소를 삽입하는데 logN만큼 걸리고, n개의 원소를 삽입해야 하므로!

* 삽입 : 임의의 원소를 힙의 순서가 흐트러지지 않도록 삽입 : O(logN)

* 삭제 : 최소/최대 원소를 삭제하며, 이 역시 힙의 순서가 흐트러지지 않도록 삽입 : O(logN)

( 꺼내는 것 자체는 상수 시간이나, 꺼낸 후 힙의 순서를 유지하도록 하는데에 O(logN) 시간 소요)

 

힙의 구현 : 완전 이진 트리 -> 배열을 이용해서 구현 가능 (공간효율성 높음)

 

max heap

<- Max Heap

root node : 가장 큰 원소(30)

 

 

 

 

 

 

 

 

 

 

 

 

 

힙의 응용

- 정렬(heapsort) : 최악의 복잡도 = 최적의 복잡도

- 우선 순위 큐 

 


C++ 코드 (힙으로 구현)

 

#include <string>
#include <vector>
#include <queue>

using namespace std;

int solution(vector<int> scoville, int K) {
    int answer = 0; // 몇번이나 음식을 섞었는가
    
    priority_queue <int, vector<int>, greater<int>> q;
    for (auto& i : scoville){
        q.push(i);
    }
    while(true) {
        int min1 = q.top();
        q.pop();
        // 제일 덜매운 음식의 스코빌 지수가 K보다 클때
        if (min1 >= K) break;
        // 다 봤는데도 K가 제일 클때 (실패)
        else if (q.empty()) {
            answer = -1;
            break;
        }
        // 스코빌지수 계산
        int min2 = q.top();
        q.pop();
        q.push(min1 + 2 * min2);
        answer++;
    }
    
    return answer;
}

 

코드 분석

for(auto& i : scoville) {
	q.push(i);
}

시간 복잡도 : O(NlogN)

 

while(true) {
        int min1 = q.top(); q.pop(); // O(logN)
        if (min1 >= K) break;
        else if (q.empty()) {
            answer = -1;
            break;
        }
        int min2 = q.top(); q.pop(); // O(logN)
        q.push(min1 + 2 * min2); // O(logN)
        answer++;
}

 전체 while문 시간 복잡도 : 최악의 경우 O(n-1), n에 비례하는 반복횟수를 가짐

-> 전체적인 알고리즘의 복잡도 : O(NlogN)

 

---> 최종적으로, 알고리즘의 시간 복잡도 : O(NlogN)

힙은 컨테이너가 아니라 데이터를 구성하는 방식을 말한다. 힙이 무엇인지 이해하려면 트리에 대한 지식이 선행되어야 하나, 이 글에서는 넘어가겠다. 

 

힙은 완전 이진 트리이고, 여러 개의 값들 중에서 최댓값이나 최솟값을 빠르게 찾아내도록 만들어진 자료구조이다. 

힙은 일종의 느슨한 정렬 상태를 유지하며, 힙 트리에서는 중복된 값을 허용한다. (이진 탐색 트리에서는 중복된 값을 허용하지 않는다.)

 

각 노드는 자식 노드에 따라 정렬된다. 힙의 종류에는 부모 노드가 항상 자식 노드보다 크거나 같아야 하는 최대 힙(max heap)이 있고, 부모 노드가 항상 자식 노드보다 작거나 같아야 하는 최소 힙(min heap)이 있다. 

 

여기서 알고 가면 좋은 점은, priority_queue가 바로 힙이라는 점이다! priority_queue의 인스턴스는 내부에서 힙을 생성한다. 그렇다면 왜 C++ STL에서는 이미 힙인 priority_queue와 힙을 생성할 수 있는 두가지 기능이 있을까?

 

priority_queue는 원소 순서가 자동으로 관리된다는 점에서 장점이 있다. 우선순위 큐는 첫번째 원소만 접근할 수 있고 다른 원소에는 접근할 수 없으므로 priority_queue의 정렬된 상태를 망가뜨릴 수 없다. 원하는 자료구조의 형태가 우선순위 큐라면 이는 큰 장점이다.

 

하지만 make_heap()을 사용하여 힙을 생성하면 priority_queue에는 없는 몇 가지 장점이 있다.

 

1. 힙에서는 가장 큰 원소 뿐 아니라 어떤 원소에도 접근할 수 있다. 이 과정에서 원소들의 순서 일관성을 훼손할 수도 있지만 이는 make_heap()을 호출해서 언제든지 복구할 수 있다.

2. 랜덤 액세스 반복자를 지원하는 어떤 시퀸스 컨테이너로도 힙을 생성할 수 있다. (ex. 일반 배열, string 객체, 직접 정의한 컨테이너 등) 즉, 필요할 떄 순차열 컨테이너의 원소들을 힙으로 배열할 수 있고, 필요하다면 반복해서 힙으로 배열할 수 있다는 뜻이다.

3. 힙 순서를 유지하는 힙 함수를 사용한다면 힙을 우선순위 큐로 쓸 수 있다.

 


 

 

- push_heap() :  힙 배치를 유지하기 위해 순차열의 적절한 위치에 원소 삽입 

 

- pop_heap() : 첫 번쨰 원소를 끝으로 보내고 끝으로 보낸 마지막 원소를 제외한 나머지 원소들로 힙을 만든다. 그 다음에 vector의 pop_back() 멤버를 호출해서 마지막 원소를 제거한다. 

 * 만약 make_heap()에 비교 함수를 지정해 힙을 생성했다면 pop_heap()의 세 번째 인수에도 같은 비교 함수를 지정해야 한다. 

#include <iostream>
#include <vector>
#include <algorithm>

using namespace std;

vector <double> nums {2.5, 10.0, 3.5, 8.0, 12.0, 1.5, 6.0};
make_heap(begin(nums), end(nums), greater<>()); // 결과 : 1.5 6 2.5 6.5 8 12 3.5 10
pop_heap(begin(nums), end(nums), greater<>()); // 결과 : 2.5 6 3.5 6.5 8 12 10 3.5
nums.pop_back(); // 결과 : 2.5 6 3.5 6.5 8 12 10

 

- is_heap() : 지정된 범위가 힙이면 true 반환

 

  1) 조건자 X 경우

#include <iostream>
#include <vector>
#include <algorithm>

using namespace std;

vector <double> nums {2.5, 10.0, 3.5, 8.0, 12.0, 1.5, 6.0};
make_heap(begin(nums), end(nums));

if(is_heap(begin(nums), end(nums)))
	cout<< "it's still heap!" << endl;
else
	cout<< "oh, we messed up the heap" << endl;
   

 2) 조건자 greater<> 사용시

#include <iostream>
#include <vector>
#include <algorithm>

using namespace std;

vector <double> nums {2.5, 10.0, 3.5, 8.0, 12.0, 1.5, 6.0};
make_heap(begin(nums), end(nums),greater<>());

if(is_heap(begin(nums), end(nums), greater<>()))
	cout<< "it's still heap!" << endl;
else
	cout<< "oh, we messed up the heap" << endl;
   

 

- is_heap_until() : 범위에서 힙이 아닌 원소의 첫 번째 위치 반환

#include <iostream>
#include <vector>
#include <algorithm>

using namespace std;

vector <double> nums {2.5, 10.0, 3.5, 8.0, 12.0, 1.5, 6.0};
make_heap(begin(nums), end(nums). greater<>());

auto iter = is_heap_until(begin(nums), end(nums). greater<>());

if(iter != end(nums))
	cout<< "numbers is a heap up to "<< *iter << endl;

여기서 주의해야 할 점은 전체 범위가 힙이라면 is_heap_until() 함수는 끝 반복자를 반환하게 되므로 if문에서는 끝 반복자를 역참조하지 않게 확인해줘야 한다. 또한, 지정된 범위가 원소 두 개 이하일 때도 끝 반복자를 반환한다. 매개변수 두 개를 쓰는 is_heap_until() 함수는 기본 조건자로 less<>를 사용한다. 

 

- sort_heap() : 힙 범위 정렬 (만약 주어진 범위가 힙이 아니라면 런타임에 충돌함)

* 최대 힙을 정렬한 결과는 최소 힙이다. 즉, 힙 생성에 사용한 조건자가 greater<>였다면 최소 힙이 되고, sort_heap()을 실행한 결과는 원소들을 내림차순으로 정렬한 것이 된다. (최소 힙을 정렬한 결과는 최소 힙이 될 수 없다. ) 

 

다음은 최소 힙을 정렬한 결과는 최대 힙이 됨을 보여주는 코드이다.

#include <iostream>
#include <vector>
#include <algorithm>

using namespace std;

vector <double> nums {2.5, 10.0, 3.5, 8.0, 12.0, 1.5, 6.0};
make_heap(begin(nums), end(nums), greater<>()); // 결과 : 1.5 6 2.5 6.5 8 12 3.5 10
sort_heap(begin(nums), end(nums), greater<>()); // 결과 : 12 10 8 6.5 6 3.5 2.5 1.5

 

여기서 주목할 점은 algorithm 헤더에는 힙을 정렬할 수 있는 sort() 함수 템플릿이 정의되어 있는데, 왜 sort_heap() 함수가 있을까? sort_heap() 함수는 힙 정렬(Heap Sort)이라 불리는 특별한 정렬 함수를 사용한다. sort_heap() 함수는 힙을 만들고, 데이터가 부분적으로 정렬되어 있다는 사실을 이용해 데이터를 정렬한다. 힙의 부분 정렬을 이용하기 때문에 정렬을 더 빨리할 가능성이 있다! (물론 항상 그런 것은 아니다.)

 

 

사실 알고리즘 문제를 풀 때 힙 문제여도 순수하게 힙으로 구현하는 경우는 거의 없는 듯하다.... ㅎㅎ 대부분 priority_queue 써서 구현을 하는 것 같다 허허 이것도 문제를 풀어봐야 감이 느는 거겠지?

 

 

 

** 이 글은 C++14 STL 철저 입문 (아이버 호튼 저)에 기반하여 작성되었습니다 **

여기서부터 계속 사용하던 function component 대신 class component를 사용한다. class component는 state를 사용할 수 있기 때문이다.

 

state는 object이고 여기에는 component의 데이터(가변)을 넣을 공간이 있다. 

리액트가 작동하도록 하는 component, 과연 무엇일까? componentHTML을 반환하는 함수이다. 현재 리액트 창에 Hello!가 출력되도록 하는 component는 App.js에 함수의 형태로 존재한다. 

function App() {
  return (
    <div> Hello!   
    </div>
  );
}

 

해당 component를 사용하고자 한다면 index.js에서 다음과 같이 쓰면 된다.

ReactDOM.render(<App />, document.getElementById('root'));

만약 <App /> 부분을 App으로 작성하는 경우 해당 component는 리액트로 작동하지 않는다.

이처럼 js와 HTML 사이의 조합이 리액트에서만 사용하는 'jsx'라는 개념이다. 

 

이제 나만의 component를 만들어보자.

src 안에 새로운 Lect_name.js 파일을 생성한다. (* 이름은 대문자로 시작해야 오류가 나지 않는다. )

import React from "react";

function Lect_name() {
	return <h3>안교수님 강의자료실</h3>
}

export default Lect_name;

 

이 Lect_name.js를 어떻게 사용할까? 위의 코드처럼 index.js에서 해당 component를 포함할 수 있도록 해주면 된다. 하지만 무작정 아래와 같이 코드를 작성하면 오류가 난다.

ReactDOM.render(<App /><Lect_name />, document.getElementById('root'));

그 이유는 react application은 하나의 component만을 rendering 해야 하기 때문이다. 현재 App을 렌더링하고 있는 상태이다. 따라서 Lect_name을 App 옆에 두는 대신 App 안에 넣어주도록 한다. 

import React from 'react';
import Lect_name from "./Lect_name";

function App() {
  return (
    <div> 
      <h1>Hello!</h1> 
      <Lect_name />
    </div>
  );
}

export default App;

 위의 코드를 실행하면 다음과 같이 제대로 App(), Lect_name()이 실행된 화면을 볼 수 있다.

 

component 안에 component를 넣어야 제대로 작동한다.

 

jsx는 js 안의 HTML이며, 사용자는 얼마든지 원하는 만큼 component를 올릴 수 있다는 점을 알고 가도록 한다. 다만 유의해야 할 것은 react application은 한 번에 하나의 component만 rendering할 수 있다는 점이다.

 


react - component 간의 관계가 이해되었다면 jsx의 다음 특징에 대해 알아보자.

 

여기까지 따라왔다면 파일 간의 불필요한 이동을 줄이기 위해 Lect_name 파일을 제거하고 App.js 내에 Lect_name() 함수를 정의하도록 한다. 

import React from 'react';

function Lect_name() {
	return <h3>안교수님 강의자료실</h3>;
}

function App() {
  return (
    <div> 
      <h1>Hello!</h1> 
      <Lect_name />
    </div>
  );
}

export default App;

이렇게 적어도 물론 코드는 제대로 작동한다. 여기서 jsx의 두번째 특징을 볼 수 있다. 바로 component에 정보를 보낼 수 있다는 점이다. component는 얼마든지 반복적으로 사용이 가능하다. 그렇다고 해서 만약 Lect_name() 함수를 여러번 호출하고 싶다고 해서, 무작정 <Lect_name />을 여러번 적는 것은 그다지 추천하고 싶지 않다.

 

각 HTML은 필요에 따라 동적으로 추가되는 것이 이상적인데, 이는 component에서 component로, child component로 정보를 보내는 방법(props)을 통해 구현할 수 있다.

 

import React from 'react';

function Lect_name(props) {
	console.log(props);
	console.log(props.prof);
	return <h3>강의자료실</h3>;
}

function App() {
  return (
    <div> 
      <h1>Hello!</h1> 
      <Lect_name prof="ahn" />
    </div>
  );
}

export default App;

위의 코드를 실행하면 화면 자체에는 변화가 없으나 개발자 도구를 열어 콘솔 창을 보면 다음과 같다.

props를 통해 전달된 값들

 

js의 es6를 사용하면, 해당 object에서 값을 직접 꺼내서 쓸수도 있다. 

import React from 'react';

function Lect_name({prof}) {
	return <h3>{prof} 강의자료실</h3>;
}

function App() {
  return (
    <div> 
      <h1>Hello!</h1> 
      <Lect_name prof="안교수님" />
    </div>
  );
}

export default App;

props.prof와 {prof}는 동일한 기능을 한다. 위의 코드를 실행해보면 기존에 출력하던 것과 동일한 화면이 출력되는 것을 볼 수 있다.

props를 통해 넘겨받은 값을 출력

 

props는 데이터를 통해 얼마든지 HTML이 추가될 수 있음을 보여준다. props는 뭐든지 component에 넣는 것들이고, 이는 해당 component의 첫번째 argument로 이동한다.

 


 다음 강좌부터는 웹사이트에 동적 데이터를 통해 값을 전달하는 것을 다루나, 현재 내가 개발하고자 하는 웹페이지와는 관계가 없기 때문에 추후 추가하도록 하겠다! (#2.2)

이왕 개발하는거 요즘 프론트엔드에서 핫하다고 하는 리액트로 교수님 강의자료실을 만들어보려고 한다. 까먹을까봐 티스토리에 개발 방법 및 기록을 해두려고 한다.

 

지금부터 대부분의 내용은 노마드 코더의 리액트 강의를 따라가고 있다. 

 

 

VS code를 켜고 작업을 시작할 디렉토리로 이동한 다음, 터미널에 해당사항을 입력해준다. npx create-react-app 뒤에 오는 것은 프로젝트 이름이 될 것이다. 현재 강의 자료실을 개발하므로 이름은 적당히 lecture_repos로 했다.

npx create-react-app lecture_repos

cd lecture_repos
npm start

 

cd lecture_repos의 경우 새롭게 VS code에서 폴더를 여는 경우 생략해도 좋다.

 

저 코드를 터미널에서 실행하면

리액트가 돌아가고 있다는 멋진 창이 뜬다.

 

코드 공유를 위해 깃에 repos를 추가하는 과정이 강의에 있는데 이 내용은 생략하겠다... 깃 올려놓기만 하고 잘 안본다 ㅠㅠ

 

이 뒤에는 갑자기 노마드씨가 빠른 이해를 위해 코드를 슉슉 지우기 시작한다...! 그 부분은 강의를 보고 따라가는 게 나을 것 같아 링크를 남겨 놓아야 겠다. https://youtu.be/9yITc-uEjwI

 

해당 강의를 따라가고 나면, src 폴더 내에 App.js, index.js 두 파일만 남는다. 다 지워버린 나머지 파일을 import하는 코드도 App.js에서 삭제해준다.

 

import React from 'react';

function App() {
  return (
    <div> 
    // 여기에 자유롭게 입력
    Hello!   
    </div>
  );
}

export default App;

 

해당 코드를 저장하기만 하면, 기존의 리액트 창이 자동으로 새로고침 되어 div 안에 적혀있는 Hello! 만 떠있다.

 

코드를 저장하기만 해도 알아서 새로고침이 된다..!!

현재 리액트 창의 코드를 보면 아래와 같다.

<div id="root">
	<div> Hello! </div>
</div>

 

하지만 내 작업폴더 내의 index.html 코드를 보면 div "root"는 비어있다. 

 <div id="root"></div>

 

여기에서 React의 특징이 등장한다! React는, 내가 작성한 모든 요소를 생성하고, JS와 그것을 만들고, 이를 HTML로 밀어넣는다. React는 모든 react application을 위의 div 사이에 밀어넣는다! 이 일은 index.js 내의 아래 코드를 통해 볼 수 있다.

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));

React는 app.js component를 ElementId 내부에 넣으려고 한다! 저 'root'의 이름은 만약 변경을 희망한다면 두 코드 둘다 바꿔주어야 제대로 작동할 것이다. 

 

index.html, index.js 파일은 여전히 비어있지만 제대로 작동한다. 내가 작성한 hello!가 없는데도 말이다. 이 점이 react를 빠르게 해주는 부분이다. react는 소스코드에 처음부터 HTML을 넣지 않고, HTML에서 HTML을 추가하거나 제거하는 방법을 알고 있다. application이 이 파일을 로드하는 경우 빈 HTML 파일을 로드한 후, react가 component에 작성해두었던 HTML을 밀어넣는 것이다. 

 

소스코드에는 존재하지 않지만 제대로 작동한다! 이를 virtual DOM(virtual Document Object Model)이라고 한다. 존재하지 않지만, react가 이를 만들어주는 것이다. React는 정말 신기한 언어다...!

 

여기까지 리액트를 시작하고, 빠르게 작동하는 원리를 알아보았다. 뒷부분부터는 직접적인 강의 자료실 개발과 관련이 있을 것 같아 여기에서 게시물을 마무리하고자 한다. 

 

추가적으로 ReactJS에 대해 궁금증이 생긴다면 꼭 노마드 코더의 ReactJS 2019 강의를 듣길 바란다. 정말 기본부터 차근차근 설명해준다 :)

+ Recent posts