하나씩 알아가기

이 문제는 DFS/BFS를 이용한 시뮬레이션 문제입니다. 좌표의 범위 내에서 육지의 지역을 순회하고 이동을 할 수 없으면 카운트를 올려주는 식으로 계산합니다. 말로 하면 간단한데 좌표에서 이동할 수 있는 경우(next position)를 모두 고려해야하므로 좌표의 정보를 구해줘야 합니다. 좌표 시뮬레이션 문제는 늘 그렇듯이 dx와 dy를 더해서 다음 좌표로 이동하기 때문에 dx = [-1,-1,-1,0,0,1,1,1] dy = [-1,0,1,-1,1,-1,0,1] 를 준비합니다. 그리고 이 문제의 경우 다음 지도에서 섬의 개수가 5가 아닌 3인 것을 볼 때 상하좌우 뿐만 아니라 대각선까지 고려해 주어야한다는 것은 알 수 있습니다. 처음에는 DFS를 이용해서 여덟번의 재귀를 하는 식으로 구현했는데... I..

연결 요소(Connected Component)의 개수를 구하는 문제입니다. 인접행렬을 이용해서 풀 수 있습니다. 인접 행렬의 요소를 모두 확인할 것인데(n * n) 시작 노드부터 dfs 함수에 넣고 확인하는데 한 회차를 다 돌면 return하고 연결 요소 카운트를 올립니다. 1부터 n까지를 반복하는데 방문하지 않은 곳만 dfs에 넣습니다. n, m = map(int, input().split()) adj = [[0 for _ in range(n+1)] for _ in range(n+1)] visited = [False] * (n+1) result = 0 for _ in range(m): x, y = map(int, input().split()) adj[x][y] = 1 adj[y][x] = 1 def ..

입력 받은 수를 제곱수의 합으로 나타낼 때 각 항(반드시 양의 정수의 제곱)의 수의 최소값을 구하는 문제입니다. 수 1 2 3 4 5 6 7 8 ... 항의 개수 1 2 3 1 2 3 4 2 ... DP 테이블을 갱신시켜 나가는데 바깥 루프에서는 dp[i] = i 즉, 그 수 만큼의 값으로 채워주고 이것이 최댓값입니다. 안쪽 루프에서는 더 작은 횟수로 줄일 수 있을 때 갱신 해 나갑니다. dp[i] = min(dp[i], dp[i-j**2] + 1) 이것이 가장 핵심이 되는 구문인데 이 식을 생각해 내는것이 정말 어려운 것 같습니다. 여기서 +1을 해주는 이유는 어떤 수든지 최소 한 개의 항으로는 나타내야 하기 때문입니다. 즉 dp[x] = 0 은 불가능합니다. 1부터 시작합니다. n = int(inpu..

오늘은 useReducer hook에 대해서 알아보겠습니다. useReducer는 추가적인 Hook으로 의미가 기본 Hook으로부터 파생되었습니다. useState를 대체할 수 있는 함수인데요. 먼저 useState를 이용하여 counter를 구현해보도록 하겠습니다. import React, { useState } from 'react'; const Counter = ({ initialCount }) => { const [count, setCount] = useState(0); return ( Count : {count} setCount(initialCount)}>RESET setCount((prevState) => prevState - 1)}>- setCount((prevState) => prevSta..

bundle : (동사) ~을 마구 싸 보내다[밀어 넣다] 웹 환경에서는 머신의 성능과 관계 없이 인터넷 속도나 거리 등에 의해서 영향을 받을 수 있습니다. 그래서 가능하면 파일을 나누어서 요청을 받기 보다는 하나로 합쳐서 보내는 것이 현명합니다. 번들러는 지정한 단위로 파일들을 하나로 만들어서 요청에 대한 응답으로 전달할 수 있는 환경을 만들어 주는 역할을 합니다. 모듈 번들러의 등장 배경 수많은 모듈들의 의존성처리를 해결해야만 했다(여러 개의 자바스크립트 파일을 각각 태그에 쓴다고 생각해보면 끔찍할 것이다) 모듈이 많아질 수록 HTTP 요청이 많아질테고 이로 인해 오버로드를 해결해야 했다 모듈 번들러는 각각의 모듈 의존성을 해결하여 하나의 자바스크립트 파일로 만들어줍니다. 모듈 번들러의 종류 Webp..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. JSX는 JavaScript XML의 약자로 JavaScript를 확장한 문법입니다. 겉으로 보기에는 템플릿 언어같아 보이지만, JavaScript의 모든 기능이 포함되어 있습니다. JSX를 리액트와 같이 쓰면 UI 관련 작업을 할 때 더 직관적인 코드를 작성할 수 있게 됩니다. 예를 들어, var element = React.createElement("h1", null, "Hello, ", name); 이렇게 HTML 태그를 만들어야 하는데 (물론 이것은 진짜 DOM element는 아니고 가상 DOM인 React element입니다) const element = Hello, {name}; 훨씬 직관적으로 코드를 작성할 수 있습니다. JSX에는 표..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. 이벤트 위임(Event Delegation)을 알기 위해선 이벤트 버블링과 캡처링의 동작 방식을 이해해야 합니다. 이벤트 버블링이란, 하위 엘리먼트에 이벤트가 발생할 때 그 엘리먼트부터 시작해서 상위요소까지 이벤트가 전달되는 방식을 말합니다. (하위 -> 상위) 이벤트 캡처링이란, 하위 엘리먼트에 이벤트 핸들러가 있을 때 상위 엘리먼트로부터 이벤트가 발생하기 시작해서 하위 엘리먼트까지 이벤트가 전달되는 방식을 말합니다. (상위 -> 하위) 링크를 클릭했는데 태그를 감싸고 있는 태그와 또 이를 감싸고 있는 태그까지 이벤트가 전달되는 것을 확인할 수 있습니다. 이벤트 버블링이 디폴트이며 이벤트 캡처링으로 바꾸려면 addEventListener() 의 마..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. 노드, 간선, 시작점을 첫째 줄에 입력 받고 둘째 줄 부터는 간선의 개수만큼 두 정점의 번호를 입력 받습니다. 두 개의 리스트를 생성합니다. 연결 정보를 나타낸 2차원 리스트 방문 여부를 기록한 1차원 리스트 이 정점을 연결 정보를 인접 행렬(adjacent matrix)로 다음과 같이 나타낼 수 있습니다. 0 1 2 3 4 1 1 1 1 2 1 1 3 1 1 4 1 1 연결이 되어 있다면 1을 넣어주었습니다. 가장 핵심이 되는 부분은 방문하지 않은 노드면서 연결이 되어있는 노드를 방문해 나가는 것인데 dfs의 경우 재귀함수를 호출하고 bfs일 때는 큐에다가 넣어줍니다 from collections import deque n, m, v = map(i..

DFS(Depth-First-Search, 깊이 우선 탐색) 그래프에서 깊은 부분을 우선적으로 탐색하는 알고리즘입니다. 동작 과정 ① 탐색 시작 노드를 스택에 삽입하고 방문처리를 한다. ② 스택의 최상단 노드에 방문하지 않은 인접 노드가 있으면 그 인접 노드를 스택에 넣고 방문 처리를 한다. 방문하지 않은 인접 노드가 없으면 스택에서 최상단 노드를 꺼낸다 ③ ②번의 과정을 더 이상 수행할 수 없을 때까지 반복한다. ※ 동작 원리는 스택이지만 구현은 재귀 함수를 이용해서 하는 것이 더 간결합니다. def dfs(graph, v, visited): #현재 노드를 방문처리 visited[v] = True print(v, end=' ') #현재 노드와 연결된 다른 노드를 재귀적으로 방문 for i in grap..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. URI (Uniform Resource Identifier) URI는 인터넷의 우편물 주소 같은 것으로, 인터넷에 있는 자원을 나타내는 식별자입니다. 인터넷 프로토콜에 항상 붙어다니며 URI의 두 가지 형태가 URL과 URN입니다. URL (Uniform Resource Locator) URL은 특정 서버의 한 리소스에 대한 구체적인 위치를 서술합니다. 정확히 리소스가 어디에 있고 어떻게 접근하는 지(액세스하는 방법) 분명히 알려줍니다. 하지만 구체적인 위치는 나타낼 수 있지만 리소스가 바뀌는 경우 더 이상 페이지를 찾을 수 없게 된다는 한계가 존재합니다. URN(Uniform Resource Name) URN은 콘텐츠를 이루는 한 리소스에 대해, ..