개발자(진) 옞

[우테코 레벨2 페이먼츠] input 자동 포커스 autoFocus VS useEffect

우테코 레벨 2 페이먼츠 2단계 미션 중 다음과 같은 기능 요구사항이 있었다.입력 필드는 사용자의 입력이 완료되면 다음 필드로 자동으로 이동한다. 먼저 페이먼츠 미션의 기능을 간단하게 소개하자면,사용자에게 카드 정보를 입력받아 카드를 등록(여기서 등록이란, 모든 폼 정보가 유효한지 확인하고, 확인 버튼 클릭 시 카드 등록 완료 페이지로 넘어가는 행위를 말한다.)하는 서비스이다. 궁금하다면 요기서 사용해볼 수 있다! 위의 요구사항을 다른 말로 동적 입력 UI 구현이라고도 할 수 있다.페이먼츠 미션에서 동적 입력 UI를 구현하기 위해 신경 쓸 부분에는 크게 두 가지가 있었다. 1. 같은 input 내에서의 자동 포커스ex) 카드 번호 (카드 번호의 총 input은 4개이며, 올바른 값이 입력되면 다음 inp..

☄️ 문제 상황 폼 내에 카테고리를 선택할 수 있는 버튼이 존재했다.제출 버튼을 클릭할 때뿐만 아니라 카테고리 선택과 같은 일반 버튼을 클릭했을 때도 폼 제출 이벤트가 발생하는 문제에 마주쳤다.  ☄️ 문제 원인 HTML 표준에 따르면, 요소는 기본적으로 type="submit" 속성을 가진다.따라서, 버튼을 클릭하면 폼이 제출되는 이벤트가 발생하는 것이다.  ☄️ 해결 방법 두 가지가 있다. ☝🏻 e.preventDefault()를 사용해 폼 제출 방지e.preventDefault()란?이벤트가 발생했을 때, 브라우저의 기본 동작을 막는 메서드 주로 브라우저의 기본 동작 대신, 사용자가 정의한 동작을 수행하고 싶을 때 사용한다. 예시 코드const handleMaxUsersClick = (e, nu..

☄️ 문제 상황 input 필드에 포커스 시, 밑줄이 왼쪽에서 오른쪽으로 채워지면서 보라색으로 변하는 애니메이션을 구현하고 싶었다.그러나, 포커스를 주었음에도 밑줄의 색상과 스타일이 변하지 않는 문제가 발생했다.  ☄️ 문제 원인 Tailwind CSS는 특정 요소에 포커스가 갔을 때, 인접한 다른 요소의 스타일을 변경하는 기능은 기본적으로 제공하지 않는다.문제는 input 요소에 포커스가 갈 때, 밑줄로 사용할 인접한 span 요소의 스타일이 변경되지 않는다는 점이었다.  ☄️ 해결 방법 Tailwind CSS의 peer 클래스를 사용했다.peer 클래스란?특정 요소에 상태 변화가 발생했을 때, 형제 요소의 스타일을 동적으로 변경할 수 있게 해주는 Tailwind CSS의 유틸리티 클래스  1. pee..

☄️ 문제 상황 로그인 폼에서 헬퍼 텍스트 색상이 동적으로 변환되지 않는 문제가 발생했다.유효하지 않은 입력인 경우에, 헬퍼 텍스트의 색상을 빨간색으로 변경하고 싶었는데 색상 변경이 되지 않았다.  ☄️ 문제 원인 Tailwind CSS로 색상을 지정할 때, 색상 이름 뒤에 숫자(ex. -500, -700)를 붙여야 한다.색상 이름만 지정하고, 숫자를 붙이지 않아서 발생한 문제였다.  ☄️ 해결 방법 1. Tailwind CSS의 색상 규칙 이해 색상 지정 시, 반드시 색상-숫자 형식을 사용해야 한다. (ex. red-500)숫자는 색상의 밝기를 나타내며, 50에서 900까지의 숫자를 지정해 줄 수 있다. 숫자가 높을수록 어두운 색상이다.  2. 숫자 추가 원하는 밝기의 숫자를 넣어준다. (ex. tex..

🤑https://www.acmicpc.net/problem/6236 내 풀이N, M = map(int, input().split())money = [int(input()) for _ in range(N)]s, e = max(money), sum(money)ans = 0while s mid: result = 0 total += 1 result += m if result > 0: total += 1 if total > M: s = mid + 1 else: e = mid - 1 ans = midprint(ans)  코드 설명s, e = max(money), sum(money)s: 인출할 금..

🎸https://www.acmicpc.net/problem/2343  내 풀이N, M = map(int, input().split())guitar = list(map(int, input().split()))s, e = max(guitar), sum(guitar)ans = 0while s mid: total += 1 current = 0 current += g if current > 0: total += 1 if total > M: # 강의 길이를 늘려야 함 s = mid + 1 else: e = mid - 1 ans = midprint(ans)  코드 설명s, e = max(guita..

🌳 https://www.acmicpc.net/problem/2805  내 풀이def cutter(): s = 0 e = max(trees) height = 0 while s mid: total += i - mid if total >= M: s = mid + 1 height = mid else: e = mid - 1 return heightN, M = map(int, input().split())trees = list(map(int, input().split()))print(cutter())  코드 설명 이진 탐색(이분 탐색) 문제였다. ✔️ cutter 함수 내s..

🎴https://level.goorm.io/exam/175909/%EC%B9%B4%EB%93%9C-%EB%AA%A8%EC%9C%BC%EA%B8%B0/quiz/1  시간 초과 난 코드N, M = map(int, input().split())all_cards = []cards = []ans = -1def card(): global ans complete = 0 for i in range(M): all_cards.append(int(input())) if len(set(all_cards)) == N and complete == 0: ans = i + 1 complete = 1card()print(ans) 수정한 코드N, M = map(int, input().split())all_cards = se..

⛓️https://www.acmicpc.net/problem/2785  내 풀이N = int(input())L = sorted(list(map(int, input().split())))ring = 0if len(L) 2: L[0] -= 1 if L[0] 0: ring += 1print(ring)  코드 설명 문제가 이해가 안 됐다 ..계속 헛다리 짚다가 결국 문제 해석을 위한 구글링 찬스point: 가능한 한 적은 고리를 사용해야 함, 하나의 긴 체인으로 모든 체인을 묶어야 함 가장 효율이 좋은 방식은 하나의 고리를 열어 양쪽으로 연결하는 것이다. 우선 두 가지 상황으로 나누어서 생각했다.1. 체인의 개수가 3 미만(2개)인 경우2. 체인의 개수가 3 이상인 경우..

🍪https://www.acmicpc.net/problem/20125  내 풀이def heart(): for i in range(N): for j in range(N): if cookie[i][j] == '*': return i + 2, j + 1 def left(x, y): count = 0 while y >= 0 and cookie[x][y] == '*': count += 1 y -= 1 return countdef right(x, y): count = 0 while y    코드 설명def heart(): for i in range(N): for..