티스토리

검색하기

블로그 홈

회고

구독자: 4

구독하기 방명록

주요 글 목록

[알고리즘] 나이브 문자열 검색(Naive String Search) 알고리즘글 내용
1. 개요나이브 문자열 검색(Naive String Search)은 가장 기본적인 문자열 탐색 기법이다. 이 알고리즘은 긴 문자열 내에서 특정한 짧은 문자열(패턴)이 몇 번 등장하는지를 확인하는 데 사용된다. 2. 알고리즘 개념나이브 문자열 검색은 다음과 같은 방식으로 동작한다.긴 문자열의 각 문자부터 시작하여,짧은 문자열의 길이만큼 잘라서 비교하며,모든 문자가 일치하면 해당 위치를 일치로 간주하고 카운트를 증가시킨다.3. 동작 절차 count를 0으로 초기화한다.긴 문자열의 0번째 문자부터 (긴 문자열 길이 - 짧은 문자열 길이) 위치까지 반복한다.매 반복마다:짧은 문자열의 문자를 하나씩 반복하며,긴 문자열의 i + j 번째 문자와 짧은 문자열의 j 번째 문자를 비교한다.둘 중 하나라도 다르면 비교를 ..
좋아요3
댓글2작성시간2025. 7. 27.
[알고리즘] 검색 알고리즘 (Search Algorithm)글 내용
1. 검색이란?특정 데이터(값)를 자료구조 내에서 찾는 과정이다. 배열에서 특정 이름이 있는지 확인로그인 시 입력한 이메일이 DB에 존재하는지 검사2. 선형 검색 (Linear Search)배열의 처음부터 끝까지 순서대로 확인하며 값을 찾는다.정렬 여부와 무관하게 사용 가능하다.[0] → [1] → [2] → ... → [n] ↓ ↓ ↓ ↓val? val? val? val?→ 순차적으로 값을 비교 의사코드 (Pseudocode)배열의 첫 번째 원소부터 시작한다.각 원소를 찾는 값과 비교한다.값이 같으면 해당 인덱스를 반환한다.끝까지 비교했는데 값이 없으면 -1을 반환한다. 예시 코드 (JS)function linearSearch(arr, val) { for ..
좋아요3
댓글0작성시간2025. 7. 20.
[알고리즘] 헬퍼 메소드 재귀 vs 순수 재귀글 내용
재귀는 강력한 도구지만, 구현 방식에 따라 복잡도와 유지 보수성이 크게 달라질 수 있다.특히 헬퍼 메소드 재귀(helper method recursion) 와 순수 재귀(pure recursion) 는 매우 자주 비교되는 두 가지 재귀 구현 방식이다. 헬퍼 메소드 재귀 (Helper Method Recursion)외부 함수 안에 정의된 내부 헬퍼 함수가 재귀적으로 호출되는 구조외부 함수는 한 번만 호출됨내부의 헬퍼 함수가 재귀 호출을 담당주로 결과값을 누적할 변수(result)를 외부에 선언해서 공유로직이 분리되어 구조가 명확하고 직관적function outer() { let result = []; function helper(input) { // 재귀 호출 } helper(someInput..
좋아요1
댓글1작성시간2025. 7. 6.
[알고리즘] 재귀(Recursion)글 내용
1. 재귀란 무엇인가?재귀는 함수가 자기 자신을 호출하는 프로그래밍 기법이다. 이는 복잡한 문제를 더 작은 하위 문제로 나누어 해결하는 방식으로, 수학의 귀납법과 유사한 개념이다.재귀를 이해하기 위해 한 가지 이야기를 들어본다. 드래곤은 아래와 같은 숫자를 가지고 있다.[2, 4, 6, 8, 9, 10]우리의 주인공 마틴이, 드래곤에게 말한다."이 숫자 목록에 홀수가 있는지 확인해줘."하지만 드래곤은 마법에 걸려서 오직 첫 번째 숫자만 확인할 수 있다. 그래서 마틴은 다음과 같이 생각한다.첫 번째 숫자가 홀수인지 확인한다. 아니라면 제거한다.남은 목록은 [4, 6, 8, 9, 10]이며, 다시 같은 방식으로 확인한다.4도 홀수가 아니므로 [6, 8, 9, 10]로 넘어간다.6도 홀수가 아니므로 [8, 9..
좋아요1
댓글0작성시간2025. 6. 29.
[알고리즘] 슬라이딩 윈도우 (Sliding Window)글 내용
슬라이딩 윈도우란?슬라이딩 윈도우(Sliding Window)는 배열이나 문자열과 같은 연속적인 데이터에서 특정 크기의 부분 집합을 효율적으로 처리하는 알고리즘 패턴이다. 마치 창문(윈도우)을 한 칸씩 밀어가며 데이터를 살펴보는 것과 같다고 해서 이런 이름이 붙었다.언제 사용할까?연속된 부분 배열의 최대/최소 합 구하기고유 문자로 이루어진 가장 긴 부분 문자열 찾기특정 조건을 만족하는 부분 배열 찾기문제 예시: 연속된 부분 배열의 최대 합정수 배열과 숫자 n이 주어졌을 때, 연속된 n개 요소의 최대 합을 구하는 문제// 예시: [2, 6, 9, 2, 1, 8, 5, 6, 3], n = 3// 결과: 19 (8 + 5 + 6)비효율적인 접근법 (Brute Force)먼저 직관적이지만 비효율적인 방법을 살펴..
좋아요1
댓글0작성시간2025. 6. 15.
[알고리즘] 다중 포인터 패턴 (Multiple Pointers)글 내용
다중 포인터(Multiple Pointers) 패턴이란?다중 포인터(Multiple Pointers) 패턴은 인덱스나 위치에 해당하는 포인터(or 값)를 만든 다음, 특정 조건에 따라 중간 지점에서부터 시작 지점-끝 지점 또는 양쪽 지점을 향해 이동시키는 패턴이다.한 쌍의 값이나 조건을 충족시키는 해답을 찾을 때 주로 사용된다. 🔍 예시 문제차례대로 정렬된 숫자 배열이 존재할 때, 두 수끼리 더했을 때 0이 나오는 쌍의 개수를 구하라. sumZero([-4,-3,-2,-1,0,1,2,5]) // 2 (-2,2 / -1,1)다중 포인터 패턴을 적용하지 않았을 때 O(n²)function sumZero(arr){ for(let i = 0; i 시간 복잡도 : O(N^2) 모든 가능한 쌍을 확인한다. ..
좋아요1
댓글0작성시간2025. 6. 8.
[알고리즘] 빈도수 세기 패턴 (Frequency Counter Pattern)글 내용
빈도수 세기(Frequency Counter) 패턴이란?빈도수 세기(Frequency Counter) 패턴은 중첩 반복문 없이, 배열이나 문자열 등의 값의 발생 빈도를 객체에 저장해두고 그 정보를 기반으로 문제를 해결하는 방식이다.이 패턴은 시간 복잡도를 O(n²)에서 O(n)으로 줄일 수 있기 때문에 유용하다.🔍 예시 문제배열 arr1과 arr2가 있을 때, arr2가 arr1의 각 원소를 제곱한 값들을 같은 빈도로 포함하고 있는지 확인하는 함수를 만들어보자.same([1, 2, 3, 2], [9, 1, 4, 4]) → truesame([1, 2, 3], [1, 9]) → false빈도수 세기 패턴을 적용하지 않았을 때 O(n²)function same(arr1, arr2) { if (arr1.le..
좋아요2
댓글0작성시간2025. 6. 1.
[알고리즘] 문제 해결 접근법글 내용
알고리즘이란?특정 작업을 수행하기 위한 프로세스 또는 일련의 단계. 즉, 우리가 알고리즘 문제를 푼다는 것은 특정 작업을 위한 프로세스를 수립하는 일이 된다. 예를 들자면, 두 수를 덧셈하라는 문제(작업) 를 받았다고 가정해보자. 그렇다면 두 자리를 덧셈하는 함수를 만들고, 결과값을 반환하는 과정이 프로세스일 것이다. 알고리즘 문제를 해결하기 위해서는 어떻게 해야할까? 1. 문제 해결을 위한 계획을 수립문제에 접근하는 방법, 문제를 세분화하기 위한 전략2. 일반적인 문제 해결 패턴을 파악많은 알고리즘들, 특히 면접에서의 많은 문제들을 여러 범주로 나눌 수 있는데, 일부 범주를 식별할 수 있는 경우에는, 도움이 될 몇 가지 조합법을 확보하여 문제 해결을 용이하게 할 수 있다.이 글에서는 우선 문제 해결 계..
좋아요3
댓글0작성시간2025. 5. 4.
[알고리즘] 객체와 배열의 성능 평가글 내용
기본적인 JS의 자료구조에 Big-O를 적용해 성능을 평가해본다. 내부에서 어떻게 작동하는 지는 자세히 다루지 않는다. 여기에서 중요한 것은, 배열과 객체를 사용한 코드에서 작업할 때, 얼마나 시간이 걸리는 지 파악하는 것이다.즉 Big-O의 시간복잡도를 적용한 성능을 알아보자.객체의 성능 평가// 예시 객체let student = { name: "yujin", favoriteAnimal: "fish", favoriteNumbers: [4,4,4]}삽입 - O(1)제거 - O(1)탐색 - O(N)접근 - O(1)객체는 정렬되어 있지 않다. 따라서 값을 삽입하거나, 제거하고 접근할 때는 키나 값을 지정하는 상수값만이 필요하다.그러나 탐색의 경우에는 어떨까?탐색이란 무엇일까? 탐색이란. 어떤 특정한 정..
좋아요2
댓글0작성시간2025. 4. 27.
[알고리즘] Big-O 표기법 : 공간복잡도글 내용
이전 글에서는, 빅오 표기법의 시간 복잡도에 대해 설명했다. 알고리즘들이 얼마나 빨리 실행되는지, 그 시간을 검사하는 척도가 시간 복잡도(time complexity)이다. 이제는 시간 대신에 공간, 사용되는 메모리를 주목해보자.공간 복잡도(auxiliary space complexity)입력을 제외하고, 알고리즘 자체에서 요구되는 공간을 의미한다.공간 복잡도 특징boolean, 숫자형, undefined, null은 js에서 변하지 않는 공간이다. 1과 1000이라고 해도, 차지하는 공간은 같다.문자열은 O(n)공간이 필요하다. 문자열은 문자열의 길이에 따라 차지하는 공간이 달라지기 때문이다.참조 타입, 배열, 객체도 대부분 O(n)공간이 필요하다.Example.1 function sum(arr){ ..
좋아요2
댓글0작성시간2025. 4. 20.
[PHP] PHP 개념 및 배포 환경 설정, 기본 사용법글 내용
PHP는 웹 개발에 특화된 서버-사이드 스크립트 언어이다. 보안 취약점이 많고, 대규모 웹 사이트 개발에는 적합하지 않다는 단점이 있지만 현재 한국의 많은 웹 사이트는 PHP로 구성되어 있다. 또한 쇼핑몰 웹 페이지 제작 지원 사이트(cafe24)에서 PHP를 지원하기 때문에, 영세 쇼핑몰 사이트나 개인 홈페이지의 PHP코드를 마주칠 확률이 높아진다. 나 또한 친구회사의 쇼핑몰 사이트 코드가 작동하지 않아서 도움을 요청 받은 적이 있고, 이번에도 PHP 홈페이지 제작을 요청 받아서 한 번 필요한 부분을 공부해 보았다. PHP 개념 PHP는 대표적인 서버-사이드 스크립트 언어 중 하나이다. 웹 서버에 PHP가 설치되어 있다면, PHP 스크립트는 웹 서버에서 해석되고 실행된다. 이때, PHP 스크립트는 HT..
좋아요3
댓글1작성시간2025. 4. 13.
[알고리즘] Big-O 표기법글 내용
Big-O 표기법은, '좋은', '그저 그런', '엉망인' 등의 주관적인 표현법 대신, 숫자로 코드의 성능을 표기할 수 있다.때로는 코드가 작동하기만 하면 충분하다고 생각할 수 있지만, 우리가 정량화된 측정도구인 Big-O 표기법을 사용하는 이유는 무엇일까?Big-O 표기법의 필요성수천개의 데이터가 있는 큰 데이터셋을 다룰 때, 한 알고리즘이 다른 알고리즘보다 실행하는데 한시간이 더 빠르다면 성능을 중요시 해야한다.해결책이 만족스럽다고 해도, 다른 해결책과 비교하고 성능이 어떤지 이해하는 것은 성장에 도움이 된다.여러 접근법의 장단점을 얘기할 때도 유용하다. 어떤 해결책은 많은 데이터량을 잘 다룰 수 있고, 다른 하나는 더 오랜 시간이 걸리지만, 데이터값이 달라질 때 변동량이 적을 수 있다.디버깅을 할 ..
좋아요4
댓글1작성시간2025. 4. 6.
[Next.js] 라우트 핸들러(Router handlers)를 사용해 api 통신하기글 내용
Next.js에서 앱 라우터를 사용할 때, 요청(Request) 및 응답(Response) API를 사용하여 특정 라우트(Route)*에 대한 커스텀 요청 핸들러(request handler)를 작성할 수 있다. 이를 라우트 핸들러(Route handlers) 라고 부른다. * API(Application Programming Interface): 애플리케이션 프로그래밍 인터페이스를 뜻하며, 소프트웨어 간에 데이터를 교환할 수 있도록 하는 규칙이나 프로토콜 * 라우트(Route) : 웹 애플리케이션에서 특정 URL 경로. 이 글에서는 주로 통신할 서버 URL(슈퍼베이스 등)라우트 핸들러 사용 규칙 1. 앱(app) 폴더 안에서만 라우트 핸들러가 작동되며 라우트(route) 파일로 정의할 수 있다. 2..
좋아요4
댓글2작성시간2025. 3. 16.
[Supabase] Supabase 시작하기글 내용
supabase란?Supabase는 개발자가 애플리케이션에 필요한 모든 데이터를 저장하고 관리할 수 있는 신뢰할 수 있는 데이터베이스를 제공한다. 이는 효율적이고 확장 가능한 데이터 관리를 위한 다양한 기능을 포함하고 있다. (유사 사이트 - Firebase, Pocktebase)또한 supabase는 모든 것이 오픈 소스이며, 가능한 한 모든 도구를 처음부터 개발하는 대신 기존 도구를 사용하고 지원한다는 특징을 가지고 있다. 이 글에서는 자세히 다루지 않겠다. 이 글의 요지는 supabase에서 조직을 만들고, 기본 데이터베이스를 만드는 최소한의 과정을 기술하는 것이다. supabase에서 프로젝트 만들고 팀과 공유하기 로그인 이후 organization(조직)에서 project를 생성한다. 생성한 ..
좋아요3
댓글1작성시간2025. 3. 9.
프론트엔드 렌더링 방식 : CSR, SSR, SSG, ISR글 내용
CSR (Client-Side Rendering, 클라이언트 사이드 렌더링) 실행 흐름사용자 요청: 사용자가 페이지를 요청빈 HTML 전송: 서버는 빈 HTML 파일과 JavaScript 파일을 클라이언트로 전송클라이언트에서 데이터 fetching: 클라이언트(ex.크롬 브라우저)는 JavaScript를 실행해 필요한 데이터를 API 등에서 가져온다.클라이언트에서 렌더링: 클라이언트는 데이터를 사용해 페이지를 동적으로 렌더링한다.특징렌더링 위치: 클라이언트(브라우저)에서 렌더링.렌더링 시점: 사용자 요청 후 JavaScript 실행 시리액트의 기본 동작 방식. 클라이언트에서 데이터를 fetching( JavaScript 파일 다운로드 및 실행 , JavaScript 파일로부터 DOM을 렌더링)하는 과정..
좋아요6
댓글3작성시간2025. 3. 2.
[React] 상태 관리 전략 - 끌어올리기 : 컴포넌트 간 State 공유하기글 내용
컴포넌트 간 State 공유하기 : 끌어올리기지난 시간, 상위 컴포넌트에서 아래의 컴포넌트의 상태를 관리하기 위한 전략인 끌어올리기에 대해 간략히 설명했다. 이번에는 예시를 통해 상태를 끌어올리는 과정을 확인해보자.Accordion이 두 개의 Panel을 렌더링하는 예시AccordionPanelPanel각 Panel 컴포넌트는 콘텐츠 표시 여부를 결정하는 Boolean형 isActive 상태를 각각 가지고 있다.import { useState } from 'react';function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); return ( {title} {isActive ? (..
좋아요3
댓글1작성시간2025. 2. 23.
[pnpm]pnpm 사용하기글 내용
pnpm이란?pnpm(Performant Node Package Manager)는 주요 JavaScript 패키지 관리자 중 하나로, 2016년 Zoltan Kochan에 의해 Node.js JavaScript 런타임 환경을 위해 개발되었다.왜 pnpm을 사용해야 하는가?1. 디스크 공간 절약npm을 사용할 때 종속성을 사용하는 프로젝트가 100개 있는 경우 해당 종속성의 사본 100개가 디스크에 저장된다. 그러나, pnpm을 사용하면 의존성이 content-addressable 저장소에 저장되므로, 다음 단계가 진행된다.다른 버전의 의존성(dependencies)을 사용할 때, 다른 부분만이 저장소에 추가된다. 만약 100개의 파일이 있고, 새로운 버전이 해당 100개 파일 중에 한 파일의 변화만을 가..
좋아요2
댓글2작성시간2025. 2. 13.
[React] 상태 관리 전략 : 끌어올리기글 내용
상태컴포넌트는 컴포넌트 안에서만 접근 가능한 로컬 데이터인 "상태(state)"를 가질 수 있다. 이 데이터를 다른 컴포넌트와 공유하려면 React의 단방향 데이터 흐름에 따라 두 컴포넌트 보다 상위 위치에 자리 잡은 컴포넌트로부터 속성(props)으로 전달받아야 한다. 상태 관리 전략 : 끌어올리기React 컴포넌트 로컬 데이터인 상태를 관리하는데 사용되는 가장 주요한 전략 중 하나는 상태를 끌어 올리거나 끌어 내리는 것이다. 우선은 끌어올리기에 대해 알아보자. 상태 끌어 올리기(↑) 전략 A와 C는 상태를 관리 중이고, A는 B컴포넌트와 연관된 상태 관리 중. 만약 B가 C에서 관리 중인 State에 접근할 수 있어야 하고, C의 상태가 변경될 때마다 B에서도 변경된 값을 표시해야한다면, 현재 상황..
좋아요2
댓글4작성시간2025. 2. 9.
[React] React 훅(Hooks) : useState와 useEffect글 내용
이전 글: React 훅(Hook)의 정의와 특징훅(Hook)이란?함수형 컴포넌트에서 React의 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수훅의 종류React는 여러 가지 기본 훅을 제공한다. 가장 많이 사용되는 훅은 다음과 같다.useState: 상태를 관리useEffect: 부수 효과(Side Effect)를 관리useContext: Context API를 사용하여 전역 상태를 관리useReducer: 복잡한 상태 로직을 관리useState와 useEffect 설명1. useState상태를 선언하고 업데이트할 수 있게 해주는 훅상태가 변경되면 컴포넌트가 리렌더링된다.import React, { useState } from 'react';function Coun..
좋아요1
댓글2작성시간2025. 2. 2.
[React] React 훅(Hooks)의 정의와 특징글 내용
훅이란? 함수형 컴포넌트에서 React의 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수왜 훅(Hooks)이 필요했나?컴포넌트 내부에 캡슐화 된 로직은 다른 컴포넌트와 공유가 쉽지 않았다. 결국 로직을 재사용하기 위해 React 앱에서 Render Props, HOC와 같은 복잡한 패턴을 사용해야 했다. 1. 함수의 한계: 상태 관리 불가능함수는 순수한 로직을 재사용하기에 적합하지만, 상태를 내부적으로 관리할 수 없다. function Counter() { let count = 0; // 이 변수는 함수가 호출될 때마다 초기화됨 const increment = () => { count += 1; console.log(count); }; return i..
좋아요1
댓글0작성시간2025. 2. 2.

문의안내

티스토리
로그인
고객센터