일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- JVM
- jsp
- springboot
- db
- ReactJS
- laravel
- it
- redis
- ubuntu
- elasticsearch
- 요리
- AWS
- php
- Git
- Web Server
- Design Patterns
- devops
- Spring
- linux
- Spring Boot
- Oracle
- IntelliJ
- java
- Spring Batch
- MySQL
- tool
- Gradle
- javascript
- jenkins
- 맛집
- Today
- Total
목록Javascript & HTML & CSS (70)
아무거나
const pinCode = '211112' if (/(\w)\1\1\1/.test(pinCode)) { console.log('4자리 이상 연속된 중복 문자 있음') } else { console.log('4자리 이상 연속된 중복 문자 없음') } // 결과: '4자리 이상 연속된 중복 문자 있음'
// html // css ( 숫자입력시 type=password 처럼 변형 시키는 css ) input[type=numeric] { -webkit-text-security:disc; }
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 왠만하면 커스텀 팝업같이 표시해야 하는 경우는 제일 상위 컴포넌트 레벨에 선언하고 하위 컴포넌트로 전달받아 사용하도록 하자.
/* mobile */ @media all and ( min-width: 390px ) and ( max-width: 1024px ) { /* all device */ .new-wrap-write li {width:24.3%;} } @media all and ( min-width: 360px ) and ( max-width: 640px ) { /* galaxy s5 */ .new-wrap-write li {width:23.8%;} } @media all and ( min-width: 768px ) { /* tablet */ .new-wrap-write li {width:24.3%;} } @media all and ( min-width: 320px ) and ( max-width: 568px ) { /* ..