최연탄 벨만-포드 알고리즘(Bellman-Ford Algorithm)은 음의 가중치를 허용하는 최단 경로 찾기 알고리즘입니다. 다익스트라 알고리즘과 달리 음의 가중치가 있어도 동작하지만, 음의 사이클(negative weight cycle)이 존재할 경우 경로를 제대로 계산할 수 없습니다. 이 알고리즘은 단일 시작점에서 다른 모든 정점까지의 최단 거리를 구할 수 있습니다. 벨만-포드 알고리즘 예제 주요 코드: 사용 예제: 출력 결과: 개요 용어 정리 핵심 아이디어 벨만-포드 … Read more
투 포인터 알고리즘은 알고리즘 문제 풀이에서 자주 사용되는 기법입니다. 선형 자료구조(배열, 문자열 등)에서 특정 조건을 만족하는 부분을 빠르게 찾을 수 있습니다. 이번 포스트에서는 투 포인터 알고리즘에 대해 자세히 알아보겠습니다. 투 포인터 알고리즘이란? 이는 두 개의 포인터를 사용해 배열을 탐색하는 방식입니다. 기본 개념 포인터란? 투 포인터 구조 대표적인 구조는 다음과 같습니다: 큰 흐름은 배열을 처음부터 탐색하는데 … Read more
다익스트라 알고리즘(Dijkstra’s Algorithm)은 그래프의 한 정점에서 다른 모든 정점까지의 최단 경로를 찾는 알고리즘입니다. 음의 가중치가 없는 그래프에서만 동작하며 대표적인 최단 경로 탐색 알고리즘입니다. 다익스트라 알고리즘 예제 우선순위 큐 사용 예제 예제 그래프 다익스트라 알고리즘 설명 PriorityQueue는 다익스트라 알고리즘에서 가장 가까운 노드를 선택하기 위해 사용됩니다. 이번 예제에서는 배열 정렬을 사용하지만 성능이 중요한 상황에서는 최소 힙 구조를 … Read more
슬라이딩 윈도우(Sliding Window) 알고리즘은 배열이나 문자열을 다룰 때, 일정한 크기의 창(window)을 좌우로 움직이며 데이터를 처리하는 알고리즘 기법입니다. 이는 주로 연속된 부분 배열에서의 합, 최대/최소값, 조건 만족 여부 등을 빠르게 구할 때 사용합니다. 이 알고리즘은 성능 향상을 원할 때 아주 유용하게 사용할 수 있고 중복된 계산은 피하면서 연속된 데이터 조각을 효율적으로 처리할 수 있습니다. 주요 개념 … Read more
자바스크립트에서 문자열을 배열로 변환하는 방법은 여러 가지가 있습니다. 목적에 따라 다양한 방식으로 처리할 수 있습니다. 이 포스트에서는 문자열을 배열로 바꾸는 다양한 방법과 예제 코드를 알아보겠습니다. split() 메소드 사용 split() 메소드는 문자열을 특정 구분자(delimiter)를 기준으로 잘라서 배열로 만들어 줍니다. 첫 번째 매개변수인 separator는 문자열을 나눌 기준으로 공백이나 쉼표 등을 사용할 수 있습니다. 두 번째 매개변수 limit는 … Read more
자바스크립트를 사용한 파일 다운로드 방법은 여러 가지가 있습니다. 가장 일반적인 시나리오는 브라우저에서 파일을 생성하고 사용자에게 다운로드하도록 유도하는 방법입니다. 브라우저 상에서 자바스크립트를 이용해 특정 데이터를 파일로 만들고 사용자가 다운로드 하도록 하는 것 입니다. 텍스트 파일 다운로드 위의 예제 코드를 실행하면 example.txt 파일이 바로 다운로드될 것 입니다. 특정 버튼을 클릭한 경우 다운로드를 진행하고 싶을 때는 뒤에 설명할 … Read more
특정 파일이 존재하는지 확인하기위해 fs.exists() 메소드나 fs.access() 메소드를 사용할 수 있습니다. 이 외에도 다양한 방법으로 파일 존재 여부를 확인할 수 있지만 fs.access() 메소드를 사용하는 것을 권장합니다. fs.exists() fs.exists(path, callback)는 파일 또는 디렉토리의 존재 여부를 확인하는 비동기 함수입니다. 그러나 콜백이 호출되지 않을 수도 있는 문제로 인해 Node.js에서는 사용을 권장하지 않습니다. 주어진 경로의 파일 또는 디렉토리가 존재하면 … Read more
fs.readFile() 메소드는 Node.js에서 파일을 비동기적으로 읽을 때 사용하는 함수입니다. 파일을 열고 내용을 읽은 뒤, 콜백 함수를 통해 결과를 전달합니다. 이 함수는 파일을 완전히 읽은 후(전체 파일을 메모리에 로드)에 콜백 함수를 호출하기 때문에, 파일을 스트리밍하지는 않습니다. readFile 기본 문법 readFile 사용 방법 위 예제는 example.txt 파일을 utf8 인코딩으로 읽어오는 코드입니다. 파일을 모두 읽은 후 콜백 함수를 … Read more
fs.writeFile()메소드는 Node.js의 fs(File System) 모듈에 있는 메소드입니다. 데이터를 파일에 비동기적으로 작성할 때 사용합니다. 만약 해당 파일이 파일 시스템에 없다면 새로 생성하고, 이미 존재하면 덮어씌웁니다. writeFile 기본 문법 매개변수는 다음과 같습니다: writeFile 예제 예제 코드의 설명은 다음과 같습니다: 파일에 쓰고자하는 데이터가 객체인 경우 JSON 데이터 저장하기 방법을 사용해야 합니다. 간단히 설명하자면 JSON.stringify() 메소드를 사용해 객체를 문자열로 … Read more
Node.js에서 JSON 파일 저장 방법으로는 fs(File System) 모듈을 사용하여 데이터를 파일에 쓰면 됩니다. fs 모듈은 파일을 읽고 쓰는 기능을 제공합니다. 여기서 writeFile() 메소드를 사용하면 데이터를 파일에 쓸 수 있습니다. JSON JSON(JavaScript Object Notation)이란 가볍게 사용하도록 고안된 데이터 교환 포맷입니다. 사람과 기계 모두 읽고 쓰기 쉬운 텍스트 형식으로 웹 애플리케이션에서 클라이언트와 서버 간에 데이터를 주고받을 때 … Read more
Node.js의 fs 모듈은 File System을 다루는 내장 모듈입니다. 파일이나 디렉토리의 생성, 읽기, 쓰기, 삭제, 복사, 이동 등 다양한 작업을 수행할 수 있게 해줍니다. 비동기/동기 방식 둘 다 지원하며, 매우 자주 사용되는 핵심 모듈입니다. 모듈 사용법 이 모듈을 사용하려면 require로 모듈을 불러와야 합니다. 동기 vs 비동기 Node.js에서는 메소드 호출 시 비동기 방식을 권장하지만 경우에 따라 동기 … Read more
DOM은 HTML 문서의 계층 구조를 트리 형태로 표현하고 각 요소를 DOM 노드(DOM Node)로 다룹니다. DOM(Document Object Model)은 웹 페이지의 구조를 표현하는 객체 모델입니다. HTML 문서의 요소들을 자바스크립트에서 객체 형태로 다룰 수 있으며 웹 페이지와 상호작용할 수 있습니다. DOM Node 기본 개념 위의 예시와 같이 HTML 문서는 노드로 구성됩니다. DOM Node 접근 방법 자바스크립트로 HTML 요소에 … Read more
HTML에서 구조화된 데이터를 표현하려면 ul 같은 목록을 사용해야합니다. 목록 태그 중 대표적인 것은 ul (Unordered List)과 ol (Ordered List)입니다. 이 두 태그의 관련 속성, 스타일링 등을 자세히 알아보겠습니다. ul (Unordered List) – 순서 없는 목록 목록에 순서를 지정하지 않으려면 이 태그를 사용해야 합니다. 태그를 사용하면 각각의 항목 앞에 기본적으로 점(bullet)이 표시됩니다. 위의 예제를 HTML 파일로 … Read more
자바스크립트의 canvas 요소와 drawImage() 메소드를 사용하여 이미지를 그리는 방법은 쉽습니다. 또한 이를 통해 다양한 그래픽을 동적으로 생성할 수 있습니다. canvas는 HTML5에서 도입된 요소로, 자바스크립트로 그림을 그리거나 이미지를 삽입하는 데 사용됩니다. drawImage 기본 canvas 요소는 HTML에 정의하며, 자바스크립트를 사용하여 그림을 그립니다. 이미지를 삽입하려면 CanvasRenderingContext2D.drawImage() 메서드를 사용해야합니다. 이 메소드는 이미지 객체를 캔버스에 그리는 기능을 제공합니다. drawImage 크기 … Read more
requestAnimationFrame() 메소드는 자바스크립트에서 최적화된 성능으로 애니메이션을 구현하게해주는 중요한 메소드입니다. 이 메소드는 브라우저의 렌더링 주기(fps)에 맞춰 애니메이션을 부드럽게 실행하도록 도와줍니다. 특히 CPU와 GPU 자원을 효율적으로 사용할 수 있도록 해줍니다. requestAnimationFrame 기본 개념 메소드의 주요 기능은 화면을 새로 고칠 때마다 애니메이션을 한 프레임씩 실행해줍니다. 화면을 갱신하는 주기는 보통 60Hz, 즉 1초에 60번(16.7ms 간격)으로 설정되어 있습니다. 이 메서드는 … Read more
HTML의 img 태그는 웹 페이지에 이미지를 삽입할 때 사용하는 태그입니다. 이는 자체적으로 닫히는 태그이며, 이미지를 페이지에 표시할 때 필요한 여러 속성들 설정할 수 있습니다. 기본적으로 이미지의 경로, 대체 텍스트(alt 속성), 너비와 높이 등을 지정할 수 있습니다. img 기본 사용 img 주요 속성 src (source) 이미지를 불러올 경로를 지정합니다. alt (alternative text) 이미지가 로드되지 않거나 접근성 … Read more
브라우저에서 클립보드 기능을 사용하려면 자바스크립트의 Clipboard API를 사용하여 복사, 붙여넣기 등의 작업을 수행할 수 있습니다. Clipboard API를 사용하면 텍스트를 복사하거나 붙여넣는 기능을 웹 애플리케이션에 추가할 수 있습니다. 이는 Clipboard 객체를 통해 클립보드 기능과 상호작용하며, 사용자가 데이터를 복사하거나 붙여넣을 수 있게합니다. 클립보드 복사 navigator.clipboard.writeText() 메소드를 사용하여 텍스트를 복사할 수 있습니다. writeText() 메소드는 Promise 객체를 리턴하며, 성공적으로 … Read more
CSS 미디어 쿼리(Media Query)는 웹 페이지를 다양한 화면 크기와 해상도에 맞게 조정하는 CSS 기술입니다. 즉, 사용자의 디바이스나 화면 환경에 따라 스타일을 다르게 적용할 수 있습니다. 이를 통해 HTML 요소의 레이아웃을 반응형으로 만들 수 있습니다. 미디어 쿼리 기본 구조 이는 @media 규칙을 사용하여 정의합니다. 이 규칙은 특정 조건(화면의 너비, 높이, 해상도 등)에 따라 스타일을 적용할 수 … Read more
CSS의 Flexbox 레이아웃은 웹 페이지를 구성할 때 자주 사용하는 모델입니다. Flexbox 레이아웃을 사용하면 HTML 요소가 일정한 공간에 배치되며, 다양한 화면 크기와 조건에서 적절하게 배치합니다. 이는 주로 수평, 수직 레이아웃을 쉽게 처리할 수 있게 해 줍니다. 기본 개념 이 레이아웃은 두 가지 주요 개념으로 구성됩니다: Flexbox 기본 속성 Flex Container 속성: Flex Item 속성: 예제 1: … Read more
async await 명령어는 자바스크립트에서 비동기 코드를 더 직관적이고 동기적인 방식으로 작성할 수 있게 해주는 문법입니다. 이 두 가지는 Promise 객체를 기반으로 동작하며, 비동기 작업을 보다 쉽게 처리할 수 있도록 도와줍니다. async await 기본 개념 예제 1: 기본적인 사용 위의 예제를 개발자 도구에서 실행하면 이미지와 같은 결과를 얻을 수 있습니다. 먼저 getData() 함수가 async로 정의되어 있고, … Read more