본문 바로가기

React

 (115)
[React] Story Book 사용법(Test하는 방법) storybook/testing-library 을 이용해서 test를 할것임(storyBook을 설치할 때 이미 같이 깔려있음) 1. package.json파일에 아래 내용을 추가한다. (rootDir안에 있는 컴포넌트에서 test할 것/ !는 test를 하는것을 제외시킴(stories파일은 컴포넌트파일이 아니라서 test를 할 필요가 없어서 제외시킴)) "jest": { "collectCoverageFrom": [ "/src/components/**/*.{ts,tsx}", "!**/node_modules/**", "!**/*.stories.{ts,tsx}" ] } 2. package.json파일에 아래 내용을 추가한다. "test": "react-scripts test", "test:coverage":..
[React] Story Book 이란? (설치, 실행) Story Book 이란? UI 컴포넌트를, 독립적으로 분리해 개별 관리, 테스트를 도와주는 도구 왜 사용하는가? 장점 1. 개별 정돈 편리 2. 재사용성을 고려한 디자인 & 개발 가능 3. 테스트 용이 재사용성의 필요성? 엔지니어의 관점 1. 불필요한 작업을 줄여준다. 2. 안정적으로 검증된 코드를 사용할 수 있따. 3. 캡슐화를 통해 테스트가 쉬워진다. (분리시켜 독립적으로 유지하면 그것만 테스트하면 되니까) 디자이너의 관점 1. 디자인 변경시 쉽게 수정 가능하다. 2. 유저에게 일관된 경험을 제공한다. 3. 개발자와의 소통이 쉬워진다. 기타장점 1. 모던 웹의 구성 요소들에 익숙해진다. 2. 재사용성을 고려한 효율적 업무가 가능하다. 3. 기획과 업무의 진행이 빨라진다. 1. 스토리북 설치 npx ..
[React] Form 유효성 검사 : 정규식 Regex 의미와 패턴표 정규표현식 (Regex) 정규표현식(正規表現式, Regular Expression)은 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 '검색'하거나 '치환'하는 과정을 매우 간편하게 처리 할 수 있도록 하는 수단이다. "정규식"과 "정규표현식"은 같은 말입니다. "정규표현식"을 줄여서 "정규식"이라고 합니다. 영어로는 "Regular Expression (레귤러 익스프레션)"이라고 하는데, 이것이 너무 길기에, Regexp 또는 더 줄여서 Regex 라고 간편히 기술합니다. 즉 정규식이라는 것은 "문자열을 다루는 공식". 수학에 숫자를 다루는 공식이 있듯이, 프로그래밍에서 "ABC" "가나다라" 등의 문자열을 처리할 때 사용하는 것입니다: 참고사이트 정규식 패턴(표현식) 표현식의 다양한 특수기호..
[React] className 중복 적용(Error Class)할 때 간편한 방법 Error 인지 체크해서 Err일 경우에는 기존 ClassName뒤에 붙이고 기존 클래스명도 함께 들어가도록 만들고 싶었다. `` 백틱을 사용하여 아래와 같이 작성했다. className={className + (isError ? `Err ${className}` : '')} 아래와 같이 Err일 경우에는 2개의 Class가 적용된다. [react] className을 조건에 따라 여러개 다이나믹하게 선언하기 React 앱에서 클래스 이름을 조건에 따라 다이나믹하게 설정하는 방법을 알아봅니다. 어떻게 하면 될까요? webisfree.com
[React] Form 유효성 검사 : Input 글자 수 제한 글자수를 maxLength에 넣을 경우 글자 수가 간단하게 제한 되지만 오류가 생길 수 있다. 아래와 같이 Number 타입에서는 오류가 생길 수 있어서 글자 수를 10으로 제한 두었지만 1개가 더 입력된다. 원인: 한글과 영어의 byte 차이 때문에 일어나는 현상이다. 한글은 2byte 영어는 1byte 로 표현되기 때문이다. 또한 기기마다 작동이 안되는 오류가 발생할 수 있으므로 onInput을 통해 이중 코드를 작성하여 오류를 방지했다. oninput 적용 값이 바뀔 때마다 발생하는 이벤트는 oninput이벤트이다. onInput을 활용해 글자 수를 slice해준다. ... const handleChangeRegex = ( e: React.ChangeEvent /* | React.ChangeEven..
[React] Form 유효성 검사 : RegExp 객체 [JS] RegExp 객체 RegExp 객체 RegExp 객체는 정규 표현식을 구현한 자바스크립트 표준 내장 객체입니다. RegExp 객체를 생성하는 문법은 다음과 같습니다. 문법 new RegExp(검색패턴[, 플래그]); 1. 검색 패턴을 나타내는 정규 표현식은 따옴표나 슬래시(/)로 감싸야 합니다. 2. 기본 검색 설정을 변경할 수 있는 플래그는 필요할 때만 전달할 수 있습니다. RegExp.prototype 메소드 모든 RegExp 인스턴스는 RegExp.prototype으로부터 메소드와 프로퍼티를 상속받습니다. 이렇게 상속받은 RegExp.prototype 메소드를 사용하여 정규 표현식을 표현할 수 있습니다. 1. RegExp.prototype.exec() 2. RegExp.prototype.t..
[React] react-scroll 라이브러리를 이용한 클릭시 스크롤 이동 구현 https://www.npmjs.com/package/react-scroll react-scroll A scroll component for React.js. Latest version: 1.8.9, last published: 4 months ago. Start using react-scroll in your project by running `npm i react-scroll`. There are 640 other projects in the npm registry using react-scroll. www.npmjs.com 설치하기 (Reat+TS 를 이용해 구현 중이라 둘 다 설치하였다.) npm i react-scroll //React npm i @types/react-scroll //TypeS..
[React] Top Button 만들기 (클릭시 최상단으로 이동) 클릭시 화면의 최상단으로 이동하는 코드이다. behavior = auto , smooth behavior는 두가지로 나뉘는데 auto = 위치로 바로 데려다 주고 smooth는 부드럽게 끌어올린다. export default function TopBtn() { const handleClick = () => { window.scrollTo({ top: 0, behavior: 'smooth', }); }; return ( ); } https://velog.io/@jahommer/React-Top%EB%B2%84%ED%8A%BC-scroll-to-top%EB%A7%8C%EB%93%A4%EA%B8%B0 React - Top버튼 (scroll to top)만들기 탑 버튼을 만들기 전에 구글링으로 검색하여 여러 방..

티스토리툴바