Dachae's DevLogs

개발 지식 글 모아보기 [언어]HTML[시맨틱 태그] 웹 페이지 구조의 의미를 담다.[Canvas 태그] 그래픽을 위한 HTML의 도화지CSS[Cascading] CSS에서 스타일 우선순위를 결정하는 규칙JavaScript1. 변수와 스코프 관련 [var, let, const] 자바스크립트 변수 선언의 차이점과 쓰임새[TDZ] 선언했는데 왜 에러가 날까?[호이스팅] 변수 선언의 비밀 [스코프] 변수는 어디까지 살아있을까? [Closure] 자바스크립트의 숨겨진 강력한 기능 2. 실행 흐름과 비동기 처리 [실행 컨텍스트] 자바스크립트는 이렇게 코드를 실행한다. [Event Loop] 자바스크립트는 어떻게 비동기적으로 동작할까?[Promise] 비동기 처리의 핵심 개념[async와 await] 비동기..

알고리즘 모아 보기 이 글은 개발자가 알아야 할 알고리즘 지식을 한 눈에 정리한 페이지입니다. 정렬, 탐색, 재귀, 동적 계획법, 그리디, 백트래킹, 그래프 알고리즘 등 실무와 코딩 테스트, 기술 면접에서 자주 등장하는 알고리즘 주제들을 중심으로 구성했습니다. 단순히 코드를 암기하기보다는 알고리즘이 왜 그렇게 동작하는지, 문제 상황에서 어떤 식으로 적용되는지에 중점을 두었으며, 각 글마다 예제와 시각적 설명을 포함해 이해를 도왔습니다.처음 알고리즘을 접하는 분들도 부담 없이 따라올 수 있도록 기초부터 설명했으며, 면접 전에 빠르게 개념을 정리하거나, 구현이 헷갈렸던 부분을 다시 복습할 때도 유용하게 사용할 수 있습니다.앞으로 새로운 글이 추가될 때마다 이곳에 함께 정리되며, 지속적으로 업데이트될 예정입니..

정보처리기사 필기 [1과목 소프트웨어 설계]소프트웨어 생명 주기[SDLC] 소프트웨어 생명 주기 모델: 폭포수부터 애자일까지[워터폴과 애자일] 개발 프로젝트에 맞는 방법론은?[스크럼] 자율과 협업 중심의 애자일 실천법[XP] 개발자라면 알아야 할 극한 프로그래밍[TDD] 기능 구현보다 테스트가 먼저다!개발 방법론 및 분석 기법[요구사항 명세 기법] 프로젝트 성공을 좌우하는 명확한 요구사항 작성법[럼바우 분석 기법] 객체지향 분석의 고전, 럼바우 OMT 기법 총정리개발 환경 구성[미들웨어] 시스템의 중간 관리자[CASE] 개발 생산성을 높이는 자동화 도구설계 기법 및 공학적 원칙[UML] 복잡한 시스템을 시각화하는 언어[OOP] 객체 지향 프로그래밍이란 무엇인가?[GOF 디자인 패턴] 좋은 소프트웨어 설..

객체 리터럴(Object Literal) 자바스크립트에서 객체는 데이터를 구조화하고 관리하는 데 있어 핵심적인 역할을 합니다. 그중에서도 객체를 선언하는 가장 직관적이고 간단한 방법은 바로 객체 리터럴(Object Literal)을 사용하는 것입니다. 객체 리터럴은 {} 중괄호 안에 key-value 쌍을 나열함으로써 객체를 빠르게 만들 수 있는 문법이며, JSON과 매우 유사한 구조를 가지고 있어 학습 곡선이 완만합니다. 이 문법은 단순한 데이터 구조뿐 아니라, 동적으로 속성을 추가하거나 함수(메서드)를 포함시키는 등 다양한 활용이 가능해 초보자부터 숙련된 개발자까지 널리 사용됩니다. 또한 프론트엔드 개발에서는 서버로부터 받은 데이터를 재구성하거나 구성요소의 상태를 표현할 때 자주 등장하기 때문에, 객..

핸들러(handler) 핸들러(handler)는 말 그대로 어떤 "일을 처리하는" 함수입니다. 보통 특정 이벤트(event)가 발생했을 때, 그 이벤트에 반응하여 정의된 동작을 수행하는 함수를 의미합니다. 이런 이벤트는 사용자 인터랙션일 수도 있고, 네트워크 요청 결과일 수도 있으며, 시스템 내부의 트리거나 오류일 수도 있습니다.리액트 같은 프론트엔드 프레임워크뿐만 아니라, 백엔드, 시스템 프로그래밍, 심지어 IoT에서도 핸들러 개념은 동일하게 적용됩니다. 중요한 건 "무엇인가가 발생했을 때 어떻게 반응할지를 정의하는 함수"라는 점입니다. 1. 어떤 상황에서 핸들러가 등장할까?핸들러는 다음과 같은 상황에서 자주 사용됩니다.이벤트 기반 프로그래밍UI 요소 클릭, 입력, 포커스, 스크롤 등예: click..

클래스(Class)와 구조체(Struct)C++에서 Class와 Struct는 둘 다 사용자 정의 타입을 만들기 위한 도구입니다. 많은 초보자들이 C++에서 Class와 Struct를 혼용할 수 있다는 사실에 놀라지만, 실제로 이 둘은 문법적으로 거의 동일합니다. 하지만 몇 가지 중요한 차이가 존재하며, 이 차이점은 코드의 가독성, 유지보수성, 그리고 협업에 있어 중요한 영향을 줄 수 있습니다. 특히 C++에서는 구조체도 멤버 함수, 상속, 접근 제어자 등을 사용할 수 있기 때문에 단순히 "데이터 집합"으로만 구조체를 생각하는 것은 C 언어의 관점에 국한된 것입니다. 1. 클래스와 구조체의 공통점C++에서 Class와 Struct는 매우 비슷하게 동작합니다. 다음과 같은 기능들을 공통적으로 사용할 수 ..

Class의 상속 C++은 객체지향 언어로서 클래스와 상속 개념을 기반으로 코드의 재사용성, 확장성, 유지보수성을 높일 수 있는 기능을 제공합니다. C++에서 상속을 사용하면, 기존 클래스의 멤버(변수 및 함수)를 자식 클래스가 그대로 물려받아 사용할 수 있으며, 필요 시 오버라이딩(overriding)을 통해 일부 기능을 수정하거나 확장할 수 있습니다.이 글에서는 C++에서 클래스 상속이 어떻게 사용되는지에 대한 전반적인 내용을 다룹니다. 기본 문법은 물론, 접근 제어자(public, protected, private), 가상 함수(virtual function), 다형성(polymorphism), 다중 상속(multiple inheritance)까지 C++에서 자주 쓰이는 상속 개념을 자세히 살펴보겠..

React의 StrictMode란? React에는 라는 컴포넌트가 있습니다. 특히 create-react-app으로 생성한 프로젝트에서는 기본적으로 루트에 사용되고 있는데요, "StrictMode는 개발 모드에서만 작동한다"는 것 외에 명확히 알고 있는 사람은 의외로 많지 않습니다.StrictMode는 단순한 개발 도구를 넘어, 리액트 컴포넌트의 동작을 더 엄격하게 감시하고, 잠재적인 문제를 조기에 감지할 수 있게 도와주는 중요한 역할을 합니다. 특히 비동기 렌더링 환경이나 React 18의 동시성 모드와 관련된 이슈를 디버깅할 때, StrictMode는 필수적인 점검 도구로 기능합니다. 예를 들어, 부작용(side effect)을 유발할 수 있는 코드를 감지하기 위해 컴포넌트를 의도적으로 두 번 마운트..

useContext React 애플리케이션에서 컴포넌트 간 데이터를 공유할 때 props drilling(깊게 전달되는 props)이 반복되면 유지보수가 어려워집니다. 이때 useContext 훅은 컴포넌트 트리 전체에 걸쳐 데이터를 쉽게 공유할 수 있는 강력한 도구가 됩니다. 이 글에서는 useContext에 대한 개념 설명은 생략하고, 실제로 프로젝트에서 어떻게 useContext를 사용하는지 A부터 Z까지 구현 중심으로 자세히 안내합니다. 1. Context 생성하기 (Create Context)먼저 context 객체를 생성합니다.// ThemeContext.jsimport { createContext } from 'react';export const ThemeContext = createCon..

useEffect 리액트에서 함수형 컴포넌트를 사용할 때 가장 자주 만나게 되는 훅 중 하나가 useEffect 입니다. useEffect 는 컴포넌트가 렌더링된 이후 특정 작업(사이드 이펙트)을 실행할 수 있게 도와주는 훅입니다. 예를 들어, API 호출, 이벤트 리스너 등록, 타이머 설정, 외부 라이브러리 초기화 등의 작업이 이에 해당합니다.이 글에서는 useEffect 의 기본 개념부터 동작 방식, 의존성 배열, 정리(clean-up) 함수까지 단계별로 알아보겠습니다. 1. useEffect란?useEffect 는 리액트 컴포넌트가 렌더링된 이후 실행되는 함수입니다. 컴포넌트가 처음 렌더링될 때, 특정 값이 바뀔 때, 컴포넌트가 사라질 때 등 다양한 타이밍에 맞춰 동작할 수 있습니다.useEffe..

useRef 리액트에서 DOM에 직접 접근하거나 컴포넌트 간 특정 값을 공유하고 싶을 때, useRef 훅은 매우 유용한 도구입니다. 초보자에게는 조금 낯설 수 있지만, 잘 활용하면 불필요한 리렌더링을 줄이고, DOM 요소를 직접 제어하며, 타이머나 이전 상태 값을 저장하는 등 다양한 상황에서 활용할 수 있습니다. 1. useRef란?useRef 는 리액트 훅 중 하나로, 변경 가능한 참조 객체(mutable ref object)를 반환합니다. 이 객체는 .current 라는 프로퍼티를 가지고 있으며, 여기에 원하는 값을 저장하거나 DOM 요소를 참조할 수 있습니다.const myRef = useRef(initialValue);myRef.current 에 값이 저장됩니다..current 의 값이 변경..

포트 포워딩(Port Forwarding) 포트 포워딩(Port Forwarding)은 내부 네트워크에 위치한 장치나 서비스를 외부에서 접근할 수 있도록 해주는 네트워크 설정 기법입니다. 일반적으로 가정이나 회사에서 사용하는 공유기(라우터)는 외부에서 직접 내부 IP에 접근할 수 없게 보호되어 있는데, 이때 특정 포트를 열고, 외부 요청을 내부 장치로 전달하는 역할을 하는 것이 포트 포워딩입니다. 웹 서버, 게임 서버, 원격 데스크톱 등을 외부에서 사용하기 위해 꼭 필요한 기술이며, 네트워크 보안이나 방화벽 설정과도 밀접하게 연결됩니다. 1. 포트 포워딩이란?포트 포워딩은 외부에서 특정 포트로 들어오는 요청을 내부 네트워크의 특정 IP 주소와 포트로 전달하는 라우터의 기능입니다. 일반적으로 NAT(Ne..

스마트 워크(Smart Work) ‘스마트 워크(Smart Work)’는 단순히 재택근무나 유연근무제를 뜻하는 것이 아닙니다. 스마트 워크는 정보통신기술(ICT)을 활용해 시간과 장소에 구애받지 않고 효율적으로 일할 수 있는 환경과 문화를 만드는 것을 의미합니다. 이는 조직의 생산성을 높이고, 구성원의 삶의 질을 향상시키며, 더 나은 워라밸(Work-Life Balance)을 실현하기 위한 전략입니다. 팬데믹 이후 급속히 확산된 원격근무 환경은 스마트 워크의 필요성과 가능성을 널리 인식시켰고, 많은 기업이 이를 새로운 표준으로 채택하고 있습니다. 1. 스마트 워크의 정의스마트 워크(Smart Work)란 다음과 같은 요소를 포함하는 개념입니다.시간과 장소의 제약 없는 근무 방식 : 재택근무, 원격근무,..

써드 파티(Third-party) 써드 파티(Third-party)라는 용어는 단순히 외부에서 가져온 코드나 도구를 의미하는 것 같지만, 실제로는 그 이상의 의미를 지닙니다. 현대 애플리케이션 개발은 혼자 모든 기능을 구현하기보다는, 이미 잘 만들어진 외부 라이브러리나 API, 서비스들을 조합하여 효율적으로 완성하는 방식으로 진화해 왔습니다. 이 과정에서 사용되는 다양한 외부 기술 요소들을 통칭하는 것이 바로 써드 파티입니다. 예를 들어, 날씨 정보를 가져오기 위해 외부 API를 연동하거나, 인증 기능을 구현하기 위해 Firebase 같은 서비스를 사용하는 것도 모두 써드 파티의 활용입니다. 써드 파티를 적절히 활용하면 개발 생산성을 높이고, 안정적이며 검증된 기능을 손쉽게 적용할 수 있습니다. 그러나..

디지털 트윈(Digital Twin) 디지털 트윈(Digital Twin)은 물리적 객체나 시스템을 디지털 공간에 그대로 복제한 가상 모델입니다. 단순한 3D 모델이 아니라, 실제 환경에서 수집한 센서 데이터를 기반으로 실시간 동작과 상태를 모사하고 예측할 수 있는 시스템이죠. 이 기술은 제조, 스마트 시티, 헬스케어, 항공, 에너지 등 다양한 산업에서 활용되며, 특히 IoT, AI, 빅데이터 기술과 결합되어 높은 시너지를 발휘합니다. 최근에는 시뮬레이션을 넘어서, 실시간 최적화와 의사 결정 자동화까지 가능하게 만들고 있습니다. 1. 디지털 트윈이란?디지털 트윈은 물리적인 시스템이나 객체의 디지털 복제 모델로, 물리적 자산의 상태, 동작, 동적인 반응 등을 실시간 데이터를 통해 모니터링하고 예측하는 데..

렌더링 병목 웹페이지가 아무리 멋지게 만들어져 있어도, 스크롤이 끊기거나 애니메이션이 버벅거리는 등의 브라우저 성능 저하로 인해 사용자는 불편을 느낍니다. 이런 퍼포먼스 저하의 대부분은 렌더링 병목(Rendering Bottleneck)에서 발생합니다. 렌더링 병목이란 브라우저가 화면을 그리는 과정에서 특정 단계가 지나치게 오래 걸려 브라우저 전체 성능을 떨어뜨리는 현상을 말합니다. 이는 주로 불필요한 연산, 과도한 DOM 변경, 복잡한 스타일 계산, 비효율적인 스크립트 실행 등에서 비롯됩니다.이 글에서는 브라우저 렌더링 파이프라인의 각 단계별 병목 지점을 상세히 살펴보고, 어떤 작업이 병목을 유발하는지, 이를 줄이기 위한 실전적인 최적화 전략까지 다뤄보겠습니다. 1. 브라우저 렌더링 파이프라인 요약렌..

계수 정렬(Counting Sort) 계수 정렬(Counting Sort)은 값을 직접 비교하지 않고, 등장 횟수를 세는 방식으로 정렬을 수행하는 비비교 정렬 알고리즘입니다. 정수나 정수로 표현 가능한 데이터를 정렬할 때 매우 빠르며, 특히 데이터 값의 범위가 작고, 중복이 많을수록 효율적입니다.정렬하고자 하는 값들의 개수를 카운트 배열에 저장한 뒤, 각 값을 정렬된 위치로 바로 배치하는 방식이기 때문에 최악의 경우에도 O(n + k)의 시간 복잡도를 가집니다. (k는 값의 최대 범위)단점은 데이터 값이 음수이거나, 범위가 너무 넓을 경우 메모리 낭비가 발생할 수 있다는 점입니다. 1. 계수 정렬이란? 계수 정렬은 다음의 방식으로 정렬합니다.입력 배열의 값들을 세어, 값마다 등장 횟수를 저장누적 합을 ..

기수 정렬(Radix Sort) 기수 정렬(Radix Sort)은 데이터를 정렬할 때 숫자의 자릿수(또는 문자열의 위치)를 기준으로 정렬하는 비교하지 않는(non-comparison based) 정렬 알고리즘입니다. 버블 정렬이나 퀵 정렬처럼 값을 비교하지 않고, 숫자나 문자열의 각 자리를 기준으로 여러 번 분류하여 정렬합니다.정수나 고정 길이 문자열과 같이 구조가 명확한 데이터에서 매우 빠르게 동작할 수 있으며, 특히 비교 기반 정렬의 이론적 하한인 O(n log n)을 우회하여 O(nk)의 성능을 달성할 수 있습니다.단점으로는 비교 기반이 아니므로 모든 데이터에 적용할 수는 없으며, 자릿수를 기준으로 반복 작업이 필요하기 때문에 메모리 사용량도 상대적으로 높을 수 있습니다. 1. 기수 정렬이란? 기..

힙 정렬(Heap Sort) 힙 정렬(Heap Sort)은 완전 이진 트리 기반의 힙(Heap) 자료구조를 활용하는 정렬 알고리즘입니다. 정렬 과정에서 힙을 사용해 가장 큰 값(또는 가장 작은 값)을 빠르게 추출하고, 이를 반복하여 정렬을 완성합니다.힙 정렬은 시간 복잡도가 항상 O(n log n)으로 일정하며, 추가적인 메모리를 거의 사용하지 않는 제자리(in-place) 정렬입니다. 단점은 안정 정렬이 아니며, 구현이 다소 복잡하다는 점이지만, 일정한 성능과 메모리 효율이 요구되는 상황에서는 매우 유용한 선택이 될 수 있습니다. 1. 힙 정렬이란? 힙 정렬은 다음과 같은 두 단계를 반복합니다.최대 힙(Max Heap)을 구성하여 가장 큰 값을 루트로 보냅니다.가장 큰 값을 배열 뒤로 보내고, 남은 ..

병합 정렬(Merge Sort) 병합 정렬(Merge Sort)은 분할 정복(Divide and Conquer) 전략을 사용하는 대표적인 정렬 알고리즘입니다. 데이터를 더 이상 나눌 수 없을 만큼 작게 쪼갠 뒤, 나눈 조각들을 정렬하면서 다시 하나로 합치는 방식으로 동작합니다.퀵 정렬과 마찬가지로 평균 시간 복잡도는 O(n log n)이지만, 병합 정렬은 최악의 경우에도 O(n log n)을 보장하며, 안정 정렬이라는 장점도 가집니다. 다만, 추가 메모리 공간이 필요하다는 단점이 있어 메모리 제약이 있는 환경에서는 고려가 필요합니다.이 글에서는 병합 정렬의 개념, 작동 방식, 다양한 언어로의 구현, 성능 분석을 포함해 병합 정렬이 어떤 상황에서 유용한지 살펴봅니다. 1. 병합 정렬이란? 병합 정렬은 데..

퀵 정렬(Quick Sort) 퀵 정렬(Quick Sort)은 평균적으로 가장 빠르게 동작하는 정렬 알고리즘으로 알려져 있으며, 분할 정복(Divide and Conquer) 전략을 기반으로 합니다. 리스트에서 기준 값(피벗, pivot)을 정한 후, 피벗보다 작은 값과 큰 값을 나누어 각각을 재귀적으로 정렬하는 방식입니다.이 알고리즘은 in-place 정렬이 가능하고, 평균 시간 복잡도가 O(n log n)으로 매우 우수하기 때문에 실무에서도 널리 사용되며, 다양한 언어의 표준 라이브러리에도 활용됩니다. 다만, 피벗 선택이 좋지 않으면 최악의 경우 O(n²)까지 성능이 떨어질 수 있어 그에 대한 보완 전략도 함께 알아둘 필요가 있습니다. 1. 퀵 정렬이란? 퀵 정렬은 기준이 되는 값을 하나 정한 뒤,..