본문 바로가기

분류 전체보기

 (265)
[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..
[TS] Form Regex 정규식 표현의 Type은? RegExp Regex "정규식"과 "정규표현식"은 같은 말입니다. "정규표현식"을 줄여서 "정규식"이라고 합니다. 영어로는 "Regular Expression (레귤러 익스프레션)"이라고 하는데, 이것이 너무 길기에, Regexp 또는 더 줄여서 Regex 라고 간편히 기술합니다. "정규표현식"이든 "Regular Expression"이든, 단어만 보고서는 무슨 뜻인지 알 수 없게 되어 있는데, 정규식이라는 것은 쉽게 말해서, "문자열을 다루는 공식"입니다. 수학에 숫자를 다루는 공식이 있듯이, 프로그래밍에서 "ABC" "가나다라" 등의 문자열을 처리할 때 사용하는 것입니다: 참고사이트 Type 적용 Form Regex 를 통해 유효성 검사를 하는 중 이것에 대한 Type을 작성해야했다. const email = ..
[JavaScript] 객체의 key 와 value 가져오기 객체의 key 와 value를 각각 가져오고 싶었던 중 아래 코드를 발견하였다. 이걸 이용하면 간단하게 가져올 수 있다..!!😲 key 가져오기 Object.keys() Object.keys() 메서드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다. console.log(Object.keys(객체)); value 가져오기 Object.values() Object.values() 메소드는 전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴합니다. 이 배열은 for...in 구문과 동일한 순서를 가집니다. (for in 반복문은 프로토타입 체인 또한 열거한다는 점에서 차이가 있습니다.) console.log(Object..

티스토리툴바