전체 글

📍 이진 탐색 트리란?이진 탐색 트리는 이진 트리의 일종으로, 탐색에 최적화된 트리 구조입니다.이진 트리란 각 노드가 최대 두개의 자식을 가질 수 있는 트리 구조를 말합니다.💡 이진 탐색 트리의 주요 특징왼쪽 서브트리의 모든 값은 부모 노드의 값보다 작아야 한다.오른쪽 서브트리의 모든 값은 부모 노드의 값보다 커야 한다.각각의 서브트리 또한 이진 탐색 트리의 속성을 만족한다.이 규칙을 통해 이진 탐색 트리는 데이터를 정렬된 형태로 유지하며 탐색, 삽입, 삭제와 같은 연산을 효율적으로 수행할 수 있습니다. 📍 이진 탐색 트리의 연산탐색 (Search) : O(log n) (평균), O(n) (최악)원하는 값을 찾을 때, 루트 노드에서 시작하여 현재 노드와 비교하면서 왼쪽 또는 오른쪽으로 이동하며 탐색..

📍Recoil-persist 소개프로젝트 진행중, Form 에 대한 상태를 Recoil Atom으로 관리하고 있었습니다.하지만 다른 페이지를 방문하거나, 새로고침하면 Atom에 저장된 값이 초기화되어 작성해둔 정보가 날라가는 문제가 발생하였습니다.작성한 정보가 날아가는 문제를 해결하기 위해 다양한 방법을 알아보던 중, `recoil-persist` 라는 라이브러리를 알게 되었고 이를 적용하는 방법과 예시를 공유해 보겠습니다. 📍Recoil-persist 란?!Recoil 상태 관리 라이브러리의 확장이며, Recoil 상태를 지속적으로 관리하고 복원하기 위한 도구입니다.Recoil로 관리되는 상태를 로컬 스토리지 또는 세션 스토리지와 같은 클라이언트 측 저장소에 저장하고, 페이지 새로고침 또는 재방문 ..

📍 왜 next/image 와 를 비교하게 되었을까?`Next/image` 를 사용하는 것이 좋다고는 많이 들어봤지만, 실제로 어떤 식으로 최적화가 이루어지고 어떻게 동작하는 지에 대해서는 깊이 이해하지 못한 채 사용했던 것 같다.이미지의 수가 많을 때 어떤 식으로 최적화해야 하는지 궁금했고, `next/image` 와 `` 태그를 비교하여 각각의 장단점과 성능 차이를 명확히 이해하는 것이 중요하다고 느껴졌다.이번 포스팅에서는 두 방법의 성능 차이점에 대해서 알아보고자 한다. 📍 랜덤하게 불러온 더미 이미지 예시 홈 화면에서 위의 사진과 같이 여러개의 사진을 보여주고 있습니다.React Query의 `useInfiniteQuery` 를 사용하여 무한 스크롤을 적용했으며, 이로 인해 클라이언트 컴포넌..

📍 HTTP 통신에 대해서 설명해주세요.HTTP 는 Hyper Text Transfer Protocol의 약자로 주로 HTML과 같은 Hyper Text 문서를 주고 받기 위해 만들어졌고, 최근에는 HTML 뿐 아니라 모든 웹 관련 API 통신에 이용하고 있는 통신 프로토콜입니다.HTTP 프로토콜은 비연결성과 무상태성의 특징을 가지는 통신 프로토콜입니다.그렇다면 비연결성과 무상태성이란 무엇인가요?비연결성을 가지는 HTTP 에서는 실제로 요청을 주고 받을 때만 연결을 유지하고 응답을 주고 나면 TCP/IP 연결을 끊습니다. 이를 통해 최소한의 자원으로 서버 유지를 가능하게 합니다.무상태성은 프로토콜에서 클라이언트의 상태를 기억하지 않습니다. 클라이언트의 상태를 보관하기 위해 쿠키나 세션, JWT 토큰 등..

🧩 문제https://school.programmers.co.kr/learn/courses/30/lessons/12909 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 💡 알고리즘 설계 및 코드일단 첫번째로 이 문제를 보고 스택을 사용해야겠다고 판단한 이유는닫힌 괄호 `)` 가 열린 괄호 `(` 와 짝을 맞추는데, 단순히 아무 열린 괄호와 맞추는 것이 아니라 가장 가까운 열린 괄호와 짝이 맞춰져야 하기 때문입니다.이러한 특징은 스택의 LIFO 구조와 비슷하고 즉, 최근에 삽입된 데이터를 대상으로 연산을 수행해야 하기 때문에 스택을 사용하는 것이 적합하다고..

📍 getServerSideProps 를 이용해서 작성한 게시글 불러오기처음에는 `getServerSideProps` 를 사용하여 각 요청 시마다 서버에서 데이터를 가져와 페이지를 렌더링했습니다.import type { Post } from '@/types';import { createClient } from '@/utils/supabase/server';import { GetServerSideProps } from 'next';type PostProps = Post;export default function Post({ id, title, category, tags, content, created_at, preview_image_url,}: PostProps) { return ( ..

📍 useEffect 안에 비동기 함수 사용하기useEffect 훅은 반환값으로 클린업(clean-up) 함수를 반환할 수 있습니다.이 클린업 함수는 컴포넌트가 언마운트되거나 의존성 배열이 변경될 때 실행됩니다.클린업 함수는 자원을 해제하거나, 구독을 해지하는 등의 작업을 수행하는 데 유용합니다.반면, async 함수는 항상 Promise 객체를 반환합니다.await 키워드는 async 함수 내부에서 사용되며, Promise가 해결될 때까지 함수의 실행을 일시 중지합니다.Promise가 해결되면, await는 해당 Promise의 결과 값을 반환합니다.`useEffect`는 직접적으로 비동기 함수를 반환할 수 없기 때문에, 비동기 작업을 처리할 때는 내부에 즉시 실행 함수(IIFE)를 사용하거나, 별도..

📍 문제 상황Supabase storage에 담겨있는 이미지를 불러오기 위해 `` 를 작성하여 실행하였더니위의 사진과 같은 에러가 발생하였습니다.Next.js 에서 `next/image` 를 사용해서 외부에서 호스팅되는 이미지를 렌더링하려면 `next.config.js` 또는 `next.config.mjs` 파일에 외부 경로를 등록해주어야 한다고 합니다. 📍 next.config.mjs 에 외부 이미지 등록하기Next.js 프로젝트의 `next.config.js` 또는 `next.config.mjs` 파일을 연 후, `images` 속성을 추가하여 외부 호스트를 지정합니다.아래 예시는 Supabase Storage 에서 이미지를 불러오기 위한 설정입니다.외부 이미지 URL 패턴을 `remotePatt..

📍 Omit 이란?`Omit` 타입은 주어진 타입에서 특정 속성을 제거한 새로운 타입을 생성하는데 사용됩니다.이를 통해 코드의 재사용성을 높이고, 타입 정의를 더 유연하게 관리할 수 있습니다. 📍 Omit 의 기본 사용법type Omit = Pick>;`T` : 원본 타입`K` : 제거하고자 하는 속성의 키`Omit`은 원본 타입 `T`에서 속성 `K`를 제거한 새로운 타입을 반환합니다.이를 통해 불필요한 속성을 제외하고 필요한 속성만을 가지는 타입을 정의할 수 있습니다. 📍 Omit 사용 예제interface User { id: number; name: string; email: string; password: string;}type PublicUser = Omit;const user: P..

📍 IPv4 란?IPv4는 32비트 방식입니다.따라서 4개로 그룹으로 나누어지며, 각 그룹은 8비트로 구성되어 있습니다.비트 수에 따라 개수가 정해지므로 2의 32승인 43억개의 주소가 만들어질 수 있습니다.A, B, C, D, E 클래스로 주소를 할당합니다.A 클래스32비트 중 앞 8비트를 네트워크 ID로, 다음 24비트를 호스트 ID로 나눈 것할당 가능한 IP 주소의 범위: 0.0.0.0 ~ 127.255.255.255 첫번째 비트가 0인 IP 주소B 클래스32비트 중 앞 16비트를 네트워크 ID로, 다음 16비트를 호스트 ID로 나눈 것할당 가능한 IP 주소의 범위: 128.0.0.0 ~ 191.255.255.255처음 두 비트의 값이 10인 IP 주소C 클래스32비트 중 앞 24비트를 네트워크 ..