2025년도 회고 (블로그 이전)

안녕하세요 2026년도를 맞이해서 블로그 이전 합니다 :) https://velog.io/@minzee09/2025%EB%85%84%EB%8F%84-%EB%8F%8C%EC%95%84%EB%B3%B4%EB%A9%B0 2025년도 돌아보며2025년 회고velog.io

[Springboot] save() 메소드

사실 백엔드 단위 테스트 코드를 작성하기 위해서 코드의 전체적인 흐름?을 보던 중에 save() 메소드를 사용하는 로직을 보았다.그래서 이름이 'save'이니까 데이터를 저장하는 역할이겠구나라고 생각하면서 이해를 했는데, 백엔드 개발자분의 설명을 들어보니까 단순히 저장하는게 아니라는 것을 알게 되었다. 이름은 save이지만 저장을 상황에 따라 다르게한다. 즉 다르게 말하자면 만약 기존에 없던 새 데이터라면 INSERT를 실행하고, 기존 데이터가 존재해서 수정하는거라면 UPDATE를 실행하여 DB에다가 저장한다. 그럼 얘 입장에서는 이걸 어떻게 구분하냐면바로 엔터티의 ID 즉, PK로 판단한다. => 즉 save는 create & update를 둘 다 담당하는 Upsert 개념이라고 보면 된다. 나름 어..

[인프라] Auto-Scaling 오토스테일링 개념 간단하게 찍먹하자

서버의 트래픽이 많아지면 자동으로 서버 (즉, 인스턴스)를 여러 개 늘리고, 반대로 줄면 알아서 줄어주는 기능.이때 서버를 늘리는 것을 Scale Out, 축소시키는 걸 Scale In이라고 한다. 이걸 하는 이유는 갑자기 사용자가 늘어 트래픽이 많아지는걸 대응할 수 있어서 성능은 유지되고 또한 필요 없을때는 알아서 scale in하기에 비용도 아낄 수가 있다. 언제 가장 많이 사용한다면 예를 들어 티켓 예매 서비스가 있다면, 새벽 시간대에는 사람이 거의 접속하지 않기에 굳이 서버 여러 개 필요 없고, 예매 시간일때는 한꺼번에 사용자들이 몰리기 때문에 이때 서버 다운 위험이 있기에 서버 여러 개가 필요하다. 이런식으로 유동적으로 관리하면서 낭비 없이 서버 유지비를 최소한으로 사용 할 수 있도록 한다. ..

프론트엔드 개발자인 입장에서 계층형 아키텍처 파헤쳐보기

회사에서 백엔드 코드를 살펴보면서,,,서버 개발을 열심히 알아가려고 하는데요!백엔드에서 기본적인 흐름, 즉 폴더 구조를 정리하고자 합니다 기본적인 플로우[ Client (브라우저/앱) ] ⇅ HTTP/JSON[ Controller ] ─ 비즈니스 진입지점 (요청/응답 DTO) ⇅[ Service ] ─ 핵심 로직/트랜잭션/도메인 규칙 ⇅[ Repository ] ─ DB 접근(JPA, Query) ⇅[ Entity ] ─ 테이블과 1:1 매핑되는 도메인 모델 Controller클라이언트의 요청 (API 호출) 가장 먼저 받는 부분. API endpoint도 정의하는 곳.즉 프론트엔드에서 router와 비슷한 역할. Service비즈니스..

마이크로서비스 Microservice 아키텍처란? (Monolithic와의 차이)

안녕하세요, 이번에 인턴 생활하면서 프론트엔드 위주로 공부했던 제가 좋은 기회로 백엔드에 대해 더 배우게 되었는데요!특히 백엔드가 전반적으로 어떻게 돌아가는지 큰 틀과 원리를 이해하다가 마이크로서비스 아키텍처라는 개념을 알게 되었습니다. 저는 특히나 지금까지 동아리나 대외활동에서 한 프로젝트들은 하나의 애플리케이션/서비스 = 하나의 DB로 관리하는 걸로만 알고 있었고, 백엔드 개발자 분들도 이 방법으로 설계하고 개발했었습니다. 이제 막 배우는 단계라 구체적이고 100프로 정확하지 않을 수도 있지만, 제가 배운거 토대로 정리하려고 합니다! Microservice Architecture작은 서비스 여러개가 모여서 하나의 시스템을 제공하는 아키텍처.database per service라고도 한다. 즉, 예를 ..

[GitLab] 깃랩이란? 깃헙과의 차이점

이번에 외국계 대기업 인턴 합격하게 되었는데요, 회사에서는 깃헙이 아니라 깃랩(GitLab)으로 협업 및 코드 버전 관리를 한다고 한다. 사실 깃헙만을 써보았는데 이전 회사에서 일했을때랑 사이드 플젝, 동아리 등등은 다 깃헙으로 했었기에 깃랩은 처음 들어봤다그래서 아직 본격적으로 써보지는 않았지만 간략하게 깃랩이 뭔지 알아보고자 간단하게 정리해보았다. (추후에 쓰게 되면 사용 후기 및 느낀 점을 적는것도 나쁘지 않을 것 같다 ㅎㅎ) 깃랩이란?GitLab은 소프트웨어 개발 및 협업을 위한 올인원 솔루션을 제공하는 웹 기반 DevOps 플랫폼이다. 팀이 소프트웨어 프로젝트를 보다 효율적으로 계획, 생성, 구축, 테스트 및 배포하는데 도움이 되는 다양한 도구와 기능을 제공한다. 깃헙과의 차이점깃헙 처럼 git..

[Chrome/Safari] 웹에서 음성 녹음 사용하는 법 (ngrok 사용하기 & 브라우저 보안 정책)

next.js로 웹앱 프로젝트 개발하는 도중에 음성 녹음 기능이 필요해서 적용 중에 있었는데, 분명히 컴퓨터로 (localhost)로 테스트했을때 잘실행이 되었으나, 핸드폰으로 네트워크 주수로 ( 192.xxx.xxx.xxx:3000) 들어갔을때 (나 같은 경우에는 아이폰 사파리) 음성 녹음 기능 자체가 아예 안되는 오류를 마주했다.분명히 컴퓨터에서 접속했을때는 잘되는데, 왜 안되는지 찾던 와중에 브라우저의 보안 정책 때문에 안된다는걸 알게 되었다. 원인: 브라우저 보안 정책 때문에 막혀있다!결론적으로, 이 문제는 브라우저의 보안 정책 때문이었습니다.브라우저는 마이크와 카메라 권한을 기본적으로 HTTPS 환경에서만 허용합니다.그런데 localhost는 특별히 예외가 적용되어, HTTP여도 안전한 도메인으..

[JS] slice()로 복사 활용하기, 얕은 복사인 이유 (깊은 복사하는 방법)

이번에 코딩 테스트 대비하려고 알고리즘 공부하다가 slice() 메서드는 배열을 자르는 역할도 있지만 복사를 해서 기존 배열에 영향을 주지 않고 변형을 시킬 때도 쓸 수 있다는 사실을 알게 됐다. 근데 문서 보니까 slice()는 얕은 복사를 한다고 해서 순간 헷갈렸다. 내가 알기론 얕은 복사는 서로 참조를 공유하니까 변형하면 원본에도 영향이 가는 거 아닌가? 그래서 조금 찾아보게 됐다. 결론부터 말하자면, slice()는 얕은 복사를 하는 게 맞지만 배열에 원시값(숫자, 문자열 등)만 들어있으면 참조가 일어나지 않아서 원본에는 영향이 안 간다. 대신 배열 안에 객체가 들어 있다면 얕은 복사이기 때문에 원본에도 영향이 간다. 여기서 잠깐 얕은 복사랑 깊은 복사를 정리하면얕은 복사 vs 깊은 복사얕은 복사..

[TailwindCSS v4] next/font/local 커스텀 폰트 적용이 안될 때 해결법

1. 문제 개요오류 상황: Next.js 14 앱 라우터 프로젝트에서 next/font/local로 불러온 커스텀 폰트들이 정상적으로 로딩되었음에도, 실제 페이지에서는 시스템 기본 폰트(Malgun Gothic, Segoe UI 등)만 렌더링발생 배경: 커스텀 폰트 적용하는데, 네트워크 + 파일 경로 둘다 문제 없는데도 텍스트에는 기본 폰트만 적용이 되는 상황2. 오류 코드 및 오류 메시지오류 메시지: 없어서,,, 파악하고 해결하는데 어려움이 있었다...3. 원인 분석오류 원인: tailwindcss가 v3에서 v4로 업데이트 되면서 커스텀 폰트 적용하는 방식이 바뀜. v3 방식대로 구조적 이해: Tailwind CSS v4는 기본적으로 fontFamily를 theme.extend.fontFamily로 ..

React Native 앱을 Next.js 웹앱으로 마이그레이션 결정 이유 (+Figma MCP & Cursor 후기)

앱으로 개발한 이유이 프로젝트는 처음부터 아트 컬렉터를 위한 미술 전시 앱이었다. 하지만 기획 단계에서부터 가장 큰 고민은 "웹으로 할까, 앱으로 할까"였다.지금 되돌아보면 웹앱으로도 충분히 가능했지만 당시에 앱을 선택한 이유는 두 가지였다.미술 전시라는 특성상 이미지 콘텐츠가 많아 앱 환경에서 더 나은 성능을 제공할 수 있을 것 같았다.또한, 혹시라도 나중에 안드로이드 네이티브 기능(저장소 접근, 이미지 다운로드 등)을 써야 할 상황이 생길 수도 있다고 생각했다. 이런 제약을 처음부터 피하고 싶었다.제한된 기술 스택으로 인해 나중에 후회하기보단, 더 확장 가능한 형태인 React Native로 Android 앱 개발을 시작했다. 개발을 마치고 나니 다시 고민이 시작됐다하지만 막상 앱 개발이 끝나고 나니..

[Ubuntu/WSL] 설정부터 VS Code 활용까지의 과정 - D: 드라이브 설치 가이드 포함 (Figma MCP + Claude-Code 연결 실패 이유)

요즘 MCP (Model Context Protocol)가 꽤 핫하다는 얘기를 들었고, Figma에서도 Dev Mode MCP를 쓸 수 있어 알아서 디자인 보고 UI 제작한다고 들었습니다. 딱히 바로 써먹을 프로젝트는 없었는데 마침 React Native로 만든 안드로이드 앱을 Next.js 기반 웹앱으로 마이그레이션해야 하는 일이 생겼어요. 이 앱은 처음으로 React랑 React Native를 써서 만든 프로젝트인데 그렇다보니 구조나 로직이 아직 깔끔하진 않아서 바로 옮기는게 쉽지 않다고 생각했고, 기능도 많고 페이지 수도 꽤 되는 편이라 혼자 프론트엔드를 다 맡기엔 좀 벅찬 감도 있었고요. 특히나 기존 코드를 틀로 활용할 수는 있겠지만, 일일이 Next.js로 옮기는 건 시간도 많이 들고 비효율적이..

[면접을 위한 CS 전공 지식 노트] 4주차 - 4장 데이터베이스

4.1 DB의 기본데이터베이스 ⇒ 일정한 규칙/규약을 통해 구조화되어 저장되는 데이터의 모음DBMS database mangement system ⇒ 이러한 DB를 제어 & 관리하는 통합 시스템ex) DBMS ⇒ MySQL, 응용 프로그램 ⇒ Node.js엔터티 entity⇒ 여러 개의 속성을 지닌 명사ex) 회원이라는 엔터티 있으면 이름, 아이디, 주소, 전화번호의 속성을 가짐약한 엔터티 & 강한 엔터티⇒ A가 혼자서 존재하지 못함. B의 존재 여부에 따라 종속적약한 엔터티 ⇒ A강한 엔터티 ⇒ Bex) 방은 건물 안에만 존재함. 즉, 방은 약한 엔터티, 건물은 강한 엔터티릴레이션 relation⇒ DB에서 정보를 구분하여 저장하는 기본 단위관계형 DB에서는 ‘테이블’ tableNoSQL DB에서는 ‘..

[CH.08] 제어문 control flow statement

8.1 블록문 block statement⇒ 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록이라고도 함JS는 블록문을 하나의 실행 단위로 취급함블록문 끝에는 세미콜론을 붙이지 않// 블록문{ var foo = 10;}// 제어문var x = 1;if (x 8.2 조건문 conditional statement⇒ 주어진 조건식(boolean값으로 평가될 수 있는 표현식)의 평가 결과에 따라 코드 블록의 실행을 결정함if else문// else if 문은 여러 번 사용 가능var num = 2;var kind;// if 문if (num > 0) { kind = '양수'; // 음수를 구별할 수 없다}console.log(kind); // 양수// if...else 문if (num > 0) { kind..

[프로그래머스] 카펫 - 완전탐색 (JS)

프로그래머스 알고리즘 고득점 kit - 완전 탐색(=brute force) 문제문제처음 접근 시도function solution(brown, yellow) { var answer = []; let isTrue = false; let carpet = brown + yellow; for (let i = 1; i = j){ answer.push(i); answer.push(j); isTrue = true; } } if (isTrue) break; } return answer;}이 코드에서의 문제점1. 범위 제한 문제코드에서는 i와 j를 1부터 9까지의 범..

[면접을 위한 CS 전공 지식 노트] 3주차 - 3장 운영체제

3.1 운영체제와 컴퓨터운영체제의 역할와 구조역할CPU 스케줄링 & 프로세스 관리→ CPU 소유권을 어떤 프로세스에 할당할지, 프로세스의 생성과 삭제, 자원 할당 및 반환을 관리메모리 관리→ 한정된 메모리를 어떤 프로세스에 얼만큼 할당해야 하는지 관리디스크 파일 관리→ 디스크 파일을 어떠한 방법으로 보관할지 관리I/O 디바이스 관리→ 마우스, 키보드와 컴퓨터 간에 데이터를 주고받는 것을 관리구조GUI graphical user interface사용자가 전자장치와 상호 작용할 수 있도록 하는 사용자 인터페이스의 한 형태, 단순 명령어 창이 아닌 아이콘을 마우스로 클릭하는 단순한 동작으로 컴퓨터와 상호 작용할 수 있게 함CUI character user interface그래픽이 아닌 명령어로 처리하는 인터페..

[프로그래머스] 소수 찾기 - 완전탐색 (JS)

프로그래머스 알고리즘 고득점 kit - 완전 탐색(=brute force) 문제문제처음 접근 시도// 1) split로 numbers을 배열 만들기// 2) numbers로 만들 수 있는 모든 숫자 구하는 로직// 2.1) 맨앞이 0인 경우 제외 -> continue 사용 // 2.2) 1도 제외// 2.3) numbers.length만큼 반복 (한 자리 수, 두 자리 수...)// 3) 소수인지 판별하는 로직// 3.1) 2부터 9까지 나눠서 나머지가 1이상 나오는 경우 -> 소수function solution(numbers) { var answer = 0; numbers = numbers.split(''); console.log(numbers.len..

[CH.07] 연산자 operators

7.1 산술 연산자 arithmetic operator⇒ 수학적 계산을 수행해 새로운 숫자 값을 만듬산술 연산이 불가는하면 NaN을 반환함이항 산술 연산자 binary arithmetic operator⇒ 2개의 피연산자를 산술 연산해 숫자 값을 만듬모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과 side effect가 없음여기서 side effect의 의미 → 피연산자의 값이 바뀌는 경우 X, 새로운 값을 만듬이상 산술 연산자 의미 부수효과+뎟셈X-뺄셈X*곱셈X/나눗셈X%나머지X단항 산술 연산자 unary arithmetic operator⇒ 1개의 피연산자를 산술 연산하여 숫자 값을 만듬단향 산술 연산자 의미 부수효과++증가O--감소O+효과 X 단, 숫자타입이 아닌 피연산자에 사용하면 피..

[CH.06] 데이터 타입 data type

자바스크립트에서는 7개의 데이터 타입이 존재함구분 데이터 타입 설명원시타입숫자(number)타입숫자. 정수와 실수 구분 없이 하나의 숫자타입만 존재 문자열(string)타입문자열 불리언(boolean)타입논리적 참(true)과 거짓(false) undefined 타입var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌(symbol) 타입ES6에서 추가된 7번째 타입객체타입 원시 타입을 제외한 모든 것6.1 숫자 타입 number type하나의 숫자 타입만 존재한다. 모든 수는 실수로 처리되기 때문에 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있는 이유다.// 숫자 타입은 모두 실수로 처리된다.console.log(1 === 1...

[면접을 위한 CS 전공 지식 노트] 2주차 - 2장 네트워크

네트워크의 기초네트워크⇒ node와 link가 서로 연결되어 있으며 리소스를 공유하는 집합node → 서버, 라우터, 스위치link → 유선, 무선많은 처리량, 지연 시간 적음, 장애 빈도 적음, 좋은 보안 ⇒ 좋은 네트워크처리량 throughput⇒ link 내에서 성공적으로 전달된 데이터의 양많은 트래픽을 처리한다 = 많은 처리량을 가진다단위: bps bits per secend처리량 vs 트랙픽트래픽이 많아졌다 == 흐르는 데이터가 많아졌다.처리량이 많아졌다 == 처리되는 트래픽이 많아졌다.대역폭 bandwidth⇒ 주어진 시간 동안 네트워크 연결을 통해 흐를 수 있는 최대 비트 수지연 시간 latency⇒ 요청이 처리되는 시간⇒ 어떤 메시지가 두 장치 사이를 왕복하는데 걸리는 시간무선/유선, 패킷..

[자료구조] 해시 Hash, Hash Table, Hash Function, HashMap (JS)

참고영상:https://www.youtube.com/watch?v=HraOg7W3VAM 1. 해시 Hash란?해시(Hash)는 데이터를 고유한 값으로 변환하는 과정을 의미한다. 데이터를 입력받아 고정된 크기의 값으로 변환하며, 이는 데이터 식별과 검색 효율성을 높인다.2. 해시 함수 Hash Function해시 함수는 임의의 데이터를 입력받아 고정된 길이의 문자열이나 숫자(해시값)를 반환하는 함수다.해시 함수의 특징:같은 입력값에 대해 항상 같은 출력값 반환다른 입력값에 대해 가능한 한 다른 출력값 생성(충돌 최소화)빠른 계산 속도3. 해시 테이블 Hash Table해시 테이블은 키(key)를 해시 함수로 변환한 값을 인덱스로 사용하여 데이터를 저장하는 자료구조다.해시 테이블의 특징:해시 함수를 사용해 ..