반응형 전체 글39 [Vuetify] 자주 사용하는 색상 네이밍 지정하기 src/plugins/vuetify.ts import Vue from 'vue'; import Vuetify from 'vuetify/lib'; import 'material-design-icons-iconfont/dist/material-design-icons.css'; import colors from 'vuetify/lib/util/colors'; Vue.use(Vuetify); export default new Vuetify({ theme: { themes: { light: { RED: '#fc3d5d', BLUE: '#348ed8', }, }, }, }); vuetify 설정파일에 theme.themes.light 밑에 '사용할 이름': '색상' 으로 선언해주면 색상을 네이밍으로 편하게 사용 할.. 2020. 10. 13. [Vue] vue-class-component 형식에서 Mixin 사용하기 src/mixins/list.ts import { Vue } from 'vue-property-decorator'; import Component from 'vue-class-component'; import store from '@/store/index'; @Component export default class MixinVue extends Vue { public getList(target: string): void { store.dispatch(target); } } store의 action을 호출하기 위한 mixin 파일 src/App.vue 2020. 10. 13. [Vue] Vue3 ref, reactive 사용해보기 이번에 vue3에서 composition api가 추가됨으로써 vue2 사용자 시점에서 ref와 reactive에 대하여 간단한 예제 소스를 작성해 보았다. 1. data()와 ref() 기존 vue2에서 데이터를 핸들링 할때는 사실 반응형이라는것에 신경쓰지 않고 사용했던거 같다. {{text}} 2초 뒤에 text를 변경하는 예제이다. 반응형이라는것이 그냥 당연하다고만 여겨졌었다.. {{text1}} {{text2}} 동일한 vue3의 예제이다. 실행해보면 2초뒤에 text1은 변경이 되지 않고, ref를 사용한 text2는 변경이된것을 확인 할 수 있다. setTimeout안에서 vue2와는 다르게 this를 사용하지 않으며, ref에 접근하기 위해서는 .value로 접근해야 된다. 최종적으로 tex.. 2020. 9. 20. 젠킨스 간단 사용기 #1. 설치 Contents 젠킨스 간단 사용기 #1. 설치 젠킨스 간단 사용기 #2. GitHub 연동 젠킨스 간단 사용기 #2. 자동배포 테스트 환경 - Red Hat Enterprise Linux version 8 - JDK 1.8 - Jenkins 2 - Node 10 - Nginx - Git - GitHub 목적 - 젠킨스 설치 #1. 설치 젠킨스는 java 기반으로 돌아가기 때문에 jdk를 설치해 줍니다. sudo yum install java-1.8.0-openjdk-devel.x86_64 -y git 설치 sudo yum install git jenkins.ropo 파일 설정 sudo wget -O /etc/yum.repos.d/jenkins.repo sudo rpm --import 또는 직접 설정 하.. 2020. 9. 14. Requested domain is not a FQDN because it contains an empty label. letsencrypt 를 사용해서 기존에쓰던 도메인 +@ 로 추가해주려 했다. 기존 정보를 불러오기 위한 ./letsencrypt-auto certificates 명령어 사용 ./letsencrypt-auto certificates - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Found the following certs: Certificate Name: [NAME] Serial Number: *************** Domains: [도메인1] Expiry Date: 2020-10-25 01:08:16+00:00 (VALID: 89 days) Certificate Path: /etc/letsencryp.. 2020. 7. 27. [NGINX] (13: Permission denied) nginx에서 80/81/82번 포트를 오픈 하려고 했더니 아래와같은 오류가 나왔다. /var/log/nginx/error.log [emerg] 1231212#0: bind() to 0.0.0.0:82 failed (13: Permission denied) semanage 명령어를 사용해서 포트를 추가해주려 했으나 semanage port -a -t http_port_t -p tcp 82 -bash: semanage: command not found semanage 가 설치되어있지 않았다. policycoreutils-python 를 설치하여 semanage명령어를 사용 할 수 있었다. yum -y install policycoreutils-python 출처 https://www.burndogfather.. 2020. 7. 14. [Vuetify] 메뉴 만들기 (With Vuex) 환경 - Node v10.16.0 - Vuetify2 Vuetify와 Vuex를 사용하여 2뎁스까지 지원하는 메뉴 체계를 작성해 보았습니다. 화면구성 Menus.vue : 메뉴 출력 및 동작 컴포넌트 PageTitle.vue : 페이지 타이틀 아이콘/이름 출력 컴포넌트 Index.vue : 라우터로 이동될 페이지 메뉴 이동에따라 화면을 전환하고 PageTItle내용을 수정해 주겠습니다. Index.vue (메뉴설정) 부분에는 메뉴 색상 및 메뉴 추가, 삭제 기능이 있습니다. store/state/color.js const colorState = { colors: { menu_background_color: '#263238', menu_selected_color: 'red', } } export defau.. 2020. 7. 13. [Vuetify] DatePicker + TimePicker 환경 - Node v10.16.0 - Vuetify2 날짜와 시간을 함께 선택 하여 사용하고 싶어서 Vuetify에 Date Picker와 TimePicker 예제를 합쳐 보았습니다. (2020-07-13 12:37) 와 같은 형식의 산출물 Page.vue DateTimePicker 컴포넌트를 불러옵니다. DateTimePicker.vue Cancel OK Cancel OK set() 함수에서 2020-07-16 04:22 형식으로 date 변수에 담깁니다. 참고 자료 https://vuetifyjs.com/ko/components/date-pickers/ Date picker component — Vuetify.js The date picker component is a stand-alone inter.. 2020. 7. 13. [NPM] Error: EACES : permission deined, mkdir ' ... node sass/build' npm install 중 Error: EACES : permission deined, mkdir ' ... node-sass/build' 에러가 발생했을때 sudo rm -rf ~/.node-gyp sudo npm cache clean -f sudo npm install -g n sudo n stable sudo npm i --unsafe-perm 2020. 7. 6. [MariaDB]Error Code: 1221. Incorrect usage of DB GRANT and GLOBAL PRIVILEGES RDS MariaDB 인스턴스, 계정을 생성하고 mysql> CREATE USER '사용자명'@'%' IDENTIFIED BY '패스워드'; mysql> CREATE USER 'joadmin'@'%' IDENTIFIED BY 'password'; 생성한 계정을 'A' 테이블에만 접근할 수 있도록 권한을 주려 한다. mysql> GRANT ALL PRIVILEGES ON 테이블명.* TO '사용자명'@'%' IDENTIFIED BY '패스워드' WITH GRANT OPTION; mysql> GRANT ALL PRIVILEGES ON A.* TO 'joadmin'@'%' IDENTIFIED BY 'password' WITH GRANT OPTION; Error Code: 1221. Incorrect usage.. 2020. 7. 5. #5. SSL 인증서 설정 Contents #1. CentOS7 서버 생성 및 설정(With 네이버 클라우드 플랫폼) #2. Root 계정 설정 #3. MariaDB 설치 및 설정 #4. Nginx 설치 및 설정 #5. SSL 인증서 설정 5-1 Let`s Encrypt 설치 및 설정 5-2 Nginx 설정 5-3 인증서 갱신 (대망의)5. SSL 인증서 설정 5-1 Let`s Encrypt 설치 및 설정 yum install –y git git clone https://github.com/letsencrypt/letsencrypt yum 명령어로 git 을 설치해 준 뒤, Let`s Encrypt 를 clone 받는다 letsencrypt 폴더가 생성되면 성공 ./letsencrypt-auto certonly —standalon.. 2020. 3. 19. 도메인 신청하기 (With가비아) 가비아를 통해서 도메인을 신청하는 방법을 간단히 적어 보겠다. 가비아를 선택한 이유는 타사 대비 페이지가 이쁘다(전지적FE개발자시점) + 페이지가 Vue.js 로 되어있다 :D 메인 페이지에서 도메인을 클릭 후 내가 사용할 도메인(joweb) 을 검색한다. 무난한 가격의 .site를 선택해주었다. 기간을 1년으로 설정하면 이벤트 가격으로만 구입 할 수 있다. 나머지는 개인정보 입력, 동의 절차를 진행 후 서비스 비용 결제 를 하면 완료! 마이페이지 에서 관리툴 로 이동한다. DNS 레코드 설정 버튼을 누른다. 설정 버튼을 누르면 아래와 같이 나온다. 호스트 www와 나의 공인 IP를 입력 후 확인 호스트 @ 와 나의 공인 IP를 입력 후 확인 후 저장버튼을 누르면 세팅이 완료 된다! 5~10분 정도 ? .. 2020. 2. 26. #4. Nginx 설치 및 설정 Contents #1. CentOS7 서버 생성 및 설정(With 네이버 클라우드 플랫폼) #2. Root 계정 설정 #3. MariaDB 설치 및 설정 #4. Nginx 설치 및 설정 4-1 설치 4-2 conf 설정 4-3 권한 설정 #5. SSL 인증서 설정 4. Nginx 설치 및 설정 4-1 설치 Nginx.repo 파일을 생성 및 설정 vi /etc/yum.repos.d/nginx.repo vi 명령어로 해당 경로에 nginx.repo파일을 생성 한 후, 아래와 같이 내용을 채워 놓았다. [nginx] name=nginx repo baseurl=http://nginx.org/packages/centos/7/$basearch/ gpgcheck=0 enabled=1 Nginx 설치 명령어 yum .. 2020. 2. 25. [Vuetify] Data table 무한뎁스 처리 환경 - Node v10.16.0 - Vuetify2 이번 예제는 Vuetify Data table의 expandable-rows의 응용버전이다. 테이블 row 우측의 화살표를 누르면 Peek-a-boo! 내용이 펼쳐지는데, 이 안쪽 내용을 무한뎁스로 처리해 보았다. 기괴한 모양이 되었다....; 테이블 구분을위해 vue-randomcolor를 사용했다. List.vue 기존 Peek-a-boo! 자리에 재귀함수처럼 나 자신을 계속 호출해주는 List.vue를 삽입해주었다. 이때 주의할 점은 name 옵션의 이름과 compntents의 이름이 일치해야 된다. 이 규칙이 어긋나면 아래와같은 오류를 뿜게된다. 전체 소스는 아래 git주소에서 확인 가능합니다. https://vuetifyjs.com/en/co.. 2020. 2. 13. #3. MariaDB 설치 및 설정 Contents #1. CentOS7 서버 생성 및 설정(With 네이버 클라우드 플랫폼) #2. Root 계정 설정 #3. MariaDB 설치 및 설정 #4. Nginx 설치 및 설정 #5. SSL 인증서 설정 3. MariaDB 설치 및 설정 https://downloads.mariadb.org/mariadb/repositories/#mirror=dotsrc MariaDB - Setting up MariaDB Repositories - MariaDB To generate the entries select an item from each of the boxes below. Once an item is selected in each box, your customized repository configur.. 2020. 2. 8. #2. Root 계정 설정 Contents #1. CentOS7 서버 생성 및 설정(With 네이버 클라우드 플랫폼) #2. Root 계정 설정 2-1 SSH 접근 및 root 계정 패스워드 변경하기 2-2 FileZilla 접근 #3. MariaDB 설치 및 설정 #4. Nginx 설치 및 설정 #5. SSL 인증서 설정 2. Root 계정 설정 서버를 생성 한 뒤 putty, filezilla 를 사용해서 서버를 관리하기 위한 초기 작업을 진행하도록 하겠다. 2-1 SSH접근 및 root 계정 패스워드 변경하기 서버를 생성할때 받았던 키파일(.pem) (1-1 인증키설정 스크린샷 참고) 을 가져와 비밀번호 확인 할 수있다. putty를 실행하여 HostName 입력란에 공인IP를 입력 한 뒤 Saved Sessions입력란에 .. 2020. 1. 18. [Vuetify] 다중 업로드 모달창 만들기 환경 - Node v10.16.0 - Vuetify2 Vuetify의 Dialog와 vue-upload-component 라이브러리를 활용해서 다중 업로드 모달창을 만들어 봤다. (※개인적으로 팝업/모달 이라고 부르는데 뷰티파이에서는 다이얼로그 라고 표현하여 본 게시물에서는 Dialog로 통일하겠다.) 1. Page.vue - Dialog를 열기위한 버튼영역 cloud_upload Upload 2. Page.vue - Dialog 영역 cloud_upload 파일 업로드 clear 3. Page.vue - Script 영역 import Upload from "./Upload.vue"; export default { components: { Upload }, data: ()=> ({ dialog: fals.. 2020. 1. 18. Vuetify 연습장 Vuetify는 bootstrap같은 UI 프레임 워크이다. Vue + Beautify의 합성어로 'Vue를 아름답게 하다.' 라는 뜻을 가지고있다고 한다. Vuetify공식 홈페이지에 나와있는 예제를 간단하게 연습해가며 채워가보도록 하겠다. Vuetify공홈 https://vuetifyjs.com/en/introduction/why-vuetify Why Vuetify? — Vuetify.js Vuetify has an extremely active community, provides easy to use Material Design components and is consistently updated. vuetifyjs.com Vuetify CND으로 시작하기 https://vuetifyjs.com/e.. 2020. 1. 11. #1. CentOS7 서버 생성 및 설정(With 네이버 클라우드 플랫폼) Contents #1. CentOS7 서버 생성 및 설정(With 네이버 클라우드 플랫폼) 1-1 서버 생성 2-2 공인IP 생성 #2. Root 계정 설정 #3. MariaDB 설치 및 설정 #4. Nginx 설치 및 설정 #5. SSL 인증서 설정 1. CentOS7 서버 생성 및 설정(With 네이버 클라우드 플랫폼) 네이버 클라우드 플랫폼 계정을 생성한 뒤 해당 탭에서 서버를 생성 할 수 있다. 결제 정보를 등록하면 Micro서버를 1년동안 무료로 사용 할 수있다. 1-1 서버 생성 인증키는 잃어버리지 않는곳에 잘 저장해 놓는다. 신규 ACG생성을 클릭하면 'ACG생성' 팝업창이 나오는데 아래와 같이 입력 한다. 접근소스 - 0.0.0.0/0 으로 입력하면 모든 IP대역의 접근을 허용하게 된다. .. 2020. 1. 8. 이전 1 2 다음 반응형
