전체 글 240

객체 분해 할당(Object Destructuring Assignment)

객체 분해 할당(Object Destructuring Assignment)은 ES6에서 추가된 기능으로, 객체의 속성들을 변수로 분해해서 할당하는 방법입니다. 객체 분해 할당은 객체의 속성에 접근해서 변수로 할당하는 것과 유사합니다. 다만, 객체 분해 할당을 사용하면 코드가 간결해지고 가독성이 좋아지는 장점이 있습니다. 객체 분해 할당은 중괄호({})를 사용하여 객체를 선언하고, 변수 이름을 할당할 속성 이름으로 지정합니다. 이 때, 할당할 변수 이름은 객체의 속성 이름과 일치해야 합니다. 예를 들어, 다음과 같은 객체가 있다고 가정해보겠습니다. const person = { name: 'John', age: 30, city: 'New York' }; 이 객체를 분해해서 name, age, city 변수..

Frontend/javaScript 2023.04.28

[javaScript] map() 함수 (number, string, object arr 예시)

map() map() 함수는 JavaScript 배열에서 사용할 수 있는 내장 함수 중 하나로, 배열의 모든 요소를 변환하고 새로운 배열을 생성합니다. map() 함수는 각 배열 요소에 대해 콜백 함수를 호출하고, 콜백 함수가 반환한 값을 새로운 배열에 추가합니다. 이 때 원래 배열은 변경되지 않고, 새로운 배열만 생성됩니다. arr.map(callback(element, index, array), thisArg) callback: 각 배열 요소에 대해 호출할 함수로, 콜백 함수는 다음과 같은 매개 변수를 받습니다. element: 현재 처리 중인 배열 요소 index: 현재 처리 중인 요소의 인덱스 array: map() 함수가 호출된 배열 thisArg (선택 사항): 콜백 함수에서 this 키워드가..

Frontend/javaScript 2023.04.28

eslint-disable not working

ESLint ESLint는 자바스크립트 코드에서 문제를 검사하고 일관성 있는 코드 스타일을 유지할 수 있도록 도와주는 정적 코드 분석 도구입니다. ESLint는 사용자가 직접 규칙을 만들거나 다른 사용자가 만든 규칙을 사용할 수 있는데 이 때문에 코드의 문법에 문제가 없어도 규칙을 어기면 에러가 뜹니다. 미리 작성된 template기반으로 동적으로 Vue 코드를 생성해주는 프로그램을 개발중에 띄어쓰기, 줄바꿈 같은 규칙까지 지키면서 만들 수가 없어서 eslint-disable을 사용했습니다. Disable vscode의 Quick Fix에서는 두가지 disable 옵션이 있습니다. - Disable prettier/prettier for this line 에러 나는 코드 위에 해당 구문을 추가하는데 이는..

Frontend/javaScript 2023.04.27

[JAVA] 자바 외부 파일/ 외부 프로그램/ 명령어 실행 (exec)

exec() exec() 메소드는 Runtime 클래스의 getRuntime() 메소드를 사용하여 Runtime 객체를 생성한 다음, Runtime 객체의 exec() 메소드를 호출하여 외부 프로그램을 실행합니다. exec() 메소드는 실행할 외부 프로그램의 이름, 매개변수, 작업 디렉토리 등을 인자로 전달할 수 있습니다. public Process exec(String command, String[] envp, File dir) 매개변수 command: 지정된 시스템 명령. envp: 문자열 배열, 각 요소에 name=value 형식의 환경 변수 설정이 있거나 하위 프로세스가 현재 프로세스의 환경을 상속해야 하는 경우 null입니다. dir: 하위 프로세스의 작업 디렉토리, 하위 프로세스가 현재 프로세..

Backend/JAVA 2023.04.26

[javaScript] 파일 업로드, 다운로드 (파일 깨짐 해결, readAsArrayBuffer, btoa, _arrayBufferToBase64)

1. 파일 손상문제 발생 자바스크립트 단에서 파일을 DB에 업로드, 다운로드를 진행하다가 파일이 깨지는 문제가 발생했습니다. 아래는 문제가 발생했을 당시 코드입니다. var reader = new FileReader(); const file = document.getElementById("fileInput").files[0]; const fileName = file.name; const fileSize = file.size; const fileType = file.type; let fileBlob = ""; reader.readAsArrayBuffer(file); reader.onload = function (evt) { fileBlob = evt.target.result; let data = { Nam..

Frontend/javaScript 2023.04.25

[MariaDB] 환경 구축 (생성, 삭제, 권한, 백업)

1. DATABASE 생성 1-1.Window Menu – MySql Client 진입. 1-2.DB 변경 >> USE MYSQL - MariaDB [(none)] 에서 MariaDB [(mysql)] 로 변경 됩니다. 1-3.DATABASE 생성 >> CREATE DATABASE [DATABASE명]; 1-4.DATABASE 조회 >> SHOW DATABASES - 앞에서 생성한 DATABASE 확인할 수 있습니다. 2. 계정 생성 2-1. 계정 생성 >> CREATE USER ‘[USER_NAME]‘@’[호스트]’ IDENTIFIED BY ‘[PASSWORD]’; - 입력한 USER 명으로 새로운 USER 가 생성됩니다. * 호스트에 ‘%’ 는 모든 이라는 의미이다. 2-2. 사용자 계정 조회 >> ..

SQL/RDBMS 2023.04.25

컴포넌트 간 데이터 전달

1. v-model v-model 디렉티브는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 양방향 바인딩 할 수 있게 해줍니다. 자식 컴포넌트에서 이벤트를 발생시켜 부모 컴포넌트에 데이터를 전달할 수 있습니다. // Parent.vue // ChildComponent.vue 위의 코드에서 Parent.vue에서 ChildComponent를 호출할 때 v-model 디렉티브를 사용합니다. ChildComponent.vue에서는 localMessage 변수를 사용하여 자식 컴포넌트의 데이터를 다루고, watch 속성을 사용하여 localMessage 값이 변경될 때 input 이벤트를 발생시켜 Parent.vue에서 부모 컴포넌트에 데이터를 전달합니다. 2. prop prop은 부모 컴포넌트에서 자식 컴포넌트로..

Frontend/vue3 2023.04.19

[vue3] v-for, v-if 같이 사용(computed/watch)

Vue.js 2.3 버전부터는 v-for와 v-if를 함께 사용할 수 있도록 v-for 디렉티브에 v-if를 추가할 수 있는 기능이 추가되었습니다. 따라서 Vue.js 2.3 이상의 버전에서는 v-for와 v-if를 함께 사용하는 것이 가능합니다. 하지만 Vue.js에서는 v-for와 v-if를 함께 사용하는 것은 좋지 않습니다. 이유는 v-for 디렉티브가 먼저 수행되고, 그 후에 v-if 디렉티브가 실행되기 때문입니다. 이로 인해 원하지 않는 결과를 가져올 수 있습니다. computed v-for와 v-if를 함께 사용하려면 주의가 필요합니다. 만약 v-if를 사용하여 데이터를 필터링하려면, v-for를 사용하는 대신에 computed 속성을 사용하여 필터링 된 데이터를 반환하도록 하는 것이 좋습니다..

Frontend/vue3 2023.04.19

[Vue] 자식 컴포넌트 데이터 가져오기(ref)

보통 부모-자식 컴포넌트 간에 통신에는 props와 $emit을 이용합니다. 하지만 아래 코드에서는 ref를 사용하여 자식컴포넌트의 데이터를 가져왔는데 동적으로 자식 컴포는트가 교체되는 모달에서 공통으로 필요한 기능인 getData 버튼을 부모 컴포넌트에 위치시켰기 때문입니다. 부모에서 $emit -> 자식에서 $emit -> getData 이런식으로 해도 될 것 같긴한데 코드가 어지러워서 ref를 이용하는 방식을 사용해봤습니다. Get Data from QueryLst 위의 예시에서 자식컴포넌트의 인스턴스에 접근하기 위해 this.$refs.childComp를 사용하고, 이를 통해 자식 컴포넌트의 data 속성에 접근하여 데이터를 가져오고 있습니다. 다만, ref를 사용하여 자식 컴포넌트의 인스턴스에 ..

Frontend/vue3 2023.04.18