전체 글 검색 결과

해당 글 234건

[Legacy][React] react-hook-form 배열 다루기 - 2 (useFieldArray)

[React] react-hook-form 배열 다루기 (useFieldArray) react-hook-form에서 배열을 다룰 때는 useFieldArray hook을 사용하면 된다. 그러나 이 hook을 사용할 땐 주의할 점이 있는데 우선 안되는 코드를 살펴보고 잘 되는 코드를 확인해보자. (참고 : 이전 게시글에서 소개한 초기값, 출력과 같은 부분 설명은 제외함.) 수정 전 코드 import { Controller, useFieldArray, useForm } from "react-hook-form"; // # 초기값 const initValue = { numbers: [] }; const Basic = () => { const { control, handleSubmit } = useForm({ m..
기타 (+ Legacy)/Legacy 2021. 10. 14. 07:29

[Legacy][React] react-hook-form 소개 및 사용법 - 1

[React] react-hook-form 소개 및 사용법 - 1 React 뿐만이 아니라 웹, 앱 등 플랫폼을 개발한다면 form을 사용해야 하는 경우가 많이 있을 것이다. React에서 form을 다룰 때 사용하는 라이브러리가 여러 개 있지만 이번 게시글에서는 react-hook-form을 다루어보며 알아보도록 하자. 해당 게시글에 사용된 react-hook-form은 Version 7이니 참고하면 좋을 것 같고, react-hook-form의 자세한 소개 내용은 react-hook-form 공식 홈페이지에서 확인할 수 있다. 홈페이지 이동하기 다루는 내용 당연히 모든 내용을 여기서 다룰 수는 없다. 그래도 이 게시글 시리즈를 보고 난 후 react-hook-form에 대한 방향성을 얻어가 프로젝트에..
기타 (+ Legacy)/Legacy 2021. 10. 13. 07:37

[React] 특정 컴포넌트 프린트 하기

JavaScript에서 프린트를 할 때 사용하는 함수는 window.print()이다. 그러나 이 함수의 문제는 현재 보고 있는 페이지 전체를 프린트한다는 것이다. 만약 특정 컴포넌트만 프린트 하고 싶을 땐 어떻게 할까? react-to-print npm 모듈을 사용하면 쉽게 할 수 있다. 간단하게 사용법을 알아보자. react-to-print 아주 간단한 컴포넌트를 생성하고 프린트까지 해보는 예시를 다루어 보자. 우선 react-to-print 모듈을 설치해주자. 명령어 : npm install react-to-print / yarn add react-to-print 설치했다면 아래 2개의 컴포넌트를 생성해주자. SimpleComponent는 프린트 될 컴포넌트이고, App 컴포넌트를 프린트 명령할 컴..
기타 (+ Legacy)/Legacy 2021. 10. 12. 07:51

[HTML, CSS] input type number 시 버튼 없애기

input element에서 number type을 사용하면 위, 아래 버튼을 누를 수 있게 되어 있다. 그러나 이 버튼이 필요 없는 경우가 많이 있는데 css로 해당 버튼 삭제 방법을 알아보자. 적용하기 기존 기존 input element에서 type=number 값을 준 경우 위 이미지와 같이 오른쪽에 버튼이 표시된다. 저 버튼을 css로 없애보자. 아래 코드 참고. input::-webkit-inner-spin-button { appearance: none; -moz-appearance: none; -webkit-appearance: none; } 위 css만 추가해주면 type=number 인 경우에도 버튼이 보이지 않게 된다. 마지막 해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 ..
공유/HTML, CSS 2021. 10. 11. 07:37

JavaScript - 조건식 줄이기 [Tip]

JavaScript, Java 언어 등 조건식을 사용할 때, 너무 길어지는 경우가 있다. 예를들어보자. [기존 코드] if ([1, 2, 3, 4, 5, 6].includes(num)) { console.log("numbers"); } 위와 같은 코드의 경우 너무 길어져 가독성이 좋지 않다. 만약 코드가 더 길어지는 경우 아래와 같이 변경이 된다. [변경 코드] const num = 0; if (num === 1 || num === 2 || num === 3 || num === 4) { console.log("numbers"); } 이전보다는 이해하기 쉽게 변했다. 이 방식의 가독성을 좋아하는 사람도 있겠지만 필자는 이것보단 아래 방식이 더 좋은 것 같다. [완성 코드] if ( num === 1 || ..
공유/JavaScript, TypeScript 2021. 10. 9. 07:47