개발자(진) 옞

☄️ 문제 상황 폼 내에 카테고리를 선택할 수 있는 버튼이 존재했다.제출 버튼을 클릭할 때뿐만 아니라 카테고리 선택과 같은 일반 버튼을 클릭했을 때도 폼 제출 이벤트가 발생하는 문제에 마주쳤다.  ☄️ 문제 원인 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..