본문 바로가기

분류 전체보기277

String Matching Algorithm 스트링 알고리즘.01 Stiring : 문자가 연속적으로 나열된 문자열 알파벳 alphabet ∑ : 스트링에 사용되는 문자들의 집합 스트링 매칭 : 텍스트에서 패턴이 나타나는 위치를 찾는 것텍스트 T : 긴 스트링, 길이n패턴 P : 짧은 스트링, 길이 mn≥m브루트-포스 스트링 매칭 알고리즘 (Brute-force algorithm 또는 Naïve algorithm)텍스트의 각 위치에서부터 패턴의 길이만큼 문자를 비교하며 매치를 찾는 방법시간 복잡도 : O(nm)T : a a b a a b a a aP : a a b a a 위치012345678TaabaabaaaPaabaa 위치012345678TaabaabaaaP aabaa 위치012345678TaabaabaaaP aabaa 위치012345678Taaba.. 2025. 6. 3.
[3] HTML의 렌더링에 대해 궁금했던 것들 - Render Tree Render Tree DOM과 CSSOM 결합 → Render Tree 생성 → Layout (Reflow) → Paint 1. Render Tree는 "화면에 보일 요소만" 포함한다.Render Tree 생성할 때 display: none 요소는 왜 제외될까? (display: none과 visibility: hidden의 차이)DOM에는 문서에 있는 모든 노드가 들어 있지만, 화면에 표시될 필요 없는 요소까지 그릴 필요는 없다.1) display: none = "아예 화면에 렌더링하지 마!" 그러므로 Render Tree 만들 때 아예 제외된다. 완전히 숨겨지는 것이기에 존재하지도 않는다. 2) visibility: hidden = 존재는 하되 "보이지 않게"만 해줘그래서 Render Tree에.. 2025. 5. 25.
QR 마스크 만들기 (SVG) 만만하게 봤다가 큰코다친 경험.QR 마스크 페이지 만들기이런 페이지 제작 요청을 받았다.처음엔 간단한 구조에 "최소 기능 구현 20~30분" (+구동확인 및 디테일 보정 시간 30분)으로 예상하고 시작했다가4시간 넘게 싸움🫠[구현 조건]1. 전체 영역에 검은 마스크(블러처리)가 있다.2. 가운데 구멍이 뚫려있다. 3. 구멍 내부는 선명하게 보인다. [실패한 접근법]1. 가운데 정사각형 만든다.2. 정사각형 내부 : 선명함 유지 3. 정사각형 외뷰 : 불투명 + 흐린 효과를 주고 CSS 신봉자는 2, 3을 생각할 땐 "CSS에 그런 속성이 있겠지~"하고 안일하게 생각함.그러나 결과는 다음과 같았다.2. 정사각형 내부 : 흐림 (선명해야함🤯)3. 정사각형 외부 : 선명 (흐려야함🤯) 이유 : CSS .. 2025. 5. 10.
[2] HTML의 렌더링에 대해 궁금했던 것들 - HTML Parsing 파싱 Parsing 과정HTML 파싱 : 받은 텍스트(string)를 해석해서 브라우저가 이해할 수 있는 노드(node) 단위로 변환하는 것 HTML 파서(Parser) 작동HTML스트림을 받으면 브라우저는 HTML parser를 실행한다.스트림으로 받은 텍스트를 토큰(token) 으로 쪼갠 뒤토큰을 노드(node)로 바꿔서 트리(Tree) 구조를 만듦 1. Tokenizing (토크나이징)스트링을 읽으면서 문법 단위(Token)로 나누는 것HTML파서에는 State Machine(상태 기계)가 있다.상태(state)를 바꿔가면서 1글자씩 문자(character)를 읽고, 토큰(token)을 만든다Hello ⭢ 시작 태그 토큰 (start tag token)Hello ⭢ 텍스트 토큰 (text toke.. 2025. 4. 27.
[1] HTML의 렌더링에 대해 궁금했던 것들 - stream 서버에 요청 후 데이터를 수신(HTTP Response)받으면 HTML문서가 전달된다.HTML문서는 텍스트(string)형태헤더의 Content-Type: text/html 를 만나면브라우저 : "아, 이건 HTML이구나!"하고 인식 이때 HTML은 네트워크를 통해 stream(스트림) 형식으로 조금씩 도착된다. 완전히 다 받은 다음 처리❌도착하는 대로 조금씩 읽고 파싱을 시작⭕️ ※ 스트림(stream) : 조각조각 나누어 실시간으로 받아오는 데이터 흐름1. 스트림은 어떤 기준으로 쪼개지는가?복합적인 요인.서버 전송 방식네트워크가 전달할 수 있는 패킷 단위브라우저의 버퍼에 얼마가 쌓이면 읽을래?즉, 문서 용량이 크면 더 많이 쪼개지고, 네트워크 품질도 영향 준다. 1) 서버 전송 방식서버가 HTML을 .. 2025. 4. 26.
[이산수학] 조합이론 - 조합, 이항 정리 1. 조합(combination)1) 조합0 ≤ r ≤ n 을 만족하는 정수 n, r에 대하여,n개의 원소를 갖는 집합에서 r 개의 원소를 순서 없이 뽑는 경우의 수는C (n, r) = P(n, r) / r!또는P (n, r) = n! / r!(n−r !) 순열에서 {1, 2, 3}과 {2, 3, 1}은 다르지만조합에서는 같게 생각한다. ✏️ 예) 1~8 중 4개를 골라 나올 수 있는 경우의 수? 순서는 상관없다.C(8, 4)= 8! / 4!4!= 8x7x6x5 / 4x3x2x1= 1680 / 24=70   2) 이항정리(binomial theorem) ✏️  (x+y)¹⁴의 전개식에서  x⁴y¹⁰계수를 구하라.  ✏️ (𝑥 + 𝑦)⁶ 의 전개식에서 𝑥³ 𝑦³ 의 계수는? ​​ 2025. 4. 12.
개발 메모 덤프 #2: 디깅력은 없고 메모만 가득 ✅  아랍어 입력 시 사용하기 좋은 무료폰트아랍어 오른쪽에서 왼쪽으로 읽고 쓰기에 좀 더 유의해야 할 필요가 있다.  무료+고품질 아랍어 폰트 종류웹/앱 UI : Cairo, IBM Plex Sans Arabic인쇄물/책 : Amiri, Scheherazade New타이틀/포스터 : Noto Kufi Arabic 아랍어에 관심을 가진 이유 : 키디야 프로젝트  ✅팔로업 해볼 Ant Design UIhttps://ant.design/좋은 기회로 한 CRM 데모를 테스트를 해볼 수 있었는데 세팅 기능이 상당해 놀랬던 적이 있다.소스를 살짝 보니 프론트 스택은 React에 Ant Design UI를 사용한 것을 알 수 있었다.몇 년전엔 한국에서도 선방했던 걸로 기억하는데 요즘엔 잘 들어보지 못함.Ant Des.. 2025. 4. 5.
[이산수학] 조합이론 - 계수, 순열 1. 기본 계수 법칙1) 곱셉법칙두 사건 A, B가 일어날 경우의 수가N(A) = m , N(B) = n 일 때,사건 A, B가 동시에 일어날 경우의 수는 m x n이다.N(A × B) = N(A) × N(B) = m × n  ✏️ 예) 5비트로 표현할 수 있는 2진수는? = 2⁶ = 64개   2) 합의 법칙두 사건 A, B가 일어날 경우의 수가N(A) = m , N(B) = n 일 때, A ⋂ B = ∅일 때,각각 사건 A, B가 일어날 경우의 수 m + n즉,  N ()A ⋂ B = ∅N (A ∪ B) = N(A) + N (B) = m + n  사건 X, Y, Z가 발생할 방법의 집합을 각각 A, B, C라고 하면(1) X 또는 Y가 발생할 경우의 수= A ∪ B = | A | + | B | − |.. 2025. 3. 29.