💻 Problem문제 보러 가기 다음 그림과 같이 N개의 집이 순서대로 이웃하여 세워진 마을이 있다.위 그림은 N = 8인 경우 마을의 모습이다. 위 그림과 같이 각각의 집은 순서대로 서로 이웃해 있으며, 첫 번째 집과 마지막 집 또한 이웃해 있다. 예를 들면 3이 적힌 집은 9, 4가 적힌 집과 이웃해 있으며, 5가 적힌 집은 6, 7이 적힌 집과 이웃해 있다. 이 마을 사람들은 각자 자신의 집에 돈을 보관한다. 위 그림에서 각 집에 적혀 있는 숫자는 집마다 보관 중인 돈의 금액을 나타낸다. 어느 날 이 마을에 도둑이 들었다. 도둑은 이 마을에서 어떻게 도둑질을 할까 잠시 고민하다가, 빠르게 돈을 훔치고 달아나기 위해 M개의 연속된 집에서 돈을 훔치되, 돈을 훔칠 때는 각 집에 보관 중인 돈을 전부 ..

💻 Problem문제 보러 가기 농부 존은 소들에게 소수로 차례차례 번호를 매기는 중이다. 베시는 이 번호에서 숫자 D가 몇 번이나 등장하는지 궁금해졌다.베시를 도와 범위 A..B(A와 B 포함)내에서 숫자 D를 포함하는 소수의 개수를 구해보자.소수는 두개의 자연수(1과 자기 자신)로만 나누어 떨어지는 자연수를 말한다. 소수의 예로는 2,3,5,7,11,13,17,19,23,29.. 가 있다.1 ≤ A ≤ B ≤ 4,000,000B ≤ A + 2,000,000 💡 Approach처음엔 그냥 반복문으로 단순하게 소수 구하는 방법으로 풀었더니 1%에서 시간초과 떴다.더보기import sysinput = sys.stdin.readlinedef is_include(n): if str(D) in str(..

💻 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를 활용해 각 군대 번호가 몇 번 등장하는지 센다.가장 많이 등장한 군대의 횟수가 과반수를 넘으면 해당 군대 번..