일단 Doit

Vue.js 개발을 위해서는 아래와 같은 준비단계를 거칩니다. 1. Node 설치 2. Vue Cli 설치 3. 개발 Tool 설치 : Visual Studio Code 3. 개발 Tool 설치 : Visual Studio Code 이제 실제 개발하기 위해서는 개발을 할수있는 환경 즉, 개발 Tool이 필요합니다. 여기서는 Visual Studio Code를 사용합니다. 이유는, 1. Microsoft(미국 IT 대기업)에서 만들었음 2. 여러 플로그인들이 많음 3. 속도 빠름 4. 무료!! https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and ..

Vue 2023. 1. 21. 20:45

Vue.js 개발을 위해서는 아래와 같은 준비단계가 필요합니다. 1. Node 설치 2. Vue Cli 설치 3. 개발 Tool 설치 : Visual Studio Code 2. Vue Cli 설치 Vue Cli : Vue를 개발하기 위해 기본 세팅을 친철하게 해주는 환경 구성이라고 보면 됩니다. 절차는 아래와 같습니다. 1. npm으로 vue cli 설치. 2. 만들고싶은 project명으로 vue project 생성. 3. vue project 실행 1. npm으로 vue cli 설치 먼저 이전의 설치한 npm을 이용하여 vue cli 설치 커맨드 실행후 아래와 같이 입력 * -g는 전역으로 여기저기서 사용할 수 있게 해주는 옵션입니다. npm install -g @vue/cli 실행하면 아래와 같은 ..

Vue 2023. 1. 21. 20:42

Vue.js 개발을 위해서는 아래와 같은 준비단계가 필요합니다. 1. Node 설치 2. Vue Cli 설치 3. 개발 Tool 설치 : Visual Studio Code 1. Node.js 설치 - npm을 사용하기 위해 설치 - npm : node.js package manager로서 간단하게 말하면, Javascript 개발 플랫폼이라고 대략적으로 이해하면 됩니다.(그냥, 수많은 오픈라이브러리를 쉽게 설치하고 사용할 수 있게 해줍니다. 심지어, javscript로 구현 가능한 서버까지...) https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 접속..

Vue 2023. 1. 21. 20:35

적용 단계는 다음과 같습니다. 1. tsconfig.json추가 하여 typescript 설정 2. 라이브러리 type 설치 3. eslint 설정 1. tsconfig.jon 추가 : 기존 jsconfig.jscon 파일이 있다면 삭제 { "compilerOptions": { "target": "es6", "lib": [ "dom", "dom.iterable", "esnext" ], "incremental": true, "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, ..

React/typescript 2023. 1. 21. 18:24

Router 이동시 마다 모바일과 같이 Transition 효과를 적용할수 있습니다. TransitionGroup, CSSTransition 활용하여 2개 Layout이 움직이는 것처럼 효과를 주는 것이 가능합니다. 적용 순서 TransitionGroup 정의 CSSTransition 정의 CSS 정의 : Route 및 Transition Class router back 감지 1. TransitionGroup className : TransitionGroup CSS class명을 지정 ... 2. CSSTransition key : 해당 Key로 해당 Route를 찾아서 Transition 효과를 적용함 useLocation을 이용하여 현재 path를 key 로 설정 className : 실제 Trans..

React/Router 2023. 1. 20. 17:08

재귀함수를 사용하여 배열로 부터 Route를 생성하자. 는 로 정의하며 부모와 자식간의 관계로 나타냅니다. 하지만, Array등으로 정의해서 관리하지않으면 복잡하고 보기 어려운 코드로 변질됩니다. 나쁜예) App.jsx {/*자식 Route 정의 */} ..... 그래서, Data API를 사용하는 Router는 Array로 Route 정의를 관리합니다. 좋은예) routes.js const routes = [ { path: '/', element: , }, { path: '/first', element: , }, { path: '/second', element: , }, { path: '/styled', element: , }, ]; 따라서 아래와 같은 방법으로 를 동적으로 생성하는 방법으로 위와 같이..

React/Router 2023. 1. 20. 17:05

사용방법은 단순합니다. 1. 정의 2. 정의 3. 정의 - Route 및의 자식 Route 정의 4. 지정 - 부모Route와 자식Route간의 연결 App.js import { Routes, Route, BrowserRouter } from 'react-router-dom'; import HomePage from '@/pages/HomePage'; import FirstPage from '@/pages/FirstPage'; import SecondPage from '@/pages/SecondPage'; import ChildPage from '@/pages/ChildPage'; function App() { return ( {/*자식 Route 정의 */} ); } export default App; ..

React/Router 2023. 1. 20. 17:00

Router 사용하는 순서는 아래와 같습니다. App.js - router 생성 및 RouterPrivder 정의 routes 배열 정의 - path 및 element 각 컴포넌트 정의 App.js - router 생성 - createBrowserRouter를 통한 Router 생성 - RouterPrivder 정의 import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import routes from '@/routes/routes'; const router = createBrowserRouter(routes); function App() { return ; } export default App; routes.js - path 및..

React/Router 2023. 1. 20. 16:59