백준 온라인 저지의 4195번 친구 네트워크 문제입니다. [링크] https://www.acmicpc.net/problem/4195 문제 조건과 설명 어떤 사이트의 친구 관계가 생긴 순서대로 주어졌을 때, 두 사람의 친구 네트워크에 몇 명이 있는지 구하는 프로그램을 작성하시오. 단, 입력은 이름(문자)로 주어진다. 친구 네트워크란 친구 ...

유니온-파인드 자료구조(Union-find structure) 🧭 유니온-파인드 자료 구조(Union-find structure)란? 집합의 묶음을 관리하는 구조인데, 여기서 말하는 집합은 서로소 집합(disjoint set)입니다. 즉, 하나의 원소가 둘 이상의 집합에 속하지 않습니다. 이 집합을 가진 자료구조에 대해 union ...

컴포넌트 라이프사이클 🔍 리액트 컴포넌트의 라이프사이클 마운트 : DOM이 생성된 후 웹 브라우저에 나타나는 것. 업데이트 : 컴포넌트에서 props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트 리렌더링 때, this.forceUpdate로 강제 렌더링할 때 언마운트 : 마운트의 반대 과정. DOM에서 컴포넌트를 제거하는 ...

✏️ 자바스크립트 배열의 map() 함수 반복되는 컴포넌트를 렌더링하기 위하여 자바스크립트 배열의 내장 함수인 map()을 사용합니다. map 함수는 파라미터로 전달된 함수를 사용해, 배열 각 요소를 원하는 규칙에 따라 변환한 다음 새로운 배열을 생성합니다. 1 arr.map(callbackFunction(currentValue, index,...

ref란? - DOM에 직접 접근하기 🔍 DOM요소에 이름을 달아 직접 접근할 때 HTML을 작성할 때, div 등의 DOM 요소에 이름을 달 경우 <div id="my-id"> 와 같이 id를 사용합니다. 이렇게 하면 특정한 id에 해당하는 DOM 요소에만 스타일을 따로 적용하거나, 자바스크립트에서 해당 DOM 요소에 접근하여...

알고리즘 - 플로이드-워셜(Floyd-Warshall) 알고리즘 📌 플로이드-워셜(Floyd-Warshall) 알고리즘이란? 모든 최단 경로를 구하는 알고리즘 다익스트라는 하나의 정점에서 다른 모든 정점까지의 최단 거리를 구하는 알고리즘(S.S.S.P - Single Source Shortest Path) 이었다면, 플로이드-워셜 알고...

[알고리즘] 최장 증가 부분 수열(LIS) 알고리즘 📌 최장 증가 부분 수열(LIS, Longest Increasing Subsequence)란? 원소가 n개인 배열의 일부 원소를 골라내서 만든 부분 수열 중, 각 원소가 이전 원소보다 크다는 조건을 만족하고, 그 길이가 최대인 부분 수열을 최장 증가 부분 수열이라고 합니다. 예를 들어,...

React의 state 설정하기 🔍 state란? 컴포넌트 내부에서 변경될 수 있는 값. props는 부모 컴포넌트가 설정하고, 컴포넌트 자신은 props를 바꾸지 못하는 특성이 있는 것과는 차이가 있다. 리액트에 존재하는 state의 종류는 2가지입니다. 클래스형 컴포넌트가 가지고 있는 state 함수형 컴포넌트가 us...

React의 props 설정하기 🔍 props란? 부모 컴포넌트에서 자식 컴포넌트에 전달해 주는 값을 props 라고 합니다. 1 2 3 4 5 6 7 8 9 10 /* App.js */ import React from 'react'; import MyComponent from './MyComponent'; function App...

React의 컴포넌트(Component) 🔖 리액트로 화면을 구성하게 되면, 사용자가 볼 수 있는 여러 가지 컴포넌트로 구성되어 있습니다. 사용자에게 보여지는 UI 요소를 컴포넌트 단위로 구분하여 구현할 수 있습니다. 아래 코드는 create-react-app 으로 처음 리액트 프로젝트를 생성하였을 때 App.js 에 기본적으로 작성되어...