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

납치광고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.

독학사 컴퓨터공학 2과정 시험 후기와 팁

배경학점은행제로 컴퓨터공학 학위를 취득하기 위해 독학학위제 전공기초과정(독학사 2과정) 시험에 응시했습니다. 학위 취득 과정을 기록하고, 시험을 준비하는 분들께 도움이 될 만한 정보를 공유하고자 후기를 작성합니다.결과약 2주간 하루 1~2시간을 투자해 8과목 중 7과목에 합격했습니다.공부방법기초 지식으로는 이전에 정보처리기사 자격증을 준비하고 코딩 테스트를 연습했던 경험이 있습니다.교재는 (ebook, 18,900원) 을 선택했습니다. ebook으로 구매해 주로 태블릿으로 학습했고, 이동 중에는 핸드폰을 활용했습니다. 이해가 어려운 부분은 여러 유튜브 강의 영상을 참고하며 보충했습니다.시험문제는 대부분 교재의 문제와 비슷하게 나오는 것 같습니다. 교재에 나온 기출문제와 연습문제를 쉽게 풀 수 있다면 가..

• format_list_bulleted 후기
• · 2025. 6. 10.

Tailwind CSS 4.0 주요 변경점 정리 : CSS 우선 설정 (굿바이 config.ts)

Tailwind CSS 4.0 정식 출시2025년 1월 Tailwind CSS 4.0이 정식 출시되었습니다. 이번 업데이트에서는 성능과 편의성 개선 뿐만아니라, 설정 방식이 크게 변경되었습니다. 따라서, 이번 포스팅에서는 4.0 버전의 변경사항을 간략히 정리하고, 설정 방식이 어떻게 변경되었는지 그것이 시사하는바는 무엇인지 정리해보려고 합니다.주요 변경점CSS 우선 구성 (CSS First Configuration): tailwind.config.js에서 벗어나 CSS 파일 내에서 직접 설정을 관리합니다.간소화된 설치Rust 기반 Lightning CSS 엔진 도입을 통한 빌드 성능 개선새로운 유틸리티 클래스 추가CSS 우선 구성(CSS First Configuration)Tailwind CSS 4.0에..

• format_list_bulleted 위키
• · 2025. 5. 29.

리액트 개발자라면 usehooks-ts 라이브러리를 주목해야할 이유

커스텀 훅이란리액트에서 커스텀 훅(Custom Hook)은 이름이 ‘use’로 시작하며 내부에서 useState, useEffect와 같은 훅들이나 다른 커스텀 훅들을 호출하는 함수를 말합니다. 이는 반복되는 상태 관련 로직이나 사이드 이펙트 처리 로직을 컴포넌트로부터 분리하여 재사용 가능하게 합니다. 따라서, 잘 만들어진 커스텀 훅은 압도적인 재사용성과 가독성으로 리액트 개발자를 춤추게할 수 있습니다.참고자료 1 : React : 커스텀 Hook으로 로직 재사용하기usehooks-ts란?usehooks-ts는 타입스크립트를 완벽하게 지원하는 재사용 가능한 리액트 훅 라이브러리입니다. 이 라이브러리는 개발 과정에서 자주 사용되지만 직접 구현하기에는 번거로울 수 있는 다양한 로직들(예: 디바운싱, 스토리지..

• format_list_bulleted 후기
• · 2025. 5. 19.