Vue.js 컴파일 없이 vu 컴포넌트를 외부 파일화 webpack 등의 컴파일 툴을 이용하지 않고 vue를 이용해, 컴포넌트를 외부 파일화해 보았다. 단일 파일 컴포넌트(.vue)라면, 태그를 이용하는 곳을 .js로 템플릿 리터럴을 이용합니다. home_component.js child_component.js 임포트하는 쪽에서는 보통으로 import해, 이용합니다. import.js html에서는 cdn에서 vue, vue-router를 읽습... Vue.js자바스크립트vue-router템플릿 리터럴 Vue.js에서 큰 Object를 다룰 때는 Object.freeze하면 100 배 정도 빨라집니다. 제목대로이므로 우선 결과를 봅시다. See the Pen by isuke ( ) 실행 결과 ↓ 정확한 측정은 아니지만 분명한 속도의 차이를 알 수 있습니다. 라고 말하는 것으로 큰 Object를 취급할 때는 Object.freeze 하면 좋다. Object 를 렌더링 하는 경우는 이것을 해도 병목의 해소는 되지 않을 가능성이 있습니다. 결국 렌더링에 시간이 걸리기 때문에. devtools 가... Vue.js자바스크립트성능 [VSCode] Vue 코드 성형 도구 설정을 단일 인용으로 설정 VSCode에서 Vue의 코드 성형 툴(Prettier)의 설정을 싱글 쿼테이션으로 하고 싶다. 오래된 기사에서는 다음과 같이 쓰여지는 경우가 많았다. 메뉴에서 Code > Preference > Settings를 엽니다. 검색 바에서 SingleQuote 와 검색하여 나온 것을 확인. 자신의 환경에서는 이 설정을 행해도 성형시에 더블 쿼테이션이 남았다. Pritter는 업데이트가 있었던 것... FormatterVue.jsVSCodeprettier Qiita의 주식 수를 확인할 수있는 확장 기능을 만든 이야기 왜 내 기사는 좋아하지 않는가? Qiita에는 '좋아요'와 '스톡'이라는 개념이 있습니다. 올레올레 정의 "좋아요"는 기사에 공감하고 도움이 된 것에 대한 감사의 마음 "스톡"이란 순전히 그 기사를 다시 읽고 싶을 때에 대한 표시 재고 수를 알고 싶다 · · Qiita의 API라면 스톡자 일람을 취득할 수 있는 것 같다・・・ ChromeExtension을 만들어 보았습니다! 확장 기능 추가 ... QiitaAPIchrome-extensionVue.js자바스크립트Qiita headers에 자신의 키를 추가하여 요청 보내기 ALB + ec2 (nginx + gunicorn + flask)의 구성으로 배포하고 ALB에서 요청 헤더를 확인하고 액세스 제한을 적용하는 것이 목표였습니다. UI 측은 cloudfront + s3 으로 배포가 끝났으며 여기에서 서버로 요청을 보냅니다. 요청을 보낼 때 cors 오류가 발생하여 해결에 시간이 걸렸으므로 비망록으로 작성합니다. nginx의 설정 (conf 파일)에 Prefli... CORSnginxVue.jsaxios Nuxt.js에서 API CORS 대책을하면 Netlify에서 404 오류가 발생합니다. Nuxt.js에서 CORS 오류가 발생하여 axios의 proxiy 설정을 수행했습니다. Netlify에 배포하는 동안 404 오류가 발생했습니다. Netlify 리디렉션 옵션을 설정하여 해결 .envnuxt.config.js 로컬 환경에서의 동작 검증 성공적으로 API 통신이 가능한 패턴 움직이지 않는다 API 응답은 200이 반환되었지만 404 페이지의 DOM이 반환되는 패턴 static... CORSNetlifyVue.jsnuxt.jsaxios 【Vue.js】Vue CLI 3+tsx 먼저 vue create 명령으로 템플릿을 생성합니다. Babel TypeScript 위의 두 항목은 반드시 체크합니다. 를 설치합니다. 이미 Vue.js에서 tsx를 사용할 수있는 라이브러리가 존재했습니다. src/components/HelloWorld.vue 삭제 새 HelloWorld.tsx를 만듭니다. App.vue HelloWorld 구성 요소의 호출 부분을 수정합니다. 확장자.ts... TypeScriptVue.jsTSX자바스크립트JSX Vuetify 2.2의 새로운 기능 Presets 2020/01/02 에 릴리스된 Vuetify 2.2 로부터 추가된 Presets 기능이 꽤 좋았기 때문에, 기사로 해 보았습니다. 은 , , 등 보다 구체적인 어플리케이션의 디자인 예와 함께, 그 디자인의 이론적 근거나 컴퍼넌트 선택에 대해 상세히 설명한, Material Design 을 배우는데 매우 유용 콘텐츠가되고 있습니다. Preset은 Vue CLI의 플러그인으로 구현되므로 Vue... Vue.jsMaterialDesign자바스크립트Vuetify Vue.js의 Material Design 구현 Vuetify의 비디오 내용을 시도했습니다. Vuetify의 공식 사이트에서 소개 된 비디오의 내용을 시도했습니다. App.vue 비디오: 문서 App.vue # 요약 동영상을 보면서 사경하고 완성에 가까워진다는 공부법을 처음으로 갔습니다만, 좋았습니다. 이후 동영상 콘텐츠는 유료인 것 같습니다. 유료 버전으로 지속적으로 보고 싶습니다. 다만, 이와 같이 공개 Blog에 아웃풋 할 수 없는 것이 유감입니다.... MaterialDesignVue.jsVuetify 블랙잭 해보면 놀러 가서 지는 사람이 많은데 납득 블랙잭 게임을 시뮬레이션하는 WebAPP를 만들었습니다. 그래서 생각한 것을 정리합니다. 블랙잭 규칙 플레이어와 딜러는 각각 여러 장의 카드를 당기고 21을 초과하지 않는 범위에서 카드 값의 합계가 21에 가까운 쪽이 승리합니다. 21을 초과하면 패합니다. APP 개발 및 개요 응용 프로그램 개발 자체 정보 : 참조 디폴트에서는 코인 2장을 기본 유닛으로 하고 있습니다만, 이것이 코인 1장 ... BlackjackMaterialDesignTypeScriptVue.jsDDD tify로 Qiita 스타일 UI 만들기 - 목차 모두 사랑 (?)Vuetify입니다만, 비교적 일본어로의 기사는 많지 않습니다. (자신 조사) 지금 담당하고 있는 프로젝트에서 Vuetify를 채용해 2년 정도 지나, 여러가지 지견이 쌓여 왔으므로, Qiita풍의 UI를 만들면서 화면 구축의 테크닉을 공개해 가고 싶습니다. 어느 정도 컴포넌트마다 구분하여 공개해 갑니다. (궁극적으로 Nuxt.js에서 응용 프로그램으로 게시 할 수 있다면 좋... MaterialDesignVuetify에서 Qiita 스타일 UIVuetifyVue.jsvuetifyjs 서버 측 엔지니어가 Vuetify에서 좋은 느낌의 포트폴리오를 만들어 보았습니다. 평소에는 서버 측을 중심으로 업무를 수행하고 있으며, Python과 Go를 중심으로 사용하고 있습니다. 클라우드를 사랑하고 디자인이 서투른 Bootstrap에 의존하는 타입입니다. 당돌에 포트폴리오를 만들고 싶어졌기 때문에 어떻게 만들까 생각했습니다. CSS는 가능한 한 쓰지 않는 방향으로 가고 싶습니다 ... (덧붙여서 Qiita 투고는 2년만 정도) 있었습니다. Vuetify라는 Mate... Vue.jsMaterialDesign자바스크립트Vuetify Vue Cli 3으로 만든 컴포넌트 라이브러리를 npm으로 공개 Vue.js, TypeScript, Serverless, Cordova 등이 있습니다. Vue.js에서 Material Design하고 싶어서 Vuetify나 Vue Material이나 라이브러리를 만져 보았지만, npm 공개 작업은 상당히 쉽게 할 수 있었으므로 npm publish의 방법을 공유합니다. Material Design을 위한 Vue.js 컴포넌트 라이브러리. Vue CLI 3... Vue.jsnpm자바스크립트MaterialDesign Vue.js + SCSS + Bootstrap + MaterialDesign + TypeScript 개발 환경을 만들려고했습니다. SPA 앱을 만들게 되었기 때문에, Vue.js를 사용하려고 환경을 만들어 보았습니다. Docker에서 개발하고 싶었던 언어는 TypeScript, SCSS에서 Bootstrap을 MaterialDesign에서. Docker 이미지 만들기 이 근처를 참고로. Dockerfile docker-compose.yml vue.js 앱 만들기 Manually select features 를 선택하면 ... MaterialDesignTypeScriptVue.jsscssBootstrap Material Design for Bootstrap 4 (Vue version) 소개 Angular5에서 사용한 의 Vue 버전이 있었으므로 넣어 보았다. 내비게이션이 MDBootstrap 그대로라면 vue-router의 router-link를 사용할 수 없어, 구성 요소를 약간 로컬로 변경했습니다. vue-cli의 초기 화면에 위로 네비게이션 붙였다 Angular, React는 패키지 추가로 갈 수 있지만, Vue는 왜 템플릿을 git clone하여 프로젝트를 만들거나, v... MaterialDesignvue-routerVue.jsmdbootstrapbootstrap4 【저장판】Vue.js에서 FontAwesome을 쉽게 사용하는 방법 이 기사에 액세스 해 주셔서 감사합니다. 게시자는 프로그래밍 초보자이며, 이 방법이 '최적해'인지는 모릅니다. 그러나 동작은 검증되었습니다. 이런 방법도 할 수 있어 ~ 정도로 봐 주시면 다행입니다. 우선은 Vue.js에서 FontAwesome을 사용할 때 필요한 5가지를 먼저 다운로드해 갑니다. 이 기사에서는 yarn으로 다운로드를 기재해 갑니다만, npm의 분은 npm의 다운로드 방법으로... Vue.jsFontAwesome Vue.js에서 FontAwesome을 사용하는 방법 (brands) 이번에는 Vue.js에서 Twitter 아이콘과 Github 아이콘을 사용하고 싶었습니다. Brands아이콘을 사용할 때는 조금 다른 아이콘 사용과 달리, 구현에 막혔으므로 아래가 참고가 되면 기쁩니다. ※초보자가 쓰고 있으므로 실수등 있으면 가르쳐 주시면 다행입니다. Get vector icons and social logos on your website with Font Awesome, ... Vue.js초보자용FontAwesome Vue에서 v-for를 사용하여 font awosome을 반복적으로 표시하는 방법 제목대로 vue에서 font awosome 아이콘을 반복적으로 표시하려고하면 일부 곤란한 일이 되었으므로 해결책을 적어 둡니다. vue로 font awosome의 도입까지는 를 참고로 했습니다. 자주 프로필 사이트에서 보이는 이런 느낌의 레이아웃을 구축하고 싶습니다. 다음과 같이 작성하여 표시할 수 있었습니다. 무엇이 문제였는가 하면, vue로 font awosome을 표시시키려고 하면, p... Vue.jsFontAwesome Vue.js에서 간편한 좋아요 버튼 안녕하세요 Vue.js에 대해 여러가지 조사하면서 쓰고 있습니다. 비망록으로 간이적으로 컴포넌트에 관해서 여러가지 착각하고 있었으므로 다시 작성해 보았습니다. (만지기 시작했을 뿐이므로 잘못되면 살짝 가르쳐 주시면 좋겠습니다!) vue-cli에서 프로젝트를 만드는 과정은 생략됩니다. (많은 기사 있었으므로 써도 의미 없을까라고🤔) vue/cli 4.4.6 vue: 2.6.11 FontAwso... HTMLCSSVue.jsFontAwesome Nuxt.js에서 FontAwesome 소개 대략적인 절차는 다음과 같습니다. ①FomtAwesome 관련을 커맨드로부터 인스톨, FomtAwesome 라이브러리를 준비 ② Nuxt.js 내에서 이들을 라이브러리로 로드 ③ 필요한 명령만을 라이브러리에서 추출, 각 컴포넌트에서 사용 아래 기사를 참조하십시오. Nuxt.js에서 FontAwesome을 사용하는 방법. 필요한 아이콘만 가져옵니다! 덧붙여 상기 기사는 yarn을 대상으로 쓰여... Vue.jsnuxt.jsFontAwesome Vue에서 FontAwesome 아이콘을 표시하는 방법 (Vue.js) Vue.js를 사용하여 포트폴리오 사이트를 제작하는 데 Vue-cli를 사용했지만 구성 요소에서 FontAwesome을 호출하는 방법을 모르겠습니다. 거기서의 경험을 근거로, Twitter 아이콘등을 표시시키기 위해서 사용하는 FontAwesome의 Vue에서의 도입 방법과 기술 방법에 대해 써 갑니다. 루트 디렉토리로 이동 설치 더 많은 아이콘(twitter 아이콘 등)을 사용하고 싶은 경... Vue.jsvue-cliFontAwesome vue.js에서 링크 대상의 확장자로 Font Awesome Icon이 바뀌는 그 녀석을 만들어 보았다. a[href$=".pdf"]와 같은 CSS 의사 요소를 사용하여 아이콘을 표시 한 다음과 같은 사람 를 이용해 만들어 보자는 이야기입니다. Q:지금까지 CSS의 의사 요소로 구현하면 좋잖아 A : 그럼이 기사의 의미가 없습니다 쓰고 있기 때문에. 쓰베코베 말하지 않고 공부할 생각으로 생각해 보자. 확장자의 패턴 배분 어떻게 하자, 몇개까지 대응하면 좋을 것이라고 생각하고 있으면, 라고 하는 ... Vue.jsBootstrapFontAwesome 【Vue.js】Vue-CLI4.1.1에서 Font awesome5를 사용하는 순서 Vue-CLI (4.1.1)에서 Font awesome을 사용하는 절차를 정리했습니다. 이제 Vue-CLI에서 Font awesome을 사용하고 싶은 분 Vue-CLI에서 Font awesome을 사용할 수있게된다 위에서 기본 아이콘을 로드할 수 있습니다. 주의 Instagram이나 Twitter 등의 브랜드 아이콘은 별도의 파일로 분리되어 있으므로 별도로 로드해야 합니다. 필요한 경우 위의... 초보자Vue.jsvue-cliFontAwesome RubyMine : rails s와 webpack-dev-server를 한 번의 클릭으로 실행 (IntelliJ IDEA with Ruby Plugin) 자주foreman gem을 사용해Procfile를 실행하는 방법이 소개되고 있습니다만, RubyMine/IntelliJ IDEA를 사용해 표제의 일을 하는 방법을 소개합니다. 동작 확인 환경 macOS 10.14.4 Ruby 2.5.3 Ruby on Rails 5.2.2 Webpack ~> 4.x Vue ^2.6.10 전제로서 Webpack과 Vue를 Rails 프로젝트에서 사용할 수 있는 ... RailsVue.jsIntelliJRubyMine루비 Vue.js 사이트를 AWS S3에 CodePipline으로 자동 배포 이번에는 최근 Vue.js를 시작했으므로 사이트 공개에 걸리는 고정비를 싸게 억제하려고 AWS S3의 웹 사이트 호스팅 기능을 사용합니다. 그리고 자동 배포도 하고 싶었으므로 AWS의 CodePipline을 사용합니다. 구성은 아래 그림과 같습니다. 이 파일에서 CodeBuild는 파일을 기반으로 빌드를 실행합니다. 들여 쓰기를 제대로하지 않으면 빌드시 오류가 발생합니다. buildspec.... Vue.jsCodeBuildCodePipelineS3AWS Vue.js에서 DRF API로 데이터 보내기 아래의 기사에서 작성한 API에 대해서, 이번은 POST로 데이터를 송신, 데이타베이스에 등록하고 싶다. book/models.py 또한 Vue.js는 jsfiddle에 나열되어 있습니다. 등록하려는 데이터 Book 테이블에 새로운 데이터로 title 필드와 price 필드를 등록하고 싶습니다. id와 created_at는 자동으로 추가되므로 스루로 OK. html javascriptinpu... django-rest-framework파이썬Vue.js장고 Jsfiddle의 Vue.js에서 DRF로 만든 api에 액세스하고 싶습니다. Vue.js의 프로젝트를 웹상에서 간편하게 만들 수 있는 jsfiddle로, Django Rest Framework(이하 DRF)로 작성한 api에 액세스하고 싶고, 시도했습니다. DRF에서 간단한 API 생성과 간단한 Vue.js 프로젝트 생성. Vue.js에서 DRF의 api에 액세스하는 방법과 그 때의 유의점. DRF에서 api 만들기 Vue.js에서 DRF로 만든 api에 액세스 환경... django-rest-frameworkVue.js장고 Vue.js와 Django-Rest-Framework에서 신경 쇠약 앱을 만들어 본다 [그 1] ~ Django의 셋업 편 ~ OS: MacOS X node:v12.14.1 npm:6.13.4 @vue/cli:4.1.2 파이썬 : 3.9.0 장고: 3.2.2 djangorestframework: 3.12.4 사전 준비 ・pyenv를 사용할 수 있다 · pyenv-virtualenv로 파이썬 가상 환경을 만들 수 있음 가상 환경 생성 python3.9.0의 가상 환경을 만듭니다. 신경쇠약을 만들기 때문에, 명칭은 「c... django-rest-frameworkVuetify파이썬Vue.js장고 laradock에서 IntelliJ+Laravel+Vuejs의 환경 구축: ⑴Laravel을 움직여 보자 laradock에서 IntelliJ+Laravel+Vuejs의 환경 구축: ⑴Laravel을 움직여 보자 ⬆︎지금 여기 laradock에서 IntelliJ+Laravel+Vuejs의 환경 구축: ⑵Vuejs를 움직여 보자 laradock에서 IntelliJ+Laravel+Vuejs의 환경 구축: ⑶ 자유도가 높기 때문에 더럽게 쓰려고 하면 쓸 수 있다. 이번 신경쓰는 환경 docker, do... LaraDockPHPVue.js라라벨도커 이전 기사 보기
컴파일 없이 vu 컴포넌트를 외부 파일화 webpack 등의 컴파일 툴을 이용하지 않고 vue를 이용해, 컴포넌트를 외부 파일화해 보았다. 단일 파일 컴포넌트(.vue)라면, 태그를 이용하는 곳을 .js로 템플릿 리터럴을 이용합니다. home_component.js child_component.js 임포트하는 쪽에서는 보통으로 import해, 이용합니다. import.js html에서는 cdn에서 vue, vue-router를 읽습... Vue.js자바스크립트vue-router템플릿 리터럴 Vue.js에서 큰 Object를 다룰 때는 Object.freeze하면 100 배 정도 빨라집니다. 제목대로이므로 우선 결과를 봅시다. See the Pen by isuke ( ) 실행 결과 ↓ 정확한 측정은 아니지만 분명한 속도의 차이를 알 수 있습니다. 라고 말하는 것으로 큰 Object를 취급할 때는 Object.freeze 하면 좋다. Object 를 렌더링 하는 경우는 이것을 해도 병목의 해소는 되지 않을 가능성이 있습니다. 결국 렌더링에 시간이 걸리기 때문에. devtools 가... Vue.js자바스크립트성능 [VSCode] Vue 코드 성형 도구 설정을 단일 인용으로 설정 VSCode에서 Vue의 코드 성형 툴(Prettier)의 설정을 싱글 쿼테이션으로 하고 싶다. 오래된 기사에서는 다음과 같이 쓰여지는 경우가 많았다. 메뉴에서 Code > Preference > Settings를 엽니다. 검색 바에서 SingleQuote 와 검색하여 나온 것을 확인. 자신의 환경에서는 이 설정을 행해도 성형시에 더블 쿼테이션이 남았다. Pritter는 업데이트가 있었던 것... FormatterVue.jsVSCodeprettier Qiita의 주식 수를 확인할 수있는 확장 기능을 만든 이야기 왜 내 기사는 좋아하지 않는가? Qiita에는 '좋아요'와 '스톡'이라는 개념이 있습니다. 올레올레 정의 "좋아요"는 기사에 공감하고 도움이 된 것에 대한 감사의 마음 "스톡"이란 순전히 그 기사를 다시 읽고 싶을 때에 대한 표시 재고 수를 알고 싶다 · · Qiita의 API라면 스톡자 일람을 취득할 수 있는 것 같다・・・ ChromeExtension을 만들어 보았습니다! 확장 기능 추가 ... QiitaAPIchrome-extensionVue.js자바스크립트Qiita headers에 자신의 키를 추가하여 요청 보내기 ALB + ec2 (nginx + gunicorn + flask)의 구성으로 배포하고 ALB에서 요청 헤더를 확인하고 액세스 제한을 적용하는 것이 목표였습니다. UI 측은 cloudfront + s3 으로 배포가 끝났으며 여기에서 서버로 요청을 보냅니다. 요청을 보낼 때 cors 오류가 발생하여 해결에 시간이 걸렸으므로 비망록으로 작성합니다. nginx의 설정 (conf 파일)에 Prefli... CORSnginxVue.jsaxios Nuxt.js에서 API CORS 대책을하면 Netlify에서 404 오류가 발생합니다. Nuxt.js에서 CORS 오류가 발생하여 axios의 proxiy 설정을 수행했습니다. Netlify에 배포하는 동안 404 오류가 발생했습니다. Netlify 리디렉션 옵션을 설정하여 해결 .envnuxt.config.js 로컬 환경에서의 동작 검증 성공적으로 API 통신이 가능한 패턴 움직이지 않는다 API 응답은 200이 반환되었지만 404 페이지의 DOM이 반환되는 패턴 static... CORSNetlifyVue.jsnuxt.jsaxios 【Vue.js】Vue CLI 3+tsx 먼저 vue create 명령으로 템플릿을 생성합니다. Babel TypeScript 위의 두 항목은 반드시 체크합니다. 를 설치합니다. 이미 Vue.js에서 tsx를 사용할 수있는 라이브러리가 존재했습니다. src/components/HelloWorld.vue 삭제 새 HelloWorld.tsx를 만듭니다. App.vue HelloWorld 구성 요소의 호출 부분을 수정합니다. 확장자.ts... TypeScriptVue.jsTSX자바스크립트JSX Vuetify 2.2의 새로운 기능 Presets 2020/01/02 에 릴리스된 Vuetify 2.2 로부터 추가된 Presets 기능이 꽤 좋았기 때문에, 기사로 해 보았습니다. 은 , , 등 보다 구체적인 어플리케이션의 디자인 예와 함께, 그 디자인의 이론적 근거나 컴퍼넌트 선택에 대해 상세히 설명한, Material Design 을 배우는데 매우 유용 콘텐츠가되고 있습니다. Preset은 Vue CLI의 플러그인으로 구현되므로 Vue... Vue.jsMaterialDesign자바스크립트Vuetify Vue.js의 Material Design 구현 Vuetify의 비디오 내용을 시도했습니다. Vuetify의 공식 사이트에서 소개 된 비디오의 내용을 시도했습니다. App.vue 비디오: 문서 App.vue # 요약 동영상을 보면서 사경하고 완성에 가까워진다는 공부법을 처음으로 갔습니다만, 좋았습니다. 이후 동영상 콘텐츠는 유료인 것 같습니다. 유료 버전으로 지속적으로 보고 싶습니다. 다만, 이와 같이 공개 Blog에 아웃풋 할 수 없는 것이 유감입니다.... MaterialDesignVue.jsVuetify 블랙잭 해보면 놀러 가서 지는 사람이 많은데 납득 블랙잭 게임을 시뮬레이션하는 WebAPP를 만들었습니다. 그래서 생각한 것을 정리합니다. 블랙잭 규칙 플레이어와 딜러는 각각 여러 장의 카드를 당기고 21을 초과하지 않는 범위에서 카드 값의 합계가 21에 가까운 쪽이 승리합니다. 21을 초과하면 패합니다. APP 개발 및 개요 응용 프로그램 개발 자체 정보 : 참조 디폴트에서는 코인 2장을 기본 유닛으로 하고 있습니다만, 이것이 코인 1장 ... BlackjackMaterialDesignTypeScriptVue.jsDDD tify로 Qiita 스타일 UI 만들기 - 목차 모두 사랑 (?)Vuetify입니다만, 비교적 일본어로의 기사는 많지 않습니다. (자신 조사) 지금 담당하고 있는 프로젝트에서 Vuetify를 채용해 2년 정도 지나, 여러가지 지견이 쌓여 왔으므로, Qiita풍의 UI를 만들면서 화면 구축의 테크닉을 공개해 가고 싶습니다. 어느 정도 컴포넌트마다 구분하여 공개해 갑니다. (궁극적으로 Nuxt.js에서 응용 프로그램으로 게시 할 수 있다면 좋... MaterialDesignVuetify에서 Qiita 스타일 UIVuetifyVue.jsvuetifyjs 서버 측 엔지니어가 Vuetify에서 좋은 느낌의 포트폴리오를 만들어 보았습니다. 평소에는 서버 측을 중심으로 업무를 수행하고 있으며, Python과 Go를 중심으로 사용하고 있습니다. 클라우드를 사랑하고 디자인이 서투른 Bootstrap에 의존하는 타입입니다. 당돌에 포트폴리오를 만들고 싶어졌기 때문에 어떻게 만들까 생각했습니다. CSS는 가능한 한 쓰지 않는 방향으로 가고 싶습니다 ... (덧붙여서 Qiita 투고는 2년만 정도) 있었습니다. Vuetify라는 Mate... Vue.jsMaterialDesign자바스크립트Vuetify Vue Cli 3으로 만든 컴포넌트 라이브러리를 npm으로 공개 Vue.js, TypeScript, Serverless, Cordova 등이 있습니다. Vue.js에서 Material Design하고 싶어서 Vuetify나 Vue Material이나 라이브러리를 만져 보았지만, npm 공개 작업은 상당히 쉽게 할 수 있었으므로 npm publish의 방법을 공유합니다. Material Design을 위한 Vue.js 컴포넌트 라이브러리. Vue CLI 3... Vue.jsnpm자바스크립트MaterialDesign Vue.js + SCSS + Bootstrap + MaterialDesign + TypeScript 개발 환경을 만들려고했습니다. SPA 앱을 만들게 되었기 때문에, Vue.js를 사용하려고 환경을 만들어 보았습니다. Docker에서 개발하고 싶었던 언어는 TypeScript, SCSS에서 Bootstrap을 MaterialDesign에서. Docker 이미지 만들기 이 근처를 참고로. Dockerfile docker-compose.yml vue.js 앱 만들기 Manually select features 를 선택하면 ... MaterialDesignTypeScriptVue.jsscssBootstrap Material Design for Bootstrap 4 (Vue version) 소개 Angular5에서 사용한 의 Vue 버전이 있었으므로 넣어 보았다. 내비게이션이 MDBootstrap 그대로라면 vue-router의 router-link를 사용할 수 없어, 구성 요소를 약간 로컬로 변경했습니다. vue-cli의 초기 화면에 위로 네비게이션 붙였다 Angular, React는 패키지 추가로 갈 수 있지만, Vue는 왜 템플릿을 git clone하여 프로젝트를 만들거나, v... MaterialDesignvue-routerVue.jsmdbootstrapbootstrap4 【저장판】Vue.js에서 FontAwesome을 쉽게 사용하는 방법 이 기사에 액세스 해 주셔서 감사합니다. 게시자는 프로그래밍 초보자이며, 이 방법이 '최적해'인지는 모릅니다. 그러나 동작은 검증되었습니다. 이런 방법도 할 수 있어 ~ 정도로 봐 주시면 다행입니다. 우선은 Vue.js에서 FontAwesome을 사용할 때 필요한 5가지를 먼저 다운로드해 갑니다. 이 기사에서는 yarn으로 다운로드를 기재해 갑니다만, npm의 분은 npm의 다운로드 방법으로... Vue.jsFontAwesome Vue.js에서 FontAwesome을 사용하는 방법 (brands) 이번에는 Vue.js에서 Twitter 아이콘과 Github 아이콘을 사용하고 싶었습니다. Brands아이콘을 사용할 때는 조금 다른 아이콘 사용과 달리, 구현에 막혔으므로 아래가 참고가 되면 기쁩니다. ※초보자가 쓰고 있으므로 실수등 있으면 가르쳐 주시면 다행입니다. Get vector icons and social logos on your website with Font Awesome, ... Vue.js초보자용FontAwesome Vue에서 v-for를 사용하여 font awosome을 반복적으로 표시하는 방법 제목대로 vue에서 font awosome 아이콘을 반복적으로 표시하려고하면 일부 곤란한 일이 되었으므로 해결책을 적어 둡니다. vue로 font awosome의 도입까지는 를 참고로 했습니다. 자주 프로필 사이트에서 보이는 이런 느낌의 레이아웃을 구축하고 싶습니다. 다음과 같이 작성하여 표시할 수 있었습니다. 무엇이 문제였는가 하면, vue로 font awosome을 표시시키려고 하면, p... Vue.jsFontAwesome Vue.js에서 간편한 좋아요 버튼 안녕하세요 Vue.js에 대해 여러가지 조사하면서 쓰고 있습니다. 비망록으로 간이적으로 컴포넌트에 관해서 여러가지 착각하고 있었으므로 다시 작성해 보았습니다. (만지기 시작했을 뿐이므로 잘못되면 살짝 가르쳐 주시면 좋겠습니다!) vue-cli에서 프로젝트를 만드는 과정은 생략됩니다. (많은 기사 있었으므로 써도 의미 없을까라고🤔) vue/cli 4.4.6 vue: 2.6.11 FontAwso... HTMLCSSVue.jsFontAwesome Nuxt.js에서 FontAwesome 소개 대략적인 절차는 다음과 같습니다. ①FomtAwesome 관련을 커맨드로부터 인스톨, FomtAwesome 라이브러리를 준비 ② Nuxt.js 내에서 이들을 라이브러리로 로드 ③ 필요한 명령만을 라이브러리에서 추출, 각 컴포넌트에서 사용 아래 기사를 참조하십시오. Nuxt.js에서 FontAwesome을 사용하는 방법. 필요한 아이콘만 가져옵니다! 덧붙여 상기 기사는 yarn을 대상으로 쓰여... Vue.jsnuxt.jsFontAwesome Vue에서 FontAwesome 아이콘을 표시하는 방법 (Vue.js) Vue.js를 사용하여 포트폴리오 사이트를 제작하는 데 Vue-cli를 사용했지만 구성 요소에서 FontAwesome을 호출하는 방법을 모르겠습니다. 거기서의 경험을 근거로, Twitter 아이콘등을 표시시키기 위해서 사용하는 FontAwesome의 Vue에서의 도입 방법과 기술 방법에 대해 써 갑니다. 루트 디렉토리로 이동 설치 더 많은 아이콘(twitter 아이콘 등)을 사용하고 싶은 경... Vue.jsvue-cliFontAwesome vue.js에서 링크 대상의 확장자로 Font Awesome Icon이 바뀌는 그 녀석을 만들어 보았다. a[href$=".pdf"]와 같은 CSS 의사 요소를 사용하여 아이콘을 표시 한 다음과 같은 사람 를 이용해 만들어 보자는 이야기입니다. Q:지금까지 CSS의 의사 요소로 구현하면 좋잖아 A : 그럼이 기사의 의미가 없습니다 쓰고 있기 때문에. 쓰베코베 말하지 않고 공부할 생각으로 생각해 보자. 확장자의 패턴 배분 어떻게 하자, 몇개까지 대응하면 좋을 것이라고 생각하고 있으면, 라고 하는 ... Vue.jsBootstrapFontAwesome 【Vue.js】Vue-CLI4.1.1에서 Font awesome5를 사용하는 순서 Vue-CLI (4.1.1)에서 Font awesome을 사용하는 절차를 정리했습니다. 이제 Vue-CLI에서 Font awesome을 사용하고 싶은 분 Vue-CLI에서 Font awesome을 사용할 수있게된다 위에서 기본 아이콘을 로드할 수 있습니다. 주의 Instagram이나 Twitter 등의 브랜드 아이콘은 별도의 파일로 분리되어 있으므로 별도로 로드해야 합니다. 필요한 경우 위의... 초보자Vue.jsvue-cliFontAwesome RubyMine : rails s와 webpack-dev-server를 한 번의 클릭으로 실행 (IntelliJ IDEA with Ruby Plugin) 자주foreman gem을 사용해Procfile를 실행하는 방법이 소개되고 있습니다만, RubyMine/IntelliJ IDEA를 사용해 표제의 일을 하는 방법을 소개합니다. 동작 확인 환경 macOS 10.14.4 Ruby 2.5.3 Ruby on Rails 5.2.2 Webpack ~> 4.x Vue ^2.6.10 전제로서 Webpack과 Vue를 Rails 프로젝트에서 사용할 수 있는 ... RailsVue.jsIntelliJRubyMine루비 Vue.js 사이트를 AWS S3에 CodePipline으로 자동 배포 이번에는 최근 Vue.js를 시작했으므로 사이트 공개에 걸리는 고정비를 싸게 억제하려고 AWS S3의 웹 사이트 호스팅 기능을 사용합니다. 그리고 자동 배포도 하고 싶었으므로 AWS의 CodePipline을 사용합니다. 구성은 아래 그림과 같습니다. 이 파일에서 CodeBuild는 파일을 기반으로 빌드를 실행합니다. 들여 쓰기를 제대로하지 않으면 빌드시 오류가 발생합니다. buildspec.... Vue.jsCodeBuildCodePipelineS3AWS Vue.js에서 DRF API로 데이터 보내기 아래의 기사에서 작성한 API에 대해서, 이번은 POST로 데이터를 송신, 데이타베이스에 등록하고 싶다. book/models.py 또한 Vue.js는 jsfiddle에 나열되어 있습니다. 등록하려는 데이터 Book 테이블에 새로운 데이터로 title 필드와 price 필드를 등록하고 싶습니다. id와 created_at는 자동으로 추가되므로 스루로 OK. html javascriptinpu... django-rest-framework파이썬Vue.js장고 Jsfiddle의 Vue.js에서 DRF로 만든 api에 액세스하고 싶습니다. Vue.js의 프로젝트를 웹상에서 간편하게 만들 수 있는 jsfiddle로, Django Rest Framework(이하 DRF)로 작성한 api에 액세스하고 싶고, 시도했습니다. DRF에서 간단한 API 생성과 간단한 Vue.js 프로젝트 생성. Vue.js에서 DRF의 api에 액세스하는 방법과 그 때의 유의점. DRF에서 api 만들기 Vue.js에서 DRF로 만든 api에 액세스 환경... django-rest-frameworkVue.js장고 Vue.js와 Django-Rest-Framework에서 신경 쇠약 앱을 만들어 본다 [그 1] ~ Django의 셋업 편 ~ OS: MacOS X node:v12.14.1 npm:6.13.4 @vue/cli:4.1.2 파이썬 : 3.9.0 장고: 3.2.2 djangorestframework: 3.12.4 사전 준비 ・pyenv를 사용할 수 있다 · pyenv-virtualenv로 파이썬 가상 환경을 만들 수 있음 가상 환경 생성 python3.9.0의 가상 환경을 만듭니다. 신경쇠약을 만들기 때문에, 명칭은 「c... django-rest-frameworkVuetify파이썬Vue.js장고 laradock에서 IntelliJ+Laravel+Vuejs의 환경 구축: ⑴Laravel을 움직여 보자 laradock에서 IntelliJ+Laravel+Vuejs의 환경 구축: ⑴Laravel을 움직여 보자 ⬆︎지금 여기 laradock에서 IntelliJ+Laravel+Vuejs의 환경 구축: ⑵Vuejs를 움직여 보자 laradock에서 IntelliJ+Laravel+Vuejs의 환경 구축: ⑶ 자유도가 높기 때문에 더럽게 쓰려고 하면 쓸 수 있다. 이번 신경쓰는 환경 docker, do... LaraDockPHPVue.js라라벨도커 이전 기사 보기