728x90 IT개발/JS 관련14 [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.js 프로젝트 만들기 Node.js가 설치되어 있다는 가정 하에 간단히 정리하자면, 1. Vue.js 프로젝트 생성먼저, Vue.js 프로젝트를 생성합니다. Vue CLI를 사용하여 새로운 프로젝트를 만듭니다.npm install -g @vue/clivue create my-projectcd my-project 2. 필요한 패키지 설치Vue Router와 Vuex(상태 관리)를 사용할 경우 설치합니다.npm install vue-router vuex 2025. 2. 8. React + Typescript 설치 오류 해결 React + Typescript 프로젝트를 연습해보기 위해 아래 글을 참고하여 프로젝트를 만들어봤다.https://time-memorizer.tistory.com/203 React 설치 오류(react@19.0.0 관련)React JS를 공부해보려고 인터넷을 찾아 설치하려고 하는데 오류가 발생했다.npx create-react-app first-appCreating a new React app in /Users/hyosukjung/git/react-app/first-app.Installing packages. This might take a couple of minutestime-memorizer.tistory.com npx create-react-app [프로젝트 이름] --template types.. 2025. 1. 25. 자바스크립트(JavaScript) JSON.stringify & JSON.parse JSON.stringify & JSON.parseJSON.stringify와 JSON.parse는 **JavaScript 객체(Object)**와 JSON 문자열(JSON String) 간의 변환을 수행하는 메서드입니다. 이 두 메서드는 데이터를 저장하거나 전송할 때 자주 사용됩니다. JSON.stringify 역할: JavaScript 객체를 JSON 문자열로 변환합니다.주요 사용 시점:데이터를 서버에 전송할 때데이터를 로컬 저장소에 저장할 때문법:value: 변환할 JavaScript 값(객체, 배열, 등등)replacer (선택): 변환 시 특정 속성을 포함하거나 제외하기 위한 함수 또는 배열space (선택): JSON 문자열의 들여쓰기를 위한 공백이나 탭 수JSON.stringify(value[.. 2025. 1. 24. 자바스크립트(JavaScript) 필터(filter) (chatGPT를 통한 정리내용) filter filter는 자바스크립트 배열(Array)의 내장 메서드 중 하나로, 배열에서 특정 조건을 만족하는 요소들만 추출하여 새로운 배열을 반환합니다. 원본 배열은 변경되지 않고, 조건을 만족하지 않는 요소들은 제외됩니다. filter 메서드의 특징콜백 함수 사용: filter는 콜백 함수를 사용하여 각 배열 요소를 조건에 따라 평가합니다.새로운 배열 반환: 조건을 만족하는 요소들만 포함된 새로운 배열을 반환합니다.원본 배열 변경 없음: filter는 원본 배열을 수정하지 않습니다.조건이 true인 요소만 포함: 콜백 함수에서 true를 반환하는 요소들만 최종 배열에 포함됩니다. filter 문법 callback각 배열 요소에 대해 실행할 함수입니다.element.. 2025. 1. 24. 이전 1 2 3 다음 728x90
