Custom Hook 만들기 컴포넌트를 만들다 보면 반복되는 로직이 발생합니다. 예를 들면 인풋 값을 바꾸어주는 로직의 경우, 항상 event.target에서 name과 value를 받아와서 그 값을 변경해준다는 로직이 같습니다. 이렇게 반복되는 로직은 기존의 Hook들을 응용해서 커스텀 Hook을 만들 수 있습니다. 인풋 상태를 관리하는 커스텀 Hook 만들어보기 import React, { useCallback, useState } from "react"; const useInputs = (initialForm) => { const [form, setForm] = useState(initialForm); const onChange = useCallback((event) => { const { name..

useReducer 리액트의 컴포넌트에서 상태를 업데이트 하기 위해서는 useState를 사용해서 상태(state)를 관리했었습니다. 그런데 useState 말고도 상태를 관리할 수 있는 방법이 있는데 바로 useReducer 입니다. useState와 useReducer의 차이? useReducer를 사용하면 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수 있을 뿐만 아니라 심지어는 아예 다른 파일에 작성한 후 불러와서 사용할 수도 있습니다. import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const o..

일단 BFS 알고리즘을 이용하기 전에 먼저 확인해주어야 할 조건이 있다. 1. 수빈과 동생의 위치가 다르면 1) 수빈의 위치 > 동생의 위치 answer = 수빈 - 동생 2) 큐에 수빈 - 1, 수빈 + 1, 2 * 수빈을 각각 넣고 BFS 실행 2. 수빈과 동생의 위치가 같으면 answer = 0 수빈과 동생의 위치가 같다면 답은 볼 것도 없이 0초 만에 동생을 찾을 수 있다. 수빈과 동생의 위치가 다르다면, 그리고 그 안에서 수빈의 위치가 동생의 위치보다 더 크다면 답은 수빈의 위치 - 동생의 위치가 된다. 왜냐하면 예를 들어 수빈의 위치가 9, 동생의 위치가 5라면 수빈의 위치가 줄어들어야 하므로 줄어들기 위해서는 수빈 - 1 만 계속 해주어야 하기 때문이다. 그래서 나머지 경우에만 BFS를 실행..

지난번 풀었던 7576번 토마토 문제와 같은데 3차원 배열을 사용해서 풀어야 한다는 점이 추가된 문제이다. 처음에 이 문제를 봤을 때에는 지난번 토마토 문제도 어렵다고 느꼈었는데 이번엔 3차원이라니 정말 부담이 컸고 어려울 거라고 생각했다. 그러나 차근차근 생각해보니 인풋을 받아서 일단 3차원 배열에 토마토를 넣는 작업과, 상 하 좌 우 앞 뒤 인 경우를 따질 때 moveRow와 moveCol말고 moveBox도 하나 만들면 된다는 것만 생각해낸다면 해결할 수 있는 문제였다. 알고리즘 연습을 얼마 해보지 않았을 때에는 조금만 응용이 되어도 잘 풀지 못하는 것 같아서 과연 내가 실력이 늘고 있는건가 회의감도 들었었는데, 그래도 포기하지 않고 꾸준히 연습을 하니 실력이 상승되는 것 같다. 점점 백준에서 예전..

Access to XMLHttpRequest at '주소A' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 리액트로 api를 받아와서 프로젝트를 하던 중 위와 같은 오류가 나타났고, 이를 검색해보니 CORS 문제라고 한다. CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유라는 기능으로, 실행 중인 웹 어플리케이션이 다른 출처의 리소스에 접..

위의 예제들은 쉽게 답이 나올 수 있다. 그러나 어려운 반례를 찾아보았는데 예제 입력 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 ..