반응형

전체 글 706

[초전도체] 초전도체란?

요즘 과학계의 뜨거운 이슈인 초전도체에 대해 개인 공부를 기록한다. 우선 취득한 정보를 생각 나는데로 나열한 후 정리할 예정 전기가 통하는 물질을 전도체라고 하고 전기를 구리를 통해 전달 시 전기 저항(이 때문에 열이 발생)이 발생 해 발전소에서 가정집에 구리선을 통해 전기를 보낼 때 이 저항 때문에 전력이 대략 4% 열로 손실됨 1911년도에 어떤 과학자가 수은 테스트를 하다가 극저온 상태에 도달하니 전기 저항이 0이 되는 지점을 발견 이 때 초전도체 개념이 처음 나옴 하지만 영하 260도 이하의 극저온을 유지하는데 필요한 환경은 비용, 부피 등 여러 문제가 있어 실생활에 적용하기 어려움 과학자들이 상온에서 초전도체를 사용할 수 있도록 계속 연구 해 오고 있음 초전도 현상이 발생할 때 자석 위에 초전도..

[Vue.js] vue.js의 렌더링 방식과 기존 방식의 차이점(feat. ajax)

목차 ajax로 데이터 조회 시 reactivity를 활용한 lib나 framework를 사용하지 않는 기존 방식(javascript/jQuery)의 경우 화면에서 ajax로 데이터를 가져와서 그릴 부분의 태그만 미리 정의해 놓고 데이터를 가져온 후에 스크립트단에서 동적으로 태그를 만드는 로직을 작성해서 붙였다.(아래 참조) 기존방식 html 주소록 순번 사원명 직급 직책 전화번호 이메일 script //table에 데이터 그리는 부분 const targetTbody = "addressbookBody"; if(data.list != null && data.list.length > 0) { // foreach start for (let i = 0; i < data.list.length; i++) { htm..

IT/development 2023.07.30

[Vue.js] watch vs computed(데이터 변화 감지)

목차 데이터 변화 감지하는 점은 동일하지만 용도가 다름 watch 데이터의 변화를 감지하고 원하는 로직을 수행하는데 사용 주로 데이터 변화 시 비동기적 로직 등 복잡한 로직 수행 시 사용됨 변경 전 데이터, 변경 된 데이터를 매개변수로 받아서 처리 가능 카운트: {{ count }} 증가 new Vue({ el: '#app', data: { count: 0 }, methods: { increment() { this.count++; } }, watch: { //매개변수로 변경된 값, 변경 전 값을 받을 수 있음 count(newValue, oldValue) { console.log('count가 변경되었습니다. 이전 값: ${oldValue}, 새 값: ${newValue}'); //ajax 로직 생략....

IT/development 2023.07.30

[Vue.js] 싱글 파일 컴포넌트에서 axios 통신

post 방식으로 데이터 전송 #ajax 통신 위한 lib 설치 npm i axios App.vue id: password: login get방식으로 데이터 조회 조회 queryString(?empId=dev&empNm=로다주&empEmail=dev@naver.com) 추가 시 아래처럼 사용 const data = { empId: this.empId, empNm: this.empNm, empEmail: this.empEmail } //2번 째 인자값에 위에서 만든 object 추가 axios.get(url, { data }) reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21471&tab=curriculu..

IT/development 2023.07.29

[Vue.js] 싱글 파일 컴포넌트에서 컴포넌트 사용

하위 컴포넌트 import 후 사용 App.vue app AppHeader.vue Welcome to My App reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21464&tab=curriculum 학습 페이지 www.inflearn.com 2023.07.29 - [IT/development] - [Vue.js] 싱글 파일 컴포넌트에서 props 속성 이용 [Vue.js] 싱글 파일 컴포넌트에서 props 속성 이용 App.vue app AppHeader .vue {{ propsdata }} yaga.tistory.com 2023.07.29 - [IT/development] - [Vue.js] 싱글 파일 ..

IT/development 2023.07.29

[Vue.js] Vue CLI(Command Line Interface)

목차 터미널 명령어를 통해 Vue.js 개발환경을 더 쉽게 해주는 도구라고 보면 되고 아래와 같은 기능을 제공한다. 자바로 따지면 레거시 스프링을 사용하다 스프링부트를 만난 기분인 듯 프로젝트 생성 개발서버 실행 프로덕션 빌드 추가 플러그인 설치 vue.js의 기본 설정 및 구성을 쉽게 변경할 수 있는 설정 파일과 옵션 제공 ※ 사전에 npm 최신버전(LTS 권장) 설치 되어 있어야 함 설치(npm 또는 yarn으로 설치) 😃 npm install -g @vue/cli # OR yarn global add @vue/cli vue project 생성 🙂 vue create my-project#(생성할 프로젝트 명) # OR vue ui vue project를 생성할 경로로 이동 후 명령어 입력 시 프리셋을..

IT/development 2023.07.29

[Vue.js] 뷰 디렉티브(v-로 시작하는 속성들을 의미)

목차 v-bind(:콜론 바인딩으로 줄임 가능) {{ num }} 결과 v-if(조건문) 관리자 사용자 그 외 new Vue({ el: '#app', data: { auth: '관리자', } }) 결과 개발자 vue도구에서 data 변경 시 데이터도 변경됨 v-show(show, hide) 관리자 사용자 그 외 관리자 js코드는 위와 동일 결과 v-model(:콜론 바인딩으로 줄임 가능)(데이터 동기화) {{ userName }} new Vue({ el: '#app', data: { userName: '', } }) //아래처럼 javascript나 jQuery를 사용해서 dom에 접근해서 변경할 필요가 없음 //let userName = $("#userName").val(); //let userName..

IT/development 2023.07.27
반응형