CSS12 [Figma] 피그마 AutoHTML 플러그인 과거 웹퍼블리셔로 실무경험을 했을때 디자이너와 협업 과정에서 Photoshop, Sketch, Zeplin 을 주로 사용했던것 같은데, 요즘에는 Figma가 대세인것 같다.IT 분야로 다시 도전하는 가운데 Figma도 좀 알고 있어야할 것 같아서 이런 저런 영상을 보며 알아보는데 Dev 모드라고 해서 디자인을 코드로 변환해주는 좋은 기능이 있는걸 발견했다.그런데 문제는 언제부터인가 그게 유료화가 된 것 같다. 이제 입문자로 테스트 삼아 공부하는 가운데 유료결제를 하고싶지 않아 그냥 있었는데, 좀 더 찾아보니 기능이 좀 더 단순하지만 무료로 활용할 수 있는 AutoHTML 플러그인이 있다는 것을 알게 되었다. https://autohtml.dev/ AutoHTML | Figma PluginWrite you.. 2025. 2. 18. (React + Typescript) + (Spring Boot + JPA + MySQL) 프로젝트 세팅 / tailwind css 설치 오류 포함 개인적으로 React + Typescript도 공부할겸, Spring Boot도 복습할 겸 맨땅에 헤딩을 하는 방법으로 무작정 프로젝트를 시작했다.그런데 역시나 초기 세팅부터 이래저래 우여곡절이 많았다. 기존에는 백엔드 프로젝트를 할때 spring boot 프로젝트 만들고 프론트엔드 부분은 Thymeleaf를 주로 활용해서 intelliJ나 STS로 진행을 했었는데, 이렇게 프론트엔드 작업과 백엔드 작업을 한번에 하는 경우 프로젝트를 어떻게 세팅해야 할지 막막했다. 특히 React + Typescript는 기본 지식이 있는게 아니라 이번에 맨땅에 헤딩 하면서 공부할 생각이었기에 전적으로 chatGPT와 구글링의 도움이 필요했다. 그래서 지금 정리하는 아래의 방법이 일반적인 방법인지 솔지히 모르겠지만, 나.. 2025. 2. 12. [vue] Vue에서 Slick 슬라이드가 새로고침 후만 적용되고, 페이지 이동 후에는 적용되지 않는 문제 해결하기 Vue에서 Slick 슬라이드가 새로고침 후만 적용되고, 페이지 이동 후에는 적용되지 않는 문제 해결하기 🔍 문제 상황Vue는 **SPA(Single Page Application, 단일 페이지 애플리케이션)**라서 페이지를 이동해도 전체 HTML이 새로고침되지 않고 필요한 부분만 변경됨.이 때문에 slick.js가 메인 페이지에서 최초 한 번만 실행되고, 다른 페이지로 이동 후 다시 돌아오면 슬라이드가 깨지는 문제가 발생했음. 💡 문제 원인slick.js는 페이지가 처음 로딩될 때 한 번만 실행되도록 되어 있음.Vue에서 다른 페이지로 이동 후 돌아오면 mounted()가 다시 실행되지 않음 → slick이 다시 초기화되지 않음.이로 인해 슬라이드가 풀려서 모든 배너가 펼쳐진 상태로 보이는 문제 발.. 2025. 2. 10. [vue] 특정 페이지에서만 특정 클래스 추가하기 vue 프로제트를 작업하다보니 content 영역에 대해서 메인 Home 페이지에서만 main 클래스를 추가해야 하는 상황이 발생했다. 방법) [ :class ] 속성을 활용하여 특정 페이지에서 특정 클래스 추가 .// src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router'; // Vue 3에 맞게 변경import Home from '../views/MainHome'; // 변경된 Home 컴포넌트import newlyProduct from '../views/newlyProduct';const routes = [ { path: '/', name: 'MainHome', compone.. 2025. 2. 10. [vue] Vue 3 프로젝트에서 public/assets와 src/assets 폴더의 차이점 (chatGPT를 통한 정리내용)Vue 3 프로젝트에서 public/assets와 src/assets 폴더의 차이점1. public/assets 폴더public 폴더는 Vue 프로젝트에서 빌드 시 변환되지 않고 그대로 배포되는 정적 파일을 보관하는 곳입니다. 이 폴더에 있는 파일들은 브라우저에서 직접 접근할 수 있는 경로로 제공되며, 빌드 후에도 그대로 복사됩니다.예시 1: public/assets 폴더 사용하기public/assets 폴더에 logo.png라는 이미지 파일이 있다고 가정해 봅시다. 이 이미지를 Vue 컴포넌트에서 사용하려면 절대 경로로 접근해야 합니다. 이때 src="/assets/logo.png"와 같이 절대 경로를 사용해야 합니다.public 폴더 내의 파일들은 빌드 후에도 경로.. 2025. 2. 10. [Vue] Vue 프로젝트에서 CSS, JS 파일 적용하기 - 오류(해결진행중) 현재 Vue 프로젝트를 공부하며 빠르게 프로젝트 완성을 해보려 맨땅에 해딩중이다.일단 유튜브 강의, ChatGPT 등의 도움을 받으며 프로젝트를 진행중이고 백엔드 교육과정중 세미 프로젝트로 진행했던 내용중 프론트엔드 부분만 가져와서 Vue 프로젝트로 변환하는중인데, CSS 와 JS 파일을 적용시키는 과정에서 문제가 발생했다. [index.html] [main.js]// import { createApp } from 'vue'// import App from './App.vue'// createApp(App).mount('#app')// src/main.js// src/main.jsimport { createApp } from 'vue'; // Vue 3에 맞게 import.. 2025. 2. 10. 이전 1 2 다음
