삽질개발코딩

[Vue.js] 환경변수(.env) 사용법: 개발·운영 환경 나누기 (Vite)

API 서버 주소는 개발할 때는 http://localhost:8080, 배포할 때는 https://api.example.com 처럼 환경마다 다릅니다. 이런 값을 코드에 직접 적어 두면 배포할 때마다 코드를 고쳐야 합니다.환경변수(.env)를 사용하면 코드는 그대로 두고 환경별로 값만 바꿔서 사용할 수 있습니다. 이 글은 Vite 기반 Vue 프로젝트 기준입니다. 이 글에서 다루는 내용1. .env 파일 기본 사용법2. 환경별 파일 나누기 (개발 / 운영)3. 코드에서 환경변수 사용하기4. 보안 주의사항5. 자주 하는 실수와 정리 1. .env 파일 기본 사용법프로젝트 최상위 폴더(package.json이 있는 곳)에 .env 파일을 만들고 이름=값 형태로 작성합니다.▶ .envVITE_API_BASE..

[Vue.js] 폼 유효성 검사 직접 만들기 (v-model + computed)

회원가입, 로그인, 글쓰기처럼 입력 폼이 있는 화면에서는 사용자가 잘못 입력했을 때 바로 알려주는 기능이 필수입니다. 라이브러리 없이도 v-model, computed, watch만으로 기본적인 유효성 검사를 만들 수 있습니다. 이 글에서 다루는 내용1. 유효성 검사의 기본 구조2. computed로 실시간 검증하기3. 제출 시 검증과 에러 메시지 표시4. 자주 쓰는 검증 규칙 (이메일, 비밀번호, 숫자)5. 자주 하는 실수와 정리 1. 유효성 검사의 기본 구조폼 검증은 크게 세 가지 요소로 이루어집니다.요소역할Vue에서의 구현입력값사용자가 입력한 값ref + v-model검증 규칙값이 올바른지 판단computed 또는 검증 함수에러 메시지잘못된 이유를 사용자에게 표시v-if 로 조건부 표시 검증 시점 ..

[Vue.js] 컴포저블(Composable) 만들기: 반복되는 로직 재사용하기

컴포넌트를 여러 개 만들다 보면 똑같은 로직이 여기저기 반복됩니다. 마우스 좌표 추적, API 호출과 로딩 상태 관리, 토글 상태 관리 같은 코드가 대표적입니다.Vue 3에서는 이런 반복되는 로직을 함수로 묶어 재사용하는 방법을 컴포저블(Composable)이라고 부릅니다. 이 글에서 다루는 내용1. 컴포저블이란?2. 기본 예제: useToggle, useCounter3. 실전 예제: useFetch (API 호출 + 로딩/에러)4. 컴포저블 작성 규칙5. 자주 하는 실수와 정리 1. 컴포저블이란?컴포저블은 Composition API(ref, computed, watch, 생명주기 훅 등)를 사용해서 상태를 가진 로직을 담은 함수입니다. 보통 파일 이름과 함수 이름을 use로 시작합니다. (useCou..

[Vue.js] Vite로 Vue 3 프로젝트 만들기 (create-vue 사용법과 폴더 구조)

Vue 3 공부를 시작하려면 가장 먼저 프로젝트를 만드는 방법부터 알아야 합니다. 요즘은 빌드 도구 Vite를 기반으로 한 공식 도구 create-vue로 몇 분 안에 프로젝트를 만들 수 있습니다. 이 글에서 다루는 내용1. 준비물: Node.js 설치 확인2. create-vue로 프로젝트 만들기3. 프로젝트 폴더 구조 살펴보기4. 자주 쓰는 npm 스크립트5. 자주 하는 실수와 정리 1. 준비물: Node.js 설치 확인Vue 프로젝트는 Node.js 위에서 개발 서버와 빌드 도구를 실행합니다. 터미널에서 아래 명령어로 설치 여부를 확인하세요.node -vnpm -v 버전 번호가 출력되면 설치되어 있는 것입니다."command not found"가 나오면 Node.js 공식 사이트에서 LTS 버전을 ..

[삽질기] npm install 에러 모음 (ERESOLVE, EACCES 등) 해결 방법

프로젝트를 새로 받아서 npm install을 쳤는데 빨간 에러가 줄줄이 나오면, 어디서부터 봐야 할지 막막합니다. 하지만 npm 에러는 종류가 정해져 있고, 에러 코드(ERESOLVE, EACCES 등)만 보면 원인을 거의 짐작할 수 있습니다.이번 글에서는 자주 만나는 npm install 에러를 코드별로 원인과 해결 방법을 정리합니다. 이 글에서 다루는 내용1. 에러 로그 읽는 법2. ERESOLVE: 의존성 버전 충돌3. EACCES: 권한 오류4. ENOENT, 찾을 수 없음 계열5. 그래도 안 될 때: 초기화 체크리스트 1. 에러 로그 읽는 법npm 에러 메시지는 길지만 봐야 할 곳은 정해져 있습니다.npm ERR! code ERESOLVE ← ① 에러 코드 (가장 중..

[삽질기] CORS 에러 원인과 해결 방법 총정리

프론트엔드 개발을 하다 보면 API를 호출하자마자 콘솔에 빨간 에러가 뜨는 순간이 있습니다.Access to XMLHttpRequest at 'http://localhost:8080/api/users' from origin 'http://localhost:5173'has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 분명 주소도 맞고 서버도 켜져 있는데 왜 막히는 걸까요? 이번 글에서는 CORS가 무엇인지, 왜 생기는지, 어떻게 해결하는지를 증상 → 원인 → 해결 순서로 정리합니다. 이 글에서 다루는 내용1. 증상: 어떤 상황에서 발생할까?2. 원인: 출처(Or..

[기본개념] Git 입문: add, commit, push 흐름 한눈에 보기

"어제까지 잘 되던 코드가 갑자기 안 돼요", "최종_진짜최종_수정.zip" 같은 파일을 만들어 본 적이 있다면 Git이 필요한 때입니다. Git은 코드의 변경 이력을 기록하고, 원하는 시점으로 되돌리고, 여러 사람이 함께 작업할 수 있게 해 주는 도구입니다. 이 글에서 다루는 내용1. Git과 GitHub의 차이2. Git의 3가지 영역 (작업 폴더 · 스테이징 · 저장소)3. 기본 흐름: add → commit → push4. 자주 쓰는 명령어 모음5. 자주 하는 실수와 정리 1. Git과 GitHub의 차이구분GitGitHub정체내 컴퓨터에 설치하는 버전 관리 도구Git 저장소를 인터넷에 올려 두는 호스팅 서비스하는 일변경 이력 기록, 되돌리기, 브랜치 관리원격 저장소, 협업, 코드 리뷰(Pull ..

[기본개념] JSON이란? 문법과 JavaScript에서 다루는 법

API 응답, 설정 파일, 로컬 저장소 데이터까지 개발하다 보면 JSON을 정말 자주 만나게 됩니다. 프론트엔드와 백엔드가 데이터를 주고받을 때 가장 널리 쓰는 형식이기도 합니다. 이 글에서 다루는 내용1. JSON이란?2. JSON 문법 규칙3. JSON vs JavaScript 객체4. JavaScript에서 JSON 다루기 (parse, stringify)5. 자주 하는 실수와 정리 1. JSON이란?JSON(JavaScript Object Notation)은 데이터를 문자열로 표현하는 가벼운 형식입니다. 이름은 JavaScript의 객체 표기법에서 왔지만, 특정 언어에 묶여 있지 않아서 Java, Python, Go 등 대부분의 언어가 지원합니다.▶ JSON 예시{ "id": 1, "name"..

[기본개념] HTTP 통신과 REST API란?

웹에서 화면을 보고, 로그인하고, 글을 올리는 모든 동작은 사실 브라우저와 서버가 주고받는 요청과 응답입니다. 이 약속된 대화 방식이 HTTP이고, 그 위에서 데이터를 주고받는 규칙을 깔끔하게 정리한 설계 방식이 REST API입니다. 이 글에서 다루는 내용1. HTTP란? (요청과 응답)2. HTTP 메서드와 상태 코드3. REST API란?4. REST API 설계 규칙과 예시5. 자주 하는 오해와 정리 1. HTTP란?HTTP(HyperText Transfer Protocol)는 웹에서 클라이언트(브라우저)와 서버가 데이터를 주고받는 규칙입니다. 항상 클라이언트가 요청(Request)을 보내면 서버가 응답(Response)을 돌려주는 구조입니다.식당에 비유하면· 클라이언트: 주문하는 손님· 요청(R..

[Vue.js] 슬롯(slot) 사용법: 기본·이름 있는·스코프 슬롯

버튼, 카드, 모달처럼 틀은 같은데 안쪽 내용만 다른 컴포넌트를 만들고 싶을 때가 많습니다. props로 문자열만 넘기면 한계가 있는데, 이때 슬롯(slot)을 쓰면 부모가 자식 컴포넌트 안쪽을 원하는 HTML로 채울 수 있습니다. 이 글에서 다루는 내용1. 기본 슬롯과 기본값(fallback)2. 이름 있는 슬롯 (named slot)3. 스코프 슬롯 (scoped slot)4. props vs slot 선택 기준5. 자주 하는 실수와 정리 1. 기본 슬롯자식 컴포넌트에 을 두면, 부모가 컴포넌트 태그 사이에 넣은 내용이 그 자리에 표시됩니다.▶ 자식 컴포넌트 (BaseCard.vue) 내용이 없을 때 보여줄 기본값입니다. ▶ 부모 컴포넌트 안녕하세요 카드 안쪽을 부모가 자유..