Front-end(170)
-
[React] useReducer
useReducer 리액트의 컴포넌트에서 상태를 업데이트 하기 위해서는 useState를 사용해서 상태(state)를 관리했었습니다. 그런데 useState 말고도 상태를 관리할 수 있는 방법이 있는데 바로 useReducer 입니다. useState와 useReducer의 차이? useReducer를 사용하면 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수 있을 뿐만 아니라 심지어는 아예 다른 파일에 작성한 후 불러와서 사용할 수도 있습니다. import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const o..
2021.06.07 -
[백준] 1697. 숨바꼭질 (자바스크립트/js/javascript/node.js/BFS)
일단 BFS 알고리즘을 이용하기 전에 먼저 확인해주어야 할 조건이 있다. 1. 수빈과 동생의 위치가 다르면 1) 수빈의 위치 > 동생의 위치 answer = 수빈 - 동생 2) 큐에 수빈 - 1, 수빈 + 1, 2 * 수빈을 각각 넣고 BFS 실행 2. 수빈과 동생의 위치가 같으면 answer = 0 수빈과 동생의 위치가 같다면 답은 볼 것도 없이 0초 만에 동생을 찾을 수 있다. 수빈과 동생의 위치가 다르다면, 그리고 그 안에서 수빈의 위치가 동생의 위치보다 더 크다면 답은 수빈의 위치 - 동생의 위치가 된다. 왜냐하면 예를 들어 수빈의 위치가 9, 동생의 위치가 5라면 수빈의 위치가 줄어들어야 하므로 줄어들기 위해서는 수빈 - 1 만 계속 해주어야 하기 때문이다. 그래서 나머지 경우에만 BFS를 실행..
2021.06.07 -
[백준] 7569. 토마토 (자바스크립트/javascript/js/node.js/BFS/알고리즘)
지난번 풀었던 7576번 토마토 문제와 같은데 3차원 배열을 사용해서 풀어야 한다는 점이 추가된 문제이다. 처음에 이 문제를 봤을 때에는 지난번 토마토 문제도 어렵다고 느꼈었는데 이번엔 3차원이라니 정말 부담이 컸고 어려울 거라고 생각했다. 그러나 차근차근 생각해보니 인풋을 받아서 일단 3차원 배열에 토마토를 넣는 작업과, 상 하 좌 우 앞 뒤 인 경우를 따질 때 moveRow와 moveCol말고 moveBox도 하나 만들면 된다는 것만 생각해낸다면 해결할 수 있는 문제였다. 알고리즘 연습을 얼마 해보지 않았을 때에는 조금만 응용이 되어도 잘 풀지 못하는 것 같아서 과연 내가 실력이 늘고 있는건가 회의감도 들었었는데, 그래도 포기하지 않고 꾸준히 연습을 하니 실력이 상승되는 것 같다. 점점 백준에서 예전..
2021.06.04 -
[백준] 7576. 토마토 (자바스크립트/node.js/javascript/BFS)
위의 예제들은 쉽게 답이 나올 수 있다. 그러나 어려운 반례를 찾아보았는데 예제 입력 6 30 19 0 -1 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1 0 0 0 0 0 0 0 -1 -1 0 0 0 0 0 -1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1 0 0 0 0 0 -1 0 0 0 0 0 ..
2021.06.01 -
[백준] 2178. 미로 탐색 (자바스크립트/js/javascript/node.js/BFS/최단경로)
모든 노드를 탐색한다면 DFS와 BFS 모두 상관없겠지만 주어진 문제는 두 지점간의 최단경로를 탐색해야 하기 때문에 BFS를 사용하는 문제이다. BFS는 가중치가 없는 간선간의 최단거리를 보장할 수 있다. BFS가 최단거리를 보장하는 이유는 다음과 같다. BFS는 자신과 바로 연결되어 있는 노드들을 큐에 넣는다. 그리고 큐는 FIFO에 따라서 가장 먼저 들어온 것들을 먼저 처리한다. 이 두가지 특성이 결합되어 시작지점으로부터 간선의 수가 작은 곳부터 먼저 처리되게 된다. 따라서 간선 2개로 도달할 수 있는 노드가 간선 1개로 도달할 수 있는 노드보다 큐에 먼저 들어오는 일은 발생하지 않으므로 최단거리를 보장할 수 있다. 주어진 문제는 1,1에서 시작하여 N,M까지의 최소 칸 수를 구해야 하는데, 즉 (1..
2021.05.31 -
[백준] 2667. 단지번호붙이기 (자바스크립트/node.js/javascript/BFS/DFS/너비 우선 탐색/깊이 우선 탐색)
이 문제는 DFS와 BFS 방법 모두 풀 수 있다. 상하좌우로만 이동할 수 있다고 했으므로 상하좌우로 붙어있어야 연결되었다고 볼 수 있다. 일단 주어진 자료를 모두 배열에 담는다. 그리고 배열을 이중for문을 통해 행과 열을 돌면서 (0행0열부터 0행 1열, 0행 2열 ...) 집이 있다면(값이 1이라면) 그리고 방문한 적이 없다면 DFS 혹은 BFS를 실행하면 된다. 이 때, 탐색이 한 번 끝나게 되면 한 단지가 만들어졌다고 볼 수 있다. 왜냐하면 기본적인 DFS와 BFS도 연결되어있는 그래프를 가지고 순서대로 탐색하기 때문이다. 기본적인 DFS와 BFS에서는 다음 탐색 대상은 현재 탐색 대상인 정점의 인접한 정점을 탐색했었는데 위의 경우에서는 어떻게 다음 탐색 대상을 정할 수 있을까? 바로 moveR..
2021.05.29