본문 바로가기

분류 전체보기276

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.
[Linux] windows WSL2 명령어 실행 안됨 - 디스크 공간 부족 ✅ 문제 발생별안간 git이 작동 안하는 문제 발생🫠conflict 문제가 아닌 git 명령어 자체가 작동을 안했습니다.그리고 던져준 에러 메세지.remote: Total 10 (delta 9), reused 10 (delta 9), pack-reused 0 (from 0) error: file write error: No space left on devicefatal: unable to write loose object filefatal: unpack-objects failed "No space left on device" 장치에 남은 공간이 없다.➡️ 디스크공간 부족 문제  ✅ 해결 과정1. 디스크 용량 확인df -h출력 결과에서 /dev/sdc (sdc부분은 다른 이름일 수 있음)의 .. 2025. 3. 8.
개발 메모 덤프 #1: 디깅력은 없고 메모만 가득 ✅ Mac에서 C#사용할 때 IDE는 Rider (JetBrains)이 괜찮다.Visual Studio Code는 따로 확장을 해줘야 해서 번거로움이 있다.스터디 멤버들이랑 짧게 찍먹했던 Unity 프로젝트를 Mac(심지어 intel)에서 돌리기 예삿일이 아니었는데WebStorm설치하면서 '이게뭐지?'하고 설치해 둔 Rider가 효도했다. ✅ B2B 박람회 첫 출장에서 알게된 비즈니스 팁 & 매너 : 명함을 주고 받았을 때1. 명함은 기준을 나눈다.협업 가능성 높은 곳일반적인 인사만 나눈 경우(이벤트로 유도해서 명함을 받는 경우도 있음)당장은 연관성 없지만, 잠재적인 관계자 2. B2B 박람회 종료 후 후속 메일(follow-up email, thank you email)을 보낸다. 기본적인 비즈니스.. 2025. 2. 10.