// 아바타 모델 로드
  loader.load("/gltf/avatar/animation_100.glb", (gltf) => {
    avatarMesh = gltf.scene;
    avatarRef.current.add(avatarMesh);
    console.log("avatar position: " + avatarMesh.position.x, avatarMesh.position.y, avatarMesh.position.z);

    avatarMesh.traverse((object) => {
      if (object.isBone) {
        const helper = new THREE.SkeletonHelper(object);
        boneRef.current.add(helper);
      }
    });

    // 애니메이션 Mixer를 생성하고 애니메이션 클립을 추가합니다.
    mixer.current = new AnimationMixer(avatarMesh);
    clips = gltf.animations;
    if (clips && clips.length > 0) {
      clips.forEach((clip) => {
        mixer.current.clipAction(clip).play(); // 모든 애니메이션 클립을 재생합니다.
      });
    }

    loader.load("/gltf/avatar/top.glb", (gltf) => {
      const boneMesh = gltf.scene;
      //boneRef.current.add(boneMesh);
      console.log("top position: " + boneMesh.position.x, boneMesh.position.y, boneMesh.position.z);

      printBone(boneMesh);

      boneMesh.traverse((object) => {
        if (object.isBone) {
          const helper = new THREE.SkeletonHelper(object);
          boneRef.current.add(helper);
        }
      });

      // 뼈 구조 매핑 및 조정 (뼈 구조가 완전히 일치할 때 필요)
      // bones.forEach((bone) => {
      //   const matchingBone = avatarMesh.getObjectByName(bone.name);
      //   if (matchingBone) {
      //     bone.bind(matchingBone);
      //   }
      // });
    });
  });

  // Three.js 렌더링 루프에서 위치 업데이트 함수와 애니메이션 업데이트 함수 호출
  const animate = () => {
    if (mixer.current) {
      mixer.current.update(0.01); // AnimationMixer 업데이트
    }
    requestAnimationFrame(animate);
  };

  animate();

미완성.

• 리깅된 의상을 토끼에게 입혀야 한다.
  • 리깅된 의상의 bone을 아바타 bone과 엮는 방법 테스트 중

정답

#include <iostream>
#include <algorithm>
using namespace std;

int ans[9];

void back(int n, int m, int x){
    if(x == m+1){
        //종료 조건
        for(int i=1; i<=m; i++){
            cout << ans[i] << " ";
        }
        cout << "\n";
    }
    else{
        for(int i=1; i<=n; i++){
            ans[x] = i;
            back(n, m, x+1);
       }
    }
}

int main()
{
    int n, m;
    cin >> n >> m;

    back(n, m, 1);

    return 0;
}

난 정말... 백트래킹이 어렵다. 재귀도 어려움 ㅠㅠ 틀 짜는 것도 익숙하지 않고 한 번 들어갔다가 돌아나오면 머리가 꼬인다. 연습 부족이겠지 흑 좀 더 생각하는 연습을 해보자! 이번 문제는 정말 백트래킹의 기본적인 문제였다.

참고

https://cocoon1787.tistory.com/162

큐에 있는 모든 원소 중에서 가장 큰 값이 Top을 유지하도록, 우선순위가 가장 크도록 설계되어 있다 또한 우선순위 큐는 내부적으로 Heap이라는 자료구조를 사용하고 있다.

큐랑 사용법이 비슷하다. 자꾸 front랑 top이랑 헷갈리는데 얘는 덱이 아니니까 back이 없음! top이다.

문제

널리 잘 알려진 자료구조 중 최대 힙이 있다. 최대 힙을 이용하여 다음과 같은 연산을 지원하는 프로그램을 작성하시오.

배열에 자연수 x를 넣는다. 배열에서 가장 큰 값을 출력하고, 그 값을 배열에서 제거한다. 프로그램은 처음에 비어있는 배열에서 시작하게 된다.

-> 우선순위 큐를 사용하면 자연히 제일 큰 숫자가 top이 되도록 정렬되므로 우선순위 큐를 출력하면 된다.

정답

#include <iostream>
#include <queue>

using namespace std;

int main()
{
    ios_base::sync_with_stdio(false);
    cin.tie(NULL);
    cout.tie(NULL);

    int n, x;
    priority_queue<int> q;
    cin >> n;

    while(n--){
        cin >> x;
        if(x == 0){
            if(!q.empty()){
                cout << q.top() << "\n";
                q.pop();
            }
            else{
                cout << 0 << "\n";
            }
            continue;
        }
        //else
        q.push(x);
    }

    return 0;
}

4673 셀프 넘버

정답

#include <iostream>
#include <vector>

using namespace std;

const int MAX = 10001;

int plusK(int k){
    int result = 0;
    while(k > 0){
        result += k%10;
        k /= 10;
    }
    return result;
}

int main()
{
    vector<bool> v(MAX, true);

    for(int i=1; i<MAX; i++){
        if(v[i] == false)   continue;   //셀.넘 아니면 검사 x
        //else : i는 셀.넘     
        int j = i;
        while(j < MAX){
            j = j+plusK(j);
            v[j] = false;   
        }
    }

    for(int i=1; i<MAX; i++){
        if(v[i] == true)
            cout << i << "\n";
    }
    return 0;
}

생각의 흐름

10,000보다 작거나 같은 셀프 넘버를 한 줄에 하나씩 증가하는 순서로 출력한다. 100보다 작은 셀프 넘버는 총 13개가 있다. 1, 3, 5, 7, 9, 20, 31, 42, 53, 64, 75, 86, 97

입력이 없는 문제는 첨 봤다 ㄷㄷ 셀프 넘버. 소수 탐색할 때처럼 지워주면 되려나? 주어진 13개를 생성자로 해서 지워주면 될 것도 같다. 그럼 일단 d(n)에 대한 함수를 코드로 정의해볼까?

dn = n + n%10 + n/10%10... (자릿수 더하는 코드)

• 중간에 셀프넘버마저 false를 해버리는 바람에 좀 고민했다.
• 셀프 넘버가 아니면 pass 하는 부분을 추가하길 잘한 것 같다!

2309 일곱 난쟁이

정답

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

using namespace std;

int main()
{
    vector<int> height(9);
    int sum = 0;

    for(int i=0; i<9; i++){
        cin >> height[i];
        sum += height[i];
    }


    for(int i=0; i<9; i++){
        for(int j=i+1; j<9; j++){
            if(sum - height[i] - height[j] == 100){
                height.erase(height.begin()+i);
                height.erase(height.begin()+j-1);

                sort(height.begin(), height.end());
                for(auto i : height)
                    cout << i << "\n";

                return 0;
            }   
        }    
    }

}

생각의 흐름

완전 탐색! 9개의 수가 주어지고 합이 100이 되는 7개의 수를 찾으면 된다. 100 - i1, i2, .... i7 = 0이 되는 걸 찾으면 됨.

• 9개 중 7개를 골라서 합이 100이 되는지 검사하기. 근데 잘 생각해보면 7개를 고르는 것보다 2개를 제하는 게 더 빠를 것 같다. 9개 전체를 다 더함 = sum sum - for문으로 고른 2개 = 100?

기억할 것

나는 출력할 때 erase를 사용했는데

for (int k = 0; k < 9; k++) {
    if (k != i && k != j) {
        cout << v[k] << '\n';
    }
}

이게 더 간단 ㅠㅠ! 글구

• v.erase(v.begin()+i) 사용법 또 까먹었다..ㅎㅎ 기억하기!

23971 - ZOAC 4

정답

#include <iostream>

using namespace std;

int main()
{
    int h, w, n, m;
    cin >> h >> w >> n >> m;

    int col, row;

    if(h%(n+1) != 0)    col = (h/(n+1)) + 1;
    else    col = (h/(n+1));
    if((w%(m+1)) != 0)    row = (w/(m+1)) + 1;
    else    row = (w/(m+1));

    cout << col * row;

    return 0;
}

생각의 흐름

완전 탐색 돌리면 될 ..듯? 일단 2차 배열 만들고. n번째 칸 줄을 비우고. 예를 들어, 세로로 2칸을 띄워야 한다면 3, 4, 6, 7칸 비우는 식. 그리고 가로도 똑같이 해줌. 비우는 걸 false로 해서, true인 칸 개수를 출력하면 되지 않을까?

생각을 해보자. 20명에서 6명이 나온 원리. 세로 5줄, 가로 4줄. n줄씩 띄어 앉으니까 (h/1+n) + 1 = 앉을 수 있는 세로 줄. 가로줄도 마찬가지겠지? 단, 나누어 떨어지면 +1 안해도 됨 둘이 곱하면 되겠군...

알면 좋을 것

나누어 떨어지면 +1 하지 않는다는 걸 수학적으로 말하면 반올림;;;이다. ceil()을 알았으면 한 줄로 끝날 수도 있었던 문제!

cout << ceil(h / (n+1)) * ceil(w / (m+1));

2960 에라토스테네스의 체

정답

#include <iostream>
#include <vector>
using namespace std;

int main()
{
    int n, k;
    vector<bool> v;    
    cin >> n >> k;
    v.assign(n+1, true);
    int count = 0;
    int answer = 0;

    for(int i=2; i<=n; i++){
        if(!v[i]){  //false라면
            continue;
        }
        //else
        //erase
        for(int j=i; j<=n; j+=i){
            if(!v[j])    //false
                continue;
            //else
           v[j] = false;
           count++;
           if(count == k){
               cout << j;
               return 0;
           }

        }

    }
    return 0;
}

• 핵심은 for(int j=i; j<=n; j+=i) 요 부분이다.

생각의 흐름

알고리즘을 충실히 따르자.

1. 2부터 N까지 모든 정수를 적는다.
2. 아직 지우지 않은 수 중 가장 작은 수를 찾는다. 이것을 P라고 하고, 이 수는 소수이다.
3. P를 지우고, 아직 지우지 않은 P의 배수를 크기 순서대로 지운다.
4. 아직 모든 수를 지우지 않았다면, 다시 2번 단계로 간다.

vector<boo> v;를 이용해서. 7, 3이 주어지면 일단 v.assign(8, true); 그리고 v[2] = false로 시작해서 p의 배수를 false로 바꾼다. 계속 그렇게 진행함. true이면서 p의 배수인 것을 false. 이때 바꿀 때마다 count++ , count == 3이면 stop하고 해당 i를 출력한다.

첫번째 시도 -> 틀렸습니다.

#include <iostream>
#include <vector>
using namespace std;

int main()
{
    int n, k;
    vector<bool> v;    
    cin >> n >> k;
    v.assign(n+1, true);
    int count = 0;
    int answer = 0;

    while(count != k){
        //find P
        int p;
        for(int i=2; i<=v.size(); i++){
            if(v[i]){
                p = i;
                break;
            }    
        }
        //erase
        for(int i=1; i<=v.size(); i++){
            if(v[i*p]){
               v[i*p] = false;
               count++;
               if(count == k){
                   cout << i*p;
                   return 0;
               }
            }  
        }
    }

    return 0;
}

...? 뭐꼬.. 전혀 틀린 점을 못 짚어내겠다. 그래도 생각을 해보자. 내 조건들은 다 '해당하면' 인데, 이전 문제들에서 '해당하지 않으면'으로 설정하는 게 더 예외 없이 처리 될 확률이 높았으니까.

두 번째 시도 -> 틀렸습니다.

int main()
{
    int n, k;
    vector<bool> v;    
    cin >> n >> k;
    v.assign(n+1, true);
    int count = 0;
    int answer = 0;

    while(count != k){
        //find P
        int p;
        for(int i=2; i<=n; i++){
            if(!v[i]){  //false라면
                continue;
            }
            //else
            p = i;
            break;
        }
        //erase
        for(int i=1; i<=n; i++){
            if(!v[i*p])    //false
                continue;
            //else
            {
               v[i*p] = false;
               count++;
               if(count == k){
                   cout << i*p;
                   return 0;
               }
            }  
        }
    }

    return 0;
}

while(count != k) 여기서 문제가 생겼을 것 같다. 사실 밑에서 if문으로 count == k 검사를 하고 있기 때문에 조건의 의미가 없다고 생각하긴 했었다.

세 번째 시도 -> 해결!

for(int j=i; j<=n; j+=i){
            if(!v[j])    //false
                continue;
            //else
           v[j] = false;
           count++;
           if(count == k){
               cout << j;
               return 0;
           }

        }

ㅋㅋㅋㅋㅋㅋwhile을 바꿔도 해결 X 요 부분이 핵심이었다. 기존의 내 방식은 for(int i=1; i<=n; i++)이 부분에서 v의 선언 범위를 넘어갈 수도 있었다. 즉, p * i <= n 을 대비하지 못한 코드였다는 소리. n 까지만 검사하면 되니까 이 부분을 잘 고려했어야 함!

참고

참고한 건 없었다. 그냥.. 정답 한 번 봄ㅎ;

정답

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

using namespace std;

vector<int> calculate(queue<int> &q){
    vector<int> answer;
    int min = q.front();
    int ans = 1;
    q.pop();

    while(!q.empty()){  //2번째 값부터 비교
        if(q.front() <= min){   
            q.pop();
            ans++;
        }
        else{
            //지금까지 값 저장
            answer.push_back(ans);
            //새로 갱신
            min = q.front();
            q.pop();
            ans = 1;
        }
    }
    answer.push_back(ans);  
    return answer;
}

vector<int> solution(vector<int> progresses, vector<int> speeds) {
    queue<int> q;

    for(int i=0; i<progresses.size(); i++){
        int day = 1;
        while((100 - progresses[i])-day*speeds[i] > 0){
            day++;
        }
        q.push(day);        //완성된 일시를 큐에 추가
    }

    return calculate(q);
}

• 큐를 활용한 간단한 문제.

생각의 흐름

[93, 30, 55] [1, 30, 5] [2, 1] 100%-progresses 한 값을 보면 [7, 70, 45] 여기서 속도 * 일수 = 7일, 3일, 9일. 앞에 걸 배포할 때 뒤에 애들을 보고 앞에 거보다 적은 일수가 있다면 같이 pop()

스택과 큐.. 둘 중 무얼 써야할까? 선입선출이니까 큐. 넣는 값은 완성된 일시 min = 첫번째 기능의 완성된 일시

• q.front() <= min -> 같이 pop(), ans++
• q.front() > min -> min 갱신, pop(), 이전 ans를 vector에 추가, ans = 1; (초기화)

검증해보자. progresses = [95, 90, 99, 99, 80, 99] queue = [5, 10, 1, 1, 20, 1] min = 5, ans = 1;

10 > 5 이므로 v = [1], min = 10, ans=1 1 < 10 -> ans = 2 1 < 10 -> ans = 3 20 > 10 -> v = [1, 3], min = 20, ans=1 1 < 20 -> ans = 2 q.emtpy() 이므로 v = 1, 3, 2

가설 검증 완료!

1158 요세푸스 문제

정답

#include <iostream>
#include <queue>

using namespace std;

vector<int> calculate(queue<int> &q, int k){
    vector<int> ans;
    int count = 0;
    while(!q.empty()){
        int tmp = q.front();
        q.pop();
        if(++count != k){
            q.push(tmp);
        }   
        else{   //제거
            ans.push_back(tmp);
            count = 0;
        }
    }
    return ans;
}

int main()
{
    int n, k;
    cin >> n >> k;

    queue<int> q;

    for(int i=1; i<=n; i++){
        q.push(i);       
    }

    vector<int> ans = calculate(q, k);

    //출력
    cout << "<";
    for(int i=0; i<n-1; i++){
        cout << ans[i] << ", ";
    }
    cout << ans[n-1] << ">";

    return 0;
}

• queue를 이용하는 간단한 문제

생각의 흐름

사골 같은 문제... 근데 매번 풀때마다 고민하게 되는..

예를 들어 (7, 3)-요세푸스 순열은 <3, 6, 2, 7, 5, 1, 4>이다.

나 몇 년 전에는 이거 무슨 소리인지 몰라서 ㅇㅅㅇa.. 했는데 지금은 단번에 이해가 된다 휴 일단... 걸린 놈을 pop() 해야함. 그리고 남은 사람들에서 다시 제거할 사람을 축출 반복. vector[1 2 3 4 5 6 7] 에서 몇 번째 사람을 erase deque[1 2 3 4 5 6 7] 에서 앞에서 빼고 뒤에서 넣길 반복? 아니 이건 queue에서 해도 되잖아. queue 2개를 두고 옮기고, 빼고를 반복?

2번째가 제일 나아보인다. 근데 나 지금껏 디큐dequeue인줄 앎.. 덱이었네.

• 먼저 1~n까지 큐에 추가하기

• 큐에서 pop()하고 count++
  • count!=k라면 push()
  • else, 축출할 사람이니 answer vector에 추가
• 큐가 빌 때까지 반복

기억하면 좋을 것

//내 코드
    while(!q.empty()){
        int tmp = q.front();
        q.pop();
        if(++count != k){
            q.push(tmp);
        }   
        else{   //제거
            ans.push_back(tmp);
            count = 0;
        }
    }

//우수 코드
    while(!q.empty()) {
        for(int i = 0; i < k-1; i++) { // k-1번 pop & push
            q.push(q.front());
            q.pop();
        }

        // k번째 사람 pop 후 순열에 추가
        result.push_back(q.front());
        q.pop();
    }

나는 pop한 걸 저장하고, 그게 k번째인지 아닌지 매번 검사하는 방향을 취했는데 우수 코드는 애초부터 k-1번째까지 pop과 동시에 push하고, k번째라면 벡터에 추가했다. 매번 검사하는 게 아니니까 시간이 훨씬 줄어든다! 항상 느끼지만 코테 할때는 '매번'이냐, '필요할 때' 검사이냐 생각하는 게 중요한 것 같다.

문제

정답

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

using namespace std;

bool compare(pair<int, int> &p1, pair<int, int> &p2){
    return p1.first < p2.first;
}

int meeting(vector<pair<int, int>> &v){
    int ans = 1;    //서류 1위의 선발
    int min = v[0].second;  //서류 1위의 면접 결과
    for(int i=1; i<v.size(); i++){
        if(v[i].second < min)    //지원자의 면접 순위가 더 높다면
        {
            ans++;
            min = v[i].second;
        }
    }
    return ans;
}

int main()
{
    int t, n;

    cin >> t;

    while(t--){
        vector<pair<int, int>> v;
        int a, b;
        //input
        cin >> n;
        for(int i=0; i<n; i++){
            cin >> a >> b;
            v.push_back(make_pair(a, b));
        }
        //정렬
        sort(v.begin(), v.end(), compare);
        //면접 순위 비교
        cout << meeting(v) << "\n";
    }

    return 0;
}

• 무난했다. pair로 서류와 면접 순위를 묶는 게 중요한...?
• 혼자 힘으로 푼 문제라 각별하다!

생각의 흐름

언제나 최고만을 지향하는 굴지의 대기업 진영 주식회사가 신규 사원 채용을 실시한다. 인재 선발 시험은 1차 서류심사와 2차 면접시험으로 이루어진다.

전형 짧고 대규모 채용.. 진짜 부럽다...... 나도 누가 데려가주라 그러려면 코테 열심히 준비하자...!!!!

서류-면접 순서 순위 3 2 1 4 4 1 2 3 5 5

서류를 기준으로 정렬하면 1 4 2 3 3 2 4 1 5 5

일단 서류 1위는 무조건 선발. 1위와 2위를 비교했을 때 2위는 1위보다 면접이 높으니 선발. 3위는.. 2위보다 면접이 높으니 선발 4위는.. 면접 1등이니까 선발 5위는.. ... 탈락. 면접이 타인보다 높아야하는데 갱신된 최댓값(=1위)보다 낮다.

결론을 정리하자면,

• 서류 순위대로 정렬 후 면접 순서를 비교한다.

• 서류 1위의 면접 순위를 min로 설정 후, 다음 순위의 면접 순위가 min보다 작다면 선발. -> min 갱신
• min과 면접 순위를 비교하여 작다면 선발 및 갱신, 크다면 탈락.

검증해보자. 3 6 7 3 4 2 1 4 5 7 2 5 6 1 서류 순위대로 정렬 1 4 2 5 3 6 4 2 5 7 6 1 7 3

min = 4, 1위 선발 2위의 5 > 4이므로 선발 안함, min = 4 3위 : 6 > 4이므로 선발 안함, min = 4 4위 : 2 < 4이므로 선발, min = 2 5위 : 7 > 2이므로 선발 안함, min = 2 6위 : 1 < 2이므로 선발, min = 1 7위 : 3 > 1이므로 이므로 선발 안함, min = 1

선발된 사람은 3.

기억하면 좋을 것

• vector<pair ~~>의 정렬을 할 때, pair.first의 값으로 정렬을 할 거라면 default sort 만으로도 가능하다! (나처럼 compare을 정의할 필요가 없음)

  sort(candidates.begin(), candidates.end()); // 서류 심사 순위(first) 순서대로 정렬

정답

#include <iostream>
#include <map>
#include <string>
#include <vector>

using namespace std;

int main()
{
    // 입출력 속도 향상
    ios_base::sync_with_stdio(false);
    cin.tie(NULL);

    int n, m;   //포켓몬 개수, 문제 개수
    map<string, int> smap;
    map<int, string> imap;
    cin >> n >> m;

    for(int i=1; i<=n; i++){
        string name;
        cin >> name;

        smap[name] = i;
        imap[i] = name;
    }

    for(int i=0; i<m; i++){
        string t;
        cin >> t;
        if(isdigit(t[0]) != 0){    //number
            cout << imap[stoi(t)] << "\n";
        }
        else{   //string
            cout << smap[t] << "\n";
        }
    }

    return 0;
}

• map 2개를 이용
• isdigit()로 숫자인지 문자인지 파악

생각의 흐름

번호와 이름을 매칭해서 저장하면 될 거 같다. map 과 딕셔너리가 떠오르는데 둘의 차이점이 뭐지? (아래 정리함)

맵을 써도 될 듯!

..근데 입력값이 숫자인지 string인지 어떻게 알지? int로 받거나 auto로 받아서 해보려 했지만 실패.

아! 번호 자체도 string으로 하면 어떨까? map<string, string> m 이렇게!

첫 번째 시도 -> 컴파일 에러

#include <iostream>
#include <algorithm>
#include <map>

using namespace std;

//map -> key : value
//딕셔너리랑 차이점이 뭐지?

int main()
{
    int n, m;   //포켓몬 개수, 문제 개수
    map<string, string> map;
    cin >> n >> m;

    for(int i=1; i<=n; i++){
        string name;
        cin >> name;
        map[to_string(i)] = name;        //insert to map
    }

    for (int i=0; i<m; i++){
        string t;
        cin >> t;

        for(auto j=map.begin(); j!=map.end(); j++){
            if(map.find(t) == j-> first){
                cout << j->second;  
                continue;
            }    
        }
        for(auto j=map.begin(); j!=map.end(); j++){
            if(t == j->second){
                cout << j->first;  
                continue;
            }    
        }
    }

    return 0;
}

ㅋㅋ... map 조회하는 법 몰라서 삽질했다. 나의 멍청함에 cheers...~⭐

기억할 것

1. 맵 vs 딕셔너리

• 둘의 차이점이 뭐지?

  맵에서는 엔트리들이 유일한 키를 가져야 하는 반면, 딕셔너리에서는 여러 엔트리들이 같은 키를 가질 수 있다. 갖은 단어가 복수의 정의를 가질 수 있는 영어 사전과 같다고 볼 수 있다.

• 파이썬의 딕셔너리는 hash 구조이지만, c++의 맵은 트리 구조이다.

2. 맵 사용법

   • 중복된 key를 사용하여 입력하면 덮어씌어짐.
   • 추가, 삽입, 삭제 시 자동정렬

• 선언 : map<key 자료형, value 자료형> m;
• 추가 : map[키] = 값;
• 삭제 : m.erase(key);
• 조회 : m[키];
• 검색 : m.find(key);
  • iter = m.find(key); iter -> second; 이런 식으로 출력 가능

3. isdigit(char x) 문자가 숫자인지 판별하는 함수 (문자라면 0 반환)

반드시 char을 넣어야 한다! string 넣으면 안 됨!

참고

[c언어/c++] isdigit 함수(숫자를 판별하는 함수)

정답

• 핵심은 set과 역순 출력하는 방법 알아두기~

• rbegin(), rend() 면 역순이다.

#include <set>
#include <iostream>
#include <algorithm>

using namespace std;

//이름이 있다는 건 이미 enter했다는 것
//set 사용

int main()
{
    int n;
    cin >> n;

    set<string> s;    //자동 정렬, 자동 중복 제거

    for(int i=0; i<n; i++){
        string name, record;
        cin >> name >> record;
        if(record == "enter")   s.insert(name);
        else    s.erase(name);
    }

    for(auto i = s.rbegin(); i != s.rend(); i++){
        cout << *i << "\n";
    }

    return 0;
}

생각의 흐름

벡터를 하나 만들고. enter -> 추가 push_back leave -> 제거? 제거가 메인인 문제에서 과연 vector는 좋은 선택인가?

vector에서 원소 하나를 삭제하는 시간복잡도는 O(N)

pair<string, bool>을 사용해서 마지막에 true인 친구들만 sort해서 출력하는 방법. 찾아서 삭제하나... 찾아서 변경하나.... 얘도 시간 복잡도가 비슷할 것 같음

그럼 일단 pair로 가보자. 이게 더 깔끔해보임! => 시간 초과

그럼......... 이름이 이미 존재한다는 건 enter 했다는 거 아닌가? 있으면 remove, 없으면 추가?

위랑 다를 게 뭔데..........

정답을 봤다!

set을 이용하여 출퇴근 하는 사람들을 관리하는 게 핵심

첫번째 시도 -> 시간 초과

pair<이름, 출입기록> 넣고 마지막에 출입기록이 enter인 사람을 sort해서 출력했다.

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

using namespace std;
bool compare(string a, string b){
    return a > b;
}

int main()
{
    int n;
    vector<pair<string, bool>> v;
    vector<string> answer;

    cin >> n;

    for(int i=0; i<n; i++){
        string name, record;
        cin >> name >> record;
        if(record == "enter"){
            v.push_back(make_pair(name, true));
        }
        else{   //leave
            for(int j=0; j<v.size(); j++){
                if(v[j].first == name)  v[j].second = false;
            }
        }
    }

    for(int i=0; i<v.size(); i++){
        if(v[i].second){
            answer.push_back(v[i].first);
        }
    }

    sort(answer.begin(), answer.end(), compare);

    for(int i=0; i<answer.size(); i++){
        cout << answer[i] << "\n";
    }


    return 0;
}

두 번째 시도 -> 시간 초과

leave -> vector.erase 사용했다. 장렬하게 시간 초과.

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

using namespace std;
bool compare(pair<string, bool> a, pair<string, bool> b){
    return a.first > b.first;
}

int main()
{
    int n;
    vector<pair<string, bool>> v;
    vector<string> answer;

    cin >> n;

    for(int i=0; i<n; i++){
        string name, record;
        cin >> name >> record;
        if(record == "enter"){
            v.push_back(make_pair(name, true));
        }
        else{   //leave
            for(int j=0; j<v.size(); j++){
                if(v[j].first == name)  v.erase(v.begin()+j);
            }
        }
    }

    sort(v.begin(), v.end(), compare);

    for(int i=0; i<v.size(); i++){
        cout << v[i].first << "\n";
    }


    return 0;
}

3번째 시도 -> 틀렸습니다.

set을 사용했다.

#include <set>
#include <iostream>
#include <algorithm>

using namespace std;

//이름이 있다는 건 이미 enter했다는 것
//set 사용

int main()
{
    int n;
    cin >> n;

    set<string> s;    //자동 정렬, 자동 중복 제거

    for(int i=0; i<n; i++){
        string name, record;
        cin >> name >> record;
        if(record == "enter")   s.insert(name);
        else    s.erase(s.find(name));
    }

    for(auto i : s) cout << i << "\n";

    return 0;
}

역순 출력 안 한 거였음. 바보인가?

기억할 것

1. v.erase() v[5]를 지우고 싶다면 v.erase(v.begin() + 5); sort는 앞에 v. 이 안 붙지만 erase()는 붙는다. 그리고 iterator가 &로 들어가는 게 아니라 begin()에서 +i 들어감!
2. set

   1. 숫자든 문자든 중복을 없엔다.
   2. 삽입하는 순서에 상관없이 정렬되서 입력이 된다.

왜? 이진트리니깐,,

당장 기억해야할 사용법은 아래와 같다. (매우 주관적인 판단)

• set<자료형> 변수 : 기본적인 선언방법

• s.insert() : s에 값 삽입
• s.erase(값/주소값) : s에 저장된 요소 삭제. 주소값 말고 해당 값이 들어가도 됨!!
• s.swap() : s1과 s2를 서로 교환
• s.begin() : set의 시작이 되는 주소 값 반환
• s.end() : set의 마지막 부분에 대한 주소 값 반환(정확히는 마지막 뒤 공백구간)
• s.size() : s에 저장되어 있는 크기
• s.find(찾을 값) : 찾기 ex) s.find(1) -> 해당 자리 주소값 반환 -> s.erase(s.find(1)) 이런 식으로 사용 가능!

insert로 값 삽입하는 것 빼곤 vector랑 비슷함 set<pair<int, int>> 이렇게 사용 가능한 것도 기억해두자!

의외로 출력하는 데 애 먹음;ㅎ

// 출력
for(auto i : s){
    cout << i;
}
// 리버스 출력
for (auto iter = s.rbegin(); iter != s.rend(); iter++) {
    cout << *iter << '\n';
}

참고

C++ 벡터 특정 원소 지우는 방법 vector.erase(),remove() 등 Tips C++ set 사용법과 설명

정답

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

using namespace std;

//국어 내림차순. 같으면 아래로
//영어 오름차순. 같으면 아래로
//수학 내림차순. 같으면 아래로.
//이름 오름차순. (아스키 코드 사용)

vector<string> name;

bool compare(vector<int> &v1, vector<int> &v2){
    if(v1[1] == v2[1]){ 
        if(v1[2] == v2[2]){
            if(v1[3] == v2[3]){
                return name[v1[0]] < name[v2[0]];
            }
            return v1[3] > v2[3];
        }
        return v1[2] < v2[2];
    }
    return v1[1] > v2[1];
}


int main()
{
    int t;
    vector<vector<int>> score;

    cin >> t;

    for(int i=0; i<t; i++){
        string n;
        int a, b, c;
        cin >> n >> a >> b >> c;
        name.push_back(n);      //이름 저장
        score.push_back({i, a, b, c});  //
    }

    sort(score.begin(), score.end(), compare);
    for(int i=0; i<t; i++){
        cout << name[score[i][0]] << "\n";
    }

    return 0;
}

1차 코드

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

using namespace std;

//국어 내림차순. 같으면 아래로
//영어 오름차순. 같으면 아래로
//수학 내림차순. 같으면 아래로.
//이름 오름차순. (아스키 코드 사용)

bool compare(vector<int> &v1, vector<int> &v2){
    if(v1[1] == v2[1]){ 
        if(v1[2] == v2[2]){
            if(v1[3] == v2[3]){
                return v1[4] < v2[4];
            }
            return v1[3] > v2[3];
        }
        return v1[2] < v2[2];
    }
    return v1[1] > v2[1];
}


int main()
{
    int t;
    vector<string> name;
    vector<vector<int>> score;

    cin >> t;

    for(int i=0; i<t; i++){
        string n;
        int a, b, c;
        cin >> n >> a >> b >> c;
        name.push_back(n);      //이름 저장
        score.push_back({i, a, b, c});  //
    }

    sort(score.begin(), score.end(), compare);
    for(int i=0; i<t; i++){
        cout << name[score[i][0]] << "\n";
    }

    return 0;
}

크게 문제가 없어 보이는데 자꾸 Haebin과 Junkyu이 바뀌어서 나온다. Junkyu 50 60 100 Haebin 50 60 100 둘의 입력값은 위와 같기에 사전순 정렬에 문제가 있어 보였다. 하지만.....

return s1.name < s2.name; // (국어, 영어, 수학 점수가 같으면) 이름이 사전 순으로 증가하는 순서

찾다 못해 본 예시 답안도 나랑 똑같이 부등호를 넣었는데 뭐가 문제지?

해결

ㅋㅋ... 그냥 내가 바보였다. 구조체 쓰는 방법이 기억이 안 나서 (...) 이름과 성적을 서로 다른 벡터에 넣었는데 이름 벡터를 비교하지 않고 있지도 않은 값을 비교하고 있었으니 정렬이 안 될 수 밖에... 없는 값을 조회했는데 에러가 안 나고 00 으로 떠서 00 과 00 값을 비교하고 있었다.

return name[v1[0]] < name[v2[0]];

vector<string> name;을 전역으로 돌리고 이렇게 바꿔서 해결!

기억할 point

1. 2차원 벡터의 사용자 정의 sort 내가 쓴 벡터는 vector<vector<int>>

• bool compare()
• bool compare(vector<int> &v1, vector<int> &v2)
  • 내부의 벡터를 주소값으로 받아서 넣는다.
• sort(score.begin(), score.end(), compare);
  • compare() 아님! 괄호 빼고 쓰기.

2. 이름 오름차순. (아스키 코드 사용) 따로 처리해줄 필요 없다. -'A' 이런거 해야하나 했는데. 부등호로 충분히 처리할 수 있다.

3. 조건문에는 '해당하는 값'을 넣는 것보다 '예외일 때'를 조건으로 넣는 게 더 좋을 것 같다.

아래 참고. (by.튜터님들 감사합니다..)

// 비교 함수(bad)
bool cmp(const student& s1, const student& s2) {
    if (s1.kor == s2.kor) { // 국어 점수가 같으면
        if (s1.eng == s2.eng) { // 국어, 영어 점수가 같으면
            if (s1.math == s2.math) { // 국어, 영어, 수학 점수가 같으면 
                return s1.name < s2.name; // 이름이 사전 순으로 증가하는 순서
            }
            return s1.math > s2.math; // 수학 점수가 감소하는 순서
        }
        return s1.eng < s2.eng; // 영어 점수가 증가하는 순서
    }
    return s1.kor > s2.kor; // 국어 점수가 감소하는 순서
}

// 비교 함수(good)
bool cmpAdv(const student& s1, const student& s2) {
    if (s1.kor != s2.kor) {// 국어 점수가 감소하는 순서
        return s1.kor > s2.kor;
    }
    if (s1.eng != s2.eng) {// (국어 점수가 같으면) 영어 점수가 증가하는 순서
        return s1.eng < s2.eng;
    }
    if (s1.math != s2.math) {// (국어, 영어 점수가 같으면) 수학 점수가 감소하는 순서
        return s1.math > s2.math;
    }
    return s1.name < s2.name; // (국어, 영어, 수학 점수가 같으면) 이름이 사전 순으로 증가하는 순서
}

참고한 블로그

링크텍스트

#include <string>
#include <vector>

using namespace std;
int answer = 0;

void calculate(vector<int> numbers, int target, int sum, int idx){
    //end
    if( idx == numbers.size()){
        if(sum == target)
            answer++;  
        return;
    }

    //continue
    calculate(numbers, target, sum+numbers[idx], idx+1);
    calculate(numbers, target, sum-numbers[idx], idx+1);    
}

int solution(vector<int> numbers, int target) {
    calculate(numbers, target, 0, 0);
    return answer;
}

//재귀를 만들때, (하나씩 돌 정수들, 목표 타겟, 실행하고 싶은 거, 인덱스+1)로 구성함

문제

풀이

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

using namespace std;

string solution(string s) {
    string answer = "";
    vector<int> v;
    string tmp;

    for(int i=0; i<s.length(); i++){
        if(s[i] != ' '){
            tmp += s[i];        
        }
        else{
            v.push_back(stoi(tmp));
            tmp.clear();
        }
    }
    v.push_back(stoi(tmp));
    sort(v.begin(), v.end());

    answer = to_string(v.front()) + " " + to_string(v.back());
    return answer;
}

//s를 돌면서 i가 공백이 아니면 tmp에 저장 -> 벡터에 추가
//벡터 정렬 -> 첫째가 최소, 마지막이 최대

기억할 함수

• string to int : stoi()
• int to string : to_string()

오늘 진행할 최적화

[React] 'react-spring-bottom-sheet'과의 전쟁 (feat. Custom CSS) [끝난 줄 알았지? CSS 중첩 적용 문제 해결] 부분이다.

기존 코드

나는 바텀 시트를 만들기 위해 react-spring-bottom-sheet라는 라이브러리를 사용했다. 이를 커스텀하기 위해 custom CSS라는 자체 css 파일을 만들어서 적용했는데, 기본으로 주어지는 style.css를 복붙+수정한 파일이다. 그러나 react-spring-bottom-sheet를 이용한 바텀 시트가 2군데 이상 존재하자 각각에 적용하던 css 파일 2개가 중첩 적용을 일으켰다.

중첩 적용을 해결하기 위해 각각의 바텀 시트에 className을 부여하려고 했다. 그러나 문제는 react-spring-bottom-sheet가 portal 형태로 브라우저에 동적으로 생성된다는 것이었다. createPortal 관련 코드는 모두 라이브러리에 내장되어 있어서 내가 건드릴 수 있는 형태가 아니었다. 그래도 시도해봤지만 장렬히 실패.

<BottomSheet className="homeSheet"> </BottomSheet>

이런 식으로 컴포넌트를 렌더링하는 부분에 className을 적용하면 부모 div에만 적용이 됐다. 자식 div는 className을 이용한 css가 적용되지 않는다는 말씀! <reach-portal>은 자식이 아주 많기 때문에 css 적용이 안 되면 바텀 시트가 보이지 않았다.

부모 id를 찾아서 자식 div에 className을 적용하면 어떨까?

// setTimeout을 사용하여  portal이 생성된 후 일정 시간 후에 작업 실행
    const timeoutId = setTimeout(() => {
      const parentDiv = document.getElementById("parentDiv-home");
      if (parentDiv) {
        const childDivs = parentDiv.querySelectorAll("div");
        childDivs.forEach((childDiv) => {
          childDiv.classList.add("homeSheet");
        });
        return () => {
          childDivs.forEach((childDiv) => {
            childDiv.classList.remove("homeSheet");
          });
        };
      }
      const element = window.getComputedStyle(
        document.querySelector("--rsbs-overlay-h")
      );

      element.style.setProperty("--rsbs-overlay-h", "100px");
    }, 1);

    // 컴포넌트가 언마운트될 때 clearTimeout으로 타이머 해제
    return () => {
      clearTimeout(timeoutId);
    };
  }, []);

해당 코드를 작성했다. 오늘 리팩토링할 코드이기도 하다.

      const parentDiv = document.getElementById("parentDiv-home");
      if (parentDiv) {
        const childDivs = parentDiv.querySelectorAll("div");
        childDivs.forEach((childDiv) => {
          childDiv.classList.add("homeSheet");
        });

이 부분을 보면 parentDiv-home을 id로 가진 div(부모)를 찾아서 자식 div에 className homeSheet를 넣어주고 있다.

하지만 여기서 2번째 시련을 맞닥뜨린다.

컴포넌트 렌더링 순서 문제

내가 생각한 정상 작동 시나리오는 이랬다.

portal 생성 -> 부모 id 찾기 -> 자식 div에 className 적용 -> css 적용

그러나 실제 순서는 이랬다.

부모 id 찾기 -> 해당 id를 가진 div가 없습니다. -> ERROR!

portal 생성이 내 코드 실행보다 늦었다. 하지만 리액트에서 렌더링 순서를 제어하는 것은 해도 안 되고, 해서도 안 되는 짓이었다.

리액트에서 컴포넌트의 렌더링 순서는 일반적으로 React의 가상 DOM(Virtual DOM) 및 조화 업데이트(reconciliation) 알고리즘에 따라 자동으로 관리됩니다.

되지도 않았고... 건드리면 무슨 문제가 일어날 지 몰랐음. 우선 학회 마감 기한이 있어서, '정상 작동'에 초점을 맞추고 임시방편으로 setTimeout(1) 처리를 했다. className 적용 코드를 0.001초 대기를 걸어두고, 그 사이에 portal이 렌더링되면 그 이후에 부모 id를 찾아서 ~ 하는 식이다.

다행히 현장에서는 잘 돌아갔으나 이 코드로 출시를 할 순 없었다. 내가 생각한 문제는 아래와 같았다.

• 모든 환경에서 portal이 0.001초 안에 렌더링 된다는 보장이 없다.
• 비효율적이다. 분명 css 쪽을 건드리면 방법이 있을 것 같았다.

그래서 리팩토링을 진행했다! 학회 발표 이후 합류하신 추가 개발자 팀원이 코드 리뷰를 통해 아주 큰 도움을 주셨다.

수정 코드

없다! 통째로 삭제했기 때문에! css 쪽을 수정하니까 자식 div에 className을 적용하기 위해 짰던 코드가 필요 없어졌다! 너무 기쁘다,, 이 맛에 리팩토링 하는구나. (setTimeout이라는 청테이프로 우걱우걱 봉합해놓은 게 마음의 짐이었음)

나는 왜 그런 코드를 짰지?

목적을 다시 생각해봤다. portal 안에 있는 모든 div에 css를 적용하고 싶었기 때문이다. 모든 div! 이게 핵심이었다.

이전 css 코드는 이런 형식으로 아주 길게 생겼다. (대부분 defaultCss를 보존하고 필요한 부분만 찾아서 수정하는 식으로 커스텀했다) className으로 중첩적용을 방지했기 때문에 .homeSheet가 앞에 있는 걸 볼 수 있다. 수정한 지금은 이렇게 #parentDeiv-home div가 앞에 있는 것을 볼 수 있다.

뭐가 바뀌었다고?

• .homeSheet -> #parentDeiv-home div

css 선택자에 대한 개념이 부족하고, 뒤에 [data-rsbs-overlay]와 같은 친구들이 붙어 있어서 혼란한 마음에 그 당시에는 사용하지 못했던... ㅇㅏ주 쉬운 방법...... (변명입니다)

.className 과 #id div의 차이

.homeSheet 선택자와 #parentDiv-home div 선택자의 기능적 차이는 무엇일까?

• .homeSheet 선택자는 class가 "homeSheet"인 모든 요소를 선택한다.
• #parentDiv-home div 선택자는 id가 "parentDiv-home"인 요소 내에 있는 모든 div 요소를 선택한다.

내가 사용하는 bottomSheet 라이브러리는 (추가 코드 없이는) 부모 div에 id 혹은 className을 적용하는 게 한계였다. 따라서 id가 "parentDiv-home"인 요소 내에 있는 모든 div 요소를 선택하는 두 번째 방법이 정말 알맞았다.

<BottomSheet id="parentDiv-home"> </BottomSheet>

이렇게 하기만 하면 끝!

결론

부모 div를 찾아서 자식 div에 className을 적용하던 코드를 없애고 css 자체에서 해당 id를 가진 모든 div에 적용하는 식으로 바꿨다. css 자체에서 id 찾기 -> 이 id의 모든 하위 div에 css 적용을 해주니 당연히 내가 짠 기존 코드는 필요 없을 수 밖에. 더이상 portal 렌더링 순서를 신경쓸 필요도 없다!

css 기초를 좀 더 다지자. 기본 베이스와 기능을 알면 돌아갈 필요가 없다는 걸 절절하게 깨달은 날이었다.,,

    const [selectDeco, setSelectDeco] = useState(false);
    const handleClick = () => {
        setSelectDeco(true);
    }

    return (
        <div className={selectDeco ? "item_box_click" : "item_box"} onClick={() => handleClick()}>
            {content}
        </div>
    )

사실 저렇게 돌아갈 걸 알고 있었다. 그냥 css 적용 확인하려고 짜본거임..

그럼 수정해보자!

어떻게 하면 될까?

1. 버튼 개수만큼 인자를 가진 array 생성. bool값이 인자로 들어갈 것임.
2. bool = false로 초기화
3. 버튼 선택 시 해당 인자만 true로 바꾸기.
4. true인 버튼만 css 적용
5. 버튼을 클릭할 때마다 2~4번 반복

짜보자....... ..나 이거 이렇게 오래 걸릴 줄 몰랐다. 결국 해내긴 햇는데 뭐임? 왜냐면.. 내 js 구조가 복잡하기 때문이다. 나는 기능/박스 별로 js를 분리하는 걸 참 좋아하는데 (한 곳에 코드 몰려있는 거 안 좋아함) 덕분에....... 또다시 부모 <-> 자식을 참조해야하는 일이 생겼던 것이다.

문제 상황

나는 item.js와 itembox.js를 갖고 있다. Item.js에서 map으로 ItemBox를 반복문 생성해주는 구조임.

{ // 아이템 썸네일 박스
    imgArray.map(
        (imgSrc, index) => {
            return (<Itembox type={typeItemState_cloth}
                imgSrc={imgSrc}
                index={index}/>)
        }
    )
}

imgArray에는 서버에서 받아오는 이미지 url이 있다. (아직 서버 연결 안했다만.. 언제하지?)

itembox.js에서는 아래와 같은 코드를 return한다.

return (
    <div className={btnState ? "item_box_click" : "item_box"} onClick={() => props.handleClick(index)}>
        {content}
    </div>
)

..간단하죠?

문제는 여기서 발생한다. 나는 itembox에 모든 버튼의 상태값을 담은 array를 생성한 뒤, 이걸 검사하며 itembox의 클래스네임을 설정해줄 생각이었는데 itembox가 각각의 js로 생성되며 공통된 변수를 가질 수 없게 된 것이다!!!!!! 아놔......

해결 과정

첫 시도 (feat. 함수 return)

내 초반 생각은 이랬다.

1. 버튼의 상태를 담은 array(이하 selectDeco)는 item.js에 만들자.
2. item.js에 click() 함수를 두고, itemBox에서 버튼을 누르면 click()을 호출하자.
3. click()에서 selectDeco의 상태를 업데이트 해주자.
4. itemBox.js에 selectDeco의 상태를 return 하자.

=> 함수 return이 안 돼서 실패. 자식에서 부모의 함수를 호출하는 건 되는데 그 함수의 반환값을 다시 자식으로 받는 건 안 되더라...

하......................................... 공통 변수 두는 무슨 라이브러리 있는 거 같았는데 고작 이런 기능으로 그렇게까지(?) 하고 싶지 않았음.

2차 시도

4. useEffect를 써볼까? selectDeco가 변하면 < Itembox selectDeco = {selectDeco}/> 이렇게 이 값만 보내는거지!

실패함. 감지를 못 하던데? 디버거까지 써서 해봤는데 보내도 itemBox.js에서 변수가 변경되지 않았다. 분명 useEffect는 실행됐는데. 마찬가지로 itemBox.js에도 useEffect를 두고 해당 변수가 변했을 경우 console.log()를 찍어봐도 나오지 않았다. 그냥 해당 useEffect를 타지 않았다.

3차 시도 (해결)

그냥 통째로 컴포넌트를 재로드 하자!!! 아래는 부모. Item.js

//Item.js 부모 

const [selectDeco, setSelectDeco] = useState(false);
const handleClick = (idx) => {
    const newArr = Array(imgArray.length).fill(false);
    newArr[idx] = true;
    setSelectDeco(newArr);
}
const handleChangeContent = () => {
        <div className="itemBoxDiv">
            {
            // 아이템 썸네일 박스
            imgArray.map((imgSrc, index) => {
                return (
                    <Itembox type={typeItemState_face}
                        imgSrc={imgSrc}
                        index={index}
                        handleClick={handleClick}
                        selectDeco={selectDeco}/>
                )
            })
        } </div>
    );
    useEffect(() => {
        handleChangeContent();
    }, [selectDeco]);

selectDeco가 변할 때마다 useEffect로 컴포넌트 전체를 재로드했다. 재로드하면서 업데이트 한 selectDeco={selectDeco} 도 다시 보내줌.

아래는 자식. Itembox.js

useEffect(() => {
    if (selectDeco[index]) { // 해당 버튼이 클릭됐으면
        setBtnState(true);
    } else {
        setBtnState(false);
    }
}, [selectDeco]);
const [btnState, setBtnState] = useState(false);
return (<div className={
        btnState
            ? "item_box_click"
            : "item_box"
    }
    onClick={
        () => props.handleClick(index)
}> {content} </div>)

업데이트 한 selectDeco가 들어오면 useEffect에서 감지한다. 그래서 selectDeco의 index에 해당하는 인자가 true면 버튼 css를 적용하고, 아니면 해제한다.

결과

후......... 이거 진짜 쌩뇌로 짰다. 재랜더링하는 게 메모리 많이 잡아먹을까봐 걱정해서 최대한 피한건데 결국 재랜더링하는 게 좀 마음에 걸리기도 하고.. 근데 저 쪼끔 재랜더링한다고 뭐 얼마나 과부화 되겟어? 저게 제일 효율적일수도; (쓰레기 마인드)

2달 해외살이 후 토요일에 귀국해서 월화수목 밤을 샜더니 정신이... 어우 어지러워 그래도 뿌듯..하다......웅....

대망의 아바타 옷 꾸미기 기능!

    const groupRef = useRef(props);

  //deco 추가하는 함수
  const putDecoGltf = (gltfPath, setScale, positionX, positionY, positionZ, type) => {
    const gltfLoader = new GLTFLoader();
    gltfLoader.load(gltfPath, (childGltf) => {
    const model = childGltf.scene;
    model.scale.set(setScale, setScale, setScale); // 모델 크기 조정
    model.position.set(positionX, positionY, positionZ); // 모델 위치 설정
    groupRef.current.add(model);
    }); 
  } 

    gltfLoader.load(mouthGltfPaht, (childGltf) => {
      const model = childGltf.scene;
      model.scale.set(1.1, 1.1, 1.1); // 자식 모델 크기 조정
      model.position.set(0,-0.04,0); // 자식 모델 위치 설정
      groupRef.current.add(model);
    });

나는 이렇게 생긴 gltfLoader.load 함수를 만들어서 gltf 파일을 불러와 Canvas에 넣어주고 있다. 나는 아바타 꾸미기 기능을 만들고 있기 때문에 불러와야 하는 gltf 파일이 많았다,, 그래서 함수로 만들어서 로드하고 있었음. 그리고 아바타 사이즈 조절을 하는데 아바타+옷+악세서리 등이 함께 사이즈 조절, 위치 조절이 되어야 하기 때문에 groupRef로 그룹에 추가해서 묶어주는데,, 이건 나중에 포스팅 하겠음. 오늘 목적은 그게 아님.

오늘의 목적

슈 옷입히기 게임이라도 해보신 분들은 알겠지만 '상의'를 누르면 상의가 바뀌고 '하의'를 누르면 하의가 바뀌여야 한다.

그래, 바뀌어야 한다.

gltfLoader.load로 불러오기만 하면 불러온 옷 위에 옷이 덧씌워지고, 덧씌워지고, 덧씌워지고... 처음에는 아무것도 입히지 않은 아바타를 매번 다시 불러오면 되지 않나? 했는데 그럼 로딩도 길어지고, 무엇보다 load도 똑같이 다시 불러와지기 때문에 소용이 없었다. 이 길로 계속 밀고 나가기엔 '상의' 파트에서는 상의만 사라지고 새로운 상의가 올라와야 하는데 저렇게 하면 다른 하의, 악세서리 등도 사라질 것 같아서. 역시 특정 gltf를 없애는 코드를 작성해야겠다고 생각했다.

내가 할 일

그룹에 추가하는 형식으로 gltf를 load하기 때문에 그룹에서 빼면 된다고 생각했다. 내가 할일은 다음과 같다.

1. GLTF remove & 그룹에서 빼기
2. 눈, 입, 상의, 하의 등 특정 type을 가진 GLTF 조회하기 (이것만 삭제해야 하므로)

생각보다 적지?~??!?

1. groupRef.current.remove(model);

groupRef.current.remove(model);

위 코드는 model 객체를 groupRef에서 제거한다. 일단 내가 삭제할 객체들은 groupRef의 자식들이므로 자식 객체를 지우면 되지 않나...

groupRef.current.remove(groupRef.current.children[0]);

ㅋㅋ ㅋ 이러면 올라간 gltf가 랜덤으로 지워짐 이때 glft에 type을 넣어야겠다고 생각했다. 나는 삭제할 model 객체가 딱 정해진 게 아니었다. 매 순간마다 그저 '상의' 혹은 '하의' type을 가진 객체를 조회해서 해당 객체만 삭제해야 했다.

2. 특정 GLTF 'type' 조회 후 삭제

  //deco 초기화하는 함수
  const removeDecoGltf = (type) => {
    const childToRemove = groupRef.current.children.find(
      (child) => child.userData.type === type
    );

    if (childToRemove) {
      groupRef.current.remove(childToRemove);
  }

childToRemove 변수에 userData.type가 type과 일치하는 gltf를 저장한다. 이 gltf는 groupRef 그룹에 속해 있는 자식들 중 하나임 그리고 childToRemove가 존재하면 지운다!

3. 그럼 GLTF가 type을 가지고 있어야겠지?

type과 일치하는지 살펴보려면 gltf가 type을 가지고 있어야 한다. (당연함) 참고로 type은 var itemTypeArray = ['eye', 'mouth', '상의', '하의', '한벌의상']; 이거임. 이 배열을 돌면서 일치하는지 검사한다... 내가 클릭한 의상의 type이 뭔지는 서버에서 넘어온다.

프론트에서 할일은,

• 모델을 로드할 때 해당 모델에 type값 넣어주기

• 동일한 type 값을 가진 모델이 Canvas에 올라가 있는지

• 올라가 있다면 지우고 현재 모델을 올려주기

  • 없다면 현재 모델을 올리기

  //deco 추가하는 함수
  const putDecoGltf = (gltfPath, setScale, positionX, positionY, positionZ, type) => {
    const gltfLoader = new GLTFLoader();
    gltfLoader.load(gltfPath, (childGltf) => {
    const model = childGltf.scene;
    model.scale.set(setScale, setScale, setScale); // 모델 크기 조정
    model.position.set(positionX, positionY, positionZ); // 모델 위치 설정

    model.userData.type = type; // 원하는 타입 값을 설정

    itemTypeArray.map((n)=>{
      if(type === n){
        //기존에 있고, 현재 모델의 타입과 일치하는 타입의 모델 지우기
        removeDecoGltf(type)
      }
    })

    groupRef.current.add(model);
    }); 
  } 

userData 객체에 type 속성을 추가한 후, 원하는 타입 값을 설정했다.

userData는 Three.js의 3D 객체에 사용자 정의 데이터를 저장할 수 있는 속성입니다. 이를 이용하여 특정 자식 객체의 속성을 저장하고 사용할 수 있습니다. 여기서 중요한 점은, Three.js의 userData 속성은 단순한 JavaScript 객체이므로, 어떤 속성이든 저장할 수 있습니다. 따라서 type 외에도 다양한 사용자 정의 데이터를 userData에 저장할 수 있습니다.

라고 한다.

잘 돌아가서 만족스럽군.........

기타

• ItemBox.js에서 썸네일 box 클릭 -> AvatarDeco.js의 isClick 함수 호출 이런 식으로 진행했다.

문제는 itemBox와 AvatarDeco 사이에 Item.js가 하나 더 있음. 원래는 자식 -> 부모 간의 데이터 전송으로 하려고 했지만 자식 부모간은 괜찮지만 손자와 할아버지? 이건 복잡한 문제가 생기는 거거든요. 그냥 외부함수 호출 (할아버지 외부인 취급) 로 갔더니 간편하고 좋았다. (정말?)

사실 힘들엇음... 주요한 방법은 아래와 같다.

• 전역 함수가 호출되었을 때 해당 호출을 리액트 컴포넌트 내부에서 감지
• Custom Event 사용:

export function isClick(index, itemtype){ //의상 index 받아오기
  type = itemtype;
  addGltfPath = gltfArray[index];
  const event = new CustomEvent('globalFunctionCalled');
  window.dispatchEvent(event);
}

const GltfGroupModels = (props) => {
  useEffect(() => {
    function handleGlobalFunctionCall() {
      console.log(type);
      // 원하는 작업 수행
      //removeDecoGltf();
      putDecoGltf(addGltfPath, 1.1, 0,-0.04,0, type);
      console.log(addGltfPath);
    }

    window.addEventListener('globalFunctionCalled', handleGlobalFunctionCall);

    return () => {
      window.removeEventListener('globalFunctionCalled', handleGlobalFunctionCall);
    };
  }, []);
}

급한 사람을 위해 남겨놓고, 나는 다음에 작성해야지... 마감이 얼마 안 남앗다고.... 다시 기능개발로 돌아가야겟다,,

코드

import styles from '../css/header/headerLook.module.css';
import React, { useState } from "react";

const HeaderLook = () => {
    // Tab Menu 중 현재 어떤 Tab이 선택되어 있는지 확인하기 위한 currentTab 상태와 currentTab을 갱신하는 함수가 존재해야 하고, 초기값은 0.
  const [currentTab, clickTab] = useState("인기");  //default tap type : 인기 게시물

  const selectMenuHandler = (type) => {
    // 해당 함수가 실행되면 현재 선택된 Tab Menu 가 갱신.
    //console.log(type);
    clickTab(type);
  };

    return (
        <header className={styles.header}>
            {/* 선택 시 className에 {styles.focused} 추가 */}
            <div className={`${styles.tab} ${currentTab === "인기" ? styles.focused : ''}`}
                 onClick={() => selectMenuHandler("인기")}>
                <img src={currentTab === "인기" ? process.env.PUBLIC_URL + '/img/looking/popular.png' : process.env.PUBLIC_URL + '/img/looking/popular_non.png'}></img>
                <text>인기</text>
            </div>
            {/* 선택 시 className에 {styles.focused} 추가 */}
            <div className={`${styles.tab} ${currentTab === "최신" ? styles.focused : ''}`}
                 onClick={() => selectMenuHandler("최신")}>
                <img src={currentTab === "최신" ? process.env.PUBLIC_URL + '/img/looking/new.png' : process.env.PUBLIC_URL + '/img/looking/new_non.png'}></img>
                <text>최신</text>
            </div>
        </header>
    )
}

export default HeaderLook

시원하게 전체 공개~ 이 코드는 내가 직접 짰다,,ㄷㄷ... 사실 좀 참고 했는데 결국에는 내가 거의 다 뜯어고쳣음ㅎㅅㅎ

const [currentTab, clickTab] = useState("인기");

디폴트는 인기 게시글로 했다. currentTab 에 인기, 최신 2가지 string이 저장될 것이다.

onClick={() => selectMenuHandler("최신")}>

• 이걸 누르면 const selectMenuHandler = (type) => { // 해당 함수가 실행되면 현재 선택된 Tab Menu 가 갱신. //console.log(type); clickTab(type); };

  아래 함수가 호출되면서 clickTab값을 갱신한다.

<div className={`${styles.tab} ${currentTab === "최신" ? styles.focused : ''}`}

나는 css-module을 사용하기 때문에 className이 2개 이상이려면 저렇게 넣어줘야 한다. tab은 기본으로 갖고 있고, 내가 tab을 선택하면 .focused 클래스네임이 추가된다.

그거에 따라 css를 조절해주면 끝!

뿌듯...... 나는 Look.js에서 post를 불러오고 있기 때문에 Look.js에 type값을 전송해주려고 한다. 이건 다음에,, 총총

준비 과정

모델 불러오는 등은 다 되어 있을 거라고 생각하고 생략하겠다. 사실 밑에 전체 코드에 일부분 포함되어 있음ㅋ

import { TextureLoader } from 'three';

우선 필요한 걸 import를 해준다.

Texture 적용 시작

gltfLoader.load(AvatarGltfPath, (parentGltf) => {
      const avatarModel = parentGltf.scene;
      avatarModel.scale.set(1.1, 1.1, 1.1);
      avatarModel.position.set(0,-0.04,0);

      // 텍스처 적용
      avatarModel.material.map = texture;

      groupRef.current.add(avatarModel); 
    });  

처음에는 이렇게 했는데 실패햇다.

Cannot set properties of undefined (setting 'map')

ㅎㅅㅎ.........

오류 해결

나와라 챗 지피티.

      //텍스쳐 적용
      avatarModel.traverse((child) => {
        if (child.isMesh) {
          child.material.map = texture;
        }
      });

이걸로 코드를 바꾸니까 texture가 그냥 날아가서 투명한 모델이 보이더라.

진짜!!!!!!! 챗지피티 리액트에 도움이 하나도 안됨!!!!!!

https://discourse.threejs.org/t/child-material-mesh-sets-the-texture-for-the-entire-obj-why/21421

대신 나의 영원한 동반자 구글의 바다에서 이 친구가 도움을 줬다...

child.material = child.material.clone(); //추가!!

    gltfLoader.load(AvatarGltfPath, (parentGltf) => {
      const avatarModel = parentGltf.scene;
      avatarModel.scale.set(1.1, 1.1, 1.1); // 부모 모델 크기 조정
      avatarModel.position.set(0,-0.04,0);

      //텍스쳐 적용
      avatarModel.traverse((child) => {
        if (child.isMesh) {
          child.material = child.material.clone();
          child.material.map = texture;
        }
      });

      groupRef.current.add(avatarModel); 
    });  

그래서 이렇게 사용하면 된다. 한번 클론해준 다음에 적용하기!

근데 또 웃긴건 저렇게 해서 한 번 성공시켜 놓으니까 클론 부분 지워도 잘 돌아감;; 뭐임;;

아무튼 귀여운 우드 토끼.....

+) 사실 뺨에 치크 넣으려고 저런건데 UV 편 치크는 왜인지 적용이 안돼서(텍스쳐 문제인듯) 짱 멋진 디자이너님들이 그냥 GLTF 모델에 텍스쳐 입혀서 새로 주셧다 ㄱ껄껄.. 그래서 내가 한 일은 쓸모가 없어졋지만,, 우드 토끼,, 귀여웟으니까 됏다 흥