본문 바로가기

전체 글

 (53)
[React router] useNavigate, useParams 1. useNavigate : 유저를 어딘가로 보내는 방법 const navigate = useNavigate(); const goHome = () => { navigate('/home'); }; const goAbout = () => { navigate('/about'); }; return ( Home About ); 1. useNavigate()를 navigate에 저장한다. 2. navigate(이동할 path)를 통해 navigate 시킨다. 2. useParams : url의 파라미터를 뽑아내는 방법 먼저, useParams를 사용하기 위해 파라미터가 존재하는 path를 만들어준다. { path: 'users/:userId', element: , }, createBrowserRouter 나 Br..
[React Router] BrowerRouter vs createBrowerRouter react-router-dom을 통해 사용할 수 있는 것으로 routing하는 데에 도움을 주는 라이브러리 여기서 routing이란? 웹 애플리케이션에서 사용자가 요청한 URL에 따라 해당 경로에 알맞는 컴포넌트를 렌더링하는 것! 그렇다면 왜 리액트 라우터를 쓰나요? 화면 전환 시 전체를 리렌더링 하는 방식이 아닌 컴포넌트별로 리렌더링 하는 방식으로 작동시킬 수 있음. 즉, 리액트로 생성된 SPA에서 화면 새로고침 없이 어떤 페이지로 이동할 수 있음. SPA(Single Page Application) 필요한 영역만 캐치하여 즉각적인 화면의 변화를 줄 수 있음. 1. BrowserRouter return 2. createBrowserRouter Router를 array형식으로 선언할 수 있음. index..
[TS] 타입스크립트에서의 상태관리 event가 발생하면 e:any와 같이 모든 타입을 받을 수 있는 any를 사용해도 되지만 그러면 자바스크립트와 다를 것이 없기 때문에 되도록 사용하지 않도록 한다. React.FormEvent와 같이 타입을 event에 지정해준다. 구조 분해 할당에 대해 학습했음. 구조분해할당 : 객체에서 특정 값만 빼오기 밑에서 e.currentTarget은 {value: "작성한것", type: "text",placeholder= 'username'} 이었는데 거기서 value값만 빼서 사용한 것임. 아래는 발생한 event를 받아 사용하는 것을 TS로 나타낸 것이다. function App() { const [name, setName] = useState(""); const handleName = (e: Reac..
[알고리즘 C++] 17071 숨바꼭질 5 , 플러드필(flood fill)알고리즘 https://www.acmicpc.net/problem/17071 17071번: 숨바꼭질 5 수빈이는 동생과 숨바꼭질을 하고 있다. 수빈이는 현재 점 N(0 ≤ N ≤ 500,000)에 있고, 동생은 점 K(0 ≤ K ≤ 500,000)에 있다. 수빈이는 걷거나 순간이동을 할 수 있다. 만약, 수빈이의 위치가 X일 때 www.acmicpc.net 이 문제는 두가지 경우를 생각해야 했다. 1. 수빈이와 동생이 같은 점에서 만나는 경우 2. 수빈이가 동생보다 먼저 도착해서 -1, +1을 반복하며 동생을 기다리는 경우 1번은 그냥 BFS를 돌리며 만나면 break 하면 되기 때문에 간단하지만 2번을 떠올리는 것이 관건인 문제였다. visited배열을 2차원으로 할당하고 짝수, 홀수인 각 경우에 어떤 지점을 ..
[알고리즘 C++] 16637 괄호 추가하기 https://www.acmicpc.net/problem/16637 16637번: 괄호 추가하기 첫째 줄에 수식의 길이 N(1 ≤ N ≤ 19)가 주어진다. 둘째 줄에는 수식이 주어진다. 수식에 포함된 정수는 모두 0보다 크거나 같고, 9보다 작거나 같다. 문자열은 정수로 시작하고, 연산자와 정수가 www.acmicpc.net 접근 1. 처음엔 괄호가 나와서 짝짓기 문제인줄 알고 스택을 이용하여 풀려고 했음. -> 스택을 주로 사용하는 문제가 아님을 알고 2. 조합을 통해 경우의수를 따져서 숫자마다 앞에 '('가 오거나 안오는 경우를 따져서 풀려고 했음 -> 실패 문제 해결법 예제 입력1과 같이 3+8*7-9*2 와 같은 수식이 주어졌다고 하면 0부터 시작하는 인덱스 관점에서 1. 3+8을 먼저 계산 하..
[알고리즘 C++] 12869 뮤탈리스크 https://www.acmicpc.net/problem/12869 12869번: 뮤탈리스크 1, 3, 2 순서대로 공격을 하면, 남은 체력은 (12-9, 10-1, 4-3) = (3, 9, 1)이다. 2, 1, 3 순서대로 공격을 하면, 남은 체력은 (0, 0, 0)이다. www.acmicpc.net 정점과 간선으로 나타낸 그래프를 BFS하여 SCV가 모두 0이 되는 경우를 찾아야 함. 레벨 별로 탐색하여 최소 공격 횟수를 구한다. 예를 들어 맵과 같은 경우에는 y,x라는 두 변수가 기반이며, 네 방향으로 정점이 형성되는 것임. 뮤탈리스크는 3개의 SCV체력이라는 세 변수가 기반이며, 9,3,1로 공격할 수 있는 경우의 수인 6방향으로 정점이 형성되는 것임. void BFS(vector scv) { q..
[알고리즘 C++] 2589 보물섬 https://www.acmicpc.net/problem/2589 2589번: 보물섬 첫째 줄에는 보물 지도의 세로의 크기와 가로의 크기가 빈칸을 사이에 두고 주어진다. 이어 L과 W로 표시된 보물 지도가 아래의 예와 같이 주어지며, 각 문자 사이에는 빈 칸이 없다. 보물 지도의 www.acmicpc.net 처음 생각한 첫번째 문제풀이는 1. 육지들 중 두 곳을 선택한다. (두곳이므로 반복문 통한 조합 생성) 2. 선택한 육지를 BFS 통해 최단거리를 구한다. 3. 최단거리들 중 최대값을 찾는다. 였지만 이렇게 풀고나니 시간초과가 발생했다. 그래서 다시 생각한 두번째 풀이는 1. L로 입력되는 육지를 vector에 저장한다. 2. 저장한 육지를 시작점으로 하는 반복문 돌리며 BFS 실행한다. 3. 실행하..
[알고리즘 C++] 15686 치킨배달 https://www.acmicpc.net/problem/15686 15686번: 치킨 배달 크기가 N×N인 도시가 있다. 도시는 1×1크기의 칸으로 나누어져 있다. 도시의 각 칸은 빈 칸, 치킨집, 집 중 하나이다. 도시의 칸은 (r, c)와 같은 형태로 나타내고, r행 c열 또는 위에서부터 r번째 칸 www.acmicpc.net 처음에 풀 때에는 조합 + BFS문제라고 생각하고 풀었는데 시간초과가 났다. 아래처럼 공식이 나와있는걸 보아하니 BFS를 사용해서 푸는 문제가 아니라 그냥 조합 + 거리구하기 문제였다 1. BFS코드 - 중간중간 계속 바꿔가면서 풀어서 코드가 많이 더럽다. 설계를 잘 하고 들어가야 할 것같다. #include using namespace std; int N, M, mp[54]..

티스토리툴바