삽질개발코딩

[Vue.js] TypeScript로 Vue 컴포넌트 작성하기 (defineProps, defineEmits, ref 타입)

JavaScript로 Vue를 쓰다 보면 props 이름을 잘못 쓰거나, API 응답 속성 이름을 착각해서 undefined가 나오는 실수를 자주 합니다. 이런 실수는 실행해 봐야 알 수 있어서 찾는 데 시간이 걸립니다.TypeScript를 쓰면 이런 실수를 코드를 작성하는 순간 에디터가 빨간 줄로 알려 줍니다. Vue 3는 TypeScript 지원이 아주 좋아서 2. defineProps와 defineEmits 타입 {{ post.title }} {{ post.tags.join(', ') }} 이제 부모에서 post를 빼먹거나 emit('select', '1')처럼 문자열을 넘기면 에디터가 바로 에러를 표시합니다. Vue 3.5 미만이라면 기본값은 withDefaults(define..

[기본개념] 콜백 함수와 고차 함수란? (함수를 값처럼 넘기기)

setTimeout(() => {...}, 1000), arr.map((x) => x * 2), button.addEventListener('click', handler)처럼 함수 안에 또 함수를 넘기는 코드는 자바스크립트에서 매일 보게 됩니다. 이렇게 넘겨지는 함수를 콜백 함수라고 합니다.콜백을 이해하면 배열 메서드, 이벤트 처리, 비동기 코드가 한 번에 정리됩니다. 이 글에서는 콜백 함수와 고차 함수의 개념, 콜백 지옥과 그 해결 방법까지 정리합니다. 이 글에서 다루는 내용1. 함수는 값이다 (일급 함수)2. 콜백 함수란?3. 고차 함수란?4. 콜백 지옥과 해결5. 자주 하는 실수와 정리 1. 함수는 값이다 (일급 함수)자바스크립트에서 함수는 숫자나 문자열처럼 값으로 다룰 수 있습니다. 이것을 일급 ..

[Vue.js] Vue Devtools 사용법: 컴포넌트, Pinia, 라우터 상태를 한눈에 디버깅하기

값이 왜 안 바뀌는지 확인하려고 console.log를 여기저기 찍다 보면 코드가 지저분해지고, 지우는 것도 잊어버리기 쉽습니다. 특히 부모-자식 컴포넌트 사이 props, Pinia 스토어 값은 로그만으로 추적하기 어렵습니다.Vue Devtools를 쓰면 컴포넌트 구조, props와 상태, Pinia 스토어, 라우터 정보, 이벤트 기록을 화면으로 바로 확인하고 값을 수정해 볼 수도 있습니다. 이 글에서는 설치 방법과 실무에서 자주 쓰는 기능을 정리합니다. 이 글에서 다루는 내용1. 설치 방법2. Components: 컴포넌트 트리와 상태 확인3. Pinia와 Router 탭4. Timeline: 이벤트와 성능 추적5. 자주 하는 실수와 정리 1. 설치 방법방법설명브라우저 확장 프로그램크롬 웹 스토어에서..

[기본개념] import/export 모듈 문법 정리 (default export vs named export)

Vue 파일을 열면 맨 위에 import { ref } from 'vue', import axios from 'axios'처럼 import 문이 줄지어 있습니다. 어떤 것은 중괄호가 있고 어떤 것은 없어서, 처음에는 언제 중괄호를 써야 하는지 헷갈리기 쉽습니다.이 차이는 상대 파일이 default export로 내보냈는지, named export로 내보냈는지에 따라 정해집니다. 이 글에서는 ES Modules의 import/export 문법을 예제와 함께 정리합니다. 이 글에서 다루는 내용1. 모듈이란?2. named export (이름 붙여 내보내기)3. default export (기본 내보내기)4. 한눈에 비교와 기타 문법5. 자주 하는 실수와 정리 1. 모듈이란?모듈은 하나의 파일 단위로 나눈 코..

[Vue.js] 페이지네이션 컴포넌트 만들기 (이전/다음, 페이지 번호 그룹)

게시판 목록 하단의 같은 페이지 번호는 거의 모든 서비스에 들어가는 UI입니다. 무한 스크롤과 달리 원하는 페이지로 바로 이동할 수 있고, 몇 번째 글인지 기억하기도 쉽습니다.이 글에서는 전체 글 수와 한 페이지당 개수만 넘기면 동작하는 재사용 가능한 페이지네이션 컴포넌트를 만들고, Vue Router의 query와 연결해서 새로고침해도 페이지가 유지되게 하는 방법까지 정리합니다. 이 글에서 다루는 내용1. 필요한 값 계산하기2. Pagination 컴포넌트3. 목록 페이지에서 사용하기4. URL query와 연결하기5. 자주 하는 실수와 정리 1. 필요한 값 계산하기값계산 방법예시 (총 128개, 10개씩, 현재 13페이지)전체 페이지 수Math.ceil(total / pageSize)13그룹 크기화..

[삽질기] ESLint와 Prettier 충돌 해결 (VS Code 저장할 때마다 코드가 바뀔 때)

VS Code에서 저장할 때마다 따옴표가 작은따옴표에서 큰따옴표로 바뀌었다가, 다시 저장하면 원래대로 돌아오고, 빨간 밑줄은 사라지지 않는 상황을 겪은 적이 있습니다. 세미콜론도 붙었다 사라졌다를 반복했습니다.원인은 ESLint와 Prettier가 서로 다른 규칙으로 코드를 고치고 있었기 때문이었습니다. 이 글에서는 두 도구의 역할 차이와 충돌을 없애는 설정 방법을 정리합니다. 이 글에서 다루는 내용1. ESLint와 Prettier의 역할2. 해결 원칙: 모양은 Prettier에게만3. Prettier 규칙 정하기4. VS Code 설정 맞추기5. 자주 하는 실수와 정리 1. ESLint와 Prettier의 역할구분ESLintPrettier역할코드 품질 검사 (버그 가능성, 나쁜 패턴)코드 모양 정리 ..

[Vue.js] 라우트 lazy loading과 defineAsyncComponent로 첫 로딩 속도 줄이기

프로젝트가 커지면서 페이지와 컴포넌트가 늘어나면, 빌드된 JS 파일 하나가 수 MB까지 커지기도 합니다. 사용자는 메인 화면만 보려고 해도 관리자 페이지, 차트 라이브러리까지 전부 내려받아야 해서 첫 화면이 느려집니다.lazy loading(지연 로딩)을 적용하면 필요한 시점에 필요한 코드만 불러올 수 있습니다. 이 글에서는 Vue Router 라우트 단위 lazy loading과 defineAsyncComponent를 이용한 컴포넌트 단위 지연 로딩을 정리합니다. 이 글에서 다루는 내용1. 코드 분할(Code Splitting)이란?2. 라우트 lazy loading3. defineAsyncComponent로 컴포넌트 지연 로딩4. 배포 후 청크 로딩 실패 대비5. 자주 하는 실수와 정리 1. 코드 분..

[기본개념] 자바스크립트 이벤트 루프 (콜 스택, 태스크 큐, 마이크로태스크)

자바스크립트는 한 번에 한 가지 일만 하는 싱글 스레드 언어라고 배웠습니다. 그런데 API 응답을 기다리는 동안에도 버튼 클릭이 되고, 타이머도 동작합니다. 한 번에 하나만 한다면서 어떻게 이게 가능할까요?그 비밀이 이벤트 루프(Event Loop)입니다. 이 글에서는 콜 스택, 태스크 큐, 마이크로태스크 큐가 어떻게 협력하는지와 자주 나오는 실행 순서 문제를 정리합니다. 비동기 기본 개념은 [기본개념] 동기 vs 비동기, Promise와 async/await 글을 먼저 참고해 주세요. 이 글에서 다루는 내용1. 구성 요소 한눈에 보기2. 동작 순서 따라가기3. 마이크로태스크가 먼저 실행된다4. 실무에서 알아 둘 점5. 자주 하는 실수와 정리 1. 구성 요소 한눈에 보기구성 요소역할콜 스택 (Call S..

[삽질기] Maximum recursive updates exceeded 무한 루프 경고 해결

페이지를 열자마자 브라우저가 버벅이고, 콘솔에 [Vue warn]: Maximum recursive updates exceeded라는 경고가 뜨는 경우가 있습니다. 심하면 탭이 멈추기도 합니다.이 경고는 데이터 변경 → 다시 렌더링 → 또 데이터 변경이 끝없이 반복될 때 Vue가 강제로 멈추면서 알려 주는 것입니다. 이 글에서는 제가 실제로 만들었던 무한 루프 패턴 네 가지와 해결 방법을 정리합니다. 이 글에서 다루는 내용1. 경고가 뜨는 원리2. 원인 1: 템플릿에서 데이터를 바꾸는 함수 호출3. 원인 2: computed 안에서 원본 배열 변경4. 원인 3, 4: watch와 부모-자식 순환5. 자주 하는 실수와 정리 1. 경고가 뜨는 원리[Vue warn]: Maximum recursive upda..

[Vue.js] 파일 업로드 구현하기 (이미지 미리보기 + FormData + axios)

프로필 사진 변경, 게시글 첨부파일처럼 파일 업로드는 거의 모든 서비스에 들어가는 기능입니다. 그런데 은 v-model이 동작하지 않고, axios로 보낼 때도 일반 JSON과 방식이 달라서 처음에는 막히기 쉽습니다.이 글에서는 파일 선택, 이미지 미리보기, 용량과 형식 검사, FormData로 서버에 전송하고 진행률을 표시하는 방법까지 순서대로 정리합니다. 이 글에서 다루는 내용1. 파일 선택하기2. 이미지 미리보기와 검사3. FormData로 서버에 전송하기4. 여러 파일 업로드5. 자주 하는 실수와 정리 1. 파일 선택하기은 v-model을 쓸 수 없고, change 이벤트에서 event.target.files로 선택한 파일을 꺼냅니다. File 속성예시nameprofile.pngsize2048..