Javascript Tips (33) 썸네일형 리스트형 react) spa reload시 img 깨지는 현상 1. 이미지를 src 하위 디렉토리로 이동2. 이미지 사용시 require를 이용해 변수 선언한 뒤 사용하기const ComponentExample = () => { let logo = require("../imgs/logo.png"); return ( ) } react) vite + react 프로젝트 생성 1) vite 프로젝트 생성 후 옵션 설정 하기 npm create vite@latest 2) vite 옵션을 미리 명령어에 넣어 프로젝트 생성하기 npm create vite@latest my-react-app -- --template vue vue3) router에서 데이터 넘기기 ($route.params 사용) import { createWebHistory, createRouter } from 'vue-router'; import LoginForm from "@/components/Login/LoginForm"; import LoginKeypad from "@/components/Login/LoginKeypad"; import Schedule from "@/components/Schedule/Schedule"; import Anothers from "@/components/Schedule/Anothers"; // const routes = [ { path: "/", component: LoginForm }, { path: "/password/:a/:b", // vue) 로컬에서 빌드한 index.html 라우팅 안되는 현상 로컬에서 빌드해서 index.html이 안열리는 이유는 여러가지가 있는데 내가 겪은 상황은 다음과 같다. 1.빌드한 파일인 index.html을 더블클릭해서 여는 경우는 파일탐색기로 여는 경우이기 때문에 상대경로가 파일탐색기가 있는 위치가 기준으로 잡힌다. 2. 요걸 해결하려면 vue router 설정을 해줘야한다. 라우팅 할 때 크게 두가지 방법이 있다. -> hash (url 이동방법이 아님) -> history (url 이동 방법임) hash모드로 바꿔줘야지 라우팅에 따라 화면 전환을 할 수 있다. 3. router를 hash모드로 import VueRouter from "vue-router"; import pageRouter from "./modules/pageRouter" const router.. webpack) process.env 환경변수 설정 1. package.json에서 local, dev환경 분리하여 켤 수 있게 셋팅하기 ... "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "local": "vue-cli-service serve --mode local", "dev": "vue-cli-service serve --mode dev" }, ... 2. .env.local 과 .env.development 파일 생성하여 셋팅하기 루트 디렉토리에 만들어야됨 process.env.NODE_ENV 는 기본적으로 제공되는 NODE 환경변수이다. 나머지 변수들은 꼭 앞에 VUE_APP을 붙여줘야 인.. 크롬 콘솔 찍히는 텍스트 색상 변경하는 법 일반 텍스트 출력 console.log('%c 안녕하세요', 'color:red;'); 자바스크립트 변수와 함께 출력 console.log('%c' + 변수명, 'color:red;'); 응용으로 background도 함께 설정 가능 console.log('%c' + 변수명, 'color:white;, background-color:black'); Vue3 tip) this.$el.querySelector mounted된 html요소를 선택해서 작업하기 this.$el.querySelector(id); 선택한 dom의 부모 offset을 찾기위 브라우저 api 중 offsetParent이라고 있다. 이것을 활용해 높이 처리함. https://vuejs.org/api/component-instance.html#el Component Instance | Vue.js vuejs.org 공식문서를 보면 좋은 내용들이 많은 듯 하다. 여기서 $el에 대해서 설명해주는데 spa라서 index.html에 맞는 dom이 mounted 되기 전에는 undefined라고 한다. js tip) 0 혹은 ""(빈칸) 체크 하기 js에서 0 혹은 빈칸을 체크하려면 다음과 같다. let a = 0; let b = ""; console.log(a == 0); //true console.log(b == 0); //true if (b) { console.log('b는 들어있다 !'); } else if (!b) { // 여기가 출력! console.log('b는 들어있지 않다. !'); } 동등연산자로 0으로 비교하면 빈칸과 0을 한번에 체크가 가능하다 이전 1 2 3 4 5 다음
