Junvely 개발일기

리액트 컴포넌트 내에서 배열을 맵핑하여 리스트를 생성하던 도중 Key값과 관련하여 문제상황에 직면하였다. {filters.map((filter) => ( ))} 고유의 key값들을 부여하기 위해 Date.now()함수를 사용했지만, 동시다발적으로 여러개의 컴포넌트를 한번에 return하다보니 key값이 중복되는 상황이 발생한 것. 이를 해결하기 위해 Date.now()나 random()함수를 사용하지 않고 고유한 Key값을 가져올 수 있는 방법을 찾아보았다. UUID 라이브러리 설치 UUID : Universal Unique Identifier(범용 단일 식별자) 이다. uuid함수를 호출하면 랜덤으로 생성된 문자열을 만들어 준다. 이것을 이용하여 고유의 key값을 생성한다. npm install uui..

자주 사용하는 정규 표현식 모음 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. 모든 특수문자 체크 /[\{\}\[\]\/?.,;:..

벡터 이미지(SVG) 장점 - SVG : XML(기계 및 사람 모두 해독할 수 있고 인터넷 전반에 널리 사용되는 마크업 언어)을 기반으로 하는 ‘확장 가능한 벡터 그래픽’ 포맷이다. 인덱싱, 검색 및 스크립팅이 가능한 웹에서 유용하다. 간단하게 코드로 이루어진 이미지다. - 그밖에 벡터 파일 : ai, pdf, eps 등 - 파일 용량이 작다. - 벡터 형식으로 무한한 확장이 가능하다(고화질, 크기와 해상도에서 자유롭다) - CSS를 통해 스타일링 등 변경 조작 등이 가능하다. 벡터 이미지(SVG) 단점 - 디테일한 사진 작업에는 부적합 하다. 픽셀 수가 적기 때문에 비교적 간단한 디자인의 로고나 아이콘, 일러스트 등에 적합하다. (사진보다는 그래픽, 사진일 경우 JPEG 등이 더 적합) - 호환성 문제..

[⚙️Refactoring ] - 모듈화(module), 즉 리팩토링(Refactoring)과정을 단계별로 정리해 보았다. - 리팩토링의 장점 : 코드의 의미를 파악하기 쉽고 코드의 관리가 용이하며 가독성과 재사용성 등등을 개선시킬 수 있다. Refactoring 과정 1. 🛠️모듈화(Export, Import) : 파일을 작은 단위로 나누어 생성하고 모듈화 하고 객체지향적으로 코딩한다. Export, Import하여 외부로 노출시키고 가져와서 활용한다. 모듈화의 장점 : 하나의 파일에 많은 코드를 작성하면 코드의 의미 파악, 관리, 재사용성이 떨어진다. 각각의 기능별로 파일을 분리하여 모듈화시키면 코드를 효율적으로 관리할 수 있으며 재사용성도 높아진다. ex) HTML에서 큰 섹션 단위인 game과 p..

[ 쇼핑몰 미니게임 클론코딩 ] 1. HTML / CSS 정적인 페이지 완성시키기 ellie와 내 코드를 비교한 결과 및 보완해야 할 점 - 일정한 수치값을 변수로 사용하여(통일성 있게) 재사용 한다. - 각각의 태그별 class를 거의 대부분에 사용하여 css를 적용시킨다. - 가로 세로정렬 모두 flex를 사용해 더 간편하게 정렬하였다. - 쇼핑 리스트 ul>li 하나를 먼저 구현해 놓고 추후 JS에서 동적으로 변경하였다. - section.class 사용하여 섹션을 구분한다. (div_con사용x) - div_con 감싸지 않고 바로 tag 사용(ex, 바로 ul>li사용, 간단한 프로젝트라 그런 것 같다.) 2. data폴더 안에 data.json 파일 생성하여 data 보관하기 JS에서 배열을 ..

[ async · await ] Promise를 조금 더 간편, 간결하게 동기적으로 실행되는 것처럼 보이도록 도와주는 것 > 깔끔하게 Promise 사용하는 법 Promise chaining(.then)을 계속 사용하면 코드가 난잡해지는 것을 좀 더 간편한 API인 async와 await을 이용하여 동기식으로 코드를 순서대로 작성한 것처럼 작성할 수 있도록 도와준다. 기존에 존재하는 Promise 위에 간편한 API를 제공 한다. > *syntactic sugar(ex : Class > 프로토타입을 베이스로하여 그 위에 살짝 덧붙여진 것) Promise를 무조건 대체x > async를 사용할 경우에 따라 더 깔끔한 경우에 사용한다. *syntactic sugar : 문법에 설탕을 뿌려 더 달콤하게 사용한..