HTML16 [React] React 프로젝트 생성 후 최초 렌더링 과정 이해하기(Vite 설치) Vite를 통해 React 프로젝트를 설치 후 실행을 시키면 아래와 같은 화면을 만날 수 있다. 그리고 실제 생성된 폴더구조를 보면 다음과 같다 위 폴더 구조 안에서 저 최초 화면이 어떻게 렌더링 되는건지 간단히 정리해보려 한다. 전체 구조project-folder/├── src/│ ├── App.tsx│ ├── main.tsx│ ├── index.css│ ├── assets/│ │ ├── react.svg│ │ └── vite.svg├── index.html 1. index.html역할 : 이 파일은 웹 페이지의 기본 구조를 정의합니다. 브라우저가 처음 로드할 HTML임주요 내용: : React 애플리케이션이 이곳에 렌더링됨 : main.tsx 파일을 로드하여 React.. 2025. 2. 18. [Figma] 피그마 AutoHTML 플러그인 과거 웹퍼블리셔로 실무경험을 했을때 디자이너와 협업 과정에서 Photoshop, Sketch, Zeplin 을 주로 사용했던것 같은데, 요즘에는 Figma가 대세인것 같다.IT 분야로 다시 도전하는 가운데 Figma도 좀 알고 있어야할 것 같아서 이런 저런 영상을 보며 알아보는데 Dev 모드라고 해서 디자인을 코드로 변환해주는 좋은 기능이 있는걸 발견했다.그런데 문제는 언제부터인가 그게 유료화가 된 것 같다. 이제 입문자로 테스트 삼아 공부하는 가운데 유료결제를 하고싶지 않아 그냥 있었는데, 좀 더 찾아보니 기능이 좀 더 단순하지만 무료로 활용할 수 있는 AutoHTML 플러그인이 있다는 것을 알게 되었다. https://autohtml.dev/ AutoHTML | Figma PluginWrite you.. 2025. 2. 18. [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 3 다음
