💻 Problem문제 보러 가기 아래와 같은 가로 세로 퍼즐을 풀어보자. 6개의 단어가 주어졌을 때, 이를 가지고 가로 세로 퍼즐을 만드는 프로그램을 작성하시오. 단어 3개는 가로줄, 3개는 세로줄로 배치해야 한다. 6개의 줄에 알파벳 대문자로 이루어진 단어가 주어진다. 이 단어는 사전순으로 정렬되어 있다. ✏️ Solution 1내가 처음 풀이한 방법은 아래와 같다.6개의 단어 중 3개를 뽑는다. (가로 단어로 사용)순서가 있으므로 순열이다.가로 단어로 퍼즐을 만들어서 세로 단어를 추출한다.추출한 세로 단어 조합과 (1)에서 뽑히지 않은 단어 조합이 같다면 퍼즐이 완성된다.이거 풀면서 고민을 많이 했다.. 머리 아팠음 ㅠ선택되지 않은 단어들이 가로 단어에서 뽑은 세로 단어들과 같은지 비교를 어떻게 ..

📍 img 태그 - srcimport Icon from '@/assets/icons/icon.svg';... ...import한 이미지를 단순히 img 태그에 사용한다간편하지만 svg 파일의 색상을 변경할 수 없다 📍 ReactComponentimport { ReactComponent as Icon } from '@/assets/icons/icon.svg';... ...svg를 컴포넌트화하면 색상을 변경할 수 있다. svg 파일에서 바꾸고자 하는 요소를 current로 바꿔야 커스텀이 가능하다. 📍 svgr나는 vite를 사용하기에 vite를 사용하는 방법으로 소개하겠다.vite 프로젝트에서 svg 파일을 React 컴포넌트처럼 import 할 수 있는 라이브러리를 사용한다. 🔨 세팅하기패키지 설..

무언가 작업을 했을 때 즉각적인 피드백을 제공하기 위해 toast를 사용했다. 사용자에게 경고 등을 표시할 때 alert을 쓸 수도 있지만, alert보다는 toast가 더 예뻐서 toast를 쓰려고 한다.또한, alert은 사용자가 직접 닫아야 하지만 toast는 디자인/스타일/조작 방법 등 커스터마이징해서 사용할 수 있다. 🎈 패키지 설치yarn add react-toastify 🎈 사용하기import {toast, ToastContainer} from 'react-toastify';import 'react-toastify/dist/ReactToastify.css';function App() { const handelButtonClick = () => { toast.error('경고입니다...

🎈 react-signature-canvas 패키지 설치yarn add react-signature-canvas 🎈 서명 컴포넌트 구현import {useRef} from 'react';import SignatureCanvas from 'react-signature-canvas';const SignaturePad = () => { const canvas = useRef(null); const handleCanvasClear = () => { canvas.current?.clear(); }; export default SignaturePad; 🎈 활용편🔨 화면 사이즈 변화하면 입력값이 리셋되는 경우SignatureCanvas props에 추가clearOnResize={false} 🔨 ..

🖥️ React란?Meta(Facebook)이 개발한 오픈소스 JavaScript 라이브러리대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술 🖥️ React 특징1. 컴포넌트를 기반으로 UI를 표현한다컴포넌트 (Component)화면(UI)을 구성하는 구성 요소 2. 화면 업데이트 구현이 쉽다업데이트사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것 선언형 프로그래밍 vs 명령형 프로그래밍 선언형 프로그래밍 명령형 프로그래밍 과정은 생략하고 목적만 간결히 명시하는 것목적을 이루기 위한 모든 일련의 과정을 설명하는 방식마치 우리가 식당에서 주문하는 것과 유사함“토마토 파스타 하나 주세요”토마토 파스타를 만드는 방식은 모르겠고, 아무튼 토마토 파스타..

💻 Problem문제 보러 가기 드디어 전쟁은 전면전이 시작되었고, 서로 땅을 따먹기 시작했다.현재 여러 지역은 한창 전쟁이 벌어지고 있는 상황인데, 어느 지역은 거의 전쟁이 마무리 단계로 가고 있다.하지만 당신은 군대를 보낼 때 적군을 혼란시키기 위해서 우리나라의 군대라는 걸 표시하지 않고, 군대의 번호로 표시했다.어느 땅에서 한 번호의 군대의 병사가 절반을 초과한다면 그 땅은 그 번호의 군대의 지배하에 놓이게 된다.이때, 각 땅들을 지배한 군대의 번호를 출력하여라. 만약, 아직 전쟁이 한창 중인 땅이라면 “SYJKGW”을 쌍 따옴표 없이 출력한다. 💡 Approach파이썬의 Counter를 활용해 각 군대 번호가 몇 번 등장하는지 센다.가장 많이 등장한 군대의 횟수가 과반수를 넘으면 해당 군대 번..

📒 힙(heap)완전 이진 트리(Complete Binary Tree)최소 힙: 부모 노드의 키 값이 자식 노드의 키 값보다 항상 작은 힙 (루트가 가장 작음)최대 힙: 부모 노드의 키 값이 자식 노드의 키 값보다 항상 큰 힙 (루트가 가장 큼) 📒 힙 자료구조 구현heapq 모듈 이용heapq.heappush(heap, item): item을 heap에 추가heapq.heappop(heap): heap에서 가장 작은 원소를 popreturn 하지 않고 접근만 하려면 인덱스로 접근heapq.heapify(x): 리스트 x를 즉각적으로 heap으로 변환함 ✏️ heapq 모듈을 이용하여 최소 힙 구현heapq 모듈은 기본적으로 최소 힙으로 구현되어 있음import heapqheap = []heapq.h..

💻 Problem문제 보러 가기 정렬된 두 묶음의 숫자 카드가 있다고 하자. 각 묶음의 카드의 수를 A, B라 하면 보통 두 묶음을 합쳐서 하나로 만드는 데에는 A+B 번의 비교를 해야 한다. 이를테면, 20장의 숫자 카드 묶음과 30장의 숫자 카드 묶음을 합치려면 50번의 비교가 필요하다.매우 많은 숫자 카드 묶음이 책상 위에 놓여 있다. 이들을 두 묶음씩 골라 서로 합쳐나간다면, 고르는 순서에 따라서 비교 횟수가 매우 달라진다. 예를 들어 10장, 20장, 40장의 묶음이 있다면 10장과 20장을 합친 뒤, 합친 30장 묶음과 40장을 합친다면 (10 + 20) + (30 + 40) = 100번의 비교가 필요하다. 그러나 10장과 40장을 합친 뒤, 합친 50장 묶음과 20장을 합친다면 (10 + ..