본문 바로가기
반응형

전체 글289

Vuex 사용 state : data getters : computed mutations : methods actions : methods(비동기) Vuex action에서의 활용 context.state context.getters context.commit (mutation의 함수 사용시) context.dispatch (action의 함수 사용시) Vue 컴포넌트에서 Vuex Helper 사용 ...mapState('모듈',[ '상태1','상태2' ]) ===> computed에서 사용 ...mapGetters('모듈',[ '상태1','상태2' ]) ===> computed에서 사용 ...mapMutations('모듈',[ '상태1','상태2' ]) ===> methods에서 사용 ...mapActions('모듈.. 2022. 5. 24.
Vue 프로젝트 - Movie페이지 단일영화 상세정보 및 skeleton UI작성 1. routes 수정 /movie/#123456과 같이 ID를 입력받을 수 있도록 수정 import { createRouter, createWebHashHistory} from 'vue-router' import Home from './MyHome.vue' import Movie from './MyMovie.vue' import About from './MyAbout.vue' export default createRouter({ // Hash, History --> Hash mode 사용 예정 history: createWebHashHistory(), // pages routes:[ { path:'/', component: Home }, { path:'/movie/:id', component: Movi.. 2022. 5. 22.
VSCode Vue snippets설정 아래와 같이 자동 완성되도록 스니펫 설정하기 vue.json { "Generate Basic Vue Code": { "prefix": "vue-start", "body": [ "\n\t\n\n\n\n" ], "description": "Generate Basic Vue Code" } } 2022. 5. 22.
Vue 영화검색사이트 기본 설치 파일 1.라이브러리 설치 npm i vue-router vuex bootstrap@5 npm i -D node-sass sass-loader 2. bootstrap 커스터마이징 - scss/main.scss 작성 - 오류 방지를 위해 maps는 주석 처리 // Required @import "../../node_modules/bootstrap/scss/functions"; // Default variable overrides $primary:#FDC000; //variables가 실행되기 전에 재정의되어야 함 // Required @import "../../node_modules/bootstrap/scss/variables"; @import "../../node_modules/bootstrap/scss/mix.. 2022. 5. 14.
Vue Tailwind CSS 적용하기 1. 설치 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 2. 활성화 npx tailwindcss init -p 3. ./tailwind.config.js환경설정 module.exports = { // content: [ // "./index.html", // "./src/**/*.{vue,js,ts,jsx,tsx}", // ], purge:[ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}" ], theme: { extend: {}, }, plugins: [], } 4. src/index.css 파일 생성 @import "tailwindcss/base"; @import "tailwindcs.. 2022. 5. 13.
Vue apache 배포 오류 Vue로 작성한 프로그램을 Build를 하고... npm run build /dist/ 폴더의 파일들을 아파치 폴더에 옮겼는데, 빈 화면이 나옵니다. index.html 파일은 보이는데 개발자 화면 확인해보니...js파일과 css파일의 경로를 인식을 못했습니다. "/js/chunk-vendors....."처럼 되어있는데, 혹시나 해서 "."을 붙여보니 작동이 됩니다. 동일한 오류 겪고계신 분께서는 한번 시도해보시길 바랍니다. 2022. 5. 12.
C#(WPF) - 실행 프로그램 아이콘 설정하기 Dotnet 프로그램의 Icon을 변경하는 것은 굉장히 쉽습니다. 원하는 아이콘(111.ico)이미지를 프로젝트 폴더에 넣어준 뒤, project.csproj파일에 등록시켜주면 끝납니다. WinExe netcoreapp3.1 111.ico true 2022. 4. 22.
Godot사용팁 - path2D Path2D노드 사용법에 대해 알아보겠습니다. Path2D노드를 사용하면 단순히 움직이는 캐릭터들(Enemy 나 NPC 등)의 단순 이동동작을 최소한의 코딩으로 구현할 수 있는 유용한 노드입니다. 1. 적당한 Enemy 노드가 있을 경우, 전체 동작하는 Scene에서 아래와 같이 구성을 하였습니다. Path2D노드는 하위에 항상 PathFollow2D를 자식으로 담고 있어야 합니다. Path2D노드가 포인트를 이용하여 라인을 생성하는 노드라면, PathFollow2D노드는 그 선을 어떤 방식으로 따라가는지를 설정하는 노드입니다. 2. Path2D노드를 다시 선택하면 아래 그림과 같이 에디터 상단에 포인터 추가/삭제/편집할 수 있는 버튼이 활성화됩니다. 적당히 이동 경로를 그려줍니다. 이 중 5번째 아이콘.. 2022. 3. 14.
무료 페인팅 프로그램 크리타(Krita) 소개 요즘 게임을 만들고 있다보니 이미지를 다룰 일이 많아졌습니다. 이미지 편집 하면 가장먼저 Adobe의 Photoshop을 떠올리실텐데요, 유료인 요금정책으로 인해 대부분은 사용을 못하던지, 아니면 암암리에...적당히 사용하고 있을텐데요. 그래서 오늘은 무료 페인팅 프로그램을 알아보려고 합니다. 바로 크리타(Krita)입니다. Krita는 오픈소스 프로그램으로 누구나 무료로 사용가능하며, 기업에서 사용하더라도 무료입니다. 또한 결과물에 대해 상업적으로 이용하더라도 아무런 제한이 없습니다. Krita는 리눅스 진영의 대표적인 양대 데스크탑환경인 GNOME과 KDE중 KDE환경의 표준 이미지 에디터입니다. 리눅스의 이미지 에디터 하면 GIMP를 떠올리실 분도 계실텐데요, GIMP가 포토샵에 대항마라고 하면, .. 2022. 3. 13.
Godot사용팁-AnimationTree노드의 Blendmode2D로 애니메이션 컨트롤 오늘은 AnimationTree노드에 대해 알아보겠습니다. 처음 캐릭터의 애니메이션을 만들면 AnimationPlayer노드를 많이 사용하는데요, 이 노드만 이용해서 각종 상태를 코드로 컨트롤하려면 좀 힘듭니다. 많이 힘듭니다. 머리는 쥐가나고, 코드는 스파게티가 되고, 뭐 하나라도 추가하려면 완전... 그래서 여기서도 똑똑하신분이 상태 관리하라고 노드를 하나 주셨는데, 그게 바로 AnimationTree노드입니다. AnimationTree노드를 사용하려면 각각의 동작 Animation은 사전에 구현이 되어있어야합니다. 이미 존재하는 Animation을 컨트롤하는 상태관리자라고 보시면 됩니다. 참고로 저는 코로나 격리기간 중에 아래와 같은 게임을 7살 딸과 함께 만드는 중이었습니다. 탑다운 방식이다보니 .. 2022. 3. 12.