분류 전체보기141 [React] UUID - Date.now(), random()없이 고유한 key값 생성하기 리액트 컴포넌트 내에서 배열을 맵핑하여 리스트를 생성하던 도중 Key값과 관련하여 문제상황에 직면하였다. {filters.map((filter) => ( ))} 고유의 key값들을 부여하기 위해 Date.now()함수를 사용했지만, 동시다발적으로 여러개의 컴포넌트를 한번에 return하다보니 key값이 중복되는 상황이 발생한 것. 이를 해결하기 위해 Date.now()나 random()함수를 사용하지 않고 고유한 Key값을 가져올 수 있는 방법을 찾아보았다. UUID 라이브러리 설치 UUID : Universal Unique Identifier(범용 단일 식별자) 이다. uuid함수를 호출하면 랜덤으로 생성된 문자열을 만들어 준다. 이것을 이용하여 고유의 key값을 생성한다. npm install uui.. 2022. 11. 6. [HTML5] Input pattern으로 유효성 검사하기 HTML5 태그 pattern 정규 표현식 모음 1. 숫자만(공백x) 2. 대소문자 3. 소문자 4. 대소문자 or 숫자 5. 소문자 or 숫자 6. 소문자 && 숫자 && 8~16자리 숫자 (아이디 유효성검사) 7. 소문자 && 숫자 && 특수문자 && 8~16자리 숫자 (패스워드 유효성검사) 8. 대소문자 && 숫자 && 특수문자 && 8~16자리 숫자 (패스워드 유효성검사) 2022. 11. 2. [Javascript]정규표현식을 사용한 유효성검사 자주 사용하는 정규 표현식 모음 1. 기본 /^[ ]$/ 3. 숫자만 /^[0-9]$/ 4. 영문만(대소문자) /^[a-zA-Z]$/ 4. 소문자만 /^[a-z]$/ 5. 영문(대소문자) + 숫자 /^[a-zA-Z0-9]$/ 6. 영문(대소문자) + 숫자 + 길이 1~10자리 사이의 문자열 /^[a-zA-Z0-9]{1,10}$/ >>> 영문 포함 + 숫자 포함 + 길이 1~10자리 사이 문자열(반드시 모두 포함) const regexId = /^[a-z0-9](?=.*[a-z])(?=.*\d)[a-z0-9]{5,11}$/; 8. 소문자, 숫자, 특수문자 "-","_" 로만 구성된 길이 1~10자리 사이의 문자열 /^[a-z0-9_-]{1,10}$/ 9. 모든 특수문자 체크 /[\{\}\[\]\/?.,;:.. 2022. 11. 2. [React]리액트(React)에서 벡터이미지(SVG)사용하는 방법 벡터 이미지(SVG) 장점 - SVG : XML(기계 및 사람 모두 해독할 수 있고 인터넷 전반에 널리 사용되는 마크업 언어)을 기반으로 하는 ‘확장 가능한 벡터 그래픽’ 포맷이다. 인덱싱, 검색 및 스크립팅이 가능한 웹에서 유용하다. 간단하게 코드로 이루어진 이미지다. - 그밖에 벡터 파일 : ai, pdf, eps 등 - 파일 용량이 작다. - 벡터 형식으로 무한한 확장이 가능하다(고화질, 크기와 해상도에서 자유롭다) - CSS를 통해 스타일링 등 변경 조작 등이 가능하다. 벡터 이미지(SVG) 단점 - 디테일한 사진 작업에는 부적합 하다. 픽셀 수가 적기 때문에 비교적 간단한 디자인의 로고나 아이콘, 일러스트 등에 적합하다. (사진보다는 그래픽, 사진일 경우 JPEG 등이 더 적합) - 호환성 문제.. 2022. 10. 30. HTML : 폼(Form)에 대한 이해 [ 폼 태그 동작방법 ] 1. 폼 안의 데이터를 웹 서버로 전송 2. 웹 서버는 받은 폼 데이터를 웹 프로그램에 전송 3. 웹 프로그램에서 폼 데이터 처리 후 새로운 html페이지를 웹 서버에 보냄 4. 브라우저는 새 html페이지를 보여줌 [ 폼 태그 속성 ] name, method, action, target 등이 있다. name : 폼을 식별하기 위한 이름 지정 method : 폼을 서버에 전송할 http메소드를 정함(get, post) action : 폼을 전송할 서버 쪽 스크립트 파일을 지정 target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정 accept-charset : 폼 전송에 사용할 문자 인코딩 지정 [ GET과 POST ] 폼을 서버에 전송할.. 2022. 10. 27. Git · GitHub 삭제한 커밋(commit) 복구하기 [ 삭제한 커밋 복구하는 방법 ] 1. git reflog 명령어로 기록 찾기 먼저 git reflog 명령어로 그동안 기록해온 목록들을 가져온다. git reflog 되돌리고 싶은 시점을 찾은 후, 2. git reset --hard [복구할 시점] 복구할 시점으로 git을 reset한다. git reset --hard e4c6cca // 복구할 시점 복구가 완료되었다. 3. git push 복구된 커밋을 다시 push해 준다. 기존에 커밋했던 날짜대로 커밋이 무사히 복구된 것을 확인할 수 있다. 커밋 복구 완료! 2022. 7. 1. 이전 1 ··· 18 19 20 21 22 23 24 다음 728x90 반응형
