event.target vs event.currentTarget: JavaScript 이벤트 처리의 핵심 개념 완전 정복
·
Frontend Development
들어가며프론트엔드 개발을 하다 보면 이벤트 처리에서 event.target과 event.currentTarget을 자주 마주치게 됩니다. 하지만 이 둘의 차이점을 정확히 모르면 예상과 다른 동작으로 인해 버그가 발생할 수 있습니다. 이 글에서는 두 속성의 차이점과 실무에서의 활용법을 체계적으로 알아보겠습니다.기본 개념: event.target과 event.currentTarget이란?정의속성의미역할event.target이벤트가 실제로 발생한 요소사용자가 직접 상호작용한 요소event.currentTarget이벤트 리스너가 연결된 요소이벤트를 듣고 있는 요소💡 핵심 포인트: target은 "누가 이벤트를 일으켰나?", currentTarget은 "누가 이벤트를 처리하나?"를 나타냅니다.실생활 비유: 회사..
CDN(Content Delivery Network) 완전 정복: 웹 성능 최적화의 핵심 기술
·
Frontend Development
들어가며웹사이트를 개발하다 보면 "왜 이 사이트는 이렇게 느리지?"라는 고민을 한 번쯤 해보셨을 겁니다. 특히 해외 사용자가 접속했을 때 로딩 속도가 현저히 느려지는 경험을 했다면, CDN이 바로 그 해답이 될 수 있습니다. 이 글에서는 CDN의 개념부터 실무 적용까지 체계적으로 알아보겠습니다.CDN이란? 전 세계를 연결하는 콘텐츠 배송망CDN의 정의CDN(Content Delivery Network)은 전 세계에 분산되어 있는 서버 네트워크를 통해 사용자에게 웹 콘텐츠를 빠르고 효율적으로 제공하는 기술입니다.💡 핵심 포인트: CDN은 물리적 거리를 단축시켜 웹 성능을 향상시키는 기술입니다.실생활 비유: 편의점 프랜차이즈 시스템CDN을 이해하는 가장 쉬운 방법은 편의점 프랜차이즈에 비유하는 것입니다.기..
시스템 콜(System Call)이란? 운영체제와 프로그램 간의 소통 창구 완전 정복
·
Backend Development
들어가며백엔드 개발을 공부하다 보면 '시스템 콜'이라는 용어를 자주 접하게 됩니다. 하지만 정확히 무엇인지, 왜 필요한지 명확하게 이해하기 어려운 경우가 많습니다. 이 글에서는 시스템 콜의 개념부터 동작 원리까지 체계적으로 알아보겠습니다.시스템 콜이 필요한 이유: 자원 보호의 필요성왜 운영체제가 자원을 보호해야 할까?컴퓨터의 핵심 자원인 CPU, 메모리, 하드 디스크를 생각해보세요. 만약 모든 프로그램이 이런 자원에 마음대로 접근할 수 있다면 어떤 일이 벌어질까요?문제점들:한 프로그램이 다른 프로그램의 메모리를 덮어쓸 수 있음악성 프로그램이 하드 디스크의 중요한 파일을 삭제할 수 있음여러 프로그램이 동시에 같은 자원을 사용하려 해서 충돌 발생이는 마치 아파트 관리사무소 없이 모든 주민이 엘리베이터, 보일..
[백준 / 1647 / Python] 도시 분할 계획
·
Algorithm/백준
들어가며백준 1647번 '도시 분할 계획' 문제는 최소 신장 트리(MST)의 성질을 활용한 흥미로운 문제입니다. 핵심 아이디어는 전체 그래프에서 MST를 만든 후, 가장 비싼 간선 하나를 제거하면 두 개의 연결된 마을로 나눌 수 있다는 점입니다.문제 분석📋 문제 요약시간 제한: 2초 | 메모리 제한: 256MB | 정답률: 49.164%N개의 집과 M개의 길이 있는 마을을 두 개의 마을로 분할각 마을 내에서는 모든 집이 연결되어야 함남은 길의 유지비 합을 최소화🎯 핵심 통찰마을을 두 개로 나누기 = MST에서 간선 하나 제거하기왜 이 방법이 최적일까요?MST는 N-1개의 간선으로 모든 정점을 연결MST에서 간선 하나를 제거하면 정확히 두 개의 트리가 생성가장 비싼 간선을 제거해야 남은 비용이 최소해결..
TypeScript any vs 제네릭 T: 실행 결과로 보는 확실한 차이점
·
Frontend Development
들어가며"TypeScript에서 any랑 제네릭이랑 뭐가 다른가요? 실행하면 똑같은 결과가 나오는데요..."이런 질문을 받을 때마다 느끼는 것은, 런타임 결과만 봐서는 차이를 알기 어렵다는 점입니다. 하지만 실제 개발에서는 엄청난 차이가 있습니다.이 글에서는 실제 코드 실행 결과와 함께 any와 제네릭 T의 차이점을 단계별로 보여드리겠습니다. 마치 요리를 배울 때 레시피만 보는 것과 직접 만들어보는 것의 차이처럼, 코드를 실행해보면서 확실한 차이를 체감해보세요!1강: 겉으로는 똑같아 보이는 두 코드🔍 문제 상황먼저 가장 기본적인 예제부터 시작해보겠습니다.// any 버전: 모든 타입을 허용하지만 타입 정보 손실function getFirstAny(array: any[]): any { return ar..
TypeScript 제네릭 완전 정복: 실행 결과로 배우는 실전 가이드
·
Frontend Development
들어가며TypeScript 제네릭을 공부할 때 "이론은 알겠는데 실제로 어떻게 동작하는지 모르겠다"는 고민을 해본 적이 있나요? 이 글에서는 실제 코드 실행 결과와 함께 제네릭의 모든 것을 단계별로 알아보겠습니다.마치 요리 레시피를 보면서 직접 요리를 만들어보는 것처럼, 코드를 작성하고 실행 결과를 확인하면서 제네릭을 완전히 이해해보세요!1단계: 제네릭의 필요성 - any vs 제네릭 비교🔍 문제 상황 파악먼저 제네릭이 왜 필요한지 직접 확인해보겠습니다.// 제네릭 없이 (문제가 있는 코드)function getFirstElementAny(array: any[]): any { return array[0];}// 제네릭 사용 (개선된 코드)function getFirstElement(array: T[]..
TypeScript 제네릭, 이제는 정말 쉽게 이해해보자
·
Frontend Development
들어가며TypeScript를 처음 접하는 개발자들이 가장 어려워하는 개념 중 하나가 바로 제네릭(Generic)입니다. 처음 보는 같은 문법에 당황하고, "왜 이런 복잡한 걸 써야 하지?"라고 생각하기 쉽습니다. 하지만 제네릭을 이해하고 나면, 코드의 재사용성과 타입 안전성을 동시에 확보할 수 있는 강력한 도구라는 것을 알게 됩니다.이 글에서는 제네릭의 기본 개념부터 실무에서 자주 사용하는 패턴까지, 실전 예제와 함께 차근차근 알아보겠습니다.제네릭이란 무엇인가?일상생활 비유로 이해하기제네릭을 이해하기 위해 간단한 비유를 들어보겠습니다. 상자를 만드는 공장이 있다고 생각해보세요. 이 공장에서는 다양한 크기의 물건을 담을 수 있는 범용 상자를 만듭니다. 상자 자체는 하나의 설계도로 만들어지지만, 실제로 사..
[KAKAO BLIND RECRUITMENT / 2022 / Python] 양과 늑대
·
Algorithm/프로그래머스
문제 출처https://school.programmers.co.kr/learn/courses/30/lessons/92343문제2진 트리 모양 초원의 각 노드에 늑대와 양이 한 마리씩 놓여 있습니다. 이 초원의 루트 노드에서 출발하여 각 노드를 돌아다니며 양을 모으려 합니다. 각 노드를 방문할 때 마다 해당 노드에 있던 양과 늑대가 당신을 따라오게 됩니다. 이때, 늑대는 양을 잡아먹을 기회를 노리고 있으며, 당신이 모은 양의 수보다 늑대의 수가 같거나 더 많아지면 바로 모든 양을 잡아먹어 버립니다. 당신은 중간에 양이 늑대에게 잡아먹히지 않도록 하면서 최대한 많은 수의 양을 모아서 다시 루트 노드로 돌아오려 합니다.예를 들어, 위 그림의 경우(루트 노드에는 항상 양이 있습니다) 0번 노드(루트 노드)에서 ..
[프로그래머스 / PCCP 기출문제 9번 / Python] 지폐 접기
·
Algorithm/프로그래머스
문제 출처https://school.programmers.co.kr/learn/courses/30/lessons/340199문제민수는 다양한 지폐를 수집하는 취미를 가지고 있습니다. 지폐마다 크기가 달라 지갑에 넣으려면 여러 번 접어서 넣어야 합니다. 예를 들어 지갑의 크기가 30 * 15이고 지폐의 크기가 26 * 17이라면 한번 반으로 접어 13 * 17크기로 만든 뒤 90도 돌려서 지갑에 넣을 수 있습니다. 지폐를 접을 때는 다음과 같은 규칙을 지킵니다.지폐를 접을 때는 항상 길이가 긴 쪽을 반으로 접습니다.접기 전 길이가 홀수였다면 접은 후 소수점 이하는 버립니다.접힌 지폐를 그대로 또는 90도 돌려서 지갑에 넣을 수 있다면 그만 접습니다.지갑의 가로, 세로 크기를 담은 정수 리스트 wallet과..
LLM을 활용한 의미 기반 검색 시스템 자료구조 연구
·
카테고리 없음
1. 연구 주제 및 필요성1.1 연구 배경 및 주제 선정최근 LLM (Large Language Model) 발전으로 인해, 자연어 질의에 대한 응답 시스템에서의 정보 검색 구조의 중요성이 더욱 부각되고 있습니다. 특히 LLM이 실제로 문장을 생성하기 위해서는 관련성이 높은 문서를 질의에 맞춰 정확히 검색해내는 것이 핵심인데, 이때 사용되는 검색기의 효율성과 정확도가 전체 시스템의 성능에 직결됩니다.그러나 전통적인 키워드 검색 방식은 주로 dict[str, list[int]] 형태의 역색인(Inverted Index) 자료구조를 기반으로 하며, 질의에 포함된 단어와 정확히 일치하는 문서만을 반환합니다. 이 방식은 "하와이 여행 팁"이라는 질의가 "마우이 여행 조언"과 의미는 유사하지만 키워드가 다르면 검..