개념/배경 결론부터 말하면 가능함 Foreign Key 컬럼의 NULL 허용 여부는 해당 컬럼의 NULL 혹은 NOT NULL 제약으로 결정됨 FK 제약은 NULL이 아닌 값만 검증하므로 값이 NULL인 경우 참조 무결성 검사를 생략함 컬럼이 NOT NULL이면 NULL 저장 불가 컬럼이 NULL 허용이면 NULL 저장 가능 핵심 개념 FK 제약은 입력값이 존재할 때만 참조 대상 테이블에 키가 있는지 검사 NULL은 미지정 상태로 간주되어 검증 대상 아님 대부분의 RDBMS에서 기본은 NULL 허용 컬럼이며, 명시적으로 NOT NULL을 지정해야 함 동작 원리 INSERT 또는 UPDATE 시 FK 컬럼이 NULL이면 무결성 검사 스킵 값이 존재하면 참조 테이블의 대상 키 존재 여부 검사 복합 FK의 경우 참조 컬럼 중 하나라도 NULL이면 전체 FK 검사를 생략하는 동작이 일반적임 간단 예시 CREATE TABLE parent ( id INT PRIMARY KEY ); CREATE TABLE child ( parent_id INT, FOREIGN KEY (parent_id) REFERENCES parent(id) ); child.parent_id는 기본적으로 NULL 허용 상태 parent_id에 NULL을 넣어도 FK 위반 아님 parent_id에 NOT NULL을 추가하면 parent에 존재하는 id만 허용됨 주의 사항 ON DELETE SET NULL을 사용할 경우 FK 컬럼이 NULL 허용이어야 함 FK 컬럼 인덱스는 필수는 아니나 삭제·업데이트 시 성능과 잠금 범위 측면에서 권장 관계가 필수라면 애플리케이션 규칙이 아닌 스키마에서 NOT NULL로 모델링하는 편이 안전함 마무리 FK 컬럼은 NULL 허용 설정이면 NULL을 저장할 수 있으며, 이 경우 FK 검사는 수행되지 않음 NULL을 금지하고 참조 무결성을 강제하려면 NOT NULL을 함께 적용하면 됨 ...

개요 자바스크립트에서 + 단항 연산자는 Number 호출의 축약형으로 동작함 문자열이나 다양한 타입을 숫자로 바꾸려는 순간에 +value와 Number(value)는 같은 의미이고, parseInt는 문자열에서 정수 접두부만 뽑아내는 파서에 가까움 같아 보이지만 목적과 실패 조건이 다르므로 상황에 맞게 선택 필요 핵심 개념 unary plus +x ECMAScript의 ToNumber 규칙 적용 Number(x)와 동일한 변환 결과 반환 Number(value) 숫자 전체 표현식이어야 함 공백 트림은 허용하지만 유효하지 않은 문자가 섞이면 NaN 반환 parseInt(string, radix) 문자열의 왼쪽부터 주어진 기수(radix, 2~36)로 해석 가능한 정수 접두부만 파싱 유효하지 않은 문자를 만나면 거기서 파싱 중단 접두부 숫자가 하나도 없으면 NaN 반환 ES5+에서 기본 기수는 10이지만, 0x/0X 접두사는 16진수로 처리됨 동작 차이와 사례 전체 일치 vs 접두 파싱 Number('12px') → NaN parseInt('12px', 10) → 12 소수와 지수 표기 Number('10.5') → 10.5, Number('1e3') → 1000 parseInt('10.5', 10) → 10 (소수부 절삭) 빈 문자열과 공백 Number('') → 0, Number(' ') → 0 parseInt('') → NaN 비문자열 입력 +true → 1, +false → 0, +null → 0, +undefined → NaN parseInt(true, 10) → NaN (문자열로 변환 시 ’true’라서 숫자 접두부 없음) 진법 접두사 처리 차이 Number('0x10') → 16, parseInt('0x10') → 16 Number('0b101') → 5 (ES2015+), parseInt('0b101') → 0 참고로 parseInt('101', 2) → 5 처럼 radix를 명시해야 기대대로 동작함 BigInt 관련 +10n은 TypeError 발생 Number(10n)은 10으로 변환되나 정밀도 손실 가능성 존재 선택 기준 전체 문자열이 유효한 숫자여야 하고 실수, 지수 표기도 허용해야 함 +value 또는 Number(value) 선택 가독성 우선이면 Number(value) 추천, 축약을 선호하면 +value 선택 문자열 앞부분에서 정수만 뽑고 싶거나 비 10진수 파싱 필요 parseInt(str, radix) 선택 항상 radix 명시 권장 소수부를 보존하면서 부분 파싱이 필요 parseFloat 고려 다만 parseFloat도 접두 파싱이므로 전체 일치 검증이 필요하면 Number 사용 권장 베스트 프랙티스 숫자 변환 의도 전달이 중요할 때 Number(value) 사용 정수 파싱 시 parseInt(str, 10)처럼 radix를 항상 명시 사용자 입력 검증이 필요하면 정규식 또는 스키마 검증으로 전체 형식 검증 후 Number 변환 성능 미세 최적화보다 가독성과 실패 조건의 명확성을 우선 간단 예시 Number('12') // 12 +'12' // 12 parseInt('12',10) // 12 Number('12px') // NaN parseInt('12px',10) // 12 Number('0b101') // 5 parseInt('0b101') // 0, radix 명시 필요 parseInt('101', 2) // 5 결론 +는 Number의 축약형이 맞음 전체 숫자 표현식으로서의 유효성을 요구할 때 + 또는 Number 사용, 접두부 정수 추출이나 진법 파싱에는 parseInt 사용 의도를 코드에 드러내고, 실패 조건을 일관되게 가져가는 쪽으로 선택하는 것이 유지보수에 유리함 ...

개요 pageLoadStrategy는 WebDriver가 페이지 이동 명령을 언제 완료로 판단할지 결정하는 세션 단위 설정값임. 핵심은 document.readyState 조회 시점을 어떻게 보느냐이며 전략별 대기 조건이 다름. 기본값은 normal이며, 네트워크 리소스가 많아 느린 페이지에서 eager 또는 none으로 바꿔 세션 체감 속도를 높일 수 있음 SPA처럼 자바스크립트가 동적으로 화면을 채우는 사이트에서는 readyState가 complete여도 실제 사용자 관점의 완료와 다를 수 있음. 전략 변경 시 명시적 대기 조합 설계가 필수임 주의할 점은 get 등 URL 기반 내비게이션과 달리, 클릭이나 폼 제출로 발생한 내비게이션에는 동일한 대기 규칙이 그대로 적용되지 않을 수 있음. 이 경우에도 별도의 대기 전략으로 안정성을 확보해야 함 ...

개념/배경 CTE는 WITH로 정의하는 이름 있는 임시 결과셋 바로 다음 한 개 DML에서만 참조 가능하며 실행이 끝나면 범위 소멸 가독성 향상과 쿼리 구조 분리에 유용함 사용법 WITH cte_name (col1, col2) AS ( SELECT ... ) DML필요 시 컬럼 목록 생략 가능하나 명시를 권장 주의사항 일부 DBMS에서는 배치 내에서 CTE 앞에 오는 쿼리를 세미콜론으로 종료 필요 CTE 범위는 바로 뒤 한 개 DML로 한정됨 복잡한 쿼리에서 과도한 중첩 사용은 계획 복잡도 증가 가능 참고자료 https://s2choco.tistory.com/34 https://learn.microsoft.com/sql/t-sql/queries/with-common-table-expression-transact-sql

개념/배경 Unobtrusive JavaScript는 HTML 구조와 JS 동작을 분리하는 접근 철학 HTML은 의미와 콘텐츠, CSS는 표현, JS는 상호작용과 상태 제어 담당 인라인 스크립트와 이벤트 속성 제거, 외부 스크립트에서 안전하게 바인딩하는 방식 지향 핵심 목표는 접근성 보장, 점진적 향상, 유지보수성과 테스트 용이성 개선, 캐시 효율 상승, 보안 취약점 노출 감소 핵심 원칙 HTML은 의미 중심 마크업 유지 CSS는 표현만 담당 JS는 DOMContentLoaded 이후 동작 주입 인라인 onclick 등 이벤트 속성 사용 금지 기능 감지 우선, UA 스니핑 지양 데이터 훅은 data-* 속성 사용, 스타일 훅과 분리 JS 미동작 상황에서도 기본 기능 유지, 점진적 향상 고려 모듈 분리와 의존성 최소화 동작 방식 마크업은 링크와 폼이 기본 동작을 스스로 제공하도록 설계 JS는 존재하면 기본 동작을 확장하거나 향상 이벤트 바인딩은 외부 스크립트에서 선택자 기반으로 수행, 인라인 스크립트 제거 ...

개요 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