Lololol Lololol

vue를 공부하면서 index.js에나온 주석에서 생긴 궁금증 // which is lazy-loaded when the route is visited. lazy-loaded란 무엇인가? 무엇? 페이지를 읽어들이는 시점에 중요하지 않은 리소스들의 로딩을 나중에 하는 기술 왜? 사용자가 웹페이지를 열면 전체 페이지의 내용이 다운로드 되어 렌더링된다. 사용자가 다운로드 한 모든 콘텐츠를 본다는 보장은 없다. 전체 사진 갤러리를 다운로드 했지만 사용자가 첫 페이지만 본 후 떠나면 메모리, 대역폭 낭비가 발생한다. 페이지에 엑세스할 대 모든 콘텐츠를 전부 로드하는 대신 필요한 페이지의 일부에 접근할 때 콘텐츠를 로드할 수 있는 기능이 있는데 Lazy Loading을 사용하면 사용자가 필요할 때만 실제 콘텐츠로 ..

index.js 사용자가 메뉴를 클릭할 때 마다 해당하는 path가 있고 App.vue 에서 경로가 path 정보에 해당하는 값이다. . . . const routes = [ //오브젝트로 들어가 있다. { path: '/', // App.vue에서 연결되는 path key name: 'home', // 동일한 이름이 있으면 안된다. component: HomeView // path키를 사용해 불러왔을 때 실제로 가져올 컴포넌트 }, . . . Router에 컴포넌트를 import 하는 방법1 상단에 임포트해서 불러오기 import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue'..

설치 폴더 생성, 폴더에서 터미널 열기 설치가 됐는지 확인 vue --version //@vue/cli 5.0.8 //설치되어있네?? 설치 명령 npm install -g vue //-g 는 글로벌로 설치한다는 것을 의미 vue cli 설치 npm install -g @vue/cli //cli? //vue 프로젝트를 빠르게 생성할 수 있게 도와준다. //다양한 설정파일, 폴더 구성을 위해 만들어야하는데 일일히 만들지 않게 도와줌 //누가 만들더라도 기본적으로 같은 form을 사용할 수 있음 //create react app?????? 뭐만 설치할라하면 Cannot read properties of null (reading 'pickAlgorithm') 이녀석은 계속 뜬다 npm cache clear --..

Vue프로젝트를 실행하고 App.vue에 있는 template 왼쪽에서 이런 오류가 발생했다 Parsing error: No Babel config file detected for C:\vue2023\Vue\project01\src\App.vue. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.eslint 실행에는 문제가 없는데 여간 신경쓰여서 해결해 보려 한다. 정말로 딱 한번 실행하고 나온거 아주 흔한 경우인지 우리형님들 사이트에서 해결방법을 바로 찾을 수 있었다. 좌상단 File을 눌러 Preferences를 찾고 Setting..

사망연산자... 처음 들었을때 진짜로 사망연산자라고 하는 줄만 알았다. js에서 세개의 피연산자를 받은 연산자다 condition ? exprIfTrue : exprIfFalse 조건문 ? (참일때표현) : (거짓일때 표현) if else의 대체재로 사용된다고 한다. null 값을 처리해 주어야 한다. else if 도배해 사용하는 것 처럼 연결해서 사용할 수 있다. function example(…) { return condition1 ? value1 : condition2 ? value2 : condition3 ? value3 : value4; } 위와 아래는 같다. function example(…) { if (condition1) { return value1; } else if (condition..

console.log()로 찍으면 두번씩 찍힌다 렌더링이 두번 일어나는 듯? React.StrictMode 때문에 두번 찍히는 거라고 한다. 개발모드에서만 적용되고 프로덕션 모드에서는 이중으로 호출되지 않으니 걱정안해도 된다

리액트와 타입스크립트를 사용하면서 궁금한 점이 생겼다. typescript는 .ts파일을 .js파일로 컴파일해서 실행시키는 걸로 알고 있는데 리액트프로젝트 폴더에는 .js파일이 없다!!! .tsx파일이 있긴 하긴 한데 .js파일이 없는데도 타입스크립트가 실행될 수 있는 이유는 타입스크립트가 웹페이지의 html소스코드에 직접 작성되어 있기 때문입니다. html소스코드에서 script 태그를 사용하여 작성된 자바스크립트 코드는 브라우져가 이를 읽어들여 실행합니다 라는 답변을 받기는 했는데 더 자세히 알고 싶다. 우리형의 답변(chatGPT) React is a JavaScript library for building user interfaces, and TypeScript is a programming la..

import React, {useState} from 'react'; import './App.css'; function App() { const [count, setCount] = useState(0); const increase=()=>{ setCount(count+1) }; const decrease=()=>{ setCount(count-1) } const multiply=()=>{ setCount(count*2) } const divide=()=>{ setCount(count/2) } const reset=()=>{ setCount(0) } return ( {count} ); } export default App;