[06월 5주차] 반응형 객체 만드는 방법(ref, reactive), Postman 에서 만든 API 공유하는 방법(export)

프론트 에러 해결 

---

• 오류: 배열에 null이 들어왔다. 
• 원인: subtaskList에 대해 잘못된 데이터 타입이 전달되는 경우 바랫ㅇ한다. 
  • axios 요청을 보내고 응답을 받아서 list를 조회했는데 데이터가 없는 경우가 문제였다.
  • 이 값이 null 인 경우, subtaskList = null 이 전달되어서 에러가 나는 것이다. 
• 해결
  • getSubtaskList()메서드 안에서 axios를 통해 목록을 불러왔을 때, 데이터가 없는 경우에 대해 다음과 같이 빈 배열을 넣어준다. 

.then((res) => {
      if(res.data.data === null){
        state.subtaskList = [];
		...
      }
}

 

---

 렌더링 시점에 (<script> 안에  정의되지 않은) 변수에 접근하면 발생하는 에러

• 오류
  • modalTitle  was accessed during render but is not defined on instance.
  • 렌더링 되는 동안 modelList에 접근했는데 인스턴스에 정의되어 있지 않다.
• 원인
  
  • <el-dialog>안에 팝업 창의 상단에 표시할 제목을  modalTitle라고 지정했으나 <script>안에 modalTitle 라는 변수가 ref 형태로 정의되지 않아 발생한 오류이다. 
  • cf) ref() 란?
    • Vue의 ref() 함수는 컴포넌트 내에서 데이터를 반응적으로 관리하기 위해 사용된다.
    • ref()로 선언된  변수는 Vue 컴포넌트의 리액티브 상태를 가지며 해당 변수의 변경 사항을 추적하고 템플릿에서 참조할 수 있도록 한다. 
    • ref() 형태로 선언되지 않은 변수를 Vue의 리액티브 시스템과 연결되지 않기 때문에 <template> 코드 안에서 참조 할 수 없다.
• 해결
  
  • <el-dialog> 안에 설정하는 속성
    • 1) v-model: dialog 변수를 v-model 디렉티브에 바인딩해서 modal 창의 열림, 닫힘 상태를 관리한다. true일 때 창이 열린다. 
    • 2) title: modal 창의 제목을 설정하는데 사용된다. 
      • 안에 바로 title을 넣을 수 있는 게 아니라 스크립트 안에  ref 형 변수를 선언해서 갖다 써야한다. 

<el-dialog v-model="dialogModelList" :title="modalTitle"> 
...

// 스트립트
const modalTitle = ref("팝업창 상단에 넣어줄 제목");

 

---

runtime-core.esm-bundler.js:40 [Vue warn]: Invalid prop: type check failed for prop "parentComponent". Expected Object, got String with value "LearningEdit".

 

• 오류: data type 오류
• 원인: Object 형태로 선언한 데이터인데 String  형태의 데이터를 할당해서 발생한 문제이다.   
  
  • Java에서는 모든 클래스의 조상이 Object 라서 JavaScript에서도 같을 거라고 생각했다. 
  • 하지만, JavaScript에서의 Object 는 key- value 형태의 데이터가 들어 있으며 이는 Java의 Map 과 형태가 비슷하다. 
  • JavaScript에서의 Object는 Java에서의 Object는 다르기 때문에 이 부분을 알고 있어야한다. 
• 해결
  
  • 선언한 부분을 찾아서 Object 가 아닌 String 으로 바꿔준다. 

 

---

 

runtime-core.esm-bundler.js:40 [Vue warn]: Extraneous non-props attributes (serviceList) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

• 오류
  • 컴포넌트가 프래그먼트(fragment) 또는 텍스트 루트 노드를 렌더링하고 있어서  props가 아닌 속성이 자동으로 상속되지 못해서 발생하는 문제이다. 
  • Vue. 에서는 프래그먼크 또는 텍스트 루트 노드에서는 비 - props 속성을 자동으로 상속할 수 없다. 
• 원인
• 해결

 

• cf) 프래그먼트(fragment): Vue 컴포넌트에서 여러 개의 요소를 감싸기 위해 사용되는 가상의 래퍼 역할을 한다. 일반적으로 프래그먼트는 <template>태그로 표현한다. 컴포넌트 내에서 여러 요소를 그룹화할 때 사용된다. 프래그먼트는 브라우저에는 실제로 렌더링 되지 않기 때문에 추가적인 DOM 요소가 생성되지 않고 불필요한 래퍼 요소 없이 효율적으로 그룹화할 수 있다. 
• Vue 컴포넌트는 일반적으로 하나의 루트 요소만을 반환해야한다. 

 

---

 

error.ts:14 ElementPlusError: [ElPagination] Deprecated usages detected, please refer to the el-pagination documentation for more details
    at debugWarn (error.ts:13:37)

 

• 오류: element plus
• 원인:  element plus 안에서 deprecated 된 어떤 기능(?)을 이용해서 에러가 났다. 
• 해결

 

 

 

Note

---

반응형 (reactive) 객체 사용 방법 (ref, reactive) - Vue.js 3

• 사내에서 쓰고 있는 Vue.js와 관련하여 반응형 객체 사용하는 방법들과 차이에 대해 알아보려고 한다.  
• 반응형: 데이터가 변하는 것을 감지하고 해당 값에 대한 작업을 실행한다. 쉽게 말해서 데이터를 변경하면 화면에 변경된 데이터를 보여주는 것이다. 

 

• ref()
  • String, Number, Object등 어떠한 타입에서도 사용 가능하다.  타입 제한이 없다. 특히나, reactive를 적용할 수 없는 원시형 데이터는 ref를 이용한다. 
  • JavaScript 영역에서는 ".value"를 붙여야 데이터에 접근 가능하고  template 영역에서는 붙이지 않아도 접근 가능하다. 
  • 템플릿에서 단일 변수로 사용 가능
  • 단일 값에 대한 반응성을 유지하면서 재할당이 가능하다. 

 

• reactice()
  • Object, Array, Map, Set 같은 타입에서만 사용 가능하다. 원시형(primitive type)인 String, number, boolean에 대해서는 사용할 수 없다. 
  • ".value"를 붙일 필요없다. 
  • Vue.js2의 data와 비슷하다. 
  • 반응형 변수를 많이 선언할 때 간단하게 사용 가능하다. 
  • 자바스크립트와 템플릿 사이에 일관성이 있다. 
  • 변수 뿐만 아니라 함수도 넣을 수 있다. 
  • 여러 속성을 포함하는 복합 객체에 대한 반응성을 제공하며  재할당에 유연하지 않다. 

 

• 차이점: object일 경우, ref()는 재할당하면 반응형을 유지하지만 reactive()는 재할당하면 반응형을 잃어버린다. 

<hide/>
import { ref, reactive } from 'vue'

const value = ref('Hello') // 반응형 객체 생성
const obj = reactive({ name: 'John' }) // 반응형 객체 생성

console.log(value.value) // 'Hello'
console.log(obj.name) // 'John'

value.value = 'Hi' // 반응형 객체인 value 재할당
obj = { name: 'Jane' } // 반응형 객체인 obj 재할당

console.log(value.value) // 'Hi' (반응성 유지)
console.log(obj.name) // 오류 발생 (반응성 잃어버림)

 

 

 

---

Postman 에서 만든 API 공유하는 방법 - export

• postman으로 API 테스트하던 데이터를 .json 파일 형태로 저장해서 이를 팀원들과 공유하려고 한다.
• 먼저 postman에서 컬렉션(여러 폴더를 담고 있는 폴더 개념)을 생성한다. 
• 그 안에 공유하고 싶은 여러 개의 API를 만들고 save한다. 
• 아래에서 export를 클릭

 

 

• export를 클릭하고 파일 저장 위치를 선택하면 다음과 같이 파일이 생성된 걸 알 수 있다.  

 

• 파일을 열면 다음과 같이 저장된 걸 볼 수 있다.

<hide/>
{
	"info": {
		"_postman_id": "postman 아이디",
		"name": "model",	// 생성한 컬렉션 이름
		"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
		"_exporter_id": "export 아이디"
	},
	"item": [
		{
			"name": "모델",
			"item": [
				{
					"name": "모델 상태 변경 - 성공",
					"protocolProfileBehavior": {
						"disabledSystemHeaders": {
							"content-type": true
						}
					},
					"request": {
						"method": "PATCH",
						"header": [
							{
								"key": "Content-Type",
								"value": "application/json",
								"type": "text"
							}
						],
						"body": {
							"mode": "raw",
							"raw": "{\r\n    \"date\" : \"2023-07-07T00:00:00\",\r\n    \"message\": \"모델 상태 변경 - 성공\"\r\n}"
						},
						"url": {
							"raw": "http://localhost:8081/status/success",
							"protocol": "http",
							"host": [
								"localhost"
							],
							"port": "8081",
							"path": [
								"status",
								"fail"
							]
						}
					},
					"response": []
				}
			]
        }
    ]
}

 

---

배열에서 for문을 이용해서 특정 객체를 삭제하기 - JavaScript

• 어떤 배열에서 반복문을 돌면서 특정 조건을 만족하는 원소를 하나씩 지우는 로직을 짜려고 한다. 
• JavaScript 에서는 배열에서 원소를 하나씩 삭제할 때 .splice(index, 1)를 이용한다. 
• 그런데 splice() 를 사용하기 위해서는 원소의  index를 반드시 알아야 한다. 
• 처음에는 for문에서 인덱스를 0부터 시작했더니 오류가 났다. (원소를 삭제한 경우/삭제하지 않은 경우에 따라 다음 인덱스 번호가 다르기 때문에 이에 따른 처리가 필요하다. )
• 그래서 for문의 첫 인덱스를 length - 1 부터 내려오는 방식으로 바꿨다. 
  • 그러면 idx 번째의 원소를 삭제하거나 삭제하지 않거나 다음으로 살펴볼 인덱스 번호( idx - 1)는 동일하다.  

<hide/>
let idx = tableData.value.length - 1;
for (let i = idx; i >= 0; --i) {
    let param = tableData.value[i];
    if (param.id === previousId) {
      tableData.value.splice(i, 1);
}

 

 

---

title

• con
• con

 

---

title

• con
• con