앙큼한 개발기록

nuxt 를 통해서 엑셀 파일을 읽는 방법에 대해서 알아보자. 우선 html file의 onChange 이벤트로 파일 데이터를 가져온다. ... data() { return { fileReader: null, sheetNameList: [], excelDataList: [] } }, ... readExcelFile(event) { let input = event.target let file = input.files[0] let fileName = file.name let extension = fileName.split('.')[1] let includeExtension = ['xlsx', 'csv', 'xls'] if (!includeExtension.includes(extension)) { alert(..

사용한 템플릿 : nuxt library - xlsx - file-saver 예제 소스 코드: 출력 {{ value }} {{ product.index }} {{ product.name }} {{ product.price }}

초기에 프로젝트를 만들고 나서 이름을 바꾸고 싶은데 이걸 맘대로 바꾸어도 되나 싶어 테스트 프로젝트를 만들어 테스트 해보고 바꾸어 보았다. 이런 내용을 정리한 블로그가 없어서 정리해 보려고 한다. 1. build.gradle(app) 의 namespace,applicationId 바꾸기 plugins { ... } android { namespace 'com.example.test' compileSdk 33 defaultConfig { applicationId "com.example.test" ... } buildTypes { ... } compileOptions { ... } kotlinOptions { jvmTarget = '1.8' } buildFeatures { viewBinding true } ..

회사에서 다른 사람이 만든 프로젝트를 수정하던 중 메인 폼의 partial class 를 다른 디자인 cs 파일로 만들어 정의해 놓은 것을 보고 이걸 이렇게 써도 되나.... 라는 생각이 들어 찾아보니 딱히 이걸 어떻게 쓰라는 말이 있지는 않아 정리를 좀 해보자 글을 작성한다. (사실 그렇게 쓰면 안된다...그리고 파일 네이밍도 안맞고..) 공식 사이트 에서는 다음과 같이 정의한다. [partial은 클래스, 구조체, 인터페이스 또는 메서드의 정의를 둘 이상의 소스 파일에 분할할 수 있다.] 이말인 즉 사실 class 말고도 struct, interface, function 도 가능하다는 말이다. 하지만 우리는 보통 class로 많이 사용하고, c#에서도 폼을 만들면 partial class로 하나는 개..

mixin에 선언되어 있는 공통 컴포넌트를 page에서 보여주려고 하니 위에 에러가 발생했다. 선언되어 있는 공통 화면을 별로도 호출 하면서 생기는 문제 였는데 mixin에 호출 되어 있으면 자기 자신이 자기 자신을 호출하게 되는 문제가 발생하였다. vue를 사용함에 있어 혹은 다른 프레임워크를 사용함에 있어서 컴포넌트의 재사용성은 굉장히 중요하다. 공통 컴포넌트를 만들어 놓고 해당 컴포넌트를 호출만 한다면 개발의 시간을 단축 함과 동시에 기능, 유닛 테스트도 편리 하여 공통 컴포넌트화 시켜서 여러 곳에서 사용하도록 개발하는 경우가 많이 생긴다. 이런 경우에 modal 창이나 confirm 창, alert 창을 공통 컴포넌트고 만들고 . 공통 컴포넌트가 동일한 부모, 혹은 자기 자신에서 호출 되는 경우에..

자바스크립트 함수에서 전달 받는 파라미터는 초기 값을 설정해주는 것도 가능하고, 배열로도 받을 수 있고, 객체로도 전달이 가능하다. 주로 객체나 배열로 전달하면 통체로 전달하지만 각각의 객체에 대한 프로퍼티를 보여주거나 배열의 각 항목별 선언된 내용이 필요한 경우 해당 항목을 바로 사용할 수 있다. - 예시 // 이런 객체가 존재할때 let student = { name: "name" age: 15 } // 이름을 가지고 오고 싶은 함수라면 function getName (obj) { return obj.name } // 이런 방식도 가능하다 function getNameByParam({name}) { return name } 아래처럼 썼을 때 장점은 함수에서 전달받은 프로퍼티가 뭔지 알 수 있다는 점이..

클라이언트에서 서버로 데이터를 전달하여 저장하는 과정에서 위에 에러가 발생했다면 들어가는 데이터의 길이, 타입을 확인 해봐야 된다. 나 같은 경우 char(4)로 4글자 code로만 들어가게 만들었는데 4글자를 초과 한다거나 integer로 선언해 놓고 "10,000", "10000" 처럼 들어가는 경우에도 에러가 발생한다. 들어가는 데이터 값을 확인 해 보자.

javascript 에서 Object를 복사하는 방법은 여러가지가 있다. 1. lodash 2. json 3. separator ... 위에 언급한거 외에도 다른 라이브러리를 사용해도 된다. object를 복사해서 사용하는 이유는 Object 가 참조 하고 있는 주소 값때문에 단순하게 let이나 var로 선언해서 사용할 경우 해당 참조값 모두가 바뀔수 있기 때문에 동일한 데이터를 가지고 가공해서 사용하고 싶을 때 많이 사용 된다. 나는 위에 중에서 json 방식을 공통 함수로 만들어서 사용 하고 있다. 내가 사용한 함수는 다음과 같다. cloneObject(value) { return JSON.parse(JSON.stringify(value)) } 심플하고, 라이브러리 안써도 되고, 함수로 써서 알기 쉽..

맨날 쓰고 맨날 까먹는 sequelize migration 정리 command sequelize migration:create --name 파일명 sequelize db:migrate sequelize db:migrate:undo addColumn module.exports = { up: async (queryInterface, Sequelize) => { await queryInterface.addColumn('테이블명', '변수명', { type: Sequelize.타입[BOOLEAN, STRING(4, 8, 16), TEXT, INTEGER], comment: "" ... }) } } removeColumn module.exports = { up: async (queryInterface, Seque..

sequelize 를 사용하면서 가장 많이 고민하는 부분인 데이터 베이스 구조와 api 의 속도 개선을 위해서 어떤식으로 진행했는지에 대해 간단하게 적어 보고자 한다. 다른 직원분들이나 회사 동료들에게 데이터 다이어트를 하라고 하거나 속도 개선을 하자고 하면 어디서 부터 시작해야 될지 모르는 분들이 많은것 같다. 나또한 예전에 작업하면서 아무리 해도 안되는 부분이 있었지만 그래도 어느정도 내가 여태까지 해왔던 아주 심플한 방법으로 개선했던 점들을 공유 한다. 1. 데이터 미리 받아오기 sequelize에서 include를 거는걸 최소화 하고 배열에서 가져올때에는 관계 되어 있는 데이터를 미리 가져와서 공유 데이터에 넣어 놓고 (vuex, redux등등..) 사용한다면 api 속도가 미친듯이 빨라지는 효과..