콜백 함수, 익명 함수(람다), 클로저

콜백 함수(Callback Function)콜백 함수란 인수(argument)로 다른 함수에 전달되는 함수를 말한다. 일종의 루틴이나 동작을 완료하기 위해 외부 함수 내부에서 호출된다.콜백함수의 용도비동기 처리 : 어떤 작업이 완료되었었을 때 후속 처리를 하기 위해 사용된다.const fs = require('node:fs');fs.readFile('/Users/joe/test.txt', 'utf8', (err, data) => { if (err) { console.error(err); return; } console.log(data);});이벤트 핸들러 : 이벤트가 발생했을 때 실행할 함수를 등록할 때 사용된다.// HTML: 클릭하세요const myButton = document.ge..

• format_list_bulleted 위키
• · 2025. 7. 28.

브라우저의 렌더링 과정

HTML 파싱과 DOM 생성브라우저의 요청에 의해 서버가 응답한 HTML 문서는 기본적으로 텍스트이다. 브라우저의 렌더링 엔진은 HTML 텍스트를 파싱하여 DOM(Document Object Model)을 생성한다. DOM이란 브라우저가 문서를 이해할 수 있도록 트리구조로 이루어져 있다.CSS 파싱렌더링 엔진은 HTML을 한 줄씩 순서대로 파싱하며 DOM을 생성한다. 이때 CSS를 로드하는 나 태그가 나오면 DOM 생성을 일시 중지하고 CSSOM을 생성한다.CSSOM에는 CSS의 상속(inheritance) 규칙이 적용된다. 예를 들어, 부모 요소에 적용된 color 속성은 자식 요소에도 동일하게 적용된다.렌더트리 생성DOM과 CSSOM이 모두 만들어지면, 렌더링 엔진은 이 두 가지를 결합하여 렌더 ..

• format_list_bulleted 위키
• · 2025. 7. 21.

네트워크 관리사 2급 실기 에뮬레이터 Wineskin으로 Mac에서 돌리기

개요네트워크관리사 2급 실기 시험은 검정용 프로그램을 사용한 작업형 시험이다. 한국정보통신자격협회 자료실에서 실습용 프로그램을 내려받을 수 있다. 그런데 실습용 프로그램은 Windows가 필요하다. 그런데 집에 있던 유일한 Window 노트북이 수명을 다해버렸다. 그래서 Wineskin으로 MacOS에서 네트워크관리사 2급 실습용 프로그램을 실행해보고 방법을 정리했다.Wineskin이란?Windows 소프트웨어를 MacOS에서 실행할 수 있게 해주는 포팅/래퍼 프로그램.오리지널 프로그램 Wineskin은 2015년 이후 개발이 중단되었으며, 지금은 Gcenx에 의해 Kegworks라는 이름의 프로젝트로 이어지고 있다.Wineskin에 대한 부가적인 정보를 덧붙이자면, Wineskin은 Wine이라는 C..

• format_list_bulleted 위키
• · 2025. 7. 19.

프론트엔드 관점에서 바라본 납치 광고

납치광고2025년 6월 20일, 방송통신위원회는 사용자가 클릭하지 않았음에도 특정 사이트로 강제 이동시키는 광고(이른바 ‘납치광고’)에 대한 사실조사 착수를 발표했다. 이러한 납치 광고는 웹 사용자에게 상당한 불편과 불쾌감을 준다.이 글에서는 프론트엔드 개발자의 시각에서 납치 광고가 어떤 목적으로, 어떤 기술적 원리를 통해 사용자를 '납치'하는지 분석하고, 이를 방어할 수 있는 방법에 대해 다루고자 한다.왜 납치하는가?납치 광고의 목적은 크게 두 가지로 나눌 수 있다.단순 사이트 홍보 : 특정 웹사이트를 사용자에게 강제로 노출시켜 인지도를 높이고 트래픽을 늘리려는 목적.제휴 마케팅 악용 : 제휴 마케팅을 악용하여 수수료 수익을 얻는 목적.제휴 마케팅이란?많은 온라인 플랫폼 및 기업들은 마케팅의 일환으로 ..

• format_list_bulleted 분석
• · 2025. 6. 30.

NestJS 유효성 검사 동작원리 딥다이브 : 왜 interface 대신 class를 사용할까?

Nestjs란?NestJS는 TypeScript를 기반으로 강력하고 확장 가능한 서버 애플리케이션을 구축할 수 있게 해주는 Node.js 프레임워크입니다. 특히 Spring Framework와 유사한 의존성 주입(DI), 모듈 시스템 등은 대규모 프로젝트의 구조를 체계적으로 관리하는 데 큰 강점을 보입니다.의존성 주입(DI)이란?클래스가 필요로 하는 의존성(다른 클래스의 인스턴스 등)을 내부에서 직접 생성하는 것이 아니라, 외부(NestJS 모듈)에서 주입받아 사용하는 디자인 패턴입니다. 이를 통해 코드 간의 결합도를 낮추고 테스트 용이성과 재사용성을 높일 수 있습니다.Pipe를 통한 유효성 검사NestJS의 여러 기능 중, 파이프는 컨트롤러의 핸들러로 들어오는 요청 데이터를 처리하는 역할을 하며, 주로..

• format_list_bulleted 분석
• · 2025. 6. 22.

Supabase + 임베딩으로 비슷한 문장 찾아주기

임베딩 활용하여 추천 서비스 만들기사용자가 인상 깊은 문장을 수집하면, 비슷한 문장을 수집한 다른 사용자와 연결해주는 서비스 글모이를 개발하면서 문장간 유사도 비교를 위해서 문장을 벡터로 변환하는 '임베딩(Embedding)' 기술을 사용하여, 생성된 임베딩 벡터를 데이터베이스에 저장할 필요가 있었습니다.임베딩(Embedding)이란 단어나 문장 같은 텍스트 데이터를 컴퓨터가 처리하고 이해할 수 있는 숫자 형태, 즉 벡터(Vector)로 변환하는 기술입니다. 이 벡터는 고차원 공간(수많은 차원을 가진 가상의 공간)에 표현되는데, 이때 의미적으로 유사한 단어나 문장은 이 공간에서 서로 가까운 위치에 배치됩니다.예를 들어, "사과"와 "배"는 과일이라는 공통점 때문에 벡터 공간에서 가깝게 위치하고, "자동차..

• format_list_bulleted 회고
• · 2025. 6. 16.