"고경희. (2021). Do it! 자바스크립트 입문. 이지스퍼블리싱", 이 책은 자바스크립트 "입문자"에게 훌륭한 선택이다! 9, 10장을 통해 다지게 된 점은 다음과 같다. 9장 폼 1) name 값을 사용해 폼 요소 안에 있는 텍스트 필드에 접근하려면 의 name값과 텍스트 필드의 name값을 사용한다. document.의 name값.텍스트 필드의 name값 document.forms["의 name값"].elements["텍스트 필드의 name값"] // 이렇게도 접근할 수 있다. 2) id, class, name 속성도 없을 경우 폼 배열을 사용해 폼 요소에 접근할 수 있다. document.forms[0].elements[0].value // 현재문서의.첫 번째 form의.첫 번째 요소의.값 ..

mixin mixin을 import 한 컴포넌트는 mixin 자바스크립트 파일의 export default를 모두 사용할 수 있다. mixin과 컴포넌트의 동일 시점에서의 실행 순서는 mixin이 우선이다. 아래 코드를 작성하여 서버를 실행하면 콘솔 창에 [그림 1]과 같은 결과가 출력된다. mixin src 폴더에서 mixins 폴더를 생성하고 mixin 파일로서 axios.js를 생성한다. // src/mixins/axios.js export default { created() {}, mounted() { console.log('mixin에서 출력') }, unmounted() {}, methods: {} } 컴포넌트 MixinView.vue 파일에 axios.js를 import 한다. // src/..

전역 컴포넌트 main.js에 자식 컴포넌트를 import 하고 app.component를 추가하면 전역 컴포넌트로 사용할 수 있다. 여기에서는 app.component의 첫 번째 파라미터명을 'page-title'로 작성하였는데, 원하는 이름을 쓰면 된다. // src/main.js ... import PageTitle from './components/fragments/PageTitle.vue' // createApp(App).use(store).use(router).mount('#app') // 기존 // 위 코드에 app을 붙여 아래 코드와 같이 분리한다. 이때 import한 컴포넌트를 추가한다. const app = createApp(App) app.use(store) app.use(router..

부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 자식 컴포넌트 부모 컴포넌트로부터 데이터를 받기 위해 태그 내에 import한 자식 컴포넌트의 키인 태그와 속성을 작성한다. 속성은 data와 바인딩한다. // src/views/4_reuse/ParentView.vue 부모 컴포넌트에서 부모 컴포넌트의 데이터 값 변경 부모 컴포넌트 자식 컴포넌트에서는 props 받는 값을 직접 수정할 수 없다. 부모 컴포넌트에서만 변경할 수 있다. 버튼 "변경"을 추가한다. // src/views/4_reuse/ParentView.vue 변경 ... 변경 버튼을 클릭했을 때 태그의 속성 값 num1을 변경하고자 한다. // src/views/4_reuse/ParentView.vue ...

"고경희. (2021). Do it! 자바스크립트 입문. 이지스퍼블리싱", 자바, 파이썬을 공부한 적이 있다. 그래서 자바스크립트를 배울 때도 웬만한 문법의 개념은 익숙했다. 하지만 DOM은 낯설다. 다른 책을 통해 이를 먼저 접했는데 상당히 많은 내용을 담고 있었다. 그게 장점일 수 있지만 처음 배우는 입장에서는 중압감이 컸다! 반면 이 책은 핵심만 간결하게 잘 담은 인상이다. 잘 구조화되어 있어 기억도 잘 된다. 차근차근 따라가다 보면 어느새 quiz-2를 풀고 있다. 8장을 통해 다지게 된 점은 다음과 같다. 8장 문서 객체 모델(DOM) 1) DOM - 웹문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법. 2) DOM 트리 표현 - 태그: 요소 노드 ..

"고경희. (2021). Do it! 자바스크립트 입문. 이지스퍼블리싱", 6장, 7장을 통해 다지게 된 점은 다음과 같다. 6장 객체 1) 자바스크립트 객체 종류: 내장 객체, 문서 객체 모델(DOM), 브라우저 객체 모델, 사용자 정의 객체 2) 자바스크립트 = 프로토타입 기반 언어(prototype-based language). 객체 간의 상속 관계를 프로토타입 체인(prototype chain)이라고 한다. 프로토타입을 사용해 만들어낸 객체를 '인스턴스(Instance) 또는 개별 객체'라고 한다. 3) Math 객체는 new 예약어를 통해 객체의 인스턴스를 생성하지 않는다. 4) 사용자 정의 객체: "리터럴 표기법, 생성자 함수" 사용해 만든다. 5) 생성자 함수는 객체를 만들어 내는 함수로 f..

"고경희. (2021). Do it! 자바스크립트 입문. 이지스퍼블리싱", 4, 5장을 통해 다지게 된 점은 다음과 같다. 4장 제어문 1) falsy 값으로 0, "", NaN, undefined, null은 모두 false로 인정한다. 2) do...while문은 while 조건이 false이더라도 최소한 한번은 실행된다. 3) 중첩 for문은 안쪽 for문 부터 실행된다. 5장 함수와 이벤트 1) 함수 안에서 새롭게 전역 변수를 선언하려면 변수 이름 앞에 var 예약어를 사용하지 않으면 된다. 2) var를 사용한 변수는 호이스팅(변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것)과 재선언이 단점으로 작용할 수 있다. 따라서 let을 사용하는 것을 권장한다. 3) le..

Lifecycle Hooks 순서에 따라 뷰가 자동으로 함수들을 호출한다. 어느 시점에 어떤 데이터를 조회할 것인지 설계하느냐에 따라 체감 성능이 달라질 수 있다. setup(composition api) composition api는 Vue.js 3.0에서 밀고 있지만 아직까지는 실무에서 쓰지 않는 기능이다. data와 method를 각각 선언하는 option api 방식을 Vue.js 2.0까지 사용해 왔다. composition api는 새로운 방법으로 option api와 같은 기능을 구현한다. composition api는 각각 따로 존재하는 data와 method를 setup 안에서 관리하여 코드의 가독성을 높이고자 한다. 하지만 실무에서는 data와 method를 명확하기 구분하는 것이 익숙..