Frontend

[Vue.js] Computed Properties

작성자:
Featured image for [Vue.js] Computed Properties

1. 왜 씀? Computed Properties는 왜 필요할까? 템플릿 내 표현식은 유지보수에 불리하다. 템플릿의 여러 곳에서 사용되면 같은 표현식이 여러 번 사용된다. 이는 일관성 있게 관리하기 어렵다. publishedBooksMessage라는 computed property가 선언되었다. computed() 함수에는 getter로 사용될 function이 입력돼야 하며, 반환되는 값은 computed ref다. 마찬가지로 계산 결과를 publishedBooksMessage.value로 접근할 수 있다. computed property은 의존된 반응형을 자동으로 추적한다. publishedBooksMessage는 … 더 읽기

[Vue.js] Reactivity

작성자:
Featured image for [Vue.js] Reactivity

1. ref() Composition API에서 반응형 상태를 선언하는 권장 방법이다. ref()의 인자로 전달되면 ref object로 wrapped되어 반환된다. 이때 .value 프로퍼티를 가진다. 가. 왜 씀? ref()를 사용하면 변수의 값이 변경될 때 Vue.js가 자동으로 이 변경을 감지하고 DOM을 적절하게 업데이트한다. 이것이 가능한 이유는 Vue가 컴포넌트를 처음 렌더링할 때부터, 모든 ref를 기억,추적하기 때문이다. 표준 JavaScript에서는 일반 변수의 접근이나 변형을 … 더 읽기

[Vue.js] Directive & Modifiers

작성자:
Featured image for [Vue.js] Directive & Modifiers

0. 출처 Vue.js Vue.js – The Progressive JavaScript Framework 1. Directive v- 접두사가 있는 특수한 속성. 디렉티브 설명 v-bind 데이터와 속성이나 요소, 컴포넌트 props를 바인딩 v-on 이벤트 리스너를 추가 v-if 조건에 따라 요소를 렌더링 v-else v-if의 “else” 블록 v-else-if v-if의 “else if” 블록 v-for 배열을 기반으로 요소를 반복 v-model 양방향 데이터 바인딩 v-show 조건에 따라 … 더 읽기

[Vue.js] Template Syntax

작성자:
Featured image for [Vue.js] Template Syntax

1. Template Syntax Vue.js Vue.js – The Progressive JavaScript Framework 가. Text Interpolation 가장 기본적인 데이터 바인딩 방식이다. Mustache syntax (콧수염 구문)을 사용한다. Mustache syntax tag는 상응하는 컴포넌트 인스턴스의 msg 프로퍼티의 값으로 대체된다. 또한 msg 프로퍼티의 값이 변경되면 언제든지 업데이트된다! 나. Raw HTML Mustache syntax는 plain text로 해석된다. 만약 plain text가 아닌 HTML로 해석되기 원한다면 … 더 읽기

[Vue.js] Vue.js란?

작성자:
Featured image for [Vue.js] Vue.js란?

1. SPA란? 웹 페이지에서 하는 일이 많아지면서 웹 페이지를 더 빠르게 로딩하기 위해 등장한 기술이다. SPA는 한 번 웹 페이지를 로드한 후, 사용자와 상호작용하면서 동적으로 페이지를 업데이트. 전체 페이지를 다시 로드하지 않고 필요한 부분만 로드한다. 서버로부터 네트워크 트래픽을 줄이고, 사용자 경험을 향상한다. 2. CSR란? 3. Vue.js란? Vue.js Vue.js – The Progressive JavaScript Framework Vue.js는 Evan … 더 읽기

[JavaScript] ES6 문법

작성자:
Featured image for [JavaScript] ES6 문법

1. Property Shorthand 객체를 정의할 때 객체의 key값과 value에 할당할 변수명이 같을 경우 value를 생략할 수 있다. 2. Concise Method 객체 내에서 좀 더 간결하게 메서드를 사용. 3. Destructuring Assignment 구조 분해 할당. 배열이나 객체에 입력된 값을 개별적인 변수에 할당하는 간편한 방식 제공. 4. Spread Syntax 반복 가능한(iterable) 객체에 적용할 수 있는 문법. 배열이나 문자열 … 더 읽기

[JavaScript] Ajax

작성자:
Featured image for [JavaScript] Ajax

1. Ajax 이를 통해 웹 페이지 전체를 다시 로드하지 않고도 페이지의 일부만을 업데이트할 수 있다. 가. 이용방법 여러가지 방법으로 비동기 통신을 할 수 있다. 2. XMLHttpRequest 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 가. 객체 생성 자바스크립트를 이용하여 XMLHttpRequest 객체를 생성하는 방법. 나. readyState, status 프로퍼티 readyState 값 의미 설명 0 … 더 읽기

[JavaScript] XML, JSON, WebStorage

작성자:
Featured image for [JavaScript] XML, JSON, WebStorage

  1. XML, JSON 가. XML XML을 파싱하고 값을 읽어오는 방법이다. 파싱을 통해서 DOM만 생성하면 나머지는 HTML과 동일하다. 나. JSON 다른 프로그래밍 언어에서도 사용할 수 있다. MIME 타입은 application/json이다. 다. XML vs JSON JavaScript에서 동일한 데이터 기준으로 … 라. JSON method 2. Web Storage method description localStorage.setItem(key, value) key – value를 쌍으로 저장. localStorage.getItem(key) key에 … 더 읽기

[JavaScript] Array Method

작성자:
Featured image for [JavaScript] Array Method

Array – JavaScript | MDNMDN 메소드 설명 push() 배열의 끝에 요소 추가 pop() 배열의 마지막 요소 제거 shift() 배열의 첫 번째 요소 제거 unshift() 배열의 시작 부분에 요소 추가 splice() 배열의 요소를 삭제, 교체, 추가 slice() 배열의 일부를 새 배열로 반환 map() 배열의 각 요소에 함수를 적용한 새 배열 반환 filter() 함수의 테스트를 통과하는 요소로 … 더 읽기

[JavaScript] 리다이렉션, 새 창 열기

작성자:
Featured image for [JavaScript] 리다이렉션, 새 창 열기

1. Location 가. location.href location.href가 사용된다. 이를 통해 사용자는 현재 페이지의 URL을 알 수 있고, 필요한 경우 다른 페이지로 이동할 수 있다. 나. location.replace() location.replace() 메소드는 현재 문서를 새 URL로 대체한다. 이 메소드는 브라우저의 히스토리에 현재 페이지를 남기지 않는다. 즉, 뒤로 가기 버튼을 눌러도 원래 페이지로 돌아갈 수 없다. 다. location.href와 location.replace()의 차이점 브라우저의 히스토리에 … 더 읽기