IT/development212

• 

  [Vue.js] Props(부모 -> 자식) Vue.js에서 상위(부모)컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달할 때 사용하는 속성 const appHeader = { template: 'Header', props: ['propsdata'] } new Vue({ el: '#app', components: { 'app-header': appHeader, }, //전달하려는 데이터 data: { message: '부모 컴포넌트의 메시지', name: '아이언맨', } }) 결과 data 키값 변경 시 변경된 데이터가 자식 컴포넌트에도 표시됨 Root 컴포넌트의 데이터값 변경 시 props로 내려받은 자식 컴포넌트의 데이터에도 적용됨(reactivity) 하위 컴포넌트 추가 후 새로운 props 전달 //appContent라는 하위 컴포넌트 내.. IT/development 2023. 7. 26.

• 

  [Vue.js] 컴포넌트(재사용 유용) 목차 컴포넌트 등록 전역 컴포넌트 등록(플러그인이나 라이브러리 형태로 사용 시) Vue.component('app-header', { template: ' {{ message }} 결과 Root 컴포넌트를 기준으로 계층구조를 이룸 image source: https://v2.ko.vuejs.org/v2/guide/components.html 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 v2.ko.vuejs.org 부모 컴포넌트에서 자식 컴포넌트로는 props 속성으로 데이터 전달 자식 컴포넌트에서 부모 컴포넌트로는 event로 데이터 전달 통신 규칙이 있으면 데이터 흐름 추적이 용이함 reference: https://www.inflearn.com/course/age-of.. IT/development 2023. 7. 26.

• 

  [Vue.js] 인스턴스와 생성자 인스턴스 뷰 인스턴스는 뷰 개발 시 필수로 생성해야 하는 코드 {{ message }} console.log(vm)에 찍힌 vue 인스턴스의 속성과 API들 new Vue({…})로 인스턴스를 만들고 인스턴스에 미리 정의된 속성과 기능들을 사용 크롬 확장프로그램(Vue.js devtools) 설치 시 브라우저에서 Vue 개발을 더 효율적으로 할 수 있음 인스턴스를 div에 붙이면 인스턴스를 적용한 엘리먼트는 Root 컴포넌트가 됨 생성자 함수 일반함수와 구분하기 위해 함수명 앞이 대문자로 되어 있고 new 연산자를 통해 인스턴스를 생성 생성자 함수에 속성, 기능들을 미리 정의해 놓고 인스턴스를 만들어서 미리 정의된 속성과 기능 사용 reference: https://www.inflearn.com/cour.. IT/development 2023. 7. 26.

• 

  [Vue.js] 컴포넌트끼리의 데이터 전달(feat. props, event emit) Vue.js에서 컴포넌트 등록 시 부모-자식관계가 형성되는데 각 컴포넌트는 데이터를 독립적으로 가지고 있음 부모 자식끼리 데이터를 전달 방법: 부모는 자식에게 내려만 주고, 자식은 부모에게 올려만 준다. 이 때 부모가 사용하는 속성이 props이고 자식이 사용하는 속성이 event emit이다. 이를 활용한 간단한 예제 동영상 내용 정리 부모에서 props를 활용해 부모의 data 중 message를 자식에게 내려주고 자식에서 이벤트 발생 시 부모의 메소드를 실행해서 부모 컴포넌트의 데이터 중 num을 1증가 시킨다. image source: https://v2.ko.vuejs.org/v2/guide/components.html 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크.. IT/development 2023. 7. 26.

• [JavaScript] 동등연산자(==, !=)와 일치연산자(===, !==) 동등연산자와 일치연산자의 차이 간단히 테스트 😎 JavaScript에서 동등연산자(==, !=)를 사용할 경우 자동으로 형변환을 해서 비교하기 때문에 값만 맞으면 맞다고 하고 일치연산자(===, !==)를 사용할 경우 값과 타입까지 비교를 한다. 동영상을 보면 변수 one에는 정수 1이 들어 있고 변수 two에는 문자열 '1'이 들어 있는데 ==를 사용할 경우 true가 나오고 ===인 경우는 false가 return되는게 확인 되었다. 정확한 비교를 위해선 일치연산자를 쓰도록 하자.(비교 연산자 때문에 삽질할 미래의 너에게 하는 말) IT/development 2023. 7. 24.

• 

  [Vue.js] ajax로 데이터 조회 예제(feat. axios) Vue.js에서 ajax로 서버에서 데이터 받아와서 테이블에 뿌리는 간단한 예제 cli 환경 기반이라 npm install로 vue.js cli를 설치해야 함(미리 설치한 상태라 동영상에는 설치과정 누락됨) npm install -g @vue/cli cli 설치 후 vue create 프로젝트명으로 cli 기반 vue 프로젝트 생성 vue create vue-test1(생성할 프로젝트명) 아래 명령어로 node.js 런타임을 실행해서 페이지를 띄움 npm run serve 페이지를 띄운 순간부터 vue.js는 데이터가 변경되는 순간 실시간으로 반영한다. mounted(DOM 그린 다음 실행되는 함수) 부분에 console.log() 찍어보면 렌더링을 다시 하는게 보인다. (이놈도 React처럼 가상 DO.. IT/development 2023. 7. 23.

• [ChatGPT] ChatGPT 고맙다. IT/development 2023. 7. 22.

• [React.js] state 사용법 state 😏 constructor(props)를 통해서 초기화, 변경 가능 constructor() {} 안에서 반드시 super(props)를 통해 부모 컴포넌트의 생성자를 호출해야한다. 안하면 에러 발생 렌더링 이후 값 수정하려면 this.state = "변경할 값" 이렇게 사용하면 절대 안되고 setState() 함수를 이용해 수정 위에서 만든 Counter Component에 constructor()를 이용해서 데이터 초기화, super(props)를 통해서 부모 컴포넌트의 생성자를 호출한 다음 this.state = {...}에 초기화할 객체를 선언 그리고 핸들러에서 this가 무엇을 나타내는지 알 수 있도록 생성자에서 아래처럼 change 메소드를 현재 컴포넌트를 바인딩한 함수로 수정해야 함.. IT/development 2023. 7. 13.

• [html] button에 type을 명시하자(feat. default submit) 목차 ajax로 페이징을 구현 했는데 페이지 이동이 되었다가 다시 같은 페이지가 호출이 되었다. 콘솔 보면 2페이지 데이터를 정상적으로 가져왔다가 다시 1페이지가 호출이 되고 있다. 간단한 원인 이었는데 꽤 많은 시간 삽질 끝에 나중에 다시 봐야지 하고 넘어 갔었다가 다시 봐서 해결 했다. before source 🙂 /** * 페이지네이션을 그린다. * @param paging */ function drawPagination(paging) { let pageHtml = ""; pageHtml += ""; //first const first = parseInt(paging.firstPage); pageHtml += ""; if (paging.currentPage === paging.firstPage) {.. IT/development 2023. 7. 9.

• 

  [dbeaver] dbeaver DDL, DML 생성 dbeaver를 이용해서 DDL, DML 추출 방법 IT/development 2023. 7. 8.