HOT

Vue 3 + Vite에서 Axios API 구조 완벽 가이드

2025.06.05·

Vue.js

Vue 3 (Composition API) + Vite 기반 프로젝트에서 Axios 인스턴스를 구성하고, 기능별로 API 디렉터리를 모듈화 하여 관리하는 실전적인 구조에 대해 알아보겠습니다. 이 글에서는 axios 설정부터 인터셉터 활용, API 모듈 분리, 컴포넌트 연동, 환경 변수(. env) 사용 팁, 확장 포인트, 그리고 팀 협업 관점의 적용 사례까지 폭넓게 다룹니다. Composition API 문법과 마크다운 형식으로 작성되었으며, 예제 코드는 Vue 3 기준으로 설명합니다.1. Axios 인스턴스를 구성하는 이유와 인터셉터 원리Axios 인스턴스를 별도로 생성하여 사용하는 것은 대규모 Vue 프로젝트에서 반복 코드를 줄이고, 설정을 일원화하기 위해 매우 유용합니다. Axios 인스턴스를 사용..

백엔드 개발자 기술면접 완벽 대비서

2025.07.23·

🗨️ Backend

본 가이드의 질문들은 특정 기업의 출제 문제가 아닌, 현업 백엔드 개발자들이 실무에서 필요하다고 판단하는 핵심 역량들을 체계적으로 정리한 것이다. 이 질문들의 진정한 가치는 정답을 암기하는 데 있지 않다. 각 질문을 통해 자신의 기술적 이해도를 객관적으로 평가하고, 학습이 필요한 영역을 명확히 식별하는 데 있다. 익숙하지 않은 개념을 마주했을 때, 그것을 학습 기회로 받아들이는 마음가짐이 중요하다.네트워크 & HTTP1. HTTP METHOD에 대해 설명해 보세요.HTTP METHOD에는 GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS가 있다. GET은 클라이언트에서 서버로 어떠한 리소스로부터 정보를 요청하기 위해 사용되는 method이다.즉, 서버에서 어떤 데이터를 가..

JPA에서 변경 감지와 병합(Merge) 이해하기

2025.03.26·

Java

1. 영속성 컨텍스트와 준영속 엔티티란?영속성 컨텍스트(Persistence Context)JPA에서는 엔티티(Entity)를 관리하는 환경을 영속성 컨텍스트(Persistence Context)라고 합니다. 영속성 컨텍스트는 엔티티의 생명 주기를 관리하며, 데이터베이스와의 동기화를 자동으로 처리하는 중요한 역할을 합니다.준영속 엔티티(Detached Entity)준영속 엔티티(Detached Entity)란, 한 번 영속 상태(Persistent State)였다가 현재는 영속성 컨텍스트에서 관리되지 않는 엔티티를 의미합니다.예를 들어, 데이터베이스에서 조회된 Book 객체가 존재하는데, 트랜잭션이 종료되거나 영속성 컨텍스트에서 분리되면 해당 객체는 준영속 상태가 됩니다. 이러한 객체를 다시 수정하려면 ..

Vue.js 3 컴포지션 API 기반 프론트엔드 프로젝트 구조 이해

2025.06.02·

Vue.js

Vue.js란 무엇인가Vue.js는 사용자 인터페이스를 구축하기 위한 자바스크립트 프레임워크이다.표준 HTML, CSS, JavaScript 위에 구축된 Vue는 선언적이고 컴포넌트 기반의 프로그래밍 모델을 제공하여 복잡한 UI도 효율적으로 개발할 수 있게 한다. Vue는 React나 Angular와 달리, 프로그레시브 프레임워크를 지향한다. 필요한 기능만 점진적으로 채택할 수 있어 기존 프로젝트에 무리 없이 도입하기 쉽다.Vue 3 버전에서는 컴포지션 API (Composition API)를 도입하여 상태와 로직을 보다 유연하게 구성할 수 있게 되었고,성능과 개발자 경험 면에서도 여러 개선이 이루어졌다.즉, Vue.js는 가볍지만 강력한 프론트엔드 프레임워크로, 뷰(View) 레이어를 중심으로 한 빠른..

[Unity] 로그라이크 생존 RPG (5) - 몬스터 소환

2024.04.17·

Project

[본 포스팅은 Youtube 골드메탈님의 '유니티 뱀서라이크' 강의 영상을 정리한 포스팅입니다.] 몬스터의 기본적인 툴을 만드는 과정을 진행했다면, 이제 몬스터를 자동으로 레벨에 맞게 소환하고, 재활용하는 최적화 과정이 필요하다. 더보기 [Unity] 로그라이크 생존 RPG (4) - 몬스터 만들기 [본 포스팅은 Youtube 골드메탈님의 '유니티 뱀서라이크' 강의 영상을 정리한 포스팅입니다.] RPG 게임에는 꼭 필요한 요소로 몬스터(Enemy)가 필요하다. 몬스터 Sprite를 Hierarchy에 추가하고 애니메이 pids.tistory.com 프리펩 만들기 먼저 Prefab을 따로 보관할 폴더를 Project에 생성해야 한다. 그리고 오브젝트를 드래그 드롭하여 프리펩으로 변환하면 된다. 이렇게 프리..

[Unity - Visual Scripting #3] LittleWars

2023.02.11·

Games

[본 게임은 Youtube 골드메탈님의 '유니티 볼트 기초 캐주얼디펜스 리틀워즈 [VE3]'의 영상을 개발한 게임입니다.] 캐주얼 디펜스 - 메인메뉴 만들기 [유니티 볼트 기초 강좌 V17 + 에셋 다운로드] 게임 다운로드 [Android Mobile Version] LittleWars.apk drive.google.com [Window PC Version] LittleWars.zip drive.google.com 게임 설명 3가지의 난이도 쉬움, 보통, 어려움을 클리어하는 게임입니다. ( 각 난이도마다 상대 진영에서 초당 얻는 자원량이 늘어납니다. ) 총 4가지의 유닛 전사, 궁수, 방패병, 마법사가 있으며 다양한 조합으로 상대 진영(Red팀)보다 먼저 성을 함락시키면 승리하는 게임입니다. 마법사 유닛..

NEW

2028년, 돈의 시대가 끝난다. 화폐의 종말과 필자의 생각 그리고 AI의 대답

2025.12.29·

🚀 AI

현재 미국의 부채는 약 36조 달러. 원화로 환산하면 5경 원이 넘는 수치이다. IMF에서도 미국의 부채에 대해서 "지속 불가능한 부채"라고 지적하였다. 따라서 머스크는 이 빚을 갚는 것은 불가능하며, 경제 규모를 폭발적으로 키워(분모를 키워) 빚의 가치를 희석시키는 것만이 유일한 해결책이라고 제시하였다. 현재 일론 머스크의 개인 재산은 약 7,490억 달러로, 원화로 1,100조 원이다.2025년 대한민국의 1년 총예산이 673조 원으로, 일론 머스크 개인 재산은 한 국가의 2년 치 예산에 해당한다. 거시경제뿐만이 아니다. 우리 눈앞의 현실도 이미 빠르게 변하고 있다. 중국의 선전시나 미국의 실리콘밸리 등 과학기술이 고도화된 도시를 여행 가면 드론이나 무인 카트가 음식을 배달하고, 무인 택시나 무인 버..

LLM 및 AI 도구 가이드 및 비교 분석

2025.07.27·

🚀 AI

2025년 현재, AI 기술은 단순한 유행이 아닌 일상과 업무의 필수 요소가 되었다.McKinsey 보고서에 따르면 생성형 AI는 연간 2.6조에서 4.4조 달러의 경제적 가치를 창출할 수 있다고 한다.이번 포스팅에서는 현재 가장 인기 있는 LLM들과 다양한 AI 도구들을 비교 분석해서,여러분의 목적에 맞는 최적의 AI를 찾아주려고 한다. 주요 LLM 비교 분석1. OpenAI ChatGPT 시리즈모델 라인업:GPT-4.5 (2025년 최신)GPT-4o (범용)o3/o3-pro (추론 특화)o4-mini (경량)주요 장점:메모리 기능으로 이전 대화를 기억하고 개인화된 관계를 구축한다이미지 생성, 웹 검색, 코드 실행 등 올인원 기능을 제공한다전 세계 5억 4천 6백만 월간 활성 사용자를 보유하고 있다무료..

백엔드 개발자 기술면접 완벽 대비서

2025.07.23·

🗨️ Backend

본 가이드의 질문들은 특정 기업의 출제 문제가 아닌, 현업 백엔드 개발자들이 실무에서 필요하다고 판단하는 핵심 역량들을 체계적으로 정리한 것이다. 이 질문들의 진정한 가치는 정답을 암기하는 데 있지 않다. 각 질문을 통해 자신의 기술적 이해도를 객관적으로 평가하고, 학습이 필요한 영역을 명확히 식별하는 데 있다. 익숙하지 않은 개념을 마주했을 때, 그것을 학습 기회로 받아들이는 마음가짐이 중요하다.네트워크 & HTTP1. HTTP METHOD에 대해 설명해 보세요.HTTP METHOD에는 GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS가 있다. GET은 클라이언트에서 서버로 어떠한 리소스로부터 정보를 요청하기 위해 사용되는 method이다.즉, 서버에서 어떤 데이터를 가..

디자인 패턴: 정의, 분류 및 주요 패턴 이해

2025.07.08·

🗨️ Backend

1. 디자인 패턴이란?디자인 패턴(design pattern)은 소프트웨어 설계에서자주 발생하는 문제에 대해 재사용할 수 있는 우수한 해결책을 정형화한 것이다다시 말해, 문제 상황(Context)과 그에 따른 여러 제약 조건(Problem),그리고 이를 해결하는 일반적인 설계 해법(Solution)으로 구성된다.디자인 패턴은 특정 구현 방법이나 프로그래밍 언어에 의존하지 않으며다양한 상황에 적용될 수 있는 일종의 설계 템플릿이다."바퀴를 다시 발명하지 말라"는 격언처럼, 이미 검증된 설계 방식을 활용함으로써개발자는 매번 처음부터 문제를 해결할 필요 없이 효율적인 해법을 적용할 수 있다.이러한 "디자인 패턴" 개념은 원래 건축 분야에서 건축가 크리스토퍼 알렉산더가 제안한 아이디어에서 출발했다소프트웨어 개발..

Redis란 무엇인가? 설치부터 활용 사례까지 완벽 가이드

2025.07.02·

🗨️ Backend

1. Redis란 무엇인가?Redis는 "Remote Dictionary Server"의 약자로, 인메모리 데이터베이스입니다.즉, 데이터를 메모리에서 처리하고 저장하는 방식으로 작동하는 Key-Value 저장소입니다.Redis는 오픈소스이며,데이터를 빠르게 읽고 쓸 수 있는 고성능의 특성을 갖고 있어 캐시나 세션 관리, 메시지 큐 등에 널리 사용됩니다.기본적으로 키(Key)와 값(Value) 쌍으로 데이터를 저장하는 시스템이며, 데이터를 디스크에 저장할 수 있지만,대부분 메모리 기반으로 데이터를 처리해 빠른 속도를 자랑합니다.2. Redis의 특징과 장점 1. 고속 데이터 처리: Redis는 인메모리 저장소로 데이터를 디스크가 아닌 메모리에 저장하기 때문에,빠른 읽기/쓰기 성능을 자랑합니다. 2. 다양한..

QueryDSL 기본 개념 정리

2025.06.18·

Java

1. QueryDSL이란 무엇인가?QueryDSL은 Java에서 타입 안전한 SQL 쿼리를 작성할 수 있게 도와주는 라이브러리이다.일반적으로 SQL 쿼리는 문자열로 작성되지만,QueryDSL은 이를 객체 지향적으로 작성하여 컴파일 타임에 오류를 확인할 수 있도록 한다.그로 인해 SQL 쿼리의 안정성이 높아지고, 직관적인 쿼리 작성이 가능하다. 주요 특징타입 안전성: SQL 문법 오류를 컴파일 타임에 발견할 수 있다.객체 지향적 쿼리 작성: SQL 쿼리를 자바 코드로 작성할 수 있다.다양한 데이터베이스 연동 가능: SQL, JPA, MongoDB 등 다양한 데이터베이스와 호환된다.2. QueryDSL을 사용해야 하는 이유2.1. 타입 안전성 확보SQL 쿼리는 일반적으로 문자열로 작성된다.이 경우 SQL 구..

Project

Web

[OneStack]팀 프로젝트 개발 과정 - WebSocket 실시간 채팅

2025.03.04·

OneStack

본 프로젝트 개발자 과정 학원의 파이널 프로젝트 기획, 개발, 배포 과정을 담고 있습니다.   OneStack원스택회원 너무 좋아요 작성자 : 서윤달콤 ⭐️ ⭐️ ⭐️ ⭐️ ⭐️www.onestack.store📌 WebSocket이란?WebSocket은 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜입니다. HTTP와 달리 연결을 유지하면서 실시간으로 데이터를 주고받을 수 있는 장점이 있습니다.✅ WebSocket의 장점실시간 양방향 통신: 서버와 클라이언트가 자유롭게 데이터를 주고받을 수 있음낮은 지연 시간: 기존 HTTP 요청/응답 방식보다 빠른 데이터 전송효율적인 서버 리소스 사용: 연결 유지로 인한 반복적인 요청 오버헤드 감소최적화된 데이터 전송: 헤더 크기가 작아 네트워크 비용 절..

[OneStack]팀 프로젝트 개발 과정 - JavaMailSender 비밀번호 재설정

2025.03.03·

OneStack

본 프로젝트 개발자 과정 학원의 파이널 프로젝트 기획, 개발, 배포 과정을 담고 있습니다. OneStack예린더쿠 최고였어요! 작성자 : Kyle ⭐️ ⭐️ ⭐️ ⭐️ ⭐️www.onestack.store JavaMailSender란?JavaMailSender는 Spring Framework에서 제공하는이메일 발송 기능을 쉽게 구현할 수 있도록 지원하는 인터페이스입니다.SMTP 설정을 활용하여 메일 서버에 연결하고 HTML 템플릿을 적용할 수 있으며, 비동기 메일 발송도 가능합니다.JavaMailSender의 주요 기능SMTP 서버를 이용한 메일 발송HTML 템플릿 지원 (Thymeleaf 등 활용 가능)첨부 파일 전송 기능 제공비동기 메일 발송 가능비밀번호 재설정 기능 구현비밀번호 재설정 기능은 사..

[OneStack]팀 프로젝트 개발 과정 - OAuth2 소셜 로그인

2025.03.03·

OneStack

본 프로젝트 개발자 과정 학원의 파이널 프로젝트 기획, 개발, 배포 과정을 담고 있습니다.   OneStack예린더쿠 최고였어요! 작성자 : Kyle ⭐️ ⭐️ ⭐️ ⭐️ ⭐️www.onestack.store 1. 소셜 로그인이 필요한 이유소셜 로그인은 사용자의 편의성을 높이고 보안을 강화하는 중요한 기능이다. 이를 통해 다음과 같은 장점을 얻을 수 있다.사용자 편의성: 별도의 회원가입 없이 기존 계정으로 빠르게 로그인할 수 있다.신뢰성 향상: 검증된 플랫폼의 인증 시스템을 활용할 수 있다.개발 효율성: 보안 인증 로직을 외부 플랫폼에 위임할 수 있어 유지보수가 용이하다.2. 전체 로그인 프로세스소셜 로그인 구현에 앞서 전체적인 로그인 프로세스를 살펴보자.사용자가 카카오 또는 구글 계정을 이용해 로그인 ..

Git Flow 완벽 정리: 협업과 배포를 위한 Git 브랜치 전략

2025.02.28·

🌐 Web

Git Flow는 기능 개발, 배포, 유지보수 등의 작업을 효율적으로 관리할 수 있도록 설계된 Git 브랜치 전략입니다. 특히, 팀 프로젝트나 지속적인 배포(CI/CD) 환경에서 유용하게 활용됩니다. 1. Git Flow의 핵심 개념Git Flow에서는 총 5가지 주요 브랜치를 사용하여 코드 변경을 효과적으로 관리합니다.✅ Main 브랜치 (main or master)배포(Release)된 최종 안정적인 코드가 있는 브랜치직접 수정하지 않으며, develop 브랜치에서 검증된 코드만 병합됨✅ Develop 브랜치 (develop)기능 개발을 진행하는 브랜치feature 브랜치에서 개발된 코드가 머지되며, 이 브랜치를 기준으로 release 브랜치가 생성됨✅ Feature 브랜치 (feature/)새로운 ..

JWT (JSON Web Token)란? 쉽게 이해하기

2025.02.27·

🌐 Web

웹 애플리케이션을 개발하다 보면, 로그인한 사용자의 정보를 유지해야 할 때가 많다.과거에는 세션(session)을 사용했지만, 최근에는 JWT (JSON Web Token)이 널리 사용되고 있다.그렇다면 JWT가 무엇이고, 어떻게 동작하는지 정리해보자.1. JWT란 무엇인가?JWT(JSON Web Token)는 사용자의 인증 정보를 안전하게 전송하기 위한 토큰 기반 인증 방식이다.쉽게 말해, 로그인하면 사용자의 정보를 암호화된 토큰 형태로 발급하여 클라이언트가 저장하고,이후 요청할 때마다 토큰을 보내 인증을 처리하는 방식이다.✅ JWT는 자체적으로 사용자 정보를 포함하기 때문에, 별도의 세션 저장소가 필요 없음✅ RESTful API와 잘 맞는 인증 방식 → 서버가 사용자의 상태를 유지하지 않아도 됨 (..