[04월 4주차] 프론트엔드 디버깅 방법, PostgreSQL 필드 변경 시 MySQL 과 문법상 차이점

 

ToDoList

---

• VS code 리팩토링 방법 알아보기

 

 

Note

---

 

미리 저장해둔 데이터를 for문으로 콤보 박스에 보여주기

•  데이터베이스에는 어떤 모델의 상태 코드가 있다. 
• ex) 생성(COD_0000, "CREATED")과 같은 형태로 데이터가 저장되어 있는데 
  
  • 관리자 서버에서 데이터 가져오는 API를 만들어두고 필요할 때마다 Http 요청을 보내서 정보를 가져온다. 

 

• SearchForm (자식 컴포넌트)
  • 뷰 안에 있는 컴포넌트
  • emit: 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달한다. 컴포넌트가 발생시킬 수 있는 이벤트를 명시적으로 선언해서 부모 컴포넌트에서 사용 가능한 이벤트를 결정한다. 

 

• List (부모 컴포넌트)
  • 앞에서 자식 컴포넌트(SearchForm)에서 만든 이벤트 searchPretreatment 에 대해  앞에 "@"를 붙여서 가져와 사용할 수 있다. 
  • 1) 전처리 검색 폼
  • 2) @를 이용해서 이벤트를 등록한다. 
  • store.dispatch(): vuex 스토어에서 액션 메서드를 호출해서 상태를 변경하는 메서드이다. 

---

프론트엔드 디버깅 방법

• 소스 코드에서 디버깅하고싶은  위치에 부분에 "debugger;" 입력한다.
• 서버를 띄운 다음 디버깅하고 싶은 서비스를 클릭해서 실행한다. 
• 해당 브라우저에서 F12
• F10: 한 단계씩 넘어가기
• F8: 완전히 빠져나오기
• 다음과 같이 디버깅할 수 있다. 

---

 RESTful API와 Http Method  

• 컨트롤러 클래스에 Getmapping 메서드를 만들었는데 매개변수 앞에 @RequestBody를 붙이면 RESTful 하지 않기 때문에 에러가 난다. 
• 따라서, GET을 하는데 만약 어떤 매개변수가 필요하다면 @RequestBody를 뺀 상태로 매개변수만 넣어야 한다. 
• Ex) 
  • method(@RequestBody Member member) => method(Member member) 

---

OkHttp와  Axios

• Spring에서 사용했던 OkHttp와 JavaScript으로 쓰는 Axios
• 공통점: Http 클라이언트 라이브러리로서 요청과 응답을 처리한다. 
  • 비동기 방식의 http 호출을 지원한다. 
  • http 헤더, 바디 데이터를 설정 가능하다. 
  • 인터셉터(interceptor) 제공
• 차이점 
  • OkHttp
    • Java http 라이브러리
    •  안드로이드 개발도 지원한다. 
    • 쿠키 관리와 캐시 처리를 지원한다. 
  • Axios
    • JavaScript http 라이브러리
    • 쿠키 처리를 지원하지 않지만 수동 설정 가능하다. 

---

Vue.js 에서 이벤트를 처리하기 위해 사용되는 디렉티브(Directive)

• 디렉티브는 html 태그 안에 들어가는 하나의 속성으로 엘리먼트에세 동작을 지시하는 지시문이다. 
• 디렉티브는 "v-"로 시작하며 "@"로 바꿀 수 있다. Vue의 데이터 값이 바뀌었을 때, 화면의 요소들이 반응형으로 변경되서 데이터 값에 따라 갱신된다. 
• 따라서 화면의 요소를 직접 제어할 필요없이 디렉티브를 활용해서 화면 요소를 조작 가능하다. 
  • ex) v-on, v-for, v-show, v-on, v-model
  • @click( = v-on: click): 클릭 이벤트를 처리하기위해 사용한다. 사용자가 요소를 클릭할 때 실행된다. 
  • @change: 폼 요소의 값을 변경했을 때, 실행되는 이벤트 디렉티브이다.

---

cf) 쿼리 객체란?

• 쿼리 객체는 JavaScript (SQL과는 관련 없는) 웹 개발 용어이다.
• HTTP 요청에 대한 매개변수를 담는데 사용하며 key-value 형태로 이뤄진 JavaScript 객체이다. 

 

 

쿼리 객체와 Request Param 차이점은?

• 공통점: HTTP 요청에서 매개변수를 전달하는데 사용된다. 
  • URL을 이용해서 key-value 형태의 데이터를 전달한다. 
• 쿼리 객체: URL의 쿼리 문자열에서 파싱된 객체이다. 
  • '?' 뒤에 key=value 형태를 '&'로 이어붙인다. 
  • axios 같은 HTTP 라이브러리를 사용해서 내용을 전달할 수 있다. 
  • ex) url: http://example.com/api?name=John&age=25 
    
• Request Param: RESTful API에서 자원에 대한 요청을 처리할 때 사용된다. 
  •  '/' 뒤에 value 값만 이어서 붙여준다. 
  • ex) url: http://example.com/api/John/25

---

routerPush()를 이용해서 자식 컴포넌트에 데이터 전달하는 방법

• Detail (뷰)
  • routerPush()에 넣은 query 안에 있는 변수명
  • routerPush(location, onComplete, onAbort): 라우팅 처리하기 위한 Vue.js 내장 함수. 
    • location(필수): 이동할 URL
    • onComplete(선택): 네이게이션이 완료된 후, 호출할 콜백 함수
    • onAbort(선택): 네비게이션을 중단할 때, 호출할 콜백 함수
  • 1) "platformId" 라는 이름의  쿠키에서 플랫폼 id 값을 가져온다. 
  • 2) 쿼리 객체를 만들어서 라우팅 처리한다. 

<hide/>
const editPretreatment = () => {
    let platform = getCookie("platformId");
    let query = { memberId : route.query.memberId }
    routerPush(platform, "MemberEdit", query );
};

 

 

• List (컴)
  • Detail에서 routerPush()를 통해 넣은 변수명이 ParamList 에서 "  router.query.(변수명)"를 통해 불러오는 변수명과 정확하게 일치해야 router에 넣어준 변수를 가져올 수 있다.

<hide/>
import { useRoute } from "vue-router";
const route = useRoute();
let memberId = route.query.memberId;

---

  Ex) 선택한 모델 ID 에 대한  Param 리스트 조회하기

 

• 전처리 등록 화면에서 modelId를 선택하면 modelId 에 딸린 파람리스트 조회해서 화면에 나온다. 
• model & modelParam 테이블은 전처리 등록을 하기 위해 필요한 템플릿 개념이다. 

 

 

•  PretreatmentParamEdit
  • watch(): tableData 가 변할 때마다 감지한다.
    
    • setPretreatmentParamsData() 는 store 안에 선언한 뮤테이션
    • watch() 안에서 파람리스트를 조회할 때는 아래에서 정의한 getModelParamList()를 이용해서 조회한다. 
  • tableData는 부모 컴포넌트로부터 가져온 데이터?
    • tableData: Vue 에서 앱의 데이터를 관리하기 위한 변수이다. (v-for 같은 디레티브 사용 가능)
  • html 소스 안에서 < .. @click="addData"> : Param 추가 버튼을 클릭할 때마다 addData 메서드가 실행되도록 한다. 
  • @click: 특정 데이터를 클릭했을 때, 메서드를 실행한다. 
  • @change: 콤보 박스에 어떤 값을 선택할 때마다 바뀌도록 구현가능
  • 다음과 같이 watch() 함수를 여러 개 쓸 수 있다. 
  • setPretreatmentParamsData()을 이용해서 값을 세팅하면 PretreatmentEdit 뷰 페이지에서 data를 get할 수 있다.

---

• (컴포넌트) PretreatmentEdit
  
  • state안에 변수로 선언한 paramList 안에 get() 한 목록을 저장한다. 
  • 배열 형태를 통째로 저장하니까 res.data 를 바로 저장

 

---

• (뷰) PretreatmentEdit
  
  • computed(): vue의 계산형 속성으로 해당 값에 접근할 때마다 새로운 값을 계산한다. 

---

전처리 상세 조회

• 1) 최초  상세 조회 시: 해당 전처리에 대한 paramList 조회
• 2) 콤보 박스에서 modelId를 다른 값으로 선택 시: 해당 모델에 대한 파람리스트(템플릿)를 조회

• 새로운 변수(isFirstLoading)를 하나 만들어서 첫 번째 로딩인지 아닌지 파악한다. 

 

  Sol)

 

• Edit (부모 컴포넌트)
  • 먼저 라우터에 전처리 ID를 push 해줘야한다.

<hide/>
routerPush(platform, "Detail", query);

 

 

• ParamEdit (자식 컴포넌트)
  
  • boolena 타입의 변수가 필요. 최초 상세 조회인지 아닌지 체크한다.
  • 이에 따라 백엔드에 보낼 Http Request가 달라진다.  
  • 전처리 id는 라우터에 푸시한 값과 같은 값을 가져와야한다. 

---

url 주소에 특정 값이 있는 지 확인하기

const currUrl = window.location.href;

• Java에서는 contains("")를 통해 확인할 수 있는데 JavaScript에서는 includes("")를 통해 특정 문자열을 포함하는지 알 수 있다. 
• window.location.href를 이용하면 url 주소를 확인할 수 있다.

---

TITLE

• CONTENTS
• CONTENTS

---

 

에러 해결

---

 SQL 문법 오류 (PostgreSQL 과 MySQL 차이점, PostgreSQL 기준 필드 형태 변경)

alter table 테이블명 change 기존칼럼명 바꿀칼럼명 VARCHAR(1000);

• MySQL에서 칼럼을 바꾸기 위한 쿼리

 

• 오류: 데이터베이스 칼럼 수정
• 원인: PostgreSQL를 사용하고 있는데 MySQL 문법에 따라 작성해서 오류가 발생했다. 
• 해결 
  • PostgreSQL 문법에 따라 새롭게 작성한다. 
  • 아래와 같이 컬럼 이름을 바꾼 뒤에 타입을 지정한다. 

alter table 테이블명 rename COLUMN 기존칼럼명 to 바꿀칼럼명;
alter table 테이블명 alter column  바꿀칼럼명 TYPE  VARCHAR(1000);

 

---