밥줄/Vue.js

📝 PDF Viewer 및 SVG or canvas & HTML Convert 웹 애플리케이션 프로젝트 개요  PDF Viewer 및 SVG or canvas 형태의 HTML로 Convert 하여 PDF에 원하는 페이지를 로컬에 저장할 수 있는 웹 애플리케이션입니다.이 애플리케이션은 Vue3의 Composition API로 작성되었으며, 스타일링에는 SCSS를 사용했습니다.서버 측에서는 Node.js와 Express를 사용하여 구현되었습니다. 기술 스택 Vue.js 3.XVuexHTML/CSSSCSSNode.jsExpress 📚 스토리보드 📖 초기 화면Page Input에 원하는 Page number를 입력 후 Enter keydown 시 그 Page로 이동합니다.Scale은 -,+ button으로..

🎞 영화 검색 웹 애플리케이션 프로젝트 프로젝트 개요 영화 검색 웹 애플리케이션은 Vue.js 3.X를 사용하여 개발된 웹 애플리케이션입니다. 이 애플리케이션은 사용자가 원하는 영화를 검색하고 해당 영화에 대한 정보를 제공하는 기능을 제공합니다. 한국영화진흥위원회(KOFIC)의 영화진흥위원회 API를 활용하여 영화 데이터를 가져와 사용자에게 제공합니다. 주요 기능 영화 검색: 사용자는 검색 창에 영화 제목을 입력하여 원하는 영화를 검색 영화 정보 제공: 검색된 영화에 대한 정보(영화 제목, 개봉일, 포스터 등)를 화면에 표시 TMDB API 연동: TMDB API를 활용하여 영화 데이터를 실시간으로 가져와 화면에 표시 장르 별 영화 : 각 장르의 영화 슬라이더를 구현 상세 소개 : 영화 소개, cast ..

MineHome.vue 이 프로젝트의 웹사이트는 블로그 형식에 툴 모음이기 때문에 뚜렷한 목표가 없는 블로그 느낌이다. 그렇기 때문에 Home에 대한 고민을 많이 했다. 뭔가 뚜렷하지 않은 블로그의 홈이라,,, 방문하는 사람들을 위한 웹사이트기때문에 방문자가 무언가 얻고 가면 좋을 것 같다. 현대인들이 매일 궁금해하는 날씨정도가 적합한 Home일 것 같다. 우선 날씨 데이터를 사용해보자. OpenWeatherMap 날씨의 데이터를 가져오기 위해 OpenWeatherMap API를 사용하자. OpenWeatherMap API 란 현재 위치에 대한 날씨의 정보들을 볼 수 있다. 나는 무료로 사용할 것이기 때문에 사용할 수 있는 데이터의 양이 많지 않다. 오늘의 날씨, 3시간 단위로 5일간의 날씨 데이터를 사..

Common Component Header Header에서 navigation을 사용 할 생각이다. 원래는 Footer에서 하려했지만 계속해서 메뉴들을 추가 할 것이기 때문에 상단에서 사용하는게 좋을 것 같다. Vuetify를 사용해 간단하게 Header를 구현하자. // components/common/MiniHeader.vue 미니 기여어 mdi-reply 미니 기여어 {{ item.title }} Vuetify는 tag를 사용하여 수많은 components를 제공한다. Vuetify 공식문서 : https://vuetifyjs.com/en/getting-started/installation/#installation Get started with Vuetify 3 — Vuetify Details fo..

Vue 배포시 Web 개발자 도구에서 source code를 열람할 수 있다. 신경쓰고 있지 않았지만 아무래도 가릴 수 있으면 좋을 것 같다. Vue-CLI는 browser에서 source code를 보게 하는것이 default다. 그렇기 때문에 vue.config.js에서 수정해주면 된다. // vue.config.js module.exports = { productionSourceMap: false, configureWebpack: { mode: 'production', devtool: 'eval' } };

프로젝트를 만드는 이유 이전에 Side Project로 만들어 놓고 안 쓰던 점심 뽑기 Web이 있는데, (https://soominyim.github.io/today-lunch/) 배포 이후에 거의 수정을 안했었다. 묵혀두기는 좀 아쉬워서 Vuex에 익숙해질 겸 리팩토링하려고 한다. 이번에 리팩토링하면서 다른 요소들도 추가하여 완전한 Tools web app으로 구성할 것이다. 따로 디자인이나 구조를 정해놓고 하는 것이 아니라서, 천천히 추가하면서 만들 예정이다. 왜 미니로 지었냐고 물어보시진 않겠지만 그래도 설명하겠다. 미니는 우리 강아지 이름인데, 14살로 노견이다. 오래오래 살았으면 좋겠지만, 언젠가는 헤어져야 한다. 마음에 미니를 담아두기엔 내 마음이 너무 작은 것 같아 이렇게나마 미니를 남기고..

포트폴리오 페이지를 작업하면서 문제가 생겼다. 문제를 확인하기 전에 내 포트폴리오 사이트 동작 원리를 확인해보자. // src/items/blog.js export default [ { number: 0, title: "뷰스타그램", content: "Vue로 만들어본 instagram", project: `BaseLanguage : Vue3.X, javascript, scss Server, DB : node.js, express, mySql Library, Plug-in : JWT-token, axios, Vuex, FaceBook Auth, instagram filterBox`, gitUrl: "https://github.com/SoominYim/vuestagram", url: null, image:..

VS CODE로 작업하다가 꼴보기 싫게 뭐가 나온다. 대충 TypeScript Intellisense를 활성화 시켜야한다함. 없애버리자 jsconfig.json { "compilerOptions": { "target": "es5", "module": "esnext", "baseUrl": "./", "moduleResolution": "node", "paths": { "@/*": [ "src/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ], "jsx": "preserve" }, } "jsx": "preserve"를 추가 해주면 된다.