기록

기본적으로 JSON.parse() 메서드는 JSON 문자열을 JavaScript 객체로 변환하는데 사용하고 JSON.stringify() 메서드는 JavaScript 객체를 문자열로 변환하는데 사용합니다. 보통 파라미터로 각각 변환 대상인 객체나 문자열만 넣어서 사용했는데 JSON.stringify()를 사용할 때 undefined 값은 JSON에서 지원하지 않는 값이기 때문에 변환 과정에서 제외된다는 것을 알았습니다. 그래서 undefined를 ""(공백)으로 변환 시키기 위해서 JSON.stringify()의 매개변수 중 하나인 replacer을 사용했습니다. JSON.stringify() value: 변환할 JavaScript 객체나 값입니다. 일반적으로 객체를 전달하지만, 배열, 숫자, 문자열, ..

JavaScript에서 동등 비교(==)와 동일 비교(===)는 값의 비교를 수행하는 두 가지 비교 연산자입니다. 이 두 연산자는 값을 비교하는 방식에서 차이가 있습니다. 동등 비교 (==): 동등 비교(==)는 두 개의 피연산자가 같은 값을 가지는지를 비교합니다. 동등 비교는 값이 같은지 여부를 확인하기 전에, 필요에 따라 타입 간의 암시적인 타입 변환을 수행합니다. 이러한 타입 변환으로 인해 서로 다른 데이터 유형을 비교할 수 있습니다. 예를 들어, 숫자와 문자열을 비교하면 JavaScript는 문자열을 숫자로 변환하여 비교합니다. 10 == "10" // true true == 1 // true null == undefined // true false == "" // true 동일 비교 (===):..

axios.post() 메서드는 Axios 라이브러리를 사용하여 HTTP POST 요청을 보낼 때 사용되는 메서드입니다. axios.post(url[, data[, config]]) url: 요청을 보낼 URL 주소입니다. data (옵션): 요청의 본문에 담을 데이터입니다. 일반적으로 객체 형태로 전달됩니다. 이 매개변수는 GET 요청에서는 사용되지 않습니다. config (옵션): 요청에 대한 추가적인 설정을 담은 객체입니다. 헤더, 인증, 요청 타임아웃 등을 설정할 수 있습니다. data와 config 매개변수는 모두 선택적이므로 필요에 따라 생략할 수 있습니다. 1. params 전송 URL 매개변수로 데이터를 전달하는 방식입니다. params 속성을 사용하여 전달할 데이터를 객체 형태로 지정합니..

자바스크립트의 draggable 속성과 dragstart, dragend 이벤트를 사용하여 요소를 드래그할 수 있습니다. draggable 옵션입니다. cancel: false는 드래그 가능한 요소 내의 특정 하위 요소를 클릭하여 드래그 작업이 취소되는 것을 방지합니다. 불투명도: 0.7은 드래그 동작 중 드래그 가능 요소의 불투명도를 설정합니다. snap: "[elem]"은 요소를 요소 클래스가 있는 다른 요소로 스냅하도록 지정합니다. snapMode: "둘 다"는 스냅이 수평과 수직 모두에서 발생해야 함을 나타냅니다. snap Tolerance: 10은 스냅이 발생해야 하는 스냅 대상으로부터의 거리(픽셀)를 지정합니다. stack: "[elem]"은 끌어온 요소의 z-index를 요소 클래스가 있는 ..

ng-repeat="item in items | filter:search" ng-repeat는 AngularJS에서 제공하는 디렉티브 중 하나로, 배열 또는 객체의 각 항목을 반복하여 HTML 요소를 생성하는 데 사용됩니다. 1. 기본 사용 //js $scope.items = [ { name: "apple", color: "red" }, { name: "banana", color: "yellow" }, { name: "orange", color: "orange" } ]; {{item.name}} ({{item.color}}) 위의 코드에서 {{item.name}}과 {{item.color}}은 객체의 name과 color 속성 값을 출력합니다. 따라서 위의 코드는 다음과 같은 결과를 생성합니다. appl..

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

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

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

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..

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은 부모 컴포넌트에서 자식 컴포넌트로..