본문 바로가기

전체 글

(55)
고유 식별자를 생성하는 uuid와 crypto.randomUUID 고유한 id가 필요할 땐 항상 uuid나 Date.now를 사용했었는데 다른 사람의 코드를 보고 crypto.randomUUID라는 것을 알게되었다.둘의 사용법과 특징에 대해 정리해보자 uuiduuid란 범용적으로 사용되는 고유 식별자이다. (UUIDs, Universally Unique Identifier) 우리가 많이 쓰는 uuid라이브러리는 UUID 정의와 같은 이름의 라이브러리이다.uuid는 다양한 버전이 있는데, 보통 무작위로 생성되는 Verson 4를 사용한다.import { v4 as uuidv4 } from 'uuid';console.log(uuidv4()); // '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d' crypto.randomUUIDcrypto.randomU..
flex, grid에서 자식요소에 스크롤이 안 먹힐 때는 min-height:0 문제 원인부모 높이는 자식 요소의 크기에 따라 결정된다. (∵ min-height : auto) 만약 자식 요소(item)가 overflow : auto 또는 overflow : scroll이 설정되어 있어 스크롤이 필요하지만, 부모 요소가 자식 요소의 크기에 맞춰 확장된다면 스크롤이 발생하지 않는다. (아래 사진 참고) 이때 부모 요소에 min-height: 0 을 설정하면,부모 요소는 자식 크기에 맞춰 확장되지 않고, 부모는 원래 높이를 유지하며 넘치는 자식 요소에 대해 스크롤이 생기게 된다.  flex-basis:0 으로는 안되나?flex-basis는 flex item의 기본 크기를 설정하는 속성이다 .만약 direction이 width이면 가로 너비를, column이면 세로 높이를 기준으로 설정된..
React 프로젝트에서 사용할 CSS 라이브러리 비교 (PureCSS, PostCSS, Tailwindcss, Styled Components) CRA에서 기본 사용-postcss, tailwindcss, sass-loaderPure CSS1. 순수 css 파일2. 이름 충돌 문제 발생 CSS 파일을 직접 작성하고 컴포넌트에 import 하여 사용한다동일한 이름이 있을 경우, 가장 나중에 로드된 CSS로 덮어씌워진다 PostCSS컴포넌트.module.css *.module.css 파일로 CSS를 모듈화하고, styles 객체를 가져와 사용한다동일한 클래스 이름이라도 자동으로 고유한 ID가 붙어 충돌을 방지한다import styles from ‘./Button1.modle.css’Button2; styled Components (CSS-in-JS)스타일링 된 컴포넌트 스타일링 된 컴포넌트를 생성하여 사용한다컴포넌트이기 때문에 리액트를 위한 스타..
특정 요소 top, translateY로 부모 요소 중앙 정렬하기 1. top: 50%; - 요소를 부모 요소를 기준으로 50% 아래로 이동시킵니다. 즉, 요소의 상단이 부모 요소의 중간에 위치하게 됩니다. (이때 요소의 높이를 고려하지 않아 중앙 정렬이 되지 않습니다) 2. transform: translateY(-50%); - 요소를 현재 위치에서 자신의 높이의 50%만큼 위로 이동합니다.  => 요소의 상단이 부모 요소의 중간에 위치하고, 그 위치에서 요소가 자신의 높이의 절반만큼 위로 이동하게 되어 요소의 중간이 부모 요소의 중간에 위치하게 됩니다 예를 들어, 요소의 높이가 50px이고 부모 요소의 높이가 100px이면1. top: 50%;를 적용하면, 요소의 상단이 부모 요소의 상단에서 50px (100px의 50%) 아래로 이동하고,2. transform: ..
vscode에서 전역으로 이름 바꾸기 / 파일 내 같은 이름 교체하기 전역에서 한번에 바꾸기1. fn + f2 2. search 창에서 변경- Window : ctrl + H  - Mac : cmd + shift + H  한 페이지에서 여러 단어 바꾸기1. cmd + D2. option + cmd + f
JS 클래스를 사용해 고정 배열 만들기 export class FixedArray { #arrayLength; // 배열 초기화 시 길이 #array; #currentLength; // 할당된 요소 개수 // #arrayLength와 #array를 알맞게 초기화 // 생성자 파라미터에는 FixedArray의 고정된 길이를 받아야됨. // #array초기화 시 각요소의 값은 undefined constructor(num) { this.#array = []; this.#arrayLength = num; this.#currentLength = 0; for (let i = 0; i 0) { tmp = this.#array[this.#curre..
자바스크립트에서 모듈 내보내기(export)와 다시 내보내기(re-exporting) 모듈(Module)- 기능 단위로 분리한 코드 조각- 캡슐화- script에서 type=module을 쓴다면, 자동으로 strict mode가 적용된다 (즉 모듈만의 스코프를 만들게 된다)export는 모듈에서 명시적으로 외부에 공개하는 식별자에 사용하는 키워드이다import는 export한 값들을 자신의 모듈 스코프로 가져오는 것을 의미한다 named export (이름이 있는 내보내기)named export는 하나의 모듈에서 여러값을 내보낼 때 사용한다그렇기 때문에 각각의 이름으로 export 하고,import 시 {중괄호}를 사용해서 export한 이름을 그대로 사용해야 가져와야 한다 만약 다른 이름으로 가져오려면 as 를 사용해서 재정의 한다 그러니 익명으로 export가 안된다 export는 2..
자바스크립트 암묵적 / 명시적 형변환 정리 자바스크립트의 7가지 데이터 타입Number, String, Boolean, undefined, null, Object, Symbol변경 불가능한 원시 타입, 변경 가능한 참조 타입이 있다 원시 타입은 한번 생성하면 값을 바꿀 수 없다 흔히 많이 사용하는 String, Number을 +로 연결하는 것은 새로운 메모리 공간에 변경된 값을 저장하는 것이다 암묵적 형변환자바스크립트 엔진은 표현식을 평가할 때, 코드 문맥에 부합하도록 암묵적으로 타입 변환을 실행한다 암묵적 형변환은 형변환 된 변수값을 재할당하는 것이 아니라 변환된 변수를 평가를 위해 한번 사용하고 버린다즉, 기존 원시값을 사용해 새로운 타입의 원시값을 생성하는 것이다! String1. 템플릿 리터럴 (``)문자열 안에 변수, 표현식을 쉽게 포함..