🗝️소프트웨어/🏆Vue

vue에서 eslint 사용하기(eslintrc.js)

ESLint는 자바스크립트 코드에서 오류를 찾고 코드 스타일을 유지하기 위한 뛰어난 도구 중 하나인데요. 이 도구는 설정 파일인 .eslintrc.js을 통해 규칙을 구성할 수 있습니다. 이 파일은 일반적으로 프로젝트의 루트 디렉토리에 위치하며, ESLint의 동작을 변경하고 프로젝트의 품질을 개선하는 데 중요한 역할을 합니다. .eslintrc.js 파일을 수정하려면, 프로젝트 디렉토리에서 해당 파일을 열어서 원하는 변경 사항을 수행하면 됩니다. 예를 들어, 규칙을 추가하거나 삭제하거나 구성 옵션을 변경할 수 있습니다. 변경 사항을 저장하면 즉시 적용됩니다. 그러나 파일을 수정하기 전에, 파일의 내용을 이해하는 것이 중요합니다. ESLint 규칙을 변경할 때는 규칙이 어떻게 동작하는지, 해당 변경이 코..

[Vue.js] 조건부 렌더링과 버튼 활성화하기

v-show 조건부 디렉티브를 이용하여, vue 에서 페이지가 번호가 1을 벗어나면, 해당 설정 버튼 값을 제어하지 못하도록 하려고 한다. v-show는 조건부 디렉티브로서, 반환 값이 true와 false 값을 가진다. 다른 값은 들어갈 수 없다. true : 화면이 보여짐 false: 화면이 안보임 *하지만, 개발자 모드로 보면, 버튼이 삭제되지 않는 것을 확인할 수 있다. 대신, 값이 false가 되면, span 태그 위에 있는 ::before 이 사라진다. 사용전 사용후 처음에, this 를 잘 못 사용해서 계속 버튼이 활성화가 안되었는데, 이유를 알았다. 사실, Vue.js 에서는 조건문을 이용하여 조건부 렌더링을 할 수 있다. v-if, v-else, v-else-if 구문이 있다. 하지만, ..

[Vue.js] props 이용하기

vue의 문법을 익히려면 여러가지 유스케이스를 직접 다뤄봐야 한다. props를 이용하여, 자식 컴포넌트의 구조를 재활용이 가능한 구조를 보이고, 속성을 어떤식으로 보내는지 살펴보는게 이번 글에서의 핵심이다. 또한 부모 컴포넌트에서는 자기 데이터를 어떤식으로 바인딩하는지 :(콜론) 을 어떻게 사용하는지 확인해보자. App.vue 1. 컴포넌트 파일을 불러올때는 import / from 을 활용하도록 한다. 2. 내부적으로 사용하려는 데이터는 data 안에 넣어두고, :color 이런식으로 바인딩해서 사용하도록 한다. import MyBtn1 from './components/MyBtn1.vue' export default { components: { MyBtn1 }, data () { return { c..

npx, npm의 차이와 vscode 실행 방법

1. npx 와 npm npx로 프로젝트 다운받기 📌 버전 관리가 없는 새로운 프로젝트를 다운로드 받는 것과 같음 npx degit 계정이름/저장소이름 다운받을경로 $ npx degit ParkYoungWoong/webpack-template-basic vue3-webpack-template - npx : degit을 설치하지 않고도 사용할 수 있는 nodejs명령어 npx - degit : 원격저장소 github에 있는 특정 저장소를 현재 로컬 경로에 다운로드 참고로 npx란 npx는 새로운 패키지 관리 모듈이 아님!! 자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 5.2.0 버전부터 새로 추가된 도구 npm과 비교대상이 아닌 npm을 좀 더 편하게 사용하기 위해서 np..

[Vue.js]특정 데이터들의 값들을 하이라이팅 할 수는 없을까?

현업에서 진행중인 프로젝트에서 Vue를 활용하여 Front 단을 구축하는데, 다음과 같은 화면에서 공급자명, 전자세금계산서승인번호, 사업자번호, 공급가액, 세액 등은 API를 활용해서 데이터를 받아오고 있는 상황이다. 그리고 증빙일, 전기일, 지급예정일 등은 데이터 값을 사용자 기준 날짜를 계산하여, 자동으로 기입되며, 다음과 같이 Edit 할 수 있게 구성되어져 있다. 그리고 적요, 의견, PO번호, 계좌번호 등은 사용자가 값을 세팅할 수 있게, 자유도를 높여 놓았다. 하지만, 여기서 Vue가 익숙하지 않아서, 머리속에 생각나는 기능은 있지만 아직 구현을 하지 못한게 존재한다. 바로 증빙일, 전기일, 지급예정일 같은 날짜는 자동으로 입력되는 값인데, 사용자가 변경할 수 있는 값인데도 불구하고, 일반 값..