input7 CSS - input [type="range"] 투명하게 만들기 (feat. 브라우저 별 속성 -web-kit-appearance) 슬라이더 바를 만들기 위해 을 사용하였다. 그랬더니 요런 귀여운 슬라이더가 나왔다. 하지만 native 태그를 사용하게 되면 브라우저별 호환성이 좋지 않아 ui 가 깨진다. (특히 IE10 에서는 아예 호환x) 그래서 input 을 투명하게 만들어 기능만 동작하게 하고 + 그 위에 예쁜 슬라이더 ui 를 올려서 꼭두각시 노릇을 하게 만드려고 한다. CSS - input [type="range"] 투명하게 만들기 (feat. 브라우저 별 속성 -web-kit-appearance) HTML setValue(e.target.valueAsNumber)} /> CSS input[type:range] { // 인풋창 투명하게 만들기 appearance: none; /* 공통 */ // 인풋창 포커스 시 아웃라인 제.. 2022. 9. 5. React(79) 숫자 세자리 마다 콤마 붙이기(comma seperator) 입력창에서 기본중의 기본! 숫자입력시 세자리마다 콤마를 붙여보자. toLocaleString() 을 붙이면 해결 ! ....?? 이 안되기도 한다. (우리가 사는 세상은 그렇게 호락호락하지 않다 🥲) 숫자를 string 형으로 입력받아야만 하는 경우가 있다. 이럴 때 onChange 메소드 안에서 string → number 로 형변환을 해서 toLocaleString() 을 사용해도 콤마( , ) 가 추가되는 순간 문자열로 인식되기 때문에 제대로 동작을 안하는 이슈가 생겨 버린다. 이런 경우 내장함수보다는 정규식을 사용하는 것이 더 좋다! 그럼 이런 까탈스런 경우를 해결하러 가봅시다 결과화면 미리보기 React(79) 숫자 세자리 마다 콤마 붙이기(comma seperator) 여기서 관건은 onCha.. 2022. 8. 13. React(72) map()으로 input 추가 삭제하기 CRUD 를 그리다 보면 의 자유로운 추가 삭제 기능이 필요할 때가 있다. 비슷한 기능을 3번째 구현하면서, 잊지 않기 위해 기록으로 남겨본다. React(72) map()으로 input 추가 삭제하기 1. Input 입력값이 들어갈 인터페이스 준비 interface InputItem { id: number; title: string; } 2. 준비물 변수들 선언 일단 id 를 동적으로 추가해줄 변수(nextID) 와 input 배열을 담을 변수(inputItems) 를 선언한다. const nextID = useRef(1); const [inputItems, setInputItems] = useState([{ id: 0, title: '' }]); 3. 추가 삭제 기능 구현 두말하면 잔소리다. 추가 삭.. 2022. 5. 26. React - Input 실행오류 A component is changing an uncontrolled input to be controlled. 수정 페이지 에서 input 창에 입력된 값을 동적으로 받아오다가 아래와 같은 워닝을 받게 되었다. 이 에러는 uncontrolled input 이었다가 → controlled input 으로 바뀌면서 생긴 에러이다. 한마디로 초기값이 undefined 이었다가 → 렌더링 후에 값이 들어와 바뀌었기 때문이다. 리액트 공식문서와 블로그를 참고하여 해결하여 보자 React는 두 가지 방식으로 form 입력을 처리합니다. React에 의해 입력값이 제어되는 엘리먼트를 제어 컴포넌트(controlled component) 라고 합니다. 사용자가 제어 컴포넌트에 데이터를 입력하면 변경 이벤트 핸들러가 호출되고 코드가 (업데이트된 값으로 다시 렌더링에 의해) 입력의 유효 여부를 결정합니다. 다시 렌더링하지 않으면 .. 2022. 3. 6. React(51) 체크박스 에러 You provided a 'checked' prop to a form field without an 'onChange' handler 문제상황 리액트에서 를 쓸 때, onClick 핸들러를 통해 조건에 따라 checked 값을 주는 식으로 코딩하면 이런 에러 메시지가 발생한다. 이유는 checked 값을 핸들링하려면 onChange 핸들러를 사용해야 하기 때문이다. Warning: You provided a `checked` prop to a form field without an `onChange` handler. 해결방법 - onClick 핸들러를 없애고 onChange 핸들러를 사용한다. - onClick 핸들러를 그대로 두고 싶으면 readonly 키워드를 붙이거나 checked 속성 대신 defaultChecked를 사용한다. → 나의 경우에는 리드온리를 붙여줬더니 깨끗하게 해결되었다. 2021. 10. 18. CSS - input 체크박스 테두리 스타일 변경하기 요즘 새발자는 UI 를 열심히 하고 있다. (쑥쑥 무럭무럭자라라) input 의 기본 체크박스 안의 테두리 스타일을 변경하는 미션을 맡아 그 기록을 남겨보았다. (미래의 나는 여전히 해멜 것을 알기에... ) 자 그럼 시작해보자 ! 결과화면 미리보기 일단 구현된 결과물이다. 기본 체크박스는 테두리가 회색으로 되어있다. 하지만 나는 테두리가 없는 깔끔한 디자인을 구현하였다. JavaScript - CSS input 체크박스 테두리 스타일 변경하기 현실은 css 에서 바로 변경이 안된다. 😭 after 속성을 사용하여 현실에서는 적용이 안되는 가상의 스타일을 지정해주자. HTML CSS ** 참고로 IE 는 appearance 속성이 안먹었던 기억이 가물가물하게 나니, 혹시 IE 구버전 대응을 해야한다면 참.. 2021. 9. 29. javaScript - input type="file" 특정 파일확장자 이미지 업로드 이미지 업로드 기능을 구현 중이다. 특정 파일확장자만 업로드 하고 싶다면 에 accept 속성을 추가하자 ! // gif, jpg, png 파일만 보여줌 // 모든 오디오 파일을 보여줌 // 모든 비디오 파일을 보여줌 // 모든 이미지 파일을 보여줌 파일업로드 버튼을 눌러 파일선택창이 나타나면 !! accept 로허락한 파일만 마우스 클릭이 가능하다. 2021. 5. 1. 이전 1 다음 반응형
