개요 C#에서 키와 값으로 데이터를 저장하는 대표 컬렉션은 Hashtable과 Dictionary 두 가지가 있음 표면적인 사용법은 비슷하지만 제네릭 지원 여부와 타입 처리 방식이 달라 성능과 안정성에서 차이 발생 핵심 차이와 간단 예시, 선택 기준 정리 핵심 차이 Hashtable 비제네릭 컬렉션, Key와 Value가 object로 저장됨 값 형식 저장 시 박싱 발생, 꺼낼 때 언박싱 또는 캐스팅 비용 발생 컴파일 타임 타입 체크 부재, 런타임 캐스팅 오류 위험 높음 레거시 코드와의 호환성은 높으나 일반적으로 권장되지 않음 Dictionary<TKey, TValue> ...

개요 링크를 새 탭에서 열 때 a 태그에 target="_blank"를 많이 사용함 이 경우 window.opener로 원본 페이지에 접근 가능한 취약점과 리소스 간섭 이슈가 발생할 수 있음 rel=“noopener noreferrer"를 함께 지정해 리버스 태브내빙(reverse tabnabbing) 방지와 리퍼러 차단을 적용하는 것이 권장됨 핵심 개념 target: 링크 대상 브라우징 컨텍스트 지정 window.opener: 새 탭에서 원본 창을 참조하는 브라우저 객체 rel=noopener: 새 탭에서 window.opener를 끊어 원본 페이지 접근 불가로 만듦, 리버스 태브내빙 방지 rel=noreferrer: 새 탭으로 이동 시 Referer 헤더 전송 차단, 원본 페이지 URL 비공개 target 값 정리 _self: 현재 탭에서 열기, 기본값이라 명시 생략 가능 _blank: 새 탭에서 열기 target="_blank"만 사용할 때의 문제 보안 취약점 발생 가능 악성 페이지가 window.opener를 통해 부모 창의 location을 임의 변경하여 피싱 페이지로 리디렉션하는 리버스 태브내빙 위험 존재 원본 페이지의 데이터 접근 시도 등 추가 피해 가능성 있음 성능 간섭 가능성 새 탭이 원본과 같은 브라우징 컨텍스트 그룹에서 실행될 수 있어 이벤트 루프나 리소스 경쟁으로 지연이 커질 수 있음 무거운 스크립트가 열린 탭 간에 체감 성능 저하를 유발할 수 있음 해결책 rel=“noopener” 새 탭의 window.opener를 null로 만들어 원본 페이지 참조 차단 탭 간 연결이 끊겨 보안 위험과 리소스 간섭 완화 rel=“noreferrer” 이동 시 Referer 헤더를 제거해 원본 URL과 경로 노출 방지 분석이나 리퍼러 기반 측정이 필요한 경우에는 생략을 고려 사용 예시 필수 최소 속성만 명시 ...

개요 Array.prototype.map은 배열의 각 요소에 대해 지정한 콜백을 호출하고 그 반환값으로 새 배열을 만드는 메서드임 원본 배열은 변경하지 않으며 콜백의 부수효과로만 변형이 일어날 수 있음 희소 배열의 빈 슬롯은 유지되며 콜백은 값이 존재하는 인덱스에만 호출됨 구문 arr.map(callback(currentValue[, index[, array]])[, thisArg]) callback 현재 요소를 변환해 새 요소를 생성하는 함수 currentValue 현재 요소 값 index 선택 현재 요소의 인덱스 array 선택 map을 호출한 원본 배열 thisArg 선택 콜백 실행 시 this로 사용할 값 반환값 각 요소에 대해 callback을 실행한 결과로 구성된 새 배열 반환 원본 배열과 길이는 동일하고 희소성도 보존됨 ...

개요 미디어 쿼리는 뷰포트나 사용자 환경에 따라 CSS를 조건부로 적용하기 위한 기능임 다른 언어의 if 조건문과 유사하게 조건이 참일 때만 특정 스타일이 활성화됨 핵심 개념 @media 규칙과 하나 이상의 조건으로 구성 조건은 화면 폭, 해상도, 사용자 선호도 등 미디어 특성으로 표현됨 조건이 참이면 블록 내부 스타일이 캐스케이딩에 참여하고 거짓이면 무시됨 문법과 구조 @media (조건) { /* 스타일 */ }조건 예시 max-width: 상한 폭 이하에서 적용 min-width: 하한 폭 이상에서 적용 논리 결합 and, not 사용 가능 동작 원리 브라우저가 런타임에 조건을 평가함 윈도우 리사이즈나 기기 회전, OS 설정 변경 시 즉시 재평가되어 스타일 재적용됨 충돌 시 일반 CSS 우선순위 규칙을 따름 우선순위 > 특이성 > 선언 순서 모바일 퍼스트 전략 권장 min-width 기준으로 점진적 확장 구성 ...

window load는 js css 이미지 등 모든 리소스 로드 완료 시점 발생 document DOMContentLoaded는 초기 DOM 파싱 완료 시점 발생, 외부 리소스 비대기 UI 바인딩 초기화는 DOMContentLoaded 이미지 크기 등 전체 리소스 필요 계산은 load body onload window.onload에 매핑됨 마지막 할당만 유효 덮어쓰기 방지용 addEventListener 권장 참고자료 https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

개요 nvarchar와 nchar를 사용할 때 n이 곧 문자 개수라고 가정하는 경우가 많음 하지만 SQL Server에서 nchar(n), nvarchar(n)의 n은 문자 개수가 아니라 2바이트 단위의 길이, 즉 바이트 페어(byte-pair) 개수로 정의됨 문자 집합 범위에 따라 한 문자가 1개 혹은 2개의 바이트 페어를 사용할 수 있어 저장 가능한 문자의 실제 개수는 달라짐 핵심 개념과 정의 nchar(n), nvarchar(n)의 n은 0~4000 바이트 페어 범위의 길이 의미 하나의 바이트 페어는 2바이트로, 내부적으로 UTF-16 코드 유닛 단위로 이해 가능 유니코드 BMP 범위(0~65,535) 문자는 보통 1 바이트 페어 사용 보조 평면 범위(65,536~1,114,111) 문자는 서러게이트 페어로 2 바이트 페어 사용 따라서 n이 문자의 최대 개수를 보장하지 않음 char(n), varchar(n)은 n이 바이트 수 의미라는 점에서 유사한 맥락이나, nvarchar/nchar는 바이트 페어 기준이라는 차이 존재 추가 기본값 규칙 ...

개요 Array.prototype.reduce는 배열을 하나의 값으로 축약하는 표준 API 배열의 각 요소에 대해 리듀서 함수를 순차 실행하고 누산기 값을 반환 집계, 변환, 그룹핑, 파이프라인 구성 등 다양한 패턴에 사용 구문 arr.reduce(callback[, initialValue]) callback에 누산 로직 정의 initialValue가 있으면 누산기의 시작값으로 사용, 없으면 배열의 첫 요소가 시작값 매개변수 callback(accumulator, currentValue, currentIndex, array) accumulator: 누산된 값 currentValue: 현재 요소 값 currentIndex: 현재 인덱스 array: 원본 배열 initialValue (옵션) 누산기의 초기값 제공하지 않으면 배열 첫 요소가 초기값이 되어 콜백은 두 번째 요소부터 시작 반환값 축약 결과로 얻은 최종 누산값 동작 방식 왼쪽에서 오른쪽으로 순회하며 callback을 한 번씩 호출 initialValue 미제공 빈 배열이면 TypeError 발생 요소가 하나뿐이면 그 요소를 그대로 반환하며 callback은 호출되지 않음 initialValue 제공 배열이 비어 있어도 initialValue를 그대로 반환하며 callback은 호출되지 않음 희소 배열의 빈 슬롯은 건너뜀 누산기는 어떤 타입도 가능하며 객체, 맵, 프라미스 등으로 확장 가능 주의 사항과 베스트 프랙티스 가능한 항상 initialValue 지정 권장 빈 배열 입력 시 예외 방지, 타입 안정성 확보 누산기 불변성 유지 권장 객체 누산 시 얕은 복사 또는 구조 분해 사용 고려 콜백은 순수 함수 지향 외부 상태 변경 최소화, 테스트 용이성 확보 읽기 어려운 과도한 축약 로직은 map, filter, for…of 등으로 분리 고려 희소 배열에서 빈 슬롯은 콜백이 호출되지 않음에 유의 오른쪽에서 왼쪽으로 처리해야 하면 reduceRight 사용 간단 예시 합계 계산 ...

개요 클라이언트에서 서버로 들어오는 요청 데이터를 DTO로 다루면 변환과 검증의 경계를 명확히 유지 가능함 class-transformer는 입력을 클래스 인스턴스로 변환하는 역할, class-validator는 변환된 인스턴스의 유효성 검증 역할 두 라이브러리를 함께 쓰면 DTO 레이어에서 데이터 정합성을 선제적으로 보장 가능함 핵심 개념 DTO 데이터 전송 객체, 외부 입력을 내부 도메인으로 들이기 전 구조와 제약을 고정하는 경계 class-transformer plain object ↔ 클래스 인스턴스 변환, 노출/제외 필드 제어 class-validator 데코레이터 기반 유효성 규칙 선언, 실행 시 검증 에러 수집 설치 npm install class-transformer class-validator사용 흐름과 최소 예시 입력 JSON 수신 → DTO 클래스로 변환 → DTO 인스턴스 검증 → 실패 시 에러 응답, 성공 시 비즈니스 로직으로 전달 import { Expose, Exclude, plainToInstance } from 'class-transformer' import { IsInt, IsString, validate } from 'class-validator' class UserDTO { @IsString() @Expose() name: string @IsInt() @Expose() age: number @Exclude() password?: string } const dto = plainToInstance(UserDTO, payload) const errors = await validate(dto) if (errors.length) { // 검증 실패 처리 }포인트 ...

개요 TypeScript의 declare 키워드는 외부에서 이미 구현된 값의 타입 정보를 컴파일러에 알려주는 용도임 실제 구현은 다른 런타임 환경이나 스크립트에 존재하고, TypeScript는 타입 검사만 수행함 선언은 자바스크립트 코드로 출력되지 않음 핵심 개념 declare function: 외부에 존재하는 함수의 시그니처만 제공하는 선언 사용 위치: 주로 .d.ts 선언 파일, 필요 시 .ts에서도 가능하지만 빌드 결과물에는 코드가 생성되지 않음 목적: 컴파일 타임에 타입을 인지시켜 오류를 줄이고, IDE 보조 기능을 활성화함 언제 사용하나 타입 정보가 없는 외부 자바스크립트 라이브러리 사용 시 글로벌로 노출된 함수나 변수를 TypeScript가 모를 때 JS와 TS 혼용 프로젝트에서 점진적 마이그레이션을 진행할 때 예시 글로벌 함수 선언 // 이미 어딘가에서 구현된 전역 함수가 있다고 가정 // my-globals.d.ts declare function myGlobalFunction(msg: string): void이렇게 선언하면 TypeScript가 함수 존재와 시그니처를 인식함 ...

개요 값 복사에서 가장 흔한 실수는 얕은 복사와 깊은 복사의 차이를 간과하는 것임 이 글은 JSON 해킹이나 라이브러리 대신 브라우저와 런타임이 제공하는 structuredClone으로 깊은 복사를 안정적으로 수행하는 방법과 주의점을 정리함 얕은 복사 JavaScript의 전개 연산자 …로 만드는 복사는 기본적으로 얕은 복사임 겉 모양과 1단계 속성은 복제되지만 중첩된 객체는 동일 참조를 공유함 const myOriginal = { someProp: "with a string value", anotherProp: { withAnotherProp: 1, andAnotherProp: true } } const myShallowCopy = { ...myOriginal } myShallowCopy.aNewProp = "a new value" console.log(myOriginal.aNewProp) // ^ logs `undefined` myShallowCopy.anotherProp.aNewProp = "a new value" console.log(myOriginal.anotherProp.aNewProp) // ^ logs `a new value` 기본형 값은 값 자체가 복사되지만 객체 같은 참조형은 레퍼런스가 복사됨 따라서 중첩된 구조를 안전하게 분리하려면 깊은 복사가 필요함 ...