전체 글
-
백준 17267번: 상남자 (Python/Java)Algorithm/Algorithm Problem 2022. 3. 12. 19:32
https://www.acmicpc.net/problem/17267 17267번: 상남자 CTP의 대표 상남자 영조는 자유롭게 이동하는 것을 좋아한다. 그렇지만 영조는 상남자이기 때문에 위아래로만 간다. 따라서 위, 아래로는 얼마든지 이동할 수 있지만 왼쪽, 오른쪽으로는 이동하 www.acmicpc.net 접근 간단한 너비 우선 탐색 알고리즘처럼 보이지만, 좌우 이동 횟수 제한 조건에 의해 굉장히 까다로워진 문제. 구현 자체는 어렵지 않으니, 우선 평소와 같이 현재 좌표에서 상하좌우 이동해 Queue에 넣고, 다시 Queue에서 값 하나 꺼내 또 상하좌우 이동하고... 이런 방식으로 구현한다고 생각해보자. 물론 좌우 이동 횟수도 꼭 체크를 해줘야겠지? 이렇게 풀면 너무 간단하게 예제 답을 구할 수 있다...
-
백준 9019번: DSLR(Python/Java)Algorithm/Algorithm Problem 2022. 3. 11. 00:39
https://www.acmicpc.net/problem/9019 9019번: DSLR 네 개의 명령어 D, S, L, R 을 이용하는 간단한 계산기가 있다. 이 계산기에는 레지스터가 하나 있는데, 이 레지스터에는 0 이상 10,000 미만의 십진수를 저장할 수 있다. 각 명령어는 이 레지스터에 www.acmicpc.net 접근 구현만 차근히 잘 해낸다면 어렵지 않게 풀 수 있는 너비 우선 탐색 문제. 때문에 굳이 풀이 방법을 포스팅할 필요가 있나 싶지만, 구현 방식에서 재밌는 아이디어가 있어 기록해놓기 위해 풀이를 작성한다. 문제에서 주어진 네 가지 명령 중, D와 S는 굉장히 쉽게 구현할 수 있다. D는 그냥 현재 값을 두배 한 다음에 10000으로 나눈 나머지를 가져가면 된다. '결과 값이 9999..
-
백준 12886번: 돌 그룹(Python/Java)Algorithm/Algorithm Problem 2022. 3. 9. 17:27
https://www.acmicpc.net/problem/12886 12886번: 돌 그룹 오늘 강호는 돌을 이용해 재미있는 게임을 하려고 한다. 먼저, 돌은 세 개의 그룹으로 나누어져 있으며 각각의 그룹에는 돌이 A, B, C개가 있다. 강호는 모든 그룹에 있는 돌의 개수를 같게 만들려 www.acmicpc.net 접근 이 문제가 너비 우선 탐색이라는 것을 생각만 해낸다면 어렵지 않게 풀 수 있는 쉬운 문제. 하지만 이를 구현해내는 부분에서 재미있는 아이디어가 두 가지 정도 있어 그 부분을 짚고 넘어가야겠다 생각했다. 우선 첫 번째로 세 개의 그룹에서 두 개의 그룹을 골라 확인하는 방법이었다. 물론 첫 번째와 두 번째, 첫 번째와 세 번째, 두 번째와 세 번째, 이렇게 세 개의 그룹을 각각 골라 직접 ..
-
React Hook: useEffect란?Front-End/React.js 2022. 3. 7. 16:21
useEffect의 의미와 사용 방법 사이드 이펙트 구현은 useEffect 훅 함수가 만들어진 이유다. 앞선 글에서도 설명했지만, useEffect를 다룰 때 중요한 개념이니 다시 한번 짚고 넘어가도록 하자. 리액트에서 사이드 이펙트란 '리액트 컴포넌트를 화면에 1차로 렌더링 한 후, 비동기식으로 처리되는 부수적인 효과'다. 이렇게 한 줄로 설명하면 이해가 잘 안 가려나? 쉽게 말해, 일단 화면에 렌더링 할 수 있는 거 다 하고 나중에 비동기식으로 추가, 변동되는 데이터를 처리하는 걸 보고 사이드 이펙트라고 한다. useEffect는 이 사이드 이펙트를 함수형 컴포넌트에서 구현하기 위해 고안된 기능이다. 리액트 공식 홈페이지에선 이를 클래스형 컴포넌트의 생명주기 메소드와 비교해서 설명한다. React의..
-
React Hook: useState란?Front-End/React.js 2022. 3. 7. 11:23
useState의 의미와 사용 방법 이전 글을 통해 React Hook이 만들어진 가장 큰 이유 두 가지가 바로 상태 관리와 사이드 이펙트 구현이라고 설명했다. 리액트는 state에 설정된 데이터, 즉 렌더링에 영향을 미치는 값을 감시하고 이 데이터가 변동되면 리렌더링 한다. 기존 클래스형 컴포넌트에서는 constructor 메소드를 통해 state를 구현했는데 이를 함수형 컴포넌트에서도 쓸 수 있도록 만든 것이 바로 useState다. 다음은 리액트 공식 홈페이지 문서에서 가져온 클래스형 컴포넌트의 state 구현 방식이다. class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }..
-
백준 24513번: 좀비바이러스(Python/Java)Algorithm/Algorithm Problem 2022. 3. 6. 19:07
https://www.acmicpc.net/problem/24513 24513번: 좀비 바이러스 여기 $N$ x $M$ 격자 모양의 마을이 있다. 어느 날 세상에 좀비 바이러스가 창궐하여 바이러스가 빠르게 퍼져나가버린다. 바이러스에 대해 조사한 결과 세 종류의 바이러스가 존재했으며 각각 $1$ www.acmicpc.net 접근 간단한 너비 우선 탐색에 조건이 몇 가지 추가된 문제다. 그래프를 탐색하며 1번 바이러스, 2번 바이러스가 접근한 곳인지 체크하는 것은 어렵지 않은 부분이라 대부분의 사람들이 쉽게 구현할 수 있었을 것이라 생각한다. 중요한 것은 1번 바이러스와 2번 바이러스가 만나 3번 바이러스가 되는 경우를 구현하는 것이다. 이 부분은 방문 확인하는 배열을 3차원 배열로 만들어주어 구현했다. 문..
-
React Hook이란?Front-End/React.js 2022. 3. 4. 11:50
React의 Side Effect와 State 관리 React의 Side Effect React Component를 화면에 렌더링 될 때를 생각해보자. 코드를 실행하는 과정에서 외부 데이터를 호출할 때 기다리고, 받은 데이터를 출력하고 다시 외부 데이터를 호출하며 기다리고, 다시 그렇게 받은 데이터를 출력하고... 이를 반복한다면 실행 속도가 굉장히 늦어질 것이다. 때문에 일단 화면에 렌더링 할 수 있는 것들을 먼저 렌더링 한 뒤, 나중에 받은 데이터를 비동기식으로 가져오는 것이 권장된다. 이렇게 해야 연동하는 API 응답이 늦어지거나 응답이 없는 경우에도 영향을 최소화할 수 있기 때문에 사용자 경험 측면에서 유리하기 때문이다. 이처럼 'React Component를 화면에 1차로 렌더링 한 후, 비동기..
-
React의 LifecycleFront-End/React.js 2022. 3. 4. 10:26
React Component의 생명주기(Lifecycle)란 무엇인가? '생명주기'라는 이름에서 짐작한 사람도 있을 것이다. 단어 그대로 생각해보자 '생명'의 '주기'. 말 그대로 한 생명이 태어나서 죽을 때까지의 기간을 뜻하는 말이다. 앞서 리액트 라이브러리 소개 글에서 이야기했듯이, 리액트는 작은 컴포넌트들이 모여 만들어진다. 즉, 여기서 이야기하는 생명주기는 리액트 내부에서 쓰이는 컴포넌트가 만들어지고 제거될 때까지의 기간을 뜻하는 말이다. 사람이든 뭐든 태어났으면 언젠가는 죽는 법. 인생사 공수래공수거. 리액트 컴포넌트가 가지고 있는 생명주기는 크게 세 단계로 나누어진다. "생성될 때", "업데이트할 때", "제거할 때". 세 가지 분류는 리액트에서 "Mount", "Update", "Unmoun..