Front-end(170)
-
[백준] 2606. 바이러스 (자바스크립트/javascript/node.js/BFS/DFS/너비 우선 탐색 / 깊이 우선 탐색 / 알고리즘 / 코딩테스트)
문제를 풀기 위한 아이디어 1번 컴퓨터부터 시작하여 경로를 거치게 되는 정점을 모두 구하는 문제이다. DFS 방법으로 풀어도 되고 BFS 방법으로 풀어도 무방하다. 예제의 경우 DFS로 풀면 1→2→3→5→6 순으로 거치게 되고, BFS로 풀면 1→2→5→3→6 으로 거치게 된다. 내가 작성한 코드 1. DFS로 푼 방법 let fs = require("fs"); let input = fs.readFileSync("/dev/stdin").toString().split("\n"); const vertexNumber = Number(input[0]); // 컴퓨터의 수 : 7 const edgeNumber = Number(input[1]); // 간선의 수 : 6 input.shift(); input.shi..
2021.05.28 -
[자료구조] 그래프 (자바스크립트/javascript)
그래프란? 객체 간의 연결을 시각화한 것으로 정점(Vertex)간의 관계를 표현하는 자료구조 그래프의 용어 정점(vertex) : 그래프를 형성하는 노드 간선(edge) : 그래프에서 노드 간의 연결 (정점 간에 '선') - 아크라고도 함 정점 차수(degree of vertex) : 해당 정점에 연결된 간선의 개수 인접 노드 : 간선에 의해 직접 연결된 노드 완전 그래프 : 모든 정점이 간선으로 연결된 그래프. 그리고 그래프의 부분집합을 부분 그래프라고 한다. 희소 그래프(sparse graph) : 정점들 간에 가능한 연결 중 일부만 존재하는 경우 해당 그래프를 희소 그래프라고 한다. 밀집 그래프(dense graph) : 다양한 정점들 간에 연결이 많은 경우 해당 그래프를 밀집 그래프라고 한다. 순..
2021.05.18 -
[백준] 1931. 회의실 배정 (자바스크립트/js/javascript/node.js/정렬/그리디 알고리즘/탐욕적 알고리즘)
문제를 풀기 위한 아이디어 시간 제한은 2초이므로 대략 2억번의 연산까지 허용된다고 생각하고 풀어야 한다. 정확한 답을 구해내려면 완전탐색 유형으로 접근하여 모든 경우의 수를 다 따져본 후 가장 최선의 답을 고르면 되겠지만, 입력이 최대 10만이므로 이 방법은 효율적이지 않다. 따라서 위의 문제를 풀기 위해서는 현재 상황에서 지금 당장 좋은 것만 고르는 그리디 알고리즘으로 풀어야 한다. 그리디 알고리즘이 언제나 최적의 해를 보장하는 것은 아니지만 많은 문제에 대한 해를 보다 효율적으로 구해낼 수 있다. 위의 문제는 그리디 알고리즘의 대표적인 유형 중 하나인 활동선택 문제에 해당한다. * 활동 선택 문제 : 한 번에 하나의 활동만 처리할 수 있는 하나의 강의실에서 제안된 활동들 중 가장 많은 활동을 처리할..
2021.05.17 -
[React] react-router (Switch, Link, exact, render, useHistory)
Switch 라는 태그는 자식인 들 중에서 현재 URL과 일치하는 첫번째 것을 렌더해준다. import React from "react"; import { BrowserRouter, Route, Switch } from "react-router-dom"; import "./app.css"; import Home from "./components/home"; import Profile from "./components/profile"; function App() { return ( ); } export default App; 이렇게 작성하면 경로에 맞는 컴포넌트를 렌더해주는 것이다. Link Switch 안에서가 아니더라도 Link를 이용하면 원하는 컴포넌트로 이동할 수 있다. (마치 html의 a 태그의..
2021.05.13 -
[React] react-router에서 render 이용해서 컴포넌트 보여주기
react-router에서 해당하는 경로에 맞는 컴포넌트를 렌더하는 방법은 3가지가 있다. 1. 의 자식으로 렌더하는 방법 import React from "react"; import { BrowserRouter, Link, Route} from "react-router-dom"; import "./app.css"; import Home from "./components/home"; import Profile from "./components/profile"; function App() { return ( ); } export default App; 하지만 위와 같이 쓰면 route 관련 props인 location, history, match를 받아올 수 없다. 2. 를 이용하여 렌더하는 방법 impo..
2021.05.13 -
[React]라우터가 아닌 컴포넌트에서 location, match, history 사용하기 - withRouter
라우터가 아닌 컴포넌트에서 location, match, history를 사용해야할 때에는 withRouter를 사용한다. const callback = withRouter(() => { }); 이렇게 withRouter로 감싸도 되고, export default withRouter(callback); 이렇게 감싸면 된다. 그러면 props에서 location, match, history를 받아올 수 있다. * 라우터가 아닌 컴포넌트에서 어떤 이벤트가 발생했을 때 URL을 이동할 일이 있을 때 history.push를 이용해서 URL을 이동하고 싶었기 때문에 withRouter를 찾게 되었다.
2021.05.12