본문 바로가기

Programming321

Vue todolist 만들기 - 4. Store 적용하기...Post추가/삭제 Store를 적용해보겠습니다. npm i vuex axios // axios는 나중에 backend 통신을 위해 미리 설치 1. store/store.js 기본 post 리스트를 생성하고, 포스트 추가/삭제기능을 구현해놓는다. 기능은 추후 Backend와의 연동을 위해 actions에 구현해놓습니다.import { createStore } from 'vuex'; // import axios from 'axios'; export const store = createStore({ // export default createStore({ state:{ posts: [ {_id: '1', title: 'apple', body: 'Im apple', creator: 'apple'}, {_id: '2', title.. 2023. 5. 4.
Vue todolist 만들기 - 3. Vue 프로젝트 상세구성 1. router/index.js 수정 불필요한 라우팅을 삭제합니다. import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/HomeView.vue'; const routes = [ { path:'/', name: 'Home', component: Home } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router; 2. 불필요한 view도 삭제합니다. views/AboutView.vue --삭제 3. App.vue 수정 4. views/HomeView.vue.. 2023. 5. 4.
Vue todolist 만들기 - 2. Vue 프로젝트 만들기 1. Vue 프로젝트 생성vue_front 폴더로 이동하여 vue_프로젝트를 생성합니다.cd vue_frontnpm i -g @vue/cli // vuejs 프로젝트가 처음일 경우 글로벌로 vue cli를 설치해줍니다.vue create . // 현재의 폴더에 vue 프로젝트를 생성합니다. 2. Vue-router 설치vue-router를 설치하면 프로젝트 구조가 조금 달라집니다. 따라서 vue-router를 먼저 설치하고 진행합니다.vue add router 3. vuex / axios 설치 및 port 설정npm i vuex axiosnpm i nodemon --save-dev package.json의 scripts 부분을 수정하여 4000번 포트에서 서비스하도록 수정합니다. "scripts": { .. 2023. 5. 4.
Vue todolist 만들기 - 1. 환경세팅 Vue.js를 이용해 백엔드/로그인 연동까지 가능한 Todolist를 만들도록 하겠습니다. 폴더구조는 아래와 같이 하나의 프로젝트 폴더에 backend와 frontend를 모아놓고 시작하겠습니다. TODO_APP - express_back - vue_front 2023. 5. 4.
Flutter 단순 apk파일 만들기 1. 생성방법 flutter build apk --release --target-platform=android-arm64 2. no sound null safety 추가하기 flutter build apk --release --no-sound-null-safety --target-platform=android-arm64 3. 위치 project folder > build > app > outputs > flutter-apk 2023. 3. 30.
Flutter 시작하기 2 일차 : splash screen 정렬하기 우선 색상코드를 바꿔줍니다. color: Colors.orange, --> color: Color(0xFFF99231), Center위젯을 Colum위젯으로 바꾸고, CircularProgressIndicator 반영하기 이미지를 높이방향으로 가운데 정렬하기 이미지의 사이즈를 200px로 줄이고 가운데 정렬하기 프로그레스 이미지를 흰색으로 변경하기 import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override W.. 2023. 3. 3.

티스토리툴바