Racon

React + Vite프로젝트 구조my-vite-app/├── node_modules/ # 설치된 의존성├── public/ # 정적 파일 (favicon, 이미지 등)│ └── vite.svg # Vite 기본 로고├── src/ # 소스 코드│ ├── assets/ # 이미지, 스타일 등 정적 파일│ ├── components/ # React 컴포넌트 폴더│ ├── App.css # 메인 CSS 파일│ ├── App.jsx # App 컴포넌트│ ├── main.jsx # React DOM 렌더링 진입점│ ├── index.css # ..

공부 하다가 만들거여서 테이블에 관한 설명과 QueryDSL에서 적용이 안될수도 있습니다.이런 방식이라고 어느정도 파악용도로 작성합니다.코드 테스트후 수정 예정입니다.-- 임의의 테이블 생성-- 사용자 계정CREATE TABLE UserAccount ( account_id SERIAL PRIMARY KEY, account_code VARCHAR(50), account_type VARCHAR(50), account_status VARCHAR(50));-- 사용자 정보CREATE TABLE UserProfile ( profile_id SERIAL PRIMARY KEY, profile_code VARCHAR(50), user_name VARCHAR(100));-- 사용자 ..

이미지를 웹에서 빠르게 노출하기 위한 최적화 방법: WEBP와 AVIF웹 사이트에서 이미지를 빠르게 로드하기 위해, 많은 개발자들이 이미지 파일을 최적화하고 있습니다. 특히 WEBP와 같은 이미지 포맷은 높은 압축률과 뛰어난 품질로 널리 사용되고 있습니다. 하지만 최근 프로젝트에서 WEBP 이미지가 일부 회전된 상태로 노출되는 문제가 발견되었고, 이를 해결하기 위해 다양한 방법을 탐구한 경험을 공유합니다.문제 상황: WEBP 이미지의 회전 이슈이미지 최적화를 위해 기존 JPEG나 PNG 이미지를 WEBP로 변환하여 사용하고 있었습니다. 하지만 몇몇 이미지를 확인해보니, 웹 페이지에서 정상적으로 표시되지 않고 회전된 상태로 노출되는 문제가 있었습니다.문제를 분석한 결과, 이와 같은 현상은 사진에 포함된 회..

reduce에서 "함수 호출 오버헤드가 발생한다"는 말은 reduce 메서드가 전달받은 콜백 함수를 요소마다 실행하기 때문에, 반복적으로 함수 호출이 이루어지는 과정에서 성능 비용이 발생한다는 뜻입니다.1. 함수 호출의 동작자바스크립트나 자바 같은 언어에서 함수가 호출될 때, 다음 작업이 이루어집니다:스택에 함수 호출 기록을 추가 (Call Stack에 Push).함수의 매개변수와 내부 변수들을 메모리에 저장.함수가 실행되고 결과를 반환.호출 기록을 스택에서 제거 (Call Stack에서 Pop).이러한 과정은 반복적으로 발생하면 성능에 영향을 미칠 수 있습니다. reduce는 각 요소에 대해 콜백 함수(Accumulator Function)를 호출하므로, 요소 수가 많을수록 함수 호출 횟수가 많아집니다..

1. 성능 차이의 주요 요인명령형 스타일직접적인 상태 변경과 제어를 통해 CPU와 메모리 사용을 최적화할 수 있음.루프를 명시적으로 작성하므로, 추가적인 함수 호출 및 클로저 생성이 없어 오버헤드가 적음.개발자가 모든 세부사항을 제어하기 때문에 성능 최적화가 가능한 경우가 많음.선언형 스타일고수준 추상화로 인해 내부적으로 함수 호출과 추가적인 객체 생성이 발생할 수 있음.함수형 메서드 체이닝(e.g., filter, map, reduce)은 데이터 변환 과정에서 임시 배열이나 메모리 사용량 증가를 초래할 수 있음.코드가 간결해지는 대신, 내부 동작에 대한 최적화는 라이브러리나 런타임에 의존하게 됨(Java의 Stream API 또는 Kotlin의 Sequence 등).2. 예제 비교: 성능 차이 분석1)..

1. 명령형 스타일에서 함수를 사용하는 경우명령형 스타일은 **"어떻게 수행할지(how)"**를 세부적으로 명시합니다. 함수로 분리하여 코드를 더 읽기 쉽게 만들 수도 있지만, 여전히 실행 순서와 상태 관리를 명확히 드러냅니다.예제// 명령형: 함수로 분리function calculateSum(numbers) { let sum = 0; // 상태를 명시적으로 관리 for (let i = 0; i 특징명령형 스타일은 반복문, 변수 업데이트와 같은 상태 변경을 직접 명시합니다.함수로 분리했더라도 내부적으로 루프와 상태 변화가 명시적으로 나타나며, 이를 통해 결과를 계산합니다.코드의 논리 흐름이 "각 단계별로 명확하게 보이는" 방식입니다.명령형의 본질: "어떻게 동작할지"를 세부적으로 기술합니다.2. 선언..

장점1. 병렬 처리 및 동시성에 유리함수형 프로그래밍에서는 불변성과 순수 함수 덕분에 병렬 처리가 안전하며 동시성 문제를 줄일 수 있습니다.Java 예제import java.util.Arrays;import java.util.List;public class FunctionalExample { public static void main(String[] args) { List numbers = Arrays.asList(1, 2, 3, 4, 5, 6, 7, 8); // Stream API를 사용하여 병렬 처리 int sum = numbers.parallelStream() .map(x -> x * 2) // 각 요소를 2배로 ..

함수형 프로그래밍(Functional Programming)은 프로그래밍 패러다임 중 하나로, 프로그램을 수학적 함수의 조합으로 표현하고 **상태 변화와 부수 효과(Side Effect)**를 최소화하는 것을 목표로 합니다. 이 패러다임은 순수 함수를 기반으로 하며, 데이터를 변형하거나 상태를 변경하지 않고 결과를 도출하는 데 초점을 둡니다.핵심 개념순수 함수(Pure Function)동일한 입력에 대해 항상 동일한 출력을 반환하는 함수입니다.외부 상태를 변경하지 않고 부수 효과(Side Effect)가 없습니다.예:// 순수 함수의 예const add = (a, b) => a + b;console.log(add(2, 3)); // 항상 5 반환불변성(Immutability)데이터는 변경되지 않고, 변경..

클린 아키텍처: 세 가지 프로그래밍 패러다임을 읽고클린 아키텍처를 읽으면서 특히 인상 깊었던 부분은 구조적 프로그래밍, 객체지향 프로그래밍, 함수형 프로그래밍이라는 세 가지 패러다임에 대한 설명이었습니다. 이 패러다임들은 우리가 소프트웨어를 설계하고 개발하는 방식에 깊은 영향을 미쳐왔습니다. 책에서 이를 어떻게 설명했는지, 그리고 제가 이해한 바를 정리해 보았습니다.1. 구조적 프로그래밍 (Structured Programming)가장 먼저 적용된 패러다임이자 현대 소프트웨어 개발의 기초를 다진 구조적 프로그래밍은 1968년 에츠허르 비버 데이크스트라에 의해 제안되었습니다.당시에는 프로그램 내에서 무분별한 goto 문장이 사용되었는데, 이는 프로그램의 흐름을 지나치게 복잡하고 예측하기 어렵게 만들었습니다..

좋은 코드를 짜기 위한 책 읽기책을 읽으면 얼마나 좋은 내용을 알게 될지 테스트 [독서 후기] 클린 아키텍처 - 좋은 소프트웨어를 위한 원칙과 철학책 소개《클린 아키텍처》의 저자 로버트 C. 마틴(일명 "아저씨(uncle) Bob")은 1964년, 12살의 나이에 처음 코드를 작성하며 개발을 시작했습니다. 반세기에 걸친 개발 경험 속에서 그는 임베디드 시스템, 대규모 배치 처리 시스템, 실시간 시스템, 웹, 콘솔 등 다양한 분야에서 수많은 시스템을 구축하며 소프트웨어 구조화의 원칙을 배워왔습니다.그는 오랜 시간 고민하고 경험한 끝에 소프트웨어 아키텍처의 본질적인 규칙은 변하지 않는다는 사실을 깨달았습니다. 하드웨어는 반세기 동안 급격히 발전했지만, 좋은 아키텍처를 만드는 원칙은 동일하다는 점이 이 책의 ..