Programming (316) 썸네일형 리스트형 Vue todolist 만들기 - 5. Post 수정기능 Post를 수정하는 기능을 구현하겠습니다. 1. components/EachofPost.vue 수정 v-if 기능을 이용하여 edit모드인지 아닌지에 따라 다른 화면을 보여주도록 구성합니다. v {{ id }} {{ titleOfPost }} v x {{ bodyOfPost }} by {{ creator }} 2. store/store.js import { createStore } from 'vuex'; import axios from 'axios'; axios.defaults.baseURL = 'http://localhost:3000'; axios.defaults.headers.post['Content-Type']='application/json;charset=utf-8'; axios.defaults... 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.. 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.. 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": { .. Vue todolist 만들기 - 1. 환경세팅 Vue.js를 이용해 백엔드/로그인 연동까지 가능한 Todolist를 만들도록 하겠습니다. 폴더구조는 아래와 같이 하나의 프로젝트 폴더에 backend와 frontend를 모아놓고 시작하겠습니다. TODO_APP - express_back - vue_front 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 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.. Flutter 시작하기 1 일차 : splash screen 코드팩토리의 플러터 프로그래밍 - Splash Screen 우여곡절 끝에 플러터 설치를 마치고, 혼자 공부하다 잘 안되어 책을 구매하게 되었습니다. 기본 문법은 대충 보고, 첫번째 예제부터 따라해보기로 했습니다. 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 Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body:.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 40 다음
