[Vue+TS] Vue 첫 만남, TypeScript로 만드는 랜덤 색상 생성기

본 포스팅은 프로젝트 회고를 목적으로 작성되었습니다.

 

 

프로젝트 결정 계기 

 해당 프로젝트는 <실전 TypeScript와 고급 웹 개발>을 주제로 한 개인 학습에 뼈대를 두고 있기 때문에 TypeScript로 제작하였습니다.

 

 본래 종강까지 블로그를 직접 개발할 계획이었지만, Gatsby 템플릿을 상세히 살펴본 결과 생각보다 제공되는 기능이 풍부하여 웹 개발 실력을 향상시킬 수 있는 다른 프로젝트를 먼저 진행하기로 했습니다.

 

Vue를 선택한 이유

 FE(Frontend) 분야에서는 React와 더불어 Vue가 많이 사용됩니다. Vue는 특히 개인 개발자들 사이에서 인기가 높아지고 있으며, 최근 사용자 수가 꾸준히 증가하고 있습니다.

 

 이에 Vue와 React의 차이와 적합한 사용 사례를 간단하게 정리해보았습니다.

React
  - 특징: UI를 구성하는 JavaScript 라이브러리로, 컴포넌트와 상태 관리를 중심으로 설계한다.
  - 사용: 대규모 프로젝트, 커스텀화가 필요하거나 다양한 라이브러리를 조합하는 경우
  - 장점: 자유도가 높음
  - 단점: 초보자에게 보다 더 진입 장벽이 존재함

Vue
  - 특징: 템플릿 기반 HTML 중심 프레임워크. 간단하게 UI를 빠르게 구성 가능함
  - 사용: 소규모 프로젝트, HTML/CSS 친화적인 환경
  - 장점: Vue 자체에서 제공하는 도구가 풍부함
  - 단점: 커스터마이징이 필요하면 선택지가 React에 비해 제한적

 

 기존 작업에서 단체 실무를 준비하며 React를 사용했지만, Vue는 사용해본 적이 없었습니다. 따라서, 이 프로젝트는 TypeScript를 활용한 Vue 프로젝트를 경험하는 데 목적을 두고 있습니다.

---

프로젝트 주제 선택

 

 Vue는 React와 달리 HTML 중심의 프로그래밍을 지향하며, 이러한 구조에 적응하는 데 시간이 걸릴 수 있습니다. 그렇기에 투두리스트와 같은 복잡한 로직보다는, 더 단순하면서도 Vue의 기초적인 구조를 학습할 수 있는 랜덤 색상 생성기를 선택하게 되었습니다.

 

랜덤 색상 생성기란?

 랜덤 색상 생성기는 초심자가 많이 연습하는 프로젝트 중 하나입니다.

핵심 기능
  1. 버튼을 클릭하면 랜덤 색상이 생성된다.
  2. 생성된 색상이 화면 배경에 적용된다.

구현 원리
  - JavaScript의 Math.random()과 16진수 변환(toString(16))을 사용해 #RRGGBB 형태의 랜덤 색상을 생성합니다.
  - Vue의 ref를 활용하여 반응형 데이터로 색상 값을 관리하고 화면에 반영합니다.

 

 이를 통해, Vue의 기본 문법과 Composition API를 익힐 수 있습니다. 또한 간단한 상태 관리와 DOM 조작을 통해 Vue의 핵심 동작 방식도 함께 이해할 수 있기 때문에 Vue와 TypeScript에 처음 입문하기 무척 적합한 프로젝트라고 판단했습니다🔥🔥

 

프로젝트 진행

 Vue와 TypeScript를 사용한 간단한 프로젝트로, 다음과 같은 주요 로직을 중심으로 작성합니다.

- 랜덤 색상 생성
- 반응형 상태 관리
- 화면 배경색 변경 및 UI 업데이트

 

랜덤 색상 생성 

const generateColor = () => {
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`; // 16진수 색상 코드 생성
  currentColor.value = randomColor;
  document.body.style.backgroundColor = randomColor;
};

 

 16진수 색상 코드를 생성한 후, currentColor(ref)를 통해 상태를 업데이트합니다. randomColor는 string으로 자동 추론되어 명시적 타입 시정을 생략하였습니다.

 ref<string>을 사용하였기 때문에 currentColor가 항상 문자열이기 때문입니다.

반응형 데이터 관리

import { ref } from 'vue';

const currentColor = ref<string>('#ffffff');

 

 ref는 Vue에서 반응형 데이터를 생성합니다. currentColor는 초기 값으로 흰색(#ffffff)을 갖도록 설정하였으며 상태가 변경되면 바로 UI에 반영됩니다.

 

 ref<string> 타입으로 지정하여 초기 값이 없을 경우 문자열만 허용합니다. 타입을 명확히 지정하기 때문에 currentColor.value를 사용하는 코드에서 타입 오류가 일어날 가능성을 배제할 수 있습니다.

배경색 설정

onMounted(() => {
  document.body.style.backgroundColor = currentColor.value;
});

 

 Vue의 onMounted 라이프사이클 훅을 사용하기 때문에 마운트될 때 초기 배경색(#ffffff)을 설정할 수 있습니다. currentColor.value를 활용해 초기 상태의 색상을 적용할 수 있습니다.

 

 앞서 언급한 것처럼, currentColor.value가 항상 문자열이기 때문에 document.body.style.backgroundColor와 같은 DOM API와 호환성을 유지합니다.

 

ref란?

  ref는 Vue3의 Composition API에서 반응형 데이터를 생성하기 위한 핵심 도구입니다. ref를 통해 변수를 반응형으로 만들어 이를 사용하는 템플릿이나 메서드가 자동으로 업데이트됩니다.

import { ref } from 'vue';

const count = ref(0); // 반응형 데이터 생성
// ref가 변경되면 Vue가 감지하고 화면을 업데이트한다.

import { ref } from 'vue';

const count = ref(0); // 초기값 설정

const increment = () => {
  count.value++; // ref는 .value를 통해 접근하고 수정
};

 

 참고로 React에는 useRef라는 개념이 있습니다. useRef는 주로 DOM 요소나 상태를 직접 참조할 때 사용합니다. 다만 용도와 동작 방식 사이에서 차이점이 있습니다.

ref
  - 상태 관리와 DOM 접근 모두에서 사용
  - 템플릿과 데이터가 밀접하게 연결되어 동작

useRef
  - DOM 접근 및 참조에 사용
  - 상태 관리는 useState로 처리

TypeScript 적용의 장점

타입 정의가 명확하기 때문에 프로젝트 확장 시 코드의 가독성과 안정성을 높일 수 있습니다. currenColor.value 타입을 추론하기 때문에 코드 작성 시 IDE에서 자동 완성과 오류 감지를 제공합니다.

<template>
  <div class="app-container">
    <div class="color-box">
      <p class="color-text">
        현재 색상: <strong>{{ currentColor }}</strong>
      </p>
      <button class="color-button" @click="generateColor">색상 변경</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const currentColor = ref('#ffffff');

const generateColor = () => {
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  currentColor.value = randomColor;

  document.body.style.backgroundColor = randomColor;
};

onMounted(() => {
  document.body.style.backgroundColor = currentColor.value;
});
</script>

<style scoped>
/* 중앙 정렬 */
.app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: 'Arial', sans-serif;
}

.color-text {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #333;
}

/* 버튼 */
.color-button {
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.color-button:hover {
  background-color: #0056b3;
  transform: translateY(-2px); /* 커서를 올리면 살짝 떠오름 */
}

.color-button:active {
  transform: translateY(0); /* 클릭 시 눌림 */
}
</style>

마치며

 Vue는 React와는 아주 다른 방식으로 UI 설계를 경험할 수 있는 프레임워크였습니다. 랜덤 색상 생성기는 이러한 학습 경험을 효율적으로 쌓을 수 있는 간단한 구조와 로직을 갖고 있는 프로젝트로, Vue와 TypeScript의 조화로운 사용법을 익히기 아주 적합했습니다.

 

 이번 프로젝트를 통해 Vue의 기본 동작 원리를 익히고, 타입 시스템을 함께 적용할 수 있었습니다. 앞으로 더 복잡한 Vue 프로젝트를 위한 발걸음이 되었다고 생각합니다🧐