본문 바로가기

반응형

분류 전체보기

(395)
[알고리즘] 선택 정렬 with JS 선택정렬(Selection sort) 배열에서 가장 작은 값을 찾아서 배열의 맨 앞에 위치시키고, 그 다음 작은 값을 찾아서 두 번째 위치에 위치시키는 방식으로 정렬하는 알고리즘 입니다. 선택정렬 실행 과정 배열의 첫 번째 원소를 제외한 나머지 원소들 중 가장 작은 값을 찾습니다. 가장 작은 값과 배열의 첫 번째 원소를 교환합니다. 배열의 두 번째 원소를 제외한 나머지 원소들 중 가장 작은 값을 찾습니다. 가장 작은 값과 배열의 두 번째 원소를 교환합니다. 위의 과정을 반복해서 전체 배열이 정렬될 때까지 반복합니다. 선택정렬 코드 function selectionSort(arr) { for (let i = 0; i < arr.length - 1; i++) { let minIndex = i; for (le..
[리액트] 1. useState useState useState는 React의 내장 hook 함수 중 하나로, 함수형 컴포넌트에서 상태를 관리하기 위해 사용됩니다. useState는 배열을 반환하며 첫 번째 요소는 현재 상태값을, 두 번째 요소는 상태를 갱신하는 함수를 포함합니다. 보통 리액트에서 상태관리라고 하면 제일 먼저 떠오르는게 useState 를 이용한 기본적인 상태관리 방식이라고 볼 수 있습니다. 예를 들어, 간단한 숫자를 더하는 컴포넌트를 만들어보겠습니다. 이 컴포넌트에서는 useState를 사용하여 현재 상태값을 저장하고, 버튼을 클릭할 때마다 상태값을 갱신하고 화면에 출력합니다. import { useState } from 'react'; function Counter() { const [count, setCount] ..
[리액트] 리액트에서 DOM에 대한 직접 접근을 권장하지 않는 이유와 Ref 훅을 통한 DOM 접근 리액트는 가상DOM을 이용하여 변경된 부분만 렌더링을 시도합니다. 리액트에서 DOM에 직접 접근하는 것은 권장되지 않습니다. 이는 리액트의 핵심 원칙 중 하나인 가상 DOM(Virtual DOM)의 개념과 관련이 있습니다. 리액트는 가상 DOM을 사용하여 컴포넌트의 상태(state)나 속성(props)이 변경될 때마다 화면을 다시 그리지 않고, 변경된 부분만 감지하여 최소한의 렌더링을 수행합니다. 이를 통해 빠른 성능과 원활한 사용자 경험을 제공합니다. 그러나 DOM에 직접 접근하게 되면, 가상 DOM을 우회하여 실제 DOM에 직접 변경을 가하게 됩니다. 이는 리액트의 성능 최적화를 무력화시키고, 예상치 못한 결과를 초래할 수 있습니다. 따라서, 리액트에서는 state나 props를 변경하는 방법을 제공..
[정규표현식] 자주 쓰이는 플래그 유형 자주 쓰이는 플래그 정규표현식에는 플래그(flag)라는 것이 있습니다. 플래그는 검색 대상 문자열을 검색할 때 어떤 방식으로 매칭할지를 지정해 주는 역할을 합니다. 다음은 자주 사용되는 세 가지 플래그와 그 사용 방법입니다. i 대소문자를 구분하지 않고 검색을 수행합니다. 예시) /hello/i는 "Hello", "HELLO", "heLLo" 등의 문자열과 매칭됩니다. g 검색 대상 문자열에서 전역(global) 매칭을 수행합니다. 예시) /hello/g는 검색 대상 문자열 내에서 "hello"라는 문자열이 모두 매칭됩니다. 더 자세한 예를 들어보면, "hello"라는 문자열만 포함한 문자열 뿐만 아니라, "helloworld"와 같이 "hello" 문자열을 포함한 다른 문자열도 매칭됩니다. m 검색 대..
[정규표현식] 대표적인 기호와 예시 포스트 목적 계속되는 구글링과 GPT 의 도움에서 벗어나기 위해, 정규표현식에 대표적으로 사용되는 기호와 그 기호를 이용한 몇 가지 예시를 정리하였습니다. 참고로 아래 예시는 / / 을 사용하지 않았습니다. 이에 대한 예는 다음에 따로 정리할 생각입니다. 여기서의 예시는 이러한 방식으로 사용되는 구나에 대한 참고 및 이해 용도로 보시는게 좋다고 봅니다. 대표적인 정규표현식 기호 / 정규표현식 패턴을 시작하는 기호입니다. ^ 문자열의 시작을 나타내는 기호입니다. 이 기호 뒤에 오는 패턴은 문자열의 시작 부분에서만 매칭됩니다. $ 문자열의 끝을 나타내는 기호입니다. 이 기호 앞에 오는 패턴은 문자열의 끝 부분에서만 매칭됩니다. [ ] 대괄호 안에 있는 문자 중 하나와 매칭되는지 검사하는 기호입니다. [abc..
[NodeJS] Buffer 클래스 Buffer 이진 데이터를 다루는 데 주로 사용되며, 네트워크, 파일 시스템, 암호화 등 다양한 용도로 사용되는 노드의 내장 클래스 입니다. 노드는 파일을 읽을 때 메모리에 파일 크기만큼 공간을 마련해두며 파일 데이터를 메모리에 저장한 뒤 사용자가 조작할 수 있도록 합니다. 이때 메모리에 저장된 데이터가 바로 버퍼(메모리에 저장된 파일 데이터)입니다. 또한 버퍼 객체는 고정 길이의 바이트 시퀀스를 나타내는 데 사용됩니다. 많은 Node.js API가 버퍼를 지원합니다. Buffer 클래스는 JavaScript Uint8Array 클래스의 하위 클래스이며 추가 사용 사례를 포괄하는 메서드로 확장됩니다. Node.js API는 버퍼가 지원되는 모든 곳에서 일반 Uint8Array를 허용합니다. Buffer ..
[단순용어] 유니코드 / 아스키코드/2진수/8진수/16진수 유니코드(Unicode) 유니코드(Unicode)는 전 세계의 모든 문자를 표현하기 위한 국제 표준 문자 인코딩 방식입니다. 이전의 문자 인코딩 방식은 문자 집합에 따라 각각 다른 인코딩 방식을 사용하여 문자를 표현하였기 때문에, 서로 다른 문자 집합을 사용하는 시스템 간에 데이터 교환 시 문제가 발생하였습니다. 유니코드는 이러한 문제를 해결하기 위해 모든 문자를 공통적으로 표현할 수 있는 방식을 제공하며, 이를 통해 서로 다른 시스템 간의 데이터 교환 문제를 해결할 수 있습니다. 유니코드는 16비트 이진수로 문자를 표현하는 UCS-2와 32비트 이진수로 문자를 표현하는 UTF-32, 그리고 가변 길이 인코딩 방식으로 문자를 표현하는 UTF-8 등의 인코딩 방식을 사용합니다. 가장 많이 사용되는 UTF-..
[알고리즘] 선형탐색(linearSearch) with JS 선형탐색(linearSearch) 배열에서 특정 값을 찾기 위해 순차적으로 배열의 각 요소를 검색하는 방법입니다. 자바스크립트에서 대표적인 선형탐색 중 하나는 indexOf() 가 있습니다. 선형 탐색은 배열의 첫 번째 요소부터 마지막 요소까지 차례대로 검색하면서 원하는 값을 찾습니다. 만약 원하는 값이 있다면 해당 값의 인덱스를 반환하고, 찾지 못했다면 -1을 반환합니다. 코드 아래 예시에서는 linearSearch() 함수가 배열과 찾을 값을 인자로 받습니다. 함수는 배열을 처음부터 끝까지 순회하면서 원하는 값을 찾습니다. 만약 찾고자 하는 값이 있다면 해당 값의 인덱스를 반환하고, 찾지 못했다면 -1을 반환합니다. function linearSearch(arr, value) { for (let i ..

반응형