REACT 에서 @ 사용으로 경로선언 깔끔하게 하기 REACT 에서 @ 사용으로 경로선언 깔끔하게 하기프로젝트 크기가 커질수록 경로가 복잡해진다.../../../../../ 의 경로가 깊을 수록 관리 또한 어려워진다. 코딩할때 괜히 스트레스 받는다.import logo from "../../assets/images/login.png"이를 @로 퉁쳐서 경로에 대한 스트레스를 없애버리자!Vite + React + TS 기준으로 설명1.vite.config.ts 설정@types/node 패키지 설치// if use npmnpm install --save-dev @types/node// if use yarnyarn add -D @types/nodevite.config.ts 파일에서 옵션 추가vite.config.tsimport path from "path";ex.. 나의 주니어 개발 일기/REACT 2025. 12. 23. 11:14
페이지 라우팅 페이지 라우팅MPASSR서버측에서 보낸것을 브라우저가 그대로 렌더링 한다고 해서 SSR(Server Side Rendering) 이라고도 부른다. MPA!=SSR서버가 여러개의 HTML 파일을 갖고 있는것이 MPA 방식, 브라우저가 페이지를 요청했을때 미리 준비된 페이지를 응답해주는 방식을 SSR이라고 한다. 서로 다른 의미이다. REACT는 MPA방식을 채택하지 않는다. MPA방식은 페이지의 이동을 빠르게 처리하기 힘들기 때문이다.MPA 단점페이지 이동이 쾌적하지 않다.(요청마다 기존것을 지우고 새로운것을 리렌더링한다, => 화면이 살짝씩 깜빡인다.)사용자가 많을 경우 서버부하가 심해진다. 때문에 REACT는 SPA(Single Page Application)을 채택한다.SPASPA는 최초로 index.. 나의 주니어 개발 일기/REACT 2025. 11. 11. 10:20
Flex & Grid Flex & Grid🔹 1. Flexbox (1차원 레이아웃)특징한 방향(가로 또는 세로)으로 정렬하는 데 최적화아이템 간 간격, 정렬, 비율 조정이 쉬움부모 컨테이너(display: flex) 기준으로 자식들을 자동 정렬반응형 디자인에 자주 사용됨 (특히 navbar, 버튼 그룹 등)주로 쓰는 곳네비게이션 바버튼 그룹카드 리스트세로/가로 중앙 정렬🔹 2. CSS Grid (2차원 레이아웃)특징행(rows)과 열(columns)을 동시에 제어고정/유동 레이아웃 모두 가능브라우저가 자동으로 아이템 배치페이지 전체 레이아웃, 대시보드, 복잡한 구성에 강함주로 쓰는 곳전체 페이지 레이아웃카드형 대시보드갤러리/사진 배치🔹 3. 실제 사용 비율 (실무 감각)상황주로 사용메뉴바, 정렬, 버튼✅ Flex카드/갤.. 나의 주니어 개발 일기/HTML-CSS 2025. 10. 16. 14:32
[프로그래머스] Lev 2. 괄호 회전하기 [프로그래머스] Lev 2. 괄호 회전하기https://school.programmers.co.kr/learn/courses/30/lessons/76502 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 28분경에 stack, queue 떠올림괄호 판별 메서드 생각안남실패import java.io.IOException;import java.util.*;public class code { static Stack stack = new Stack(); static Set dup = new HashSet(); public static int solution(String s) { int an.. Personal Studying~/자바문제 풀어보기 2025. 9. 24. 15:52
[프로그래머스] Lev 2. 신고 결과 받기 [프로그래머스] Lev 2. 신고 결과 받기https://school.programmers.co.kr/learn/courses/30/lessons/92334 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 걸린시간: 22분import java.io.IOException;import java.util.*;class Solution { static Map reportCounting = new HashMap(); static Map info = new HashMap(); public static int[] solution(String[] id_list, String[] report, int k) .. Personal Studying~/자바문제 풀어보기 2025. 9. 24. 10:41
[프로그래머스] Lev 2. 행렬 테두리 회전하기 [프로그래머스] Lev 2. 행렬 테두리 회전하기https://school.programmers.co.kr/learn/courses/30/lessons/77485 1시간 오버(좌표 로테이션에서 막힘), 그외는 모두 구현걸린시간: 1시간 20분import java.io.IOException;import java.util.Arrays;class Solution { static int[][] map; static boolean[][] mustChange; public static int[] solution(int columns, int rows, int[][] queries) { map = new int[columns][rows]; int[] answer = new .. Personal Studying~/자바문제 풀어보기 2025. 9. 23. 16:40
[프로그래머스] Lev 2. 성격 유형 검사하기 [프로그래머스] Lev 2. 성격 유형 검사하기https://school.programmers.co.kr/learn/courses/30/lessons/118666 걸린시간: 33분import java.util.*;import java.io.IOException;class Solution { static Map score = new LinkedHashMap(); static Map counting = new HashMap(); public static void setUp(){ score.put(0,new String[]{"R","T"}); score.put(1,new String[]{"C","F"}); score.put(2,new String[]{".. Personal Studying~/자바문제 풀어보기 2025. 9. 23. 14:49
[정렬] 퀵 정렬 퀵 정렬퀵 정렬의 메커니즘은 크게 다음과 같다.하나의 리스트를 피벗(pivot)을 기준으로 두 개의 부분리스트로 나누어 하나는 피벗보다 작은 값들의 부분리스트, 다른 하나는 피벗보다 큰 값들의 부분리스트로 정렬한 다음, 각 부분리스트에 대해 다시 위 처럼 재귀적으로 수행하여 정렬하는 방법이다. 퀵 정렬은 기본적으로 '분할 정복' 알고리즘을 기반으로 정렬되는 방식이다. 다만, 병합정렬(Merge Sort)과 다른 점은 병합정렬의 경우 하나의 리스트를 '절반'으로 나누어 분할 정복을 하고, 퀵 정렬(Quick Sort)의 경우 피벗(pivot)의 값에 따라 피벗보다 작은 값을 갖는 부분리스트와 피벗보다 큰 값을 갖는 부분리스트의 크기가 다를 수 있기 때문에 하나의 리스트에 대해 비균등하게 나뉜다는 점이 있다.. 나의 주니어 개발 일기/알고리즘 2025. 9. 17. 14:17
[정렬] 병합 정렬 병합 정렬문제를 분할하고, 분할한 문제를 정복하여 합치는 과정' 병합 정렬은 데이터를 '비교'하면서 찾기 때문에 '비교 정렬'이며 정렬의 대상이 되는 데이터 외에 추가적인 공간을 필요로 하기 때문에 '제자리 정렬(in-place sort)이 아니다.' 정확히는 제자리 정렬로 구현할 수는 있지만 그 대신 성능을 일부 포기해야하며 매우 신중하게 구현되어야 한다. 병합정렬의 구조상 최대한 작게 문제를 쪼개어 앞의 부분리스트부터 차례대로 합쳐나가기 때문에 안정정렬(Stable Sort) 알고리즘이기도 하다. 합병 정렬의 전체적인 과정은 이렇다.1. 주어진 리스트를 절반으로 분할하여 부분리스트로 나눈다. (Divide : 분할)2. 해당 부분리스트의 길이가 1이 아니라면 1번 과정을 되풀이한다.3. 인접한 부분리.. 나의 주니어 개발 일기/알고리즘 2025. 9. 17. 09:47
[정렬] 이진 삽입 정렬 이진 삽입 정렬삽입정렬의 메커니즘은 같으나, 원소가 들어 갈 위치를 선형 탐색이 아닌 이분 탐색(이진 탐색)을 이용한 방법으로 구현한다.일단 이분 탐색 과정을 이해해보자면, '정렬 된 상태의 구간' 내에서 중간에 위치한 원소와 비교하여 중간 원소보다 작다면 왼쪽 구간으로, 크다면 오른쪽 구간으로 다시 나누어 탐색하는 과정을 말한다.쉽게 그림으로 이해하자면 다음과 같다.기존의 삽입정렬은 while()문으로 한 번 순회했고, 이진 삽입 정렬은 이분탐색 과정과 원소들을 밀기 위한 순회 과정을 거쳐야 하는데, 오히려 이진 삽입 정렬이 느린 것이 아닌가?기본적으로 Insertion Sort나, Binary Insertion Sort나 N개의 각 원소들은 삽입시 N개의 원소를 밀어내는 시프트 작업이 발생하기 때문에.. 나의 주니어 개발 일기/알고리즘 2025. 9. 11. 15:28
[정렬] 삽입정렬 삽입정렬원리삽입 정렬의 전체적인 과정은 이렇다. (오름차순을 기준으로 설명)1. 현재 타겟이 되는 숫자와 이전 위치에 있는 원소들을 비교한다. (첫 번째 타겟은 두 번째 원소부터 시작한다.)2. 타겟이 되는 숫자가 이전 위치에 있던 원소보다 작다면 위치를 서로 교환한다.3. 그 다음 타겟을 찾아 위와 같은 방법으로 반복한다.코드최선 시간복잡도: O(n)최악 시간복잡도: O(n²) //최적: N, 최악:N제곱 public static void insertionSort(int[] arr) { int n = arr.length; for (int i = 1; i = 0 && arr[j] > key) { arr[j + 1] = arr[j]; .. 나의 주니어 개발 일기/알고리즘 2025. 9. 8. 17:56
Quorum queue란? Quorum 큐는 최근에 공식적으로 추가된 큐이다.기존에는 HA-mode를 활용한 Classic 큐로 데이터 미러링을 구축했었는데, 이 방식에서 데이터의 안정성과 미러링 성능을 향상시킨 큐이다.Quorum 큐는 보다 안전하고 심플한 형태로 미러링을 하도록 하고, 브로커가 죽는 상황과 같은 실패 상황에 대한 처리를 강화하여서, 데이터 전달의 안정성이 높다.Raft consensus 알고리즘Quorum 큐에서는 Raft consensus 알고리즘을 사용해서 미러링을 한다고 되어 있는데, 이 알고리즘을 통해서 기존의 HA-mode를 사용한 클래식 큐에서 발생하던 불필요한 RabbitMQ 노드 간의 통신을 줄여서, 빠르고 효율적인 데이터 미러링이 가능하다고 한다.또, 기존의 미러링 방식은 리더 큐에 들어온 메세.. 나의 주니어 개발 일기/RabbitMQ 2025. 9. 5. 14:25
db 이중화 방법론에 대한 상세한 내용 DB 이중화1. DB 이중화의 필요성1) 1대의 DB 서버만을 사용하는 경우장애 시간 = db 서버 복구 시간.2) 2대의 DB 서버를 사용하는 경우 (이중화 X)이중화하지 않은 상태로 각각 db 서버를 아래와 같이 2대를 동작시킨다.master ip: 192.168.0.100slave ip: 192.168.0.200이때, master가 문제가 생기면 slave를 바라보도록 관련자들이 작업을 하면 된다.장애 시간 = 접근 db 서버 ip만 변경하는데 걸리는 시간.3) 2대의 DB 서버를 사용하는 경우 (이중화 X)이제 virtual ip (가상 아이피, 이하 vip)를 사용하여 db 서버 2대를 지정하여 본다.master vip: 192.168.0.300slave vip: 192.168.0.300mast.. 나의 주니어 개발 일기/DB 2025. 9. 5. 14:17
샤딩?파티셔닝? 🎯 샤딩의 목적DB 수평 확장 (Horizontal Scaling)→ 하나의 DB 서버로 감당이 안 될 때, 여러 서버로 데이터를 분산.처리량(Throughput) 증가→ 샤드가 여러 개면 동시에 I/O 가능 → TPS(Transactions per second) 증가.부하 분산 (Load Balancing)→ 특정 샤드만 핫스팟이 되지 않게 잘 분산하면 전체 안정성 향상.무한 확장성→ 데이터가 늘어나도 샤드만 추가하면 됨.👉 즉, DB 자체를 여러 개로 쪼개서 “확장성”과 “부하 분산”을 확보하는 목적.한계샤드 간 JOIN 불가능 → 애플리케이션 단에서 조합해야 함.샤드 간 데이터 이동(리밸런싱)이 필요할 수 있음.운영 난이도 ↑ (샤딩 키 설계, 샤드 모니터링/운영 도구 필요). 🎯 파티셔닝의 .. 나의 주니어 개발 일기/DB 2025. 8. 29. 17:42
WebFlux 문법 Mono 사용법데이터로 시작: just, empty함수로 시작: fromCallable, defer1.0 또는 1개의 데이터를 만들때 @DisplayName("데이터로 시작하는 Mono(just ,empty)") //just, empty @Test public void startMonoFromData(){ Mono.just(1).subscribe(data -> System.out.println("data = " + data)); //ex) 사소한 에러가 발생했을 때 로그를 남기고 empty의 Mono를 전파 Mono.empty().subscribe(data -> System.out.println("data = " + data)); }2.0 .. SPRING/리액티브 프로그래밍 2025. 8. 8. 10:22
리액티브 프로그래밍 배경지식 알고가기 리액티브 프로그래밍 배경지식 알고가기데이터 스트림과 변화에 반응하는 시스템을 구축하기 위한 프로그래밍 패러다임.핵심은 '옵저버 패턴'과 '반응형 시스템'입니다. 옵저버 패턴을 통해 데이터 소스를 관찰하고, 데이터 변화 시 이를 구독하는 컴포넌트에 자동으로 알림을 보냅니다 왜 등장하게 되었을까?기존 동기·블로킹 방식의 한계를 극복하기 위해 등장한 접근법1.자원(스레드)의 한계기존의 Java 웹 애플리케이션은 Thread-per-request 방식스레드는 메모리와 CPU를 차지하는 무거운 자원동시에 많은 요청을 처리하려면 수천 개의 스레드 필요 → 과부하 & 비효율2.블로킹 I/O 문제데이터베이스, 외부 API, 파일 시스템 등은 대부분 I/O 작업일반적인 코드에서는 이런 I/O가 응답 올 때까지 스레드를 .. SPRING/리액티브 프로그래밍 2025. 7. 31. 16:27
이슈: RabbitMQ 에서 PUB 만 햇는데 RabbitMQ 채널이 51개 생성되었음 이슈: RabbitMQ 에서 PUB 만 햇는데 RabbitMQ 채널이 51개 생성되었음PUB 코드package com.example.rabbitmqperformance.service;import com.example.rabbitmqperformance.dto.BenchmarkMessage;import org.springframework.amqp.rabbit.core.RabbitTemplate;import org.springframework.boot.CommandLineRunner;import org.springframework.stereotype.Component;import java.util.concurrent.ExecutorService;import java.util.concurrent.Executo.. 나의 주니어 개발 일기/트러블슈팅 2025. 7. 22. 15:55
Grafana + Prometheus + Exporter 로 서버 모니터링 하는 방법 Grafana + Prometheus + Exporter 로 서버 모니터링 하는 방법1.리눅스 서버 모니터링1-1.준비할것1.Grafana 설치2.Prometheus 설치3.exporter 설치4.Prometheus 환경파일(prometheus.yml)위의 경우 docker compose로 한번에 세팅 가능docker-compose.ymlversion: '3.8'services: prometheus: image: prom/prometheus:latest container_name: prometheus volumes: - /data/jyyoon/prometheus:/etc/prometheus - prometheus_data:/data/jyyoon/prometheus .. 나의 주니어 개발 일기/Docker(도커) 2025. 7. 22. 15:49
[REACT] Context 로 전역 상태 관리하기 Context 란 Props의 데이터 전달 방식은 서비스의 부모가 커지고 컴포넌트 간의 관계가 복잡해질 경우 데이터를 전달하기 매우 비효율적이게 된다.이 비효율을 Context 를 통해서 해결할 수 있다.이런식으로 Context도 분리해서 관리할 수 있다.Props 방식의 App.jsximport './App.css'import Header from "./components/Header"import Editor from "./components/Editor"import List from "./components/List"import { useState, useRef, useReducer, createContext } from 'react'const mockData = [ { id:.. 나의 주니어 개발 일기/REACT 2025. 7. 16. 11:08
[REACT] useMemo로 랜더링 최적화 하기 useMemo로 랜더링 최적화 하기메모이제이션 기법을 기반으로 불 필요한 연산을 최적화 하는 리액트 훅 useMemo(() => {}, [])두번재 인자인 [] 안에 들어간 값이 변경될때마다 첫번째 인자인 ()=>{}콜백함수가 실행된다.const getAnalyzedData = () => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone).length; const notDoneCount = totalCount-doneCount; return { totalCount, doneCount, notDoneCount }};const {totalCount, doneCount, not.. 나의 주니어 개발 일기/REACT 2025. 7. 14. 14:29
