[그림 1]의 data 배열의 값을 사용하고자 했다. 그래서 .data 키로 접근하고자 시도하였으나 "undefined"라는 결과만 출력되었다. 여러 차례 시도해 봤으나 결과는 동일했다. 다시 코드를 찬찬히 살펴보고 있는데 헛웃음이 나왔다. async $get(url) { return await axios.get(url).catch((e) => { console.log(e) }).data } 위 코드와 같이 .data를 catch에다 붙였던 것이다. 그러니 백날 시도해도 "undefined"일 수밖에... async $get(url) { return ( await axios.get(url).catch((e) => { console.log(e) }) ).data }, 위와 같이 코드를 수정하자 [그림 2]..

| 이슈 고객사 정보를 서버 없이 로컬에서 text 파일을 이용해 영속적으로 관리하면 어떨까라는 생각을 해봤었다. 구글링 끝에 사용한 기술은 file-saver 모듈을 이용하는 것이다. 코드 작성과 테스트를 반복하면서 확장자를 txt로 하지 말고 json으로 하는 게 좋겠다고 생각했다. 작동 방식은 프로젝트가 실행되면 customers.json 파일을 로드하여 고객사 정보를 가져온다. 고객사 추가(또는 삭제) 기능을 수행하면 customers 객체에 변화가 발생한다. 변화된 customers 객체는 JSON.stringify로 변환되어 file-saver를 통해 기존의 customers.json 파일을 덮어 씌워 저장된다. 그런데 매번 고객사를 추가(또는 삭제)할 때마다 [그림 1]과 같이 탐색기가 뜬다..

| 구현 기능 목록 및 진행 현황 ☑ xlsx 파일을 읽어와 사용자가 입력한 로트번호를 조회 ☑ 조회한 정보 수정 기능 ☑ 고객사 정보 관리(모달): ☑ checkbox 고객사 삭제 기능 ☑ 조회 정보 페이징 ☑ Packing List 생성, 인쇄, xlsx 내보내기(모달): ☑ Packing List 생성, ☑ 인쇄, ☑ xlsx 내보내기 ☑ 스타일 작업(Bootstrap) | 이슈 npm의 print-js를 이용해 간단하게 Packing List modal을 출력하는 기능을 완성했다. 처음에는 어떤 모듈을 써야 할지 몰랐는데 조금만 검색해도 이거면 되겠구나 싶었다. https://www.npmjs.com/package/print-js print-js A tiny javascript library to..

| 구현 기능 목록 및 진행 현황 ☑ xlsx 파일을 읽어와 사용자가 입력한 로트번호를 조회 ☑ 조회한 정보 수정 기능 ☑ 고객사 정보 관리(모달): ☑ checkbox 고객사 삭제 기능 ☑ 조회 정보 페이징 □ Packing List 생성, 인쇄, xlsx 내보내기(모달): ☑ Packing List 생성, □ 인쇄, ☑ xlsx 내보내기 ☑ 스타일 작업(Bootstrap) | 이슈 input에 placeholder를 이용해 메시지를 넣을 수 있었다. 그런데 Bootstrap에서는 label을 placeholder 메시지처럼 표현할 수 있었다. [그림 1]의 메인화면과 [그림 2]의 고객사 관리 모달에 이 기능을 적극적으로 적용하였다. [그림 2]의 고객사 관리 모달에서 checkbox를 통해 체크된 ..

| 구현 기능 목록 및 진행 현황 ☑ xlsx 파일을 읽어와 사용자가 입력한 로트번호를 조회 ☑ 조회한 정보 수정 기능 ☑ 고객사 정보 관리(모달): ☑ checkbox 고객사 삭제 기능 □ 조회 정보 페이징 □ Packing List 생성, 출력, xlsx 내보내기(모달) □ 스타일 작업(Bootstrap) | 문제와 해결 data() { return { customers: [ { code: '001-00-00000', company: 'A사' }, { code: '002-00-00000', company: 'B사' }, { code: '003-00-00000', company: 'C사' } ], 위와 같이 customers 배열 안에 고객사 정보를 객체로 넣어 두었다. customers 배열의 요소(..

xlsx 파일의 데이터를 json으로 가져오려고 xlsx 모듈을 설치하였다. 설치한 명령어는 다음과 같다. npm i xlsx 그 결과 package.json 파일에 다음과 같이 잘 설치되었다. "dependencies": { ... "xlsx": "^0.18.5" }, 하지만 "npm run serve"로 실행하니 다음과 같은 에러가 발생했고, xlsx가 정상적으로 작동하지 않았다. export 'XLSX' (imported as 'XLSX') was not found in 'xlsx' (possible exports: CFB, SSF, parse_xlscfb, parse_zip, read, readFile, readFileSync, set_cptable, set_fs, stream, utils, ve..

부트캠프 20차시에서 Vue.js의 slot 기능을 적용한 Modal 구현을 실습하였는데 그 내용을 다음과 같이 정리하였다. 자식 컴포넌트를 부트스트랩 디자인의 Modal 컴포넌트로 만들고 부모 컴포넌트에서 자식 컴포넌트를 이용해 하나 이상의 Modal을 구현하고자 한다. | 자식 컴포넌트 부트스트랩 적용 components의 fragments 폴더에 SlotModal.vue 파일을 생성한 후 태그 안에 "부트스트랩 > Components > Live demo"에서 이하를 copy 하여 붙여 넣는다. Modal title ... Close Save changes slot 및 v-bind 적용 부모 컴포넌트에서 하나 이상의 Modal을 생성하기 위해서 id를 props의 modalId와 바인딩한다. mod..

데이터 바인딩 문자열 문자열 바인딩은 단방향 데이터 바인딩이다. // src/views/DataBindingHtmlView.vue {{ htmlString }} // {{}}는 문자열을 바인딩한다. // v-html 디렉티브(Directive)를 사용하면 태그로 바인딩한다. input v-model을 이용하여 사용자의 입력 값, 자바스크립트 함숫값의 양방향 데이터 바인딩이 가능하다. Vue의 막강한 기능이다. 클릭 변경 input 태그에서의 v-model은 value 속성과 양방향으로 연결되어 있다. [그림 3]은 아래 코드의 실행 결과이다. 아래 코드에서 v-model.trim과 text, number 타입의 용법을 유의해서 보자! 클릭 변경 + = {{ num1 + num2 }} + = {{ num3..