일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Design Patterns
- javascript
- AWS
- linux
- jsp
- java
- Spring
- MySQL
- ubuntu
- jenkins
- Web Server
- it
- Gradle
- Git
- Oracle
- Spring Boot
- db
- tool
- JPA
- php
- laravel
- elasticsearch
- devops
- 요리
- IntelliJ
- docker
- 맛집
- ReactJS
- springboot
- redis
- Today
- Total
목록javascript (57)
아무거나
값 입력 후 포커싱 자동 이동 예제(ex:핀 번호) 하기 HTML의 input 태그 설정을 사용하게되면 모바일에서 숫자만 입력 가능한 키패드가 표시된다. // react + typescript ... class PinLogin extends React.Component { ... pinCodeNumFocus2: React.RefObject pinCodeNumFocus3: React.RefObject pinCodeNumFocus4: React.RefObject pinCodeNumFocus5: React.RefObject pinCodeNumFocus6: React.RefObject constructor(props) { super(props) this.state = {} this.pinCodeNumFocus2..
const pinCode = '211112' if (/(\w)\1\1\1/.test(pinCode)) { console.log('4자리 이상 연속된 중복 문자 있음') } else { console.log('4자리 이상 연속된 중복 문자 없음') } // 결과: '4자리 이상 연속된 중복 문자 있음'
React Hook을 이용한 Functional Component 구현 // tsx import * as React from 'react' ... interface IProps { history?: History, } interface IStateProps {} interface IState { testVal: string, } type Props = IProps & IStateProps const Home: React.FC = ({ history }) => { const [state, setState] = React.useState({ testVal: 'TEST', }) const { testVal } = state // componentDidMount React.useEffect(() => {} //..
const obj = {key1: "value1", key2: "value2"}; Object.assign(obj, {key3: "value3"}); // {"key1":"value1","key2":"value2","key3":"value3"} console.log(JSON.stringify(obj))
Number값 들어온 값에 따라 0표시 제어하는 함수(개수 입력에 용이하다) // 들어온 값이 0으로 시작되면 0을 잘라내는 함수 let input = e.target.value if (input.toString().startsWith('0')) { input = input.slice(1) }
Scroll Down 구현 // Render DOM // ref가 지정된 곳으로 포커싱이 될 예정이다. forEach({ .... }) // 스크롤 다운 함수 async handleScrollDown() { if (this.scrollLocationRef && this.scrollLocationRef.current) { this.scrollLocationRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' }) } } // 실행되는 함수 // 동적 추가할 때 마다 새로 생성된 행의 Ref를 찾을 수 없어서 우선 재귀함수로 해결.. (__) this.handleScrollDown().then(() => { this.handleScrollDown(..
yarn package install 도중에 아래와 같은 현상이 발생하였다. $ yarn yarn install v1.5.1 $ node tools/nodeVersionCheck.js [1/5] 🔍 Validating package.json... [2/5] 🔍 Resolving packages... [3/5] 🚚 Fetching packages... info There appears to be trouble with your network connection. Retrying... info There appears to be trouble with your network connection. Retrying... info There appears to be trouble with your network ..
ex) path: /boards/:boardNo const boardNo = match.params.boardNo ex) path: /detail/:type const type = match.params.type
history.push() 가 동작이 안하는 경우가 있다. 이럴 경우 컴포넌트 설계나 선언부 측에 문제가 있다. 하지만 급하게 수정해야 할 경우 아래와 같이 작업하자. // react 링크 이동 안될때 태그를 활용 // react 페이지 reload 안될 때 꼼수(주소가 동일할 경우 발생) -> 해당 방법은 진짜 급한경우가 아니면 절대로 사용하지 말자.. route 에서 redirect를 이용 ex) /app/user/reload -> /app/user 왠만하면 커스텀 팝업같이 표시해야 하는 경우는 제일 상위 컴포넌트 레벨에 선언하고 하위 컴포넌트로 전달받아 사용하도록 하자.