반응형

2024/06/17 4

새로고침 없이 찜 상태 즉시 반영하기 (react-query 활용)

## 내가 원하는 것.  사용자가 저 하트를 누르면 새로고침하지 않아도 즉시, 화면에 빨갛게 ~~ 또 다시 하트를 누르면 하얗게 ~~ 만드는 코드를 작성해보자.  ## react-query 활용하는 이유 useState나 redux-toolkit을 사용하여 상태를 관리할 경우, 그 상태는 클라이언트 측에서 로컬 또는 전역적으로 유지되며, 백엔드 DB 데이터와 직접적으로 연동되지 않는다.  즉,  찜 상태가 클라이언트 애플리케이션 내부에서만 유지되며, 백엔드 DB 데이터와는 분리된 상태라는 뜻 ~~ 로컬 상태(useState)는 개별 컴포넌트에 종속되며, 일시적이고 컴포넌트 단위로 유지. 전역 상태(redux-toolkit)는 클라이언트 애플리케이션 전체에서 공유되지만, 백엔드 데이터와의 동기화는 수동으로..

프로그래머스: 외벽 점검 - javascript(깔쌈한 구현 문제, 순열 활용)

문제 출처 https://school.programmers.co.kr/learn/courses/30/lessons/60062 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 풀이 힌트 정말 깔~쌈한 문제라고 생각한다. 순열 구하는 함수를 안다면 바로 코드 작성하고, 구현을 잘 ~ 하면 된다.  시계방향이냐, 반시계 방향이냐? 를 고민하지 않게 만드는 건 - 일렬로 배열을 더 길게 늘려주는 것이다. => 뭐 예를 들어서 n이 12다? 그럼 0은 12라는 또 다른 숫자이기도 하다.- 1은 13이라는 숫자이기도 하다. - 2는 14라는 숫자이기도 하다. 즉, ..

js 순열과 조합 구하는 식 정리

문제를 풀 때 활용해야 할 경우가 많다. 그냥 암기하자. 순열: 순서를 고려해서 요소 선택 - 예를 들어, [1, 2, 3]의 순열은 [1, 2, 3], [1, 3, 2], [2, 1, 3], [2, 3, 1], [3, 1, 2], [3, 2, 1]와 같이 6가지 const getPermutation = (arr, n) => { if (n === 1) return arr.map(v => [v]); const result = []; arr.forEach((fixed, idx, origin) => { const rest = [...origin.slice(0, idx), ...origin.slice(idx + 1)]; const perms = get..

프로그래머스: 표현 가능한 이진트리 - javascript(이진트리, 포화이진트리)

문제 출처 https://school.programmers.co.kr/learn/courses/30/lessons/150367 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 풀이 힌트 이 문제는 주어진 숫자를 이진수로 변환하고, 이를 포화 이진 트리 형태로 만들 수 있는지를 확인하는 문제다.  - 각 숫자를 이진수로 변환한 후, 필요한 더미 노드를 추가하여 포화 이진 트리 형태로 만든다. - 트리의 중간 노드를 기준으로 왼쪽과 오른쪽 서브트리를 재귀적으로 검사하여 유효한 트리 구조인지 확인한다. - 더미 노드가 실제 노드를 자식으로 가질 수 없기 때문에..

반응형