![]()
React로 폼을 만들고, 입력창에서 Enter 키를 누르면 다음 필드로 포커스를 이동시키는 기능을 구현했다.그런데 한글 입력 시 마지막 글자가 다음 인풋 필드로 이동하는 버그가 발생했다.영어, 숫자, 특수문자는 문제가 없고, 한글에서만 나타났다. 원인: IME 조합 상태와 onKeyDown 이벤트 타이밍의 충돌이 문제는 IME(Input Method Editor, 입력기) 조합 방식과 이벤트 발생 순서가 충돌하기 때문에 발생한다. IME의 입력 방식한글은 조합형 입력 언어다. 예를 들어 ‘사’라는 글자를 입력할 때 실제로는 다음과 같은 과정을 거친다.• 사용자가 ‘ㅅ’ 입력• ‘ㅏ’ 입력 → 조합 → ‘사’ 완성이때 조합이 끝나지 않은 상태는 브라우저에서는 isComposing = true 로 판단된다..
회사 프로젝트에서 거래명세표를 A4 가로 방향(landscape)으로 인쇄하는 기능을 구현해야 했습니다.- 화면에는 왼쪽 영역만 표시- 인쇄 시에는 A4 한 장을 꽉 채워 좌/우 모두 출력 (하나는 고객용 / 하나는 내부용)- 인쇄 시 전용 스타일 적용 (폰트 크기, 여백 등 조정)이를 구현하기 위해 React to Print의 useReactToPrint 훅을 사용하여, 특정 DOM에 대해 인쇄 작업을 진행했습니다. 이 글에서는 React to Print 라이브러리를 사용해 특정 컴포넌트를 인쇄하고, 인쇄 시에만 적용되는 스타일을 설정하여 이 문제를 어떻게 해결했는지 공유해 봅니다! 왜 window.print()가 아닌 React to Print?일반적으로 웹에서 인쇄 기능을 구현할 때 window.p..
unique element로 구성된 nums 배열이 주어졌을 때,가능한 모든 subsets(부분집합)을 리턴하는 문제다. 접근 - 백트래킹모든 부분 집합을 구하는 문제 -> 완전 탐색반복문 vs 재귀 -> 반복문으로 모든 경우를 탐색하기 어려우므로 재귀(DFS)를 이용한 탐색,nums의 각 원소를 포함할지 안 할지 선택 필요 -> 백트래킹백트래킹은 모든 가능한 경우를 탐색하면서, 불가능한 경로는 빠르게 되돌아가(백트랙) 탐색을 줄이는 기법이다.일반적으로 재귀(Recursion)을 이용한다. 부분집합 문제에서는 nums[i]를 선택할지 안 할지 결정하는 2가지 선택이 계속해서 분기되기에 백트래킹에 적합하다. 풀이: 백트래킹class Solution: def subsets(self, nums: L..
문제 요약스톤의 무게가 담긴 stones[i] 배열이 있을 때1. 가장 무거운 두 개의 스톤을 선택,2. 같으면 둘다 제거, 다르면 큰 돌이 (큰 값 - 작은 값)으로 변함3. 최대 한 개의 돌이 남아있을 때까지 반복4. 남은 돌의 무게 반환 (없으면 0) 최적 풀이 : max heap 이용max heap을 이용하면 항상 가장 큰 무게의 두 돌이 항상 배열의 맨 앞에 있는 구조를 유지할 수 있다.class Solution: def lastStoneWeight(self, stones: List[int]) -> int: stones = [-s for s in stones] heapq.heapify(stones) while len(stones) > 1:..
정수 k와 초기 스트림 nums가 주어질 때,새로운 값이 추가될 때마다 K번째로 큰 값을 반환하는 클래스를 구현하는 문제다.constructor는 클래스를 처음 생성할 때 실행되는 함수.Python에서는 __init__()이 constructor(생성자) 역할을 한다. 풀이1: Min-Heap 이용이 문제의 가장 효율적인 풀이는 Min-Heap을 이용하는 것이다. import heapqclass KthLargest: def __init__(self, k: int, nums: List[int]): self.minHeap, self.k = nums, k heapq.heapify(self.minHeap) while len(self.minHeap) > k: ..
BST의 root와 k가 주어졌을 때,트리에서 k번째로 작은 값을 리턴하는 문제이다.(1-indexed: 1부터 시작하는 인덱스 기준) 풀이 1: 브루트포스(DFS) - O(n log n)가장 간단한 풀이로는 dfs를 통해 완전 탐색을 하고, 정렬하여 k번째로 작은 값을 리턴할 수 있다. # Definition for a binary tree node.# class TreeNode:# def __init__(self, val=0, left=None, right=None):# self.val = val# self.left = left# self.right = rightclass Solution: def kthSmallest(self, root: Opt..
![]()
재밌는 문제를 풀어보았다! 문제 설명https://www.acmicpc.net/problem/12096 친구가 백준 넌센스 문제를 보여주는 것이다.이게 무슨 문제냐고 하니까, 힌트를 하나 알려주겠다고 문제를 일반적으로 보면 안 돼ㅋㅋㅋ이 말을 듣자마자 아 개발자도구 열면 찾을 수 있겠구나! 하고 집에 가서 풀어보았다 입력과 출력, 힌트쪽을 클릭하여 Element 내용을 확인해보니역시나 숨겨진 주석들이 있었다! 콘솔에도 이런 값들이 찍히는 것을 확인할 수 있었다. 입력출력힌트{ "12096": { "id": "12096", "problem_description": "", "problem_input": "", "problem_output": "", ..
링크드리스트에 사이클이 있는지 없는지 판단하는 문제이다.set을 이용하여 간단히 풀 수도 있지만, 플로이드의 순환 찾기 알고리즘, 플로이드의 토끼와 거북이 알고리즘으로도 풀 수 있는 재밌는 문제였다! 풀이1. set 이용# Definition for singly-linked list.# class ListNode:# def __init__(self, x):# self.val = x# self.next = Noneclass Solution: def hasCycle(self, head: Optional[ListNode]) -> bool: seen = set() cur = head while cur: ..
![]()
mission: main 브랜치를 고쳐라! 팀원이 main 브랜치에 이슈가 발생하여 개발 진행을 아예 못 하고 있다고 하였다.이 문제를 진단하고 해결한 과정을 상세히 기록해본다! 첫번째 문제 상황: 500 응답 (SupabaseConnection 전역 모듈화)먼저, 동작하지 않는 페이지에 접속하여 네트워크 탭을 확인하였다. 브라우저의 네트워크 요청이 서버로 전달되지 않고 Network Error가 발생하고 있었다. 주목해야 할 것은, 네트워크 탭에서 많은 API 요청이 Preflight에서 실패하고 있었다.이에 따라 서버 응답에 문제가 있을 가능성이 있다고 생각했다. 언제부터 이런 이슈가 발생했는가? - 롤백을 해보자 !정상적으로 작동하던 main 브랜치에 갑자기 이슈가 발생했으니,병합된 특정 ..
![]()
GIT은 기본적으로 독립적인 히스토리를 병합하지 않는다. 문제 상황시스템 프로그래밍 실습에서, 팀 프로젝트를 하며 4개의 라즈베리파이를 사용했다.팀원들은 각자 하나의 파이에 대응하는 브랜치를 생성해 독립적으로 작업을 진행했다.문제는 최종 코드를 제출하기 위해 각 브랜치를 main 브랜치로 병합하는 과정에서 발생했다.깃허브에서 아래와 같은 메시지가 출력되며 PR 생성이 불가능했다.There isn't anything to compare.main and rfid-and-pir are entirely different commit histories PR이 아예 올라가지 않는 상황이었고, 깃허브 웹 인터페이스만으로는 문제를 해결할 수 없었다.로컬 환경에서 CLI(Command Line Interface)로 간..
