전체 글 썸네일형 리스트형 [React] Create-React-App없이 React 개발 환경 셋팅하기 Create-React-App React를 처음 배우면서, 항상 CRA(Create-React-App)를 사용하여 리액트 앱을 생성하였다. React로 개발을 시작하기 위해서는 웹팩(Webpack), 바벨(Babel), 번들러(Bundler), 로더(Loader), 플러그인(Plugin), 린트(Eslint), dependencies와 devDependencies 등등 하나하나 배우고 설정해야 할 기술들이 굉장히 많은데 리액트 초심자로서 이것들을 일일히 다 숙지하고 프로젝트를 시작하기에는 실질적으로 힘들기 때문이었다. Create-React-App의 장점은 CRA로 앱을 생성하면 보편적으로 개발자들이 많이 사용하는 라이브러리 등이 대부분 셋팅 되어있기 때문에, 이후 추가적으로 필요한 라이브러리 등만 설치.. 더보기 [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.. 더보기 [HTML5] Input pattern으로 유효성 검사하기 HTML5 태그 pattern 정규 표현식 모음 1. 숫자만(공백x) 2. 대소문자 3. 소문자 4. 대소문자 or 숫자 5. 소문자 or 숫자 6. 소문자 && 숫자 && 8~16자리 숫자 (아이디 유효성검사) 7. 소문자 && 숫자 && 특수문자 && 8~16자리 숫자 (패스워드 유효성검사) 8. 대소문자 && 숫자 && 특수문자 && 8~16자리 숫자 (패스워드 유효성검사) 더보기 [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. 모든 특수문자 체크 /[\{\}\[\]\/?.,;:.. 더보기 [React]리액트(React)에서 벡터이미지(SVG)사용하는 방법 벡터 이미지(SVG) 장점 - SVG : XML(기계 및 사람 모두 해독할 수 있고 인터넷 전반에 널리 사용되는 마크업 언어)을 기반으로 하는 ‘확장 가능한 벡터 그래픽’ 포맷이다. 인덱싱, 검색 및 스크립팅이 가능한 웹에서 유용하다. 간단하게 코드로 이루어진 이미지다. - 그밖에 벡터 파일 : ai, pdf, eps 등 - 파일 용량이 작다. - 벡터 형식으로 무한한 확장이 가능하다(고화질, 크기와 해상도에서 자유롭다) - CSS를 통해 스타일링 등 변경 조작 등이 가능하다. 벡터 이미지(SVG) 단점 - 디테일한 사진 작업에는 부적합 하다. 픽셀 수가 적기 때문에 비교적 간단한 디자인의 로고나 아이콘, 일러스트 등에 적합하다. (사진보다는 그래픽, 사진일 경우 JPEG 등이 더 적합) - 호환성 문제.. 더보기 HTML : 폼(Form)에 대한 이해 [ 폼 태그 동작방법 ] 1. 폼 안의 데이터를 웹 서버로 전송 2. 웹 서버는 받은 폼 데이터를 웹 프로그램에 전송 3. 웹 프로그램에서 폼 데이터 처리 후 새로운 html페이지를 웹 서버에 보냄 4. 브라우저는 새 html페이지를 보여줌 [ 폼 태그 속성 ] name, method, action, target 등이 있다. name : 폼을 식별하기 위한 이름 지정 method : 폼을 서버에 전송할 http메소드를 정함(get, post) action : 폼을 전송할 서버 쪽 스크립트 파일을 지정 target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정 accept-charset : 폼 전송에 사용할 문자 인코딩 지정 [ GET과 POST ] 폼을 서버에 전송할.. 더보기 Git · GitHub 삭제한 커밋(commit) 복구하기 [ 삭제한 커밋 복구하는 방법 ] 1. git reflog 명령어로 기록 찾기 먼저 git reflog 명령어로 그동안 기록해온 목록들을 가져온다. git reflog 되돌리고 싶은 시점을 찾은 후, 2. git reset --hard [복구할 시점] 복구할 시점으로 git을 reset한다. git reset --hard e4c6cca // 복구할 시점 복구가 완료되었다. 3. git push 복구된 커밋을 다시 push해 준다. 기존에 커밋했던 날짜대로 커밋이 무사히 복구된 것을 확인할 수 있다. 커밋 복구 완료! 더보기 자바스크립트(javaScript)_리팩토링(Refactoring)단계 정리 [⚙️Refactoring ] - 모듈화(module), 즉 리팩토링(Refactoring)과정을 단계별로 정리해 보았다. - 리팩토링의 장점 : 코드의 의미를 파악하기 쉽고 코드의 관리가 용이하며 가독성과 재사용성 등등을 개선시킬 수 있다. Refactoring 과정 1. 🛠️모듈화(Export, Import) : 파일을 작은 단위로 나누어 생성하고 모듈화 하고 객체지향적으로 코딩한다. Export, Import하여 외부로 노출시키고 가져와서 활용한다. 모듈화의 장점 : 하나의 파일에 많은 코드를 작성하면 코드의 의미 파악, 관리, 재사용성이 떨어진다. 각각의 기능별로 파일을 분리하여 모듈화시키면 코드를 효율적으로 관리할 수 있으며 재사용성도 높아진다. ex) HTML에서 큰 섹션 단위인 game과 p.. 더보기 이전 1 ··· 13 14 15 16 17 18 다음
