Posts

개요 CSS :nth-child() 의사 클래스는 같은 부모를 공유하는 형제 요소들 가운데 순서를 기준으로 요소를 선택하는 선택자임 인덱스는 1부터 시작함 참고로 nth는 n-th 서수 개념을 뜻함 핵심 개념 odd, even 키워드 지원 odd는 1, 3, 5처럼 형제 중 홀수번째 요소를 의미함 even은 2, 4, 6처럼 형제 중 짝수번째 요소를 의미함 함수형 표기 <An+B> 지원 A는 정수 계수로 증가 간격을 의미함 B는 정수 오프셋 의미 n은 0 이상 정수 전체를 순회하는 변수 의미 An+B가 1 이상인 자연수로 평가되는 위치만 선택됨 :nth-child()는 요소 타입과 무관하게 형제 목록 전체를 기준으로 순서를 계산함 즉 span:nth-child(2n+1)에서 카운팅은 모든 자식 요소를 포함하고, 선택 자체만 span에 한정됨 타입별 순서를 기준으로 선택하려면 :nth-of-type() 사용 p:nth-child(n)은 형제 그룹 내 모든 p와 동일한 집합을 선택하나, 단순 p보다 명시도는 더 높음 p:nth-child(1) 또는 p:nth-child(0n+1)은 :first-child와 동일한 의미와 명시도를 가짐 동작 원리 An+B가 만드는 수열이 매칭 인덱스를 결정함 예) 5n은 0, 5, 10, 15, …를 생성하나 인덱스는 1부터 시작하므로 0은 매칭되지 않음 예) n+7은 7, 8, 9, …로 7번째 이후 전부 매칭됨 예) 3n+4는 4, 7, 10, 13, … 매칭됨 예) -n+3은 3, 2, 1 순으로 해석되어 결과적으로 앞의 3개가 매칭됨 카운팅 단위는 요소 노드 기준임 공백 텍스트 노드 등은 포함하지 않음 선택자 예시 tr:nth-child(odd) 또는 tr:nth-child(2n+1) HTML 표의 홀수번째 행 선택 tr:nth-child(even) 또는 tr:nth-child(2n) HTML 표의 짝수번째 행 선택 :nth-child(7) 임의의 7번째 요소 선택 :nth-child(5n) 5, 10, 15, …번째 요소 선택 0은 선택되지 않음 :nth-child(n+7) 7번째부터 끝까지 선택 :nth-child(3n+4) 4, 7, 10, 13, …번째 요소 선택 :nth-child(-n+3) 앞에서 3개 요소 선택 p:nth-child(n) 형제 그룹 내 모든 p 선택 단순 p보다 명시도 높음 p:nth-child(1) 또는 p:nth-child(0n+1) 형제 그룹 내 첫 번째 p 선택 :first-child와 동일 짧은 스니펫 /* 목록의 두 번째 <li> 선택 */ li:nth-child(2) { color: lime; } /* 4의 배수 번째 요소 선택 */ :nth-child(4n) { color: lime; }주의사항 :nth-child()는 형제 전체를 기준으로 순서를 매김 타입이 섞여 있으면 카운트에 모두 포함됨 타입에 따라 카운트를 분리하고 싶다면 :nth-of-type() 사용 A, B는 정수만 허용 공백과 부호 위치는 CSS 구문 규칙을 따름 0 또는 음수로 평가되는 위치는 매칭되지 않음 명시도는 타입 선택자보다 높고, 클래스와 동일 계층의 의사 클래스 수준으로 취급됨 최신 사양에서는 of 구문을 통해 :nth-child(An+B of S)처럼 선택자 리스트를 한정하는 패턴이 가능함 브라우저 호환성은 문서와 지원 현황 확인 권장 베스트 프랙티스 단순 패턴은 odd, even으로 표현해 가독성 확보 복잡한 패턴은 An+B를 사용하되, 수열을 1 이상 범위로 명확히 환산해 주석으로 의도 기록 섞인 타입 환경에서의 혼동을 피하려면 가능하면 :nth-of-type() 우선 검토 특정 구간 필터링은 교집합 패턴을 사용 예 p:nth-child(n+8):nth-child(-n+15)로 8~15 범위를 표현 접근성 측면에서 시각 강조용 스타일만 바꾸는 경우 DOM 순서 의존 로직과 결합하지 않도록 주의 간단 비교 nth-child vs nth-of-type nth-child 형제 전체 기준 카운트 타입 섞임에 영향 받음 nth-of-type 동일 태그 타입만 카운트 다른 타입은 건너뜀 마무리 :nth-child()는 CSS에서 반복적 패턴과 구간 선택을 간결하게 표현하는 기본 도구임 An+B를 수열 관점으로 해석하고, 타입 혼재 여부에 따라 nth-child와 nth-of-type을 구분 적용하면 예측 가능한 스타일링이 가능함 필요 시 최신 of 구문과 명시도 특성을 함께 고려해 유지보수 비용을 낮추는 전략 추천 ...

개요 EAV는 Entity-Attribute-Value의 약자이며, 기존 정규화 스키마에서 컬럼으로 고정하던 속성을 행 단위로 분리해 저장하는 데이터 모델 속성 집합이 사용자마다 다르거나 런타임에 추가되는 등 스키마를 선제 정의하기 어려운 경우 사용 속성이 희소할 때 저장 공간 절약과 스키마 변경 부담 감소에 유리 구조 일반적으로 세 컬럼 기반 테이블로 구성 entity 데이터의 주체 예 사용자, 제품 attribute 엔터티의 속성 예 이름, 색상 value 속성의 실제 값 예 김철수, 빨간색 예시 엔터티가 사용자이고 속성이 이름, 나이, 이메일이라고 가정 일반 테이블 예 Users(UserId, Name, Age, Email) EAV 표현 예 ...

개요 작은 규칙의 일관성이 유지보수성과 확장성을 만든다고 봄. 아래 세 가지 원칙은 팀 합의만 되면 즉시 적용 가능하며, 코드 리뷰와 리팩터링 부담을 낮추는 효과가 큼 className 네이밍은 하이픈 사용 권장 camelCase, under_score보다 하이픈(-) 기준 분절이 명확해 가독성과 편집성이 좋음. 대소문자 전환 없이 입력 가능해 타이핑 피로도도 낮음 에디터 단어 단위 이동/선택이 직관적. camelCase나 under_score는 하나의 토큰으로 취급되는 경우가 많아 커서 이동이 번거로움. 하이픈은 공백처럼 인식되어 단어 경계 이동이 쉬움. 예시로 sweetPotato, sweet_potato, sweet-potato 비교 추천 ...

개요 CQRS(Command and Query Responsibility Segregation)는 쓰기 명령과 읽기 쿼리의 책임을 분리하는 아키텍처 패턴 CQS를 제안한 Bertrand Meyer의 아이디어가 뿌리이고, 실무적 CQRS 패턴을 알린 인물로 Greg Young이 널리 알려짐 핵심은 CUD(Command: Create, Update, Delete)와 R(Query: Read)을 하나의 모델로 처리하지 않고 분리해 복잡도와 결합도를 낮추는 것 왜 분리하는가 전통적인 CRUD 중심 구조에서는 단일 도메인 모델이 쓰기와 읽기 모두를 떠안음 변화 무쌍한 도메인 규칙과 고도화된 UX 요구로 인해 모델이 비대해지고, 유지보수 비용과 리스크가 누적됨 실제 비즈니스 룰과 제약은 쓰기 경로에서 주로 발생하고, 읽기는 상대적으로 단순 조회나 집계 중심인 경우가 많음 두 책임을 하나의 모델로 끌어안으면 불필요한 속성과 검증 로직이 뒤섞여 모델이 설계 의도에서 이탈함 CQRS는 책임을 분리해 각 경로를 그 목적에 맞게 최적화할 수 있게 함 ...

개요 MERGE는 소스 테이블과 타깃 테이블을 조인한 결과를 기준으로 삽입·갱신·삭제를 한 번에 처리하는 집합 기반 연산 여러 개의 개별 DML을 하나로 합쳐 실행 횟수와 스캔 비용을 줄이는 것이 목적 테이블 간 차이를 기준으로 동기화가 필요한 배치나 증분 적재 시 유용 핵심 개념 타깃 대상과 소스 입력의 조인 조건 정의 WHEN MATCHED 조건에서 UPDATE 또는 DELETE 수행 WHEN NOT MATCHED BY TARGET 조건에서 타깃에 INSERT 수행 WHEN NOT MATCHED BY SOURCE 조건에서 소스에 없는 타깃 행을 DELETE 등으로 정리하는 패턴 지원 하나의 문장으로 트랜잭션 일관성 유지가 쉬움 기본 문법 필수 요소만 요약 ...

개요 프록시 서버는 클라이언트가 자신을 거쳐 다른 네트워크 서비스에 간접 접속하도록 중계하는 시스템을 뜻함 서버와 클라이언트 사이에서 요청과 응답을 대리 처리해 보안성, 성능, 안정성 향상을 노림 프록시는 크게 포워드 프록시와 리버스 프록시로 구분되며, 위치와 목적이 다름 프록시 기본 개념 프록시 서버 정의: 클라이언트와 서버 사이 중계 계층, 요청 위임과 응답 전달 수행 기대 효과: 접근 제어, 캐싱을 통한 지연 감소, SSL/TLS 종료에 따른 오리진 부하 경감, 로드 밸런싱, 익명성 제공 포워드 프록시 포워드 프록시는 클라이언트 앞단에 배치되는 형태를 지칭함 클라이언트는 외부 웹 서버에 직접 연결하지 않고 포워드 프록시로 요청을 보내며, 프록시가 이를 대신 전달하고 응답을 다시 반환함 ...

개요 HTML5의 data-* 속성은 마크업에 보이지 않는 커스텀 데이터를 담기 위한 전역 속성 UI와 스크립트 사이 값 전달, 기능 감지 플래그, 간단한 지역화 메타데이터 등에 유용 DOM에서는 element.dataset으로 접근해 읽기/쓰기 가능 핵심 개념 속성명 규칙: data- 접두사 + 소문자 케밥케이스 사용 접근 규칙: data-foo-bar → dataset.fooBar 로 매핑 값 타입: 문자열 저장, 필요 시 직접 직렬화/파싱 처리 필요 보안 유의: 민감정보나 토큰 저장 금지, 노출 전제 데이터만 저장 표준 속성과 역할 혼동 금지, 의미적 데이터는 적절한 속성이나 요소 사용 권장 ...

개요 OpenZeppelin의 contracts-upgradeable은 업그레이드 가능한 스마트 컨트랙트를 안전하게 구현하기 위한 베이스 라이브러리 프록시 Proxy 패턴으로 사용자 호출 주소와 로직 컨트랙트를 분리하고 delegatecall로 로직을 실행 Transparent Proxy와 UUPS 두 방식을 공식 지원 이 글은 Hardhat 환경에서 @openzeppelin/hardhat-upgrades 플러그인과 함께 UUPS를 중심으로 배포와 업그레이드 흐름을 정리하고, Transparent와의 차이점을 요약 핵심 개념 Proxy 컨트랙트와 Implementation 컨트랙트를 분리하여 배포 사용자는 Proxy 주소로 상호작용, Proxy는 delegatecall로 Implementation의 로직 실행 업그레이드는 Proxy가 가리키는 Implementation 주소를 교체하는 방식 EIP-1967 표준 슬롯을 사용해 Implementation 주소 보관 방식 요약 ...

개요 반응형 레이아웃과 접근성 요구가 커지면서 px 고정값 대신 em, rem 같은 상대 단위 사용 빈도 증가 두 단위 모두 글꼴 크기(font-size)를 기준으로 동작하지만 기준점이 다름 핵심은 기준이 어디인지 명확히 이해하고 일관된 스케일로 적용하는 것 콘텐츠가 없어도 블록 요소 높이를 유지해야 하는 경우 같은 실무 이슈에서 min-height를 em이나 rem로 정의해 타이포 스케일에 연동하는 방식 유용함 상대 단위 개념 상대(relative) 단위는 주어진 기준에 따라 유동적으로 값이 변하는 길이 단위 em, rem, %, vw, vh 등이 대표 절대(absolute) 단위는 상황과 무관하게 고정된 길이로 취급하는 단위군으로 px, pt, cm, in 등이 포함됨 참고 기준으로 CSS에서 1px는 1/96in에 해당하는 길이로 정의됨. 실제 디바이스의 물리 픽셀과는 분리된 개념 ...

개요 robots.txt는 검색 엔진 크롤러에 대한 크롤링 규칙을 선언하는 공개 텍스트 파일임 사이트 루트 경로에 위치하며 접근 제어나 보안 수단으로 사용 불가 전체 차단 예시 모든 크롤러에 대해 사이트 전체 경로 크롤링 금지 설정 User-agent: * Disallow: / 위 규칙은 크롤링 거부 의사를 표명하는 표준 관례이며 비준수 크롤러까지 강제 불가 주의 운영 환경 적용 시 검색 트래픽 전면 차단 위험 크롤링 차단과 인덱싱 차단은 다름 이미 색인된 문서는 별도 제거 절차 필요 ...