📍문제 링크 https://www.acmicpc.net/problem/17073 17073번: 나무 위의 빗물 첫째 줄에 트리의 노드의 수 N과 1번 노드에 고인 물의 양을 의미하는 정수 W가 주어진다. (2 ≤ N ≤ 500,000, 1 ≤ W ≤ 109) 다음 N-1줄에 걸쳐, 트리에 존재하는 간선의 정보가 U V의 형태로 주어진다 www.acmicpc.net 📍알고리즘 분류 - 수학 - 그래프 이론 - 그래프 탐색 - 트리 📍문제 풀이 간선 정보를 바탕으로 트리를 만들고, 루트에 물을 흘려보낸다 한 턴에 발생하는 동작은 아래와 같다 - 부모 노드가 1 이상의 물을 갖고 있다면 랜덤한 자식 노드에 1의 물을 흘려보냄 - 자식 노드는 물을 받고 저장 더 이상 물이 움직이지 않는 상태에 도달하면 (즉, ..

📍문제 링크 https://www.acmicpc.net/problem/11497 11497번: 통나무 건너뛰기 남규는 통나무를 세워 놓고 건너뛰기를 좋아한다. 그래서 N개의 통나무를 원형으로 세워 놓고 뛰어놀려고 한다. 남규는 원형으로 인접한 옆 통나무로 건너뛰는데, 이때 각 인접한 통나무의 높이 www.acmicpc.net 📍알고리즘 분류 - 그리디 - 정렬 📍문제 풀이 수열이 주어진다. 인접한 수 끼리의 차가 최소가 되도록 배열을 섞을 수 있을 때, 그 차를 구하라 예를 들어 정렬된 수열 10, 10, 11, 11, 12, 12, 13 이 주어질 때, - 인덱스를 0 1 2 3 4 5 6 이라고 할 수 있다 오름차순으로 양 끝단부터 배치하게 되면 아래처럼 배치할 수 있다 (정렬된 배열이므로 크기가 정..

📍완성된 이미지 📍구현 2개의 element가 필요하다 - 그라데이션 element - 백그라운드 element 그라데이션 element는 회색 - 흰색 - 회색 이렇게 그라데이션 되게 스타일링한다 background element (회색) 위로 그라데이션 element가 지나가게 하면 된다 - 이때, 시작 지점은 | 그라데이션 | 백그라운드 | { return ( ); }; export default Skeleton; - Skeleton.scss .skeleton-box { display: inline-block; height: 1em; // 부모 요소와 같게 position: relative; overflow: hidden; background-color: #DDDBDD; &::after { posi..

📍자주 쓰는 엔터티 코드 정리 - HTML에서 공백, 등을 표시할 때 쓰기 좋다 문자 엔티티코드 엔티티숫자 설명 공백 끊기지 않는 공백 & & & 앰퍼샌드 " " " 인용부호 © © © 저작권 기호 ® ® ® 등록된 기호 ™ ™ ™ 상표 기호 “ “ “ 큰 따옴표 열기 ” ” ” 큰 따옴표 닫기 ‘ ‘ ‘ 작은 따옴표 열기 ’ ’ ’ 작은 따옴표 닫기 › › 꺽쇠 닫기 § § § 섹션 기호 ¶ ¶ ¶ 단락 기호 • • • 큰 목록 점 · · · 중간 목록 점 … … … 수평 줄임표 ¦ ¦ ¦ 깨진 수직 막대 – – – En-Dash — — — Em-Dash ♥ ♥ &#9829 하트 참고 https://entitycode.com/ En..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅tagged union, discriminated union (특정 문자열을 타이핑에 활용) 및 타입 가드를 통해 type narrowing을 구현 가능 📍타입 좁히기(type narrowing) - 가장 일반적인 예시 : null check (특정 엘리먼트가 있는지 여부) - 분기문에 따라 타입을 좁힐 수 있음 const el = document.getElementById('foo'); // Type is HTMLElement | null if (el) { el // Type is HTMLElement el.innerHTML = 'Party Time' } else { el // Type is null alert('No element #fo..

📍문제 링크 https://www.acmicpc.net/problem/1713 1713번: 후보 추천하기 첫째 줄에는 사진틀의 개수 N이 주어진다. (1 ≤ N ≤ 20) 둘째 줄에는 전체 학생의 총 추천 횟수가 주어지고, 셋째 줄에는 추천받은 학생을 나타내는 번호가 빈 칸을 사이에 두고 추천받은 순서대 www.acmicpc.net 📍알고리즘 분류 - 구현 - 시뮬레이션 📍문제 풀이 최종 후보 풀의 크기 N과 자연수로 이루어진 수열 data을 입력받는다 - data를 순회하며 후보 N의 크기 이내에서 추천수가 높은 순으로 최종 후보를 가린다 문제를 풀며 우선순위 큐로 해결할 수 있겠다 생각이 들었다. 그 이유는... - 힙 구조를 사용하면 배열보다 시간 복잡도가 빠름 (단 메모리를 더 많이 쓸 수 있음)..

Next.js 공식문서 읽기 📍프리렌더링이란? ⭐모든 HTML 페이지를 미리 생성 (client-side에서 JavaScript로 만들지 않음) - 페이지가 브라우저에 의해 로드되면, 각각의 HTML 페이지는 최소한의 JavaScript 코드를 보유 - 이후 이 코드가 수행되며 페이지를 완전하게 만듬 (이것이 Hydration 과정) ⭐프리 렌더링은 성능과 SEO 측면에서 유리 📍프리렌더링 이루어지는 것 확인하기 React (CRA 환경) 페이지 vs Next.js 환경의 페이지 비교 1️⃣두 페이지에 접속하여 JavaScript 비활성화 - 크롬 개발자도구 열기 - crtl + shift + p - javascript 검색하여 Disable JavaScript 클릭 2️⃣결과 확인 - CRA 페이지는 ..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅타입스크립트가 넓히기(type widening)를 통해 상수의 타입을 추론하는 법을 이해해야 한다 (const, at const 등) 📍런타임 전후의 변수 - 런타임 이후 : 유일한 값 - 런타임 이전 (정적 타입 검사) : 가능한 값들의 집합 (타입) 📍type widening - 타입을 명시하지 않으면, 지정된 단일 값을 갖고 할당 가능한 범위를 유추하는 것 - 예시 const mixed = ["x", 1]; /* mixed에 가능한 후보들 ("x" | 1)[] ["x", 1] [string, number] readonly [string, number] (string | number)[] readonly (string | number)[..