폰켓몬

📣 풀이

• 시도한 풀이

    function solution(nums) {
        const onlyNums = new Set(nums);
        const choice = nums.length / 2;
  
        if (choice >= onlyNums.size) return onlyNums.size;
        else return choice;
    }

💫코드 리뷰 & 반성

[어려웠던 점]
문제를 푸는 아이디어를 캐치하는 게 가장 어려운 거 같다.

[새롭게 알게된 점]
Set은 length가 아닌 size를 써야한다!

아니면 스프레드 연산자를 써서 […new Set(nums)] 배열로 바꿔주면 length를 쓸 수 있다.

책에서는 Math.min()를 사용하셨던데 그것도 좋은 거 같고
아니면 삼항 연산자도 깔끔하게 return 할 수 있는 방법인 거 같다!

참고

코딩 테스트 합격자 되기 자바스크립트 - 이선협, 박경록 저

책에 있는데 간단하게 유니온-파인드 알고리즘을 구현해보는 것!

📣 풀이

• 시도한 풀이

    function find(parents, x) {
        if (parents[x] === x) {
            return x;
        }
  
        parents[x] = find(parents, parents[x]);
        return parents[x];
    }
  
    function union(parents, x, y) {
        const root1 = find(parents, x);
        const root2 = find(parents, y);
  
        parents[root2] = root1;
    }
  
    function solution(k, operations) {
        const parents = Array.from({ length: k }, (_, k) => i);
        let n = k;
  
        for (const op of operations) {
            if (op[0] === 'u') {
                union(parents, op[1], op[2]);
            }
            else if (op[0] === 'f') {
                find(parents, op[1]);
            }
  
            n = new Set(Array.from({ length: k }, (_, i) => find(parents, i))).size;
        }
  
        return n;
    }

💫코드 리뷰 & 반성

[어려웠던 점]
유니온-파인드 알고리즘에 대해 처음 공부해서 그런지 코드를 떠올리는 게 쉽지 않았다.
그래도 공부해보니 걱정한 거보다는 어렵지 않은 거 같다!

[새롭게 알게된 점]
파인드는 재귀 사용해주고 유니온은 각 집합의 루트 노트 찾아서 하나의 루트 노드로 합쳐주기.

Set은 중복이 허용되지 않는 자료구조이기에 find를 사용해서 노드마다(인덱스를 활용)
루트 노드 찾아준 다음 개수는 size로 구해주기.

참고

코딩 테스트 합격자 되기 자바스크립트 - 이선협, 박경록 저

다단계 칫솔판매

📣 풀이

• 시도한 풀이

  function solution(enroll, referral, seller, amount) {
      let result = {};
      let parent = {};
  
      for (let i = 0; i < enroll.length; i++) {
          parent[enroll[i]] = referral[i];
      }
  
      for (let name of enroll) {
          result[name] = 0;
      }
  
      for (let j = 0; j < seller.length; j++) {
          let money = amount[j] * 100;
          let curName = seller[j];
  
          while(curName !== "-" && money > 0) {
              result[curName] += money - Math.floor(money / 10);
              curName = parent[curName];
              money = Math.floor(money / 10);
          }
      }
  
      return enroll.map(name => result[name]);
  }

💫코드 리뷰 & 반성

[어려웠던 점]
결국에는 “-”가 나올 때까지 거슬러 가야 하는 부분이 어려웠다. while 쓰기.

[새롭게 알게된 점]
1. Math.floor() - 소수점 있으면 버림

2. return enroll.map(name => result[name]);
마지막에 map 써서 배열로 변한.

Array.prototype.map()은 배열의 각 요소를 주어진 함수로 변환한 결과를 모아서
새 배열을 만듬.

map은 enroll 배열의 각 요소(name)를 하나씩 꺼낸 후 result[name] 값을 꺼냄.
그 값들을 새로운 배열에 넣음.

3. Array.from()과 new Array().fill()
전자는 인덱스를 이용하여 초기화 시켜야할 때 / 배열의 요소를 객체나 배열로 초기화 시켜야할 때.
후자는 기본 자료형으로 초기화할 때.

4. 꼭 {}를 써야하나? []를 쓰면 안 되나?
써도 된다!

(1) {}를 사용했을 때

(2) []를 사용했을 때

데이터의 양이 늘어날 수록 성능 차이가 유의미해지는 걸 볼 수 있다.
배열에 문자열 키를 쓰게 되면 일반 객체처럼 취급되면서 희소 배열 처리가 되어 느려진다고 한다.

참고

코딩 테스트 합격자 되기 자바스크립트 - 이선협, 박경록 저 new Array().fill()과 Array.from()의 차이

예상 대진표

📣 풀이

• 시도한 풀이

    function solution(n,a,b) {
      let count = 0; 
  
      while (a !== b) {
          count++;
          a = Math.ceil(a / 2);
          b = Math.ceil(b / 2);
      }
  
      return count;
  }

💫코드 리뷰 & 반성

[어려웠던 점]
Math.ceil()이 올림함수라는 걸 기억하자.
(정확히는 소수점이 존재할 때 항상 올림)

[새롭게 알게된 점]
==, != / ===, !==의 차이는 형 변환(type coercion) 여부로
전자는 값만 비교하고 타입은 JS가 자동으로 형 변환해서 비교
후자는 값과 타입까지 일치하는지 비교

실무에서는 예상치 못한 형 변환으로 인해 버그가 생길 수 있어서 후자를 추천한다고 한다.

참고

코딩 테스트 합격자 되기 자바스크립트 - 이선협, 박경록 저

오픈채팅방

📣 풀이

• 시도한 풀이

  function solution(record) {
      let obj = {};
      let answer = [];
  
      for (let i = 0; i < record.length; i++) {
          let str = record[i].split(" ");
          if (str[0] === "Enter" || str[0] === "Change") {
              obj[str[1]] = str[2];
          }
      }
  
      // hashtable 마지막에만 돌면서 작성해주면 됨.
      for (let i = 0; i < record.length; i++) {
          let str = record[i].split(" ");
          if (str[0] === "Enter") {
              answer.push(obj[str[1]]+"님이 들어왔습니다.");
          } else if (str[0] === "Leave") {
              answer.push(obj[str[1]]+"님이 나갔습니다.");
          }
      }
      return answer;
  }

💫코드 리뷰 & 반성

[어려웠던 점]
obj 하나만 있으면 두려울 게 없다.
마지막에 해시테이블 확인하는 거만 잘 알고 있으면 된다.

[새롭게 알게된 점]
내 코드가 책과 (거의) 똑같았다. 굿.

참고

코딩 테스트 합격자 되기 자바스크립트 - 이선협, 박경록 저

할인 행사

📣 풀이

• 시도한 풀이 10일씩 끊어서 확인하기

  function solution(want, number, discount) {
      let answer = 0;
      let obj = {};
      let obj2 = {};
      let count = 0;
  
      for (let i = 0; i < want.length; i++) {
          obj[want[i]] = number[i];
      }
  
      for (let i = 0; i < discount.length - 9; i++) {
          obj2 = {};
          count = 0;
          for (let j = 0; j < 10; j++) {
              if (obj2[discount[i + j]]) {
                  obj2[discount[i + j]] += 1;
              } else {
                  obj2[discount[i + j]] = 1;
              }
          }
  
          for (let k = 0; k < want.length; k++) {
              if(obj[want[k]] === obj2[want[k]]) count++;
          }
          if (count === want.length) answer++;
      }
  
      return answer;
  }

💫코드 리뷰 & 반성

[어려웠던 점]
아이디어는 나쁘지 않았는데 이게 10일까지 & discount가 
최대 10만이라 O(N*M) 떠도 최대 100만이라 시간 초과 안 뜬 거지
더 컸으면 시간 초과임.

[새롭게 알게된 점]
내 코드와 책 코드를 비교해봤을 때
일일이 count를 세는 대신, 두 객체를 직접 비교하는 함수를 사용하는 것이 더 효율적

참고

코딩 테스트 합격자 되기 자바스크립트 - 이선협, 박경록 저

기능 개발

📣 풀이

• 시도한 풀이

```jsx
  class Node {
  constructor(data) {
      this.data = data;
      this.next = null;
  }

}

class Queue { constructor() { this.head = null; this.tail = null; this.size = 0; }

  push(data) {
      const newNode = new Node(data);

      if (!this.head) {
          this.head = newNode;
          this.tail = newNode;
      }
      else {
          this.tail.next = newNode;
          this.tail = newNode;
      }
      this.size++;
  }

  pop() {
      if (!this.head) return null;

      const removeNode = this.head;
      this.head = this.head.next;

      if (!this.head) this.tail = null;

      this.size--;

      return removeNode.data;
  }

  isEmpty() {
      return this.size === 0;
  }

}

function solution(progresses, speeds) { let queue = new Queue(); let answer = [];

  for (let i = 0; i < progresses.length; i++) {
      let days = Math.ceil((100 - progresses[i]) / speeds[i]);
      queue.push(days);
  }

  while (queue.size > 0) {
      let count = 1;
      let popDays = queue.pop();

      while (queue.size > 0 && popDays >= queue.head.data) {
          queue.pop();
          count++;
      }

      answer.push(count);
  }

  return answer;

} ```

💫코드 리뷰 & 반성

[어려웠던 점]
큐로 풀어야 하는 문제인 만큼 큐를 사용하기 위해 노력했다.
맨 처음에는 날짜로 접근해야 하는 아이디어가 안 떠올라서 고생했고
그 다음에는 직접  큐를 구현할 때 주의해야 할 것들 때문에 고생했다.
(아래에 적겠음)

[새롭게 알게된 점]
size === 0도 넣어줘야 하고 newNode 위치나 pop() 등등
length 대신 size라는 것도.
queue.size > 0 && popDays >= queue.head.data
// size가 0보다 큰지 먼저 체크해야 하는 것도.

~큐로 풀었을 때~

~그 전에 배열로 풀었을 때~

아이디어는 비슷한데 shift()로 푼 게 빠르다니 뭔가 자존심이 상함ㅋㅋ
하지만 입력이 아주 커진다면 연결 리스트가 훨씬 빠를 것이다.
100개 정도면 배열로 가는 것도 나쁘지 않겠다.

~책에 있는 코드~
while을 안 쓰고 for문으로 한 번에 쭉 가니까 시간 복잡도 O(N)으로 예쁘게 나옴.

참고

코딩 테스트 합격자 되기 자바스크립트 - 이선협, 박경록 저

카드 뭉치

📣 풀이

• 시도한 풀이

```jsx
  function solution(cards1, cards2, goal) {

    for (let i = 0; i < goal.length; i++) {
      if (goal[i] === cards1[0]) {
        cards1.shift();
        continue;
      }
      else if (goal[i] === cards2[0]) {
        cards2.shift();
        continue;
      }
      else return "No";
    }

    return "Yes";
  }
```

💫코드 리뷰 & 반성

[어려웠던 점]
큐를 써야하는 건 알겠는데 이걸 투 포인터로 접근해야 하나
괜히 어렵게 빙빙 돌았다가 휴식 한 번 취하고 오니 뚝딱 풀림.

[새롭게 알게된 점]
데이터가 엄청 많으면 책처럼 큐 구현해서 해야 시간 복잡도가 좋을 거 같다.

참고

코딩 테스트 합격자 되기 자바스크립트 - 이선협, 박경록 저

크레인 인형뽑기 게임

📣 풀이

• 시도한 풀이

```jsx
function solution(board, moves) {
    let answer = 0;
    let stack = [];

    for (let i = 0; i < moves.length; i++) {
        let doll = 0;
        let idx = moves[i] - 1;
        for (let j = 0; j < board.length; j++) {
            if (board[j][idx] === 0) continue;
            doll = board[j][idx];
            if (stack.length === 0) stack.push(doll);
            else {
                let dollInStack = stack.pop();
                if (doll === dollInStack) answer += 2;
                else {
                    stack.push(dollInStack);
                    stack.push(doll);
                }
            }
            board[j][idx] = 0;
            break;
        }
    }

    return answer;
}
```

💫코드 리뷰 & 반성

[어려웠던 점]
처음에 배열 위치를 거꾸로 봤음.
다행히 문제 이해하고 나서는 금방 풀었는데
따로 행렬을 거꾸로 (가로, 세로) 바꾸진 않았고.
그냥 for 문이랑 if 문으로 해결했는데 뭔가 지저분한 느낌.

[새롭게 알게된 점]
책에서 코드를 봤는데 일단 board도 스택으로 관리하고
이거는 나도 깜빡한 건데 굳이 pop을 한 다음에 비교 안 해도 됨.
그냥 맨 뒤에 꺼 체크하면 되는 거다.
책에서는 2차원 배열 board를 진짜 인형뽑기처럼 변형해버림.

참고

코딩 테스트 합격자 되기 자바스크립트 - 이선협, 박경록 저

괄호 회전하기

📣 풀이

• 시도한 풀이

```jsx

function solution(s) { let answer = 0;

  for (let i = 0; i < s.length; i++) {
      const stack = [];
      let _s = s.slice();
      // _s는 x 개수만큼 index 접근한 다음 뒤에 push.
      for (let j = 0; j < i; j++) {
          _s += s[j];
      }
      for (let k = i; k < _s.length; k++) {
          if (_s[k] === "(" || _s[k] === "[" || _s[k] === "{") {
              stack.push(_s[k]);
          }
          else {
              let value = stack.pop();
              // 괄호 짝이 맞으면 아무것도 하지 않음
              if (!((_s[k] === ")" && value === "(") ||
                    (_s[k] === "]" && value === "[") ||
                    (_s[k] === "}" && value === "{"))) {
                  stack.push(value);  // 짝이 맞지 않으면 다시 스택에 넣기
              }
          }
      }
      if (stack.length === 0) answer++;
  }

  return answer;

} ```

💫코드 리뷰 & 반성

[어려웠던 점]
괄호끼리 짝 맞춰야하니까 스택 써야하는 건 당연하고
`회전` 을 어떻게 시킬지가 포인트였는데
맨 앞에꺼를 뽑고 다시 붙이는 건 너무 시간도 공간도 오바라 어떻게 할까 고민하다가
x 만큼 뒤에다가 붙이고(이러면은 접근&push 둘 다 O(1))
괄호 읽어내는 걸 index를 그만큼 뒤로 밀면 되겠다 <- 아이디어가 떠올랐다.

마지막에 stack이 비어있으면 answer++

[새롭게 알게된 점]
책 코드가 훨씬 빠르다.
회전을 그냥 index 더한 다음에 길이로 나눠서 나머지로 처리한 게 킥인 거 같다.

참고

코딩 테스트 합격자 되기 자바스크립트 - 이선협, 박경록 저

방문 길이

📣 풀이

• 시도한 풀이

```jsx
function solution(dirs) {
    let map = [...new Array(11)].fill('').map(() => new Array(11).fill(''));
    let answer = 0;

    // 시작 위치는 [5][5]. 
    const current = [5, 5];

    for (let i = 0; i < dirs.length; i++) {
        // 범위 넘어가면 무시
        if (dirs[i] === 'U' && current[1] === 10) continue;
        else if (dirs[i] === 'D' && current[1] === 0) continue;
        else if (dirs[i] === 'L' && current[0] === 0) continue;
        else if (dirs[i] === 'R' && current[0] === 10) continue;
        // 이동 후 중복체크
        else {
            if (dirs[i] === 'U') {
                if (-1 === map[current[0]][current[1]].indexOf('U') 
                    && -1 === map[current[0]][current[1] + 1].indexOf('D')) {
                    answer++;
                }
                map[current[0]][current[1]] += ('U');
                current[1]++;
            }
            else if (dirs[i] === 'D') {
                if (-1 === map[current[0]][current[1]].indexOf('D')
                   && -1 === map[current[0]][current[1] - 1].indexOf('U')) {
                    answer++;
                }
                map[current[0]][current[1]] += ('D');
                current[1]--;
            }
            else if (dirs[i] === 'L') {
                if (-1 === map[current[0]][current[1]].indexOf('L')
                   && -1 === map[current[0] - 1][current[1]].indexOf('R')) {
                    answer++;
                }
                map[current[0]][current[1]] += 'L';
                current[0]--;
            }
            else { // dirs[i] === 'R'
                if (-1 === map[current[0]][current[1]].indexOf('R')
                   && -1 === map[current[0] + 1][current[1]].indexOf('L')) {
                    answer++;
                }
                map[current[0]][current[1]] += 'R';
                current[0]++;
            }
        }
    }

    return answer;
}
```

💫코드 리뷰 & 반성

[어려웠던 점]
중복 체크하기

[새롭게 알게된 점]
중복 체크할 때 문자열도 배열처럼 index로 접근 가능하니까 하면서 접근했는데

배열에서만 findIndex()와 find()를 쓸 수 있고
문자열에서는 indexOf()를 써야 한다.

참고

코딩 테스트 합격자 되기 자바스크립트 - 이선협, 박경록 저

모의고사

📣 풀이

• 시도한 풀이

```jsx
function solution(answers) {
    let answer = [];
    let max = 0;
    let score = [0, 0, 0];

    for (let i = 0; i < answers.length; i++) {
        if ((i % 5 !== 4) && (answers[i] === (i + 1) % 5)) {
            score[0] += 1;
        }
        if (i % 5 === 4 && answers[i] === 5) {
            score[0] += 1;
        }
        if (answers[i] === 2 && i % 2 === 0) {
            score[1] += 1;
        }
        if (answers[i] === 1 && i % 8 === 1) {
            score[1] += 1;
        }
        if (answers[i] === 3 && i % 8 === 3) {
            score[1] += 1;
        }
        if (answers[i] === 4 && i % 8 === 5) {
            score[1] += 1;
        }
        if (answers[i] === 5 && i % 8 === 7) {
            score[1] += 1;
        }
        if (answers[i] === 3 && ((i % 10 === 0) || (i % 10 === 1))) {
            score[2] += 1;
        }
        if (answers[i] === 1 && ((i % 10 === 2) || (i % 10 === 3))) {
            score[2] += 1;
        }
        if (answers[i] === 2 && ((i % 10 === 4) || (i % 10 === 5))) {
            score[2] += 1;
        }
        if (answers[i] === 4 && ((i % 10 === 6) || (i % 10 === 7))) {
            score[2] += 1;
        }
        if (answers[i] === 5 && ((i % 10 === 8) || (i % 10 === 9))) {
            score[2] += 1;
        }
    }

    max = Math.max(...score);

    for (let j = 0; j < score.length; j++) {
        if (score[j] === max) answer.push(j + 1);
    }

    return answer;
}
```

💫코드 리뷰 & 반성

[어려웠던 점]
완전 탐색이다보니 경우 찾아서 넣어줘야 했었다.
사실 제일 좋은 건 entries()를 사용하는 것.

Math.max()에 배열을 넣을 때는 Spread 연산자 써야하는 거 깜빡했었다.

[새롭게 알게된 점]
배열의 entries() 메서드는 배열 내 데이터를 인덱스와 값으로 묶어서
순회할 수 잇는 Iterator 객체를 반환한다.

JavaScript의 array.entries() 메소드는 배열의 각 인덱스와 값으로 구성된 
키-값 쌍을 포함하는 새로운 Array Iterator 객체를 반환합니다.


ES6에서 Spread 연산자를 통해 Iterator 객체를 분리해낼 수 있다.

참고

코딩 테스트 합격자 되기 자바스크립트 - 이선협, 박경록 저

<img> 태그에 src를 설정해주는 방법에는 여러 가지가 있다. public 안에 이미지를 넣고 import를 해주는 방법도 있고, public 안에 이미지를 넣고 src에 경로를 넣는 방법도 있다. 또, src 안에 이미지를 넣고 src=require('경로').default를 해주는 방법이 있다.

문제 발생

src에 경로를 정상적으로 입력했다고 생각했는데 계속 엑박으로 나온다.

해결 방법

src 내에 경로를 적을 때 public이 포함되어있다면 public를 적지 않는다.

물론, import 시에는 적어주어야 한다. next/image를 사용하는 것도 좋다.

public를 적지 않아야하는 것을 몰라서 시간을 엄청 허비했다.

https://nextjs.org/docs/basic-features/static-file-serving Next.js는 이미지를 찾을 때 public를 root directory로 두기에 '/'로 취급한다고 이해하면 될 거 같다.

Error: Run autofix to sort these imports!

이 두 글을 참고해서 해결했다! VSCode로 React 프로젝트를 하는 분들에게 유용할 거 같다!

https://github.com/lydell/eslint-plugin-simple-import-sort

https://engineering.udacity.com/sorting-imports-on-save-in-react-projects-with-eslint-6fd419b994c3

eslint error 중에 Expected property shorthand.를 발견했다.

이 error는 ES6 문법에서 기인하는데 ES6에서는 key, value가 일치하면 key만 적는 문법이 존재한다. 그래서

{
abc: abc
}

대신

{
abc
}

이런 형식으로 적어주면 된다.

yarn run dev에서 확인 후 build해서 확인하려고 했는데 eslint Error들이 막 뜨면서 이렇게 문구가 떴다. Could not find a valid build in the '.next' directory! Try building your app with 'next build' before starting the server.

원인 : Eslint 에러들이 해결되지 않으면서 안되는 거였다.

이걸 알아차리게 된 것은 https://worker-k.tistory.com/entry/%EC%97%84%EA%B2%A9%ED%95%9C-eslint-ignore-%ED%95%98%EB%8A%94-%EC%97%AC%EB%9F%AC%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95-eslintignore

이 포스트 덕분이였다.

.eslintignore 파일 생성 후 *를 넣어주니 정상적으로 build가 되었다.

MySQL Workbench cannot connect to database in Ubuntu 20.04

이 에러가 발생해서 해결 방법을 찾아봤다.

https://stackoverflow.com/questions/7864276/cannot-connect-to-database-server-mysql-workbench

하지만 해결되지 않았다!

해결 방법

sudo snap connect mysql-workbench-community:password-manager-service :password-manager-service

출처 : https://stackoverflow.com/questions/72236885/mysql-workbench-cannot-connect-to-database-in-ubuntu-20-04

+ MySQL, MySQL Workbench 설치 및 사용법

https://dearmycode.tistory.com/15 https://linuxhint.com/installing_mysql_workbench_ubuntu/

develop branch에 코드를 아무리 올려도 언어가 뜨지 않았다..!

해결 방법

https://doing7.tistory.com/54

동아리 부원 모집 활성화 / 비활성화를 toggle button을 통해서 편하게 조정할 수 있도록 만들고 싶었다.

우선 동아리 모집이 활성화 되어있는 상태를 받아와서 true / false에 따라 다른 값을 렌더링 시켜야 한다.

그래서 if 문을 통해 해당 상태 데이터가 !undefined 임을 확인하고 그 안에서 이런 식으로 만들어 주었다.

그런데

Uncaught Error: Rendered more hooks than during the previous render.

에러가 떴다.

그래서 if 문 바깥에

const [RecruitIsOpen, setRecruitIsOpen] = useState(true);

를 선언해주고

const RecruitState~ 위에 setRecruitIsOpen(data1.opened)를 적어주었다.

그랬더니

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

에러가 떴다.

해결 시도

구글링 해보니 가장 유명한 해결방법은 https://stackoverflow.com/questions/55265604/uncaught-invariant-violation-too-many-re-renders-react-limits-the-number-of-re

화살표 함수를 이용하라는 것이었다. (비단 stackoverflow에만 이런 답변이 있지 않았다.)

하지만 난 이미 화살표 함수를 쓰고 있다고 생각하는데 어떻게 해야하나라는 생각이 들었다.

RecruitState 내부 Button 태그에서 onClick하지 말고 RecruitState 자체에 onClick을 줘봤지만 여전히 같은 에러가 발생했다.

<RecruitState onClick={() => {setRecruitIsOpen((e) => !e)}}/>

통째로 if 문 밖으로 빼도 같은 에러가 발생했다.

일단은 return 부분은 삼항 연산자로 넣어주었다. 화살표 함수를 쓰라는 것의 의미를 알게 되었는데 setState를 onClick일 때만 바뀌게 하라는 것이다. 하지만 난 초기값을 넣어주어야 하는데...

초기값은

const [RecruitIsOpen, setRecruitIsOpen] = useState(data1.opened);

이렇게 넣었는데 처음 몇 번은 잘 작동하더니

Uncaught Error: Rendered more hooks than during the previous render.

이 에러가 발생했다...

난 useState의 초기값에 data1.opened의 값을 넣고 싶은데 그걸 특정한 action(ex: onClick()을 통한 화살표 함수 이용) 없이는 계속 에러를 뿜을 것이 분명했다.

data1.opened의 값을 && 같은 것을 이용해서 특정 컴포넌트를 보이게 할까 생각도 했지만 곰곰히 생각해보면 안 될 것이 분명했다.

해결방법

4시간 정도 고민하니 새벽 2시가 넘어 일단 자야겠다고 생각해서 누웠는데 바로 해결 방법이 떠올랐다.

그냥 data1.opened의 값에 따라 useState의 초기값이 true인 것과 false 인 거 2개를 만들어서 넣어주면 되는 거였다.

느낀 점

쉽게 해결할 수 있는 것을 빙 돌아온 느낌이지만 덕분에 react-hook (useState, useEffect)에 대한 공부를 할 수 있는 시간이 되었다.

공식 문서도 읽어보고! https://reactjs.org/docs/hooks-rules.html

useState는 비동기적으로 작동하기 때문에 setState()의 값이 즉시 업데이트가 되지 않을 수 있다.

항상 input 태그를 써온 것 같이

이런 식으로 작성해줬는데 input 필드에 hover 되면 cursor만 text로 바뀌고 focus도 입력도 되지 않는 상황이 발생했다.

꼭 해결을 해야하는 상황이었기 때문에 열심히 구글링을 했다.

시도해본 방법

1. Z-index 변경. div와 input의 position을 relative로 돌리고 Z-index를 바꿔서 input을 위로 올리라는 내용이었는데 실패했다.

2. 그 외에는 대부분 내가 위에 작성한 코드대로 입력해보라는 내용들뿐이었다.

해결

원인 파악을 위해 다른 페이지에서 잘 작동했던 동일한 형태의 코드를 가져와봤다. 작동이 안되길래 혹시 몰라서 ScrollContainer 위쪽으로 코드를 넣어줬더니 정상적으로 작동했다.

구글링을 통해

https://github.com/Norserium/react-indiana-drag-scroll/issues?q=is%3Aissue+is%3Aclosed

해당 문서를 발견할 수 있었고

ScrollContainer 태그에 ignoreElements="input"를 넣어주니 정상적으로 작동했다.

느낀 점

1. 원래 잘 쓰고 있던 코드가 안된다면 사용한 라이브러리를 의심해보자.
2. 늘 공식 문서, 개발자가 배포한 github를 애용하자.
3. 오랫동안 붙잡고 있어도 해결이 안된다면 쉬었다가 돌아오자. 실제로 붙잡고 있던 2시간 동안 해결하지 못했으나 식사를 마치고 다시 보니 바로 해결되었다.