field-sizing를 사용하면 콘텐츠를 기반으로 크기 조절을 사용 설정하는 데 CSS 한 줄이 필요합니다. 이 콘텐츠 기반 크기 조절 스타일은textarea외에도 다른 요소에도 적용됩니다.
- https://github.com/arthurfiorette/proposal-safe-assignment-operator
- https://github.com/arthurfiorette/tuple-it
tuple 함수 메모
- 목적: 비동기 호출의 결과와 오류를 튜플 형식으로 반환
- 사용 예:
const [error, data] = await tuple(someAsyncFunction());
동작 방식:
- 입력:
maybePromise(Promise 또는 일반 값) - 처리:
try블록에서await로 비동기 결과를 기다림- 성공 시:
[null, 결과값]반환 - 오류 발생 시:
Error인스턴스이면:[error]반환- 그 외의 경우:
[new TupleItError(error)]반환
장점:
- 오류 처리 간소화 (단일 체크로 오류 관리 가능)
💡
useStateObject는 React의useState를 확장한 가벼운 래퍼로, 객체 상태 관리를 간편하게 할 수 있도록 설계되었습니다.
export type StateObject<T extends object> = T & {
set: React.Dispatch<React.SetStateAction<T>>
setItem: <K extends keyof T>(key: K, value: T[K]) => void
merge: (newState: Partial<T>) => void
reset: () => void
}그렇다면 Map과 Set도 시도해보기
function useStateMap<K, V>(init: Iterable<[K, V]> = []) {
const [map, setMap] = useState(new Map<K, V>(init))
const update = useCallback(
(updater: (currentMap: Map<K, V>) => void) => {
setMap((prev) => {
const newMap = new Map(prev)
updater(newMap)
return newMap
})
},
[setMap]
)
return {
map,
set: (key: K, value: V) => update((m) => m.set(key, value)),
delete: (key: K) => update((m) => m.delete(key)),
clear: () => setMap(new Map()),
has: (key: K) => map.has(key),
get: (key: K) => map.get(key),
entries: () => Array.from(map.entries()),
size: map.size,
}
}function useStateSet<T>(init: Iterable<T> = []) {
const [set, setSet] = useState(new Set<T>(init))
const update = useCallback(
(updater: (currentSet: Set<T>) => void) => {
setSet((prev) => {
const newSet = new Set(prev)
updater(newSet)
return newSet
})
},
[setSet]
)
return {
set,
add: (value: T) => update((s) => s.add(value)),
delete: (value: T) => update((s) => s.delete(value)),
has: (value: T) => set.has(value),
clear: () => setSet(new Set()),
entries: () => Array.from(set),
size: set.size,
}
}thisisunsafe
-> 로컬 환경 또는 테스트 서버에서 강제 접근
- 웹사이트의 SSL/TLS 인증서를 신뢰할 수 없을 때, 이 사이트에 연결할 수 없음 또는 이 연결은 비공개로 설정되지 않았습니다
NET::ERR_CERT_AUTHORITY_INVALID,NET::ERR_CERT_COMMON_NAME_INVALID같은 오류 코드가 나타남
useSyncExternalStore 활용 가능한 부분들
템플릿 리터럴 타입을 활용하여 타입 정의하기
import * as React from 'react'
type RenderPropNames = 'Title' | 'Content' | 'Actions'
type RenderProps = {
[K in RenderPropNames as `render${K}`]: () => React.ReactNode
}
type Props = RenderProps
/**
* @example
*
* ```tsx
* <DialogComponent
* renderTitle={() => <h2>Title</h2>}
* renderContent={() => <p>Content</p>}
* renderActions={() => (
* <div>
* <button onClick={handleClose}>Close</button>
* <button onClick={handleSubmit}>Submit</button>
* </div>
* )}
* />
* ```
*/
function Dialog({
renderTitle,
renderContent,
renderActions,
}: Props) => {
return (
<div data-scope="root">
<div data-part="content">
{renderTitle()}
{renderContent()}
</div>
<div data-part="actions">{renderActions()}</div>
</div>
)
}
두 개의 오버로딩된 메서드에서 각각의 반환 타입을 명시적으로 추출하기
type Year = {
year(): number
year(u: string): string
}
type ReturnTo<T, R> = T extends R ? R : never
type GetYear = ReturnTo<Year['year'], () => number>
type SetYear = ReturnTo<Year['year'], (u: string) => string>
- 문제: 스프레드시트 데이터가 커서 내용 확인이 어려움.
- 해결: 구글 드라이브에 스프레드시트 데이터를 CSV 파일로 업로드하여 확인.
/**
* 현재 활성 스프레드시트의 첫 번째 시트 데이터를 CSV 파일로 저장하고,
* 구글 드라이브에 업로드합니다.
* 생성된 파일의 URL은 콘솔에 로그로 출력됩니다.
*/
function saveSpreadsheetDataAsCSV() {
/** 현재 활성 스프레드시트 */
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0]
/** 시트의 모든 데이터의 2차원 배열 */
const data = sheet.getDataRange().getValues()
/** CSV 데이터 */
const csv = data.map((row) => row.join(',')).join('\n')
/** 파일명 */
const fileName = 'spreadsheet_data.csv'
/** 구글 드라이브에 업로드 완료된 CSV 파일 */
const file = DriveApp.createFile(fileName, csv, MimeType.CSV)
console.log('파일이 생성되었습니다: ' + file.getUrl())
}
class ColorManipulator {
private baseColor: string
private targetColor: string
constructor(baseColor: string, targetColor: string) {
this.baseColor = baseColor
this.targetColor = targetColor
}
private hexToRgb(hex: string) {
const bigint = parseInt(hex.slice(1), 16)
return {
r: (bigint >> 16) & 255,
g: (bigint >> 8) & 255,
b: bigint & 255,
}
}
public calculateOpacity() {
const target = this.hexToRgb(this.targetColor)
const baseRG = this.hexToRgb(this.baseColor)
const opacities = [
(target.r - baseRG.r) / (255 - baseRG.r),
(target.g - baseRG.g) / (255 - baseRG.g),
(target.b - baseRG.b) / (255 - baseRG.b),
]
const averageOpacity =
opacities.reduce((sum, value) => sum + value, 0) / opacities.length
return averageOpacity
}
public getCssRGBA() {
const opacity = this.calculateOpacity()
return `rgba(0, 0, 0, ${opacity.toFixed(2)})`
}
}
const manipulator = new ColorManipulator('#000000', '#D1D7DE')
const opacity = manipulator.calculateOpacity()
const cssRGBA = manipulator.getCssRGBA()
구글 스프레드시트에서 중복 값을 찾고 그 값에 별도의 스타일을 적용하는 방법
=COUNTIF(A:A, A:A) > 1
-
셀 범위 선택: 중복 값을 확인하고 스타일을 적용할 셀 범위를 선택합니다. 예를 들어, A 열 전체를 선택하려면 A 열을 클릭합니다.
-
조건부 서식 열기: 상단 메뉴에서 **“서식”**을 클릭한 다음 **“조건부 서식”**을 선택합니다.
-
서식 규칙 설정: 조건부 서식 규칙 창이 열리면, “서식 규칙 추가” 옵션을 클릭합니다.
-
맞춤 수식 사용:
서식 규칙드롭다운에서 **“맞춤 수식을 사용하여 서식 지정”**을 선택합니다. -
중복 값 조건 수식 입력: 중복을 찾는 수식을 입력합니다. 이 수식은 A 열 전체에서 A1과 같은 값을 가지는 셀의 개수를 세고, 그 개수가 1보다 크면 중복으로 간주합니다.
-
서식 선택: 스타일을 지정하려면 서식 스타일에서 텍스트 색상, 배경 색상 등을 원하는 대로 설정합니다.
-
완료: 설정이 완료되면 완료를 클릭하여 적용합니다.