전체 글
-
현재 읽고 있는 섹션(DOM) 감시하기: Intersection Observer API 활용기카테고리 없음 2025. 12. 21. 21:22
위키, 블로그, 지침서 등 각종 문서 웹 페이지에서는 사용자가 현재 읽고 있는 섹션을 목차에 하이라이팅 하기 위해 실시간으로 업데이트하는 로직이 필요하다 나같은 경우에는 매뉴얼(지침서) 프로젝트를 개발하고 있었고 한 페이지에 수십, 수백 개의 섹션이 존재하는 상황이었다.그리고 사용자가 스크롤을 내릴 때마다 "지금 어느 섹션을 읽고 있는가?"를 판단하여 목차를 하이라이트 해줘야 했다. 이제 본론Intersection Observer API브라우저에서 제공하는 Intersection Observer를 사용하면 요소가 뷰포트에 들어왔는지 여부를 비동기적으로 감시할 수 있다. import { useCallback } from "react";/** * @param ref 본문 컨테이너의 Ref * @param..
-
Electron&React #1 로컬 PC 이미지 읽기/쓰기카테고리 없음 2025. 9. 4. 14:10
기본 세팅: electron-vite-react 템플릿 Electron이 파일시스템에 접근할 수 있는 이유?일렉트론은 웹 브라우저와 백엔드 서버를 하나로 합친 컴퓨터 실행 프로그램이므로 Node.js기능을 대체한다.따라서 네트워크, 파일시스템 등 모든 컴퓨터 자원에 직접 접근할 수 있다. 구조1) 백엔드 역할을 수행하는 Main 프로세스2) 프론트 역할을 수행하는 Renderer 프로세스3) 둘사이의 통신(IPC) 로컬 경로에서 이미지를 읽어와 화면에 띄우는 기능을 구현해보자.3가지 파일만 수정하면 끝! 1. 디렉토리 접근 및 읽어오기 /main/index.ts//main/index.tsapp.whenReady().then(() => { // protocol.registerFileProt..
-
[백준 14561] 회문, [백준 17609] 회문카테고리 없음 2025. 3. 1. 11:57
백준 14561n진법으로 변환 후 회문인지 체크 10이상 넘어가면 A로 표현하는거 체크n진법계산시num%base 연산 수행후 답을 저장해두고num을 base로 나눈 몫으로 업데이트 @@ num이 0이 될때까지 반복import sysinput= sys.stdin.readlinefrom collections import dequen = int(input().rstrip())def isPalindrome(myStr): left=0 right=len(myStr)-1 while left=10: res=hex(res)[2:].upper() baseNum.append(str(res)) num//=base # baseNum=base..
-
[이분탐색] [백준] 실5 숫자카드 + [프로그래머스] LV3 입국심사카테고리 없음 2025. 2. 28. 21:26
문제1 내가 가진 카드 더미와찾아야할 카드 숫자들 방법 1이분탐색을 위해 내가 가진 카드더미를 정렬 시키고 이분탐색 구현하면import sysN = int(sys.stdin.readline())cards = list(map(int, sys.stdin.readline().split()))M = int(sys.stdin.readline())checks = list(map(int, sys.stdin.readline().split()))cards.sort()for check in checks: exist=False left,right=0, len(cards)-1 while leftcheck: right=temp-1 else: # print("찾..
-
[개념] BFS/DFS + [백준] 미로탐색카테고리 없음 2025. 2. 28. 21:00
1. DFS, 깊이 우선 탐색[1] 탐색 시작 노드(1)을 방문 처리 & 스택에 삽입-> dfs(graph,1,visited) 호출[2] 스택에서 pop()한 노드를 기준으로, 방문하지 않은 인접노드가 있다면 인접 노드를 방문 후 push. 방문하지 않은 인접 노드가 없다면 스택에서 pop()[1],[2] 반복 그래프를 나타내는 방법 2가지➀ 인접 행렬➁ 인접 리스트➀ 인접 행렬INF=999999999 #무한의 비용graph=[ [0,7,5], [7,0,INF], [5,INF,0]]➁ 인접 리스트graph=[[] for _ in range(3)]#연결된 노드만 (노드 번호,거리)로 추가graph[0].append((1,7))graph[0].append((2,5))graph[1].append((..
-
[개념] 그리디 + [프로그래머스] 큰 수 만들기코테공부 2025. 2. 28. 16:37
그리디 알고리즘은 "현재 상황에서 지금 당장 좋은 것만 고르는 방법"을 의미한다.그리디는 사전에 외우고 있지 않아도 풀 수 있는 가능성이 높은 문제 유형그냥 머리로 풀어야됨 방법 X 예제 1) 거스름돈Q. N원을 거슬러 줄 때 최소 동전 개수로 거슬러 줘야한다. 동전 종류는 500,100,50,10 무한개A. 가장 큰 화폐 단위부터 거슬러 주면 최소 개수 동전으로 거슬러줄 수 있음 test case ① N=1260 step1) 500원짜리로 거슬러 줄 수 있는 돈 => 500*2개 (1000원)step2) 100원짜리로 거슬러 줄 수 있는 돈 => 100*2개 (200원)step3) 50원짜리로 거슬러 줄 수 있는 돈 => 50*1개 (50원)step4) 10원짜리로 거슬러 줄 수 있는 돈 => 10*1..
-
[프로그래머스] 문자열 압축코테공부 2025. 2. 27. 15:20
핵심 💡- 숫자 크지않으므로 슬라이싱 케이스 전부 탐색해도 됨- 문자열 길이의 ½ 보다 큰 값으로 슬라이싱하면 압축이 안됨 🔜 len(s)//2 만큼만 for문 돌리기- 차례대로 슬라이싱하는 for문 작성시 slicingNum만큼 idx건너뛰기 🔜 for idx in range(slicingNum, len(s), slicingNum)- 첫 시도는 슬라이싱한 문자를 deque에 담았다가 꺼내면서 같은지 체크했지만, 바로바로 비교 가능 def solution(s): answer = len(s) resultStr="" if answer==1: return 1 for slicingNum in range(1,len(s)//2+1): resultSt..