데이터를 받기 전에 렌더링을 한 후 데이터를 받고 리렌더링을 해서 화면 깜빡임이 발생했다. SPA의 장점 중 하나는 어플리케이션을 쓰는 것 처럼 움직임이 부드럽다는 것인데 그 장점을 활용할 수 없는 문제가 있었다. 처음에 방법을 바로 생각해내지 못해서 created에 await을 사용하는 등 여러 시도를 해 보았지만 잘 되지 않았었다. 가장 간단한 방법은 v-if였다. {{data.context}} 데이터가 없으면 렌더링을 하지 않고 데이터가 있으면 렌더링을 한다.
문제 문제 링크 설명 BFS로 풀었다. 공간 절약을 위해 visited 배열을 따로 만들지 않았다. 시작 좌표의 값을 2로 둔다. 다음 칸을 탐색할 때 이전 칸의 값에 1을 더한 값을 저장한다. 도착 지점의 값에 1을 빼준 값이 답이다. while문이 끝날 때 까지 return되지 않았으면 도착할 수 없는 경우이므로, -1을 return한다. 아래는 bfs를 돌렸을 때 maps 배열의 예시이다. [ [ 2, 0, 10, 11, 12 ], [ 3, 0, 9, 0, 11 ], [ 4, 0, 8, 9, 10 ], [ 5, 6, 7, 0, 11 ], [ 0, 0, 0, 0, 12 ] ] 코드 function solution(maps) { let n = maps.length; let m = maps[0].leng..
문제 문제 링크 설명 구현 방법은 다양할 수 있다. 시간복잡도를 고려해야 통과할 수 있다. right - left + 1만큼만 반복문을 돌릴 수 있는 방법을 생각해보자. 틀린 코드 1. 처음부터 끝까지 2차원 배열을 생성하고 2. 1차원 배열로 변환한 후 3. left부터 right까지 slice한다. 하지만 n이 10^7까지 될 수 있어서 역시 이 방법으로는 통과할 수 없었다. function solution(n, left, right) { let answer = []; let arr = []; for(let i = 1; i
문제 문제 링크 설명 문제에서 "구명보트는 작아서 한 번에 최대 2명씩 밖에 탈 수 없다" 라는 조건을 늦게 발견해서 오래걸렸다. people 배열을 정렬한 후, 양쪽 끝을 더해준다. limit를 초과하면 left++만 하고, limit를 초과하지 않으면 left++과 right--를 해준다. 코드 function solution(people, limit) { let answer = 0; let left = 0; let right = people.length - 1; people.sort((a, b) => b - a); while (left
언젠가 React같은 큰 프로젝트에 기여를 해보고 싶다. React 작동 방식 공부도 할 겸 소스코드를 구경해보기로 했다. 💡오픈소스 이해하는 꿀팁 테스트코드를 먼저 보세요! 테스트코드를 먼저 보면 코드를 이해하는데 도움이 된다고 한다. 역시, 어렵다. 하지만, 한가지는 알겠다. 아래의 코드를 보자. ⌨️코드 원본 코드 링크 it('renders an empty fragment', () => { const Div = () => ; const EmptyFragment = () => ; const NonEmptyFragment = () => ( ); ReactDOM.render(, container); expect(container.firstChild).toBe(null); ReactDOM.render(, ..
문제 문제 링크 설명 cache hit일때, 삽입정렬을 응용해서 풀었다. 코드 function solution(cacheSize, cities) { const CACHE_HIT_TIME = 1; const CACHE_MISS_TIME = 5; let cache = Array.from({ length: cacheSize }); let total = 0; for (let city of cities) { city = city.toLowerCase(); let idx = cache.indexOf(city); if (idx !== -1) { // cache hit for (j = idx - 1; j > -1; j--) { cache[j + 1] = cache[j]; } cache[0] = city; total +..
✅공통점 자바스크립트에서 findIndex()와 indexOf()는 둘 다 배열(Array)에서 특정 값을 찾는 메서드이다. 하지만 둘 사이에는 몇 가지 중요한 차이점이 있다. ❌차이점 비교 방식의 차이 findIndex(): 배열의 각 요소에 대해 콜백 함수를 실행하며, 콜백 함수의 반환값이 true인 첫 번째 요소의 인덱스를 반환한다. 즉, 콜백 함수에 사용자 정의의 비교 로직을 적용할 수 있다. indexOf(): 주어진 값과 배열의 요소를 엄격한(===) 비교를 통해 찾는다. 값의 타입과 값이 모두 일치하는 요소를 찾아 인덱스를 반환한다. 사용 가능한 환경의 차이 findIndex(): ECMAScript 2015(ES6)에서 도입된 메서드로, 브라우저 및 일부 환경에서 지원하지 않을 수 있다. ..
문제 문제 링크 설명 원래는 힙 2개를 사용해서 푸는 문제이다. 하지만 프로그래머스에서는 배열 1개로 풀어도 통과된다 다음에는 힙을 직접 구현해서 풀어보고싶다. 코드 function solution(operations) { let queue = []; for(let operation of operations){ if (operation ==='D 1'){ let max = Math.max(...queue); let deleted = false; let newQueue = []; for(let q of queue){ if(q===max){ if(!deleted){ deleted = true; } }else{ newQueue.push(q); } } queue = newQueue; } else if(opera..
