분류 전체보기 24

[Vue3] Code Mirror 적용하기

vue3에선 아래 npm모듈로 편리하게 v-model을 활용하면서 양방향 데이터 전달이 가능하다 vue-codemirrorCodeMirror code editor component for Vue. Latest version: 6.1.1, last published: 2 years ago. Start using vue-codemirror in your project by running `npm i vue-codemirror`. There are 543 other projects in the npm registry using vue-codemirror.www.npmjs.com1. npm install vue-codemirror2. main.js에 importimport VueCodemirror from 'v..

Vue 2024.05.29

[Vue3] Quasar Framework Boot File

.quasar 파일 내부는 건들지 않는다. 특히, app.js파일! quasar 내부에서 global property등록을 위해선 1. src>boot 폴더에 파일 추가하여 관리 - constants.js파일에 global property 설정 import { boot } from 'quasar/wrappers'; export default boot(({ app }) => { app.config.globalProperties.hello = 'Hello Quasar!!'; }); 2. 추가한 파일 인식하도록 config에 추가 //quasar.config.js 파일 내 boot: ['constants'], 3. Test // App.vue파일 ... export default defineComponent(..

Vue 2023.03.29

MAC OS brew부터 node, nvm 설치, node version 변경까지

집에있는 Macbook air 를 팔려고 포맷하려다가 앱생태계는 다다익선이므로, 집에서 토이플젝 용도로 세팅을 해보았다. 나조차도 자주 까먹어서 맨날 찾아보니 이 참에 한번 정리해봄 1. brew 설치 brew는 맥용 패키지 관리자이다. 홈페이지에 있는대로 터미널에 복붙한다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" Homebrew The Missing Package Manager for macOS (or Linux). brew.sh ** 내 맥북버전은 디폴트가 zsh여서 bash를 선호하는 나로써 bash로 터미널 기본값을 변경해주었다. 아래 명령어를 입력하고 터미널을 다시..

카테고리 없음 2023.03.19

[GIT] 2FA Token 발행하여 Clone하기

회사에서 새로운 git 레파지토리가 이동하면서 신규 project를 clone 하려고 했다. 올바른 ID/PW를 입력했지만 다음과 같은 에러가 났다. Cloning into 'project name'... remote: HTTP Basic: Access denied. The provided password or token is incorrect or your account has 2FA enabled and you must use a personal access token instead of a password. See http://git레파지토리 주소 fatal: Authentication failed for http://git레파지토리 주소 [원인] gitlab에 2fa인증 등록시 기존 PW으로 인증..

Git 2023.03.08

[Vue] ESLint error : multi-word-component-name

[왜 이런 에러가?] - Vue 에서는 html 요소와의 중복성 및 혼란성 제외를 위해 vue 파일 명을 조합 단어(ex. TodoItem, todo-item..)를 권장하는데, 단일 단어를 사용했다면 나는 에러. - 아래 에러처럼 Index.vue파일명이 문제. [해결방법] ESLint config에 아래 내용 추가 *default 입력 시 모든 파일에 대해 적용 (따로 파일명 명시하여 해당 파일에만 적용가능) rules: { "vue/multi-word-component-names": ["error", { 'ignores': ['default'] }] } 참고. 공식문서 vue/multi-word-component-names | eslint-plugin-vue eslint.vuejs.org

Vue 2023.03.06

SPA와 MPA

내가 기억하기 위한 개념 정리 내 기준 중요한 장단점까지만 기술한다 MPA란? - Multiple Page Application - Server Side Rendering 방식으로 렌더링 - 새로운 페이지를 요청할때마다 정적 리소스까지 함께 다시 렌더링 - 장점 : *SEO 친화적임. 변경된 데이터 항목까지 모두 확인 가능 - 단점 : 데이터 변경 시 다시 렌더링 해야하므로 속도 느리고 사용자 경험 떨어짐 SPA란? - Single Page Apllication - Client Side Rendering 방식으로 렌더링 - 단일 페이지로 구성된 웹 어플리케이션. - 정적 리소스는 최초 한번에 다운로드 - 화면 이동 시 새로고침 없이 필요한 데이터만 json형태로 전달받아 동적으로 렌더링 - 장점 : 빠른..

Vue 2023.02.15

[Vue] Jest 환경설정

기존 Vue 프로젝트에 Jest로 테스트 환경을 구성했다. 매일 npm run serve 로 로컬에 서버 구동하고, 직접실행해서 콘솔이나 네트워크에서 output값을 확인했는데, 하면서도 참 비효율적이다 생각했다. (Jest말고 2022년에는 Vitest가 1등...https://2022.stateofjs.com/en-US/libraries/testing/ 할거너무많네..) vue project create할 때, jest를 선택하여 미리 환경을 구성할수도 있지만, 나는 이미 있는 프로젝트에 설치해야하는 경우였다. 1. Jest Module Install *Jest 공식 URL - https://jestjs.io/docs/getting-started npm i -D jest 2. package.json ..

Vue 2023.02.14

[Docker] Vue.js 프로젝트 올리기

차근차근 Docker 익히기 개발해왔던 front 소스를 Docker 위로 올려봤다. 1. Node Image Pull Vue를 구동하려면 Node 환경이 필요한데, 내 소스의 경우 16.13 버전을 사용한다. docker pull node:16.13 ! 첨에 이런거 뜨면 Desktop Docker를 먼저 구동시켜주자. (Mac 환경) 2. Creat Dockerfile Front 폴더로 들어가서 Dockerfile을 생성한다. FROM node:16.13 #폴더 위치 WORKDIR ~/Farming/ggms_fe #download할 module목록 COPY package.json . #현재 폴더에 있는 모든 폴더와 파일을 ADD 를 통해 가져옴 ADD . . #package.json 에 정의한 modu..

Docker&Kubernetes 2023.02.13

Gunicorn이란?

웹서버에서 Django Application 호출하기 위해선, WSGI 서버가 필요하고, (python manage.py runserver할수는 없자나..) Gunicorn은 WSGI 서버의 한 종류이다. (또 다른 WSGI 서버로 uwsgi도 있는데, Gunicorn성능이 매우 좋아져서 대부분 이걸 사용!) * Web Server와 WAS 프레임워크 - Web Server는 정적인 HTML 페이지를 반환 (Apache, Nginx).. - Web Server가 동적으로 데이터를 반환하도록 하기 위해서는 WAS프레임워크가 필요. (flask, django, rails, node.js) - WAS: Web Server위에서 동작하는 서버 운영프로그램 *WSGI (위스키)가 뭐야? - WSGI (Web Se..

Django 2023.02.09