Web/JavaScript
Vue.js - 쿠키 사용 (vue-cookies)
쿠키(Cookie) 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일 즉, 브라우저에 저장되는 데이터를 말함 서버에 저장되는 데이터는 세션이라고 부름 Vue에서 쿠키 사용 vue-cookies 설치 (터미널 창에서 설치) npm install vue-cookies vue-cookies 임포트하기 import VueCookies from "vue-cookies" 글로벌 만료일 설정 VueCookies.config("7d"); // 만료 기간 입력 쿠키 생성 VueCookies.set("키", "값", "만료일[생략 가능]"); VueCookies.set("key", "v..
JavaScript - Class 작업 (className, classList)
className 해당 태그의 Class를 문자열로 작업하는 속성 let div_element = getElementById('div_id'); console.log(div_element.className); // 출력 값: class1 class2 // 클래스 전체 변경 div_element.className = "class_name_1"; console.log(div_element.className); // 출력 값: class_name_1 // 클래스 추가 div_element.className += " class_name_2"; console.log(div_element.className); // 출력 값: class_name_1 class_name_2 classList 해당 태그의 Class를 ..
Vue.js - 컴포넌트 ↔ 컴포넌트 데이터 전송 (props, emit)
props 상위 컴포넌트의 데이터를 하위 컴포넌트로 전달 emit 다른 컴포넌트에게 이벤트를 전달하기 위해 사용할 수 있다. (하위 컴포넌트 → 상위 컴포넌트 데이터 전달) Composition API: context.emit(event_name, data_value) Vue 2: this.$emit(event_name, data_value) 번외 props 값이 바뀌면 함수 실행 참고 링크 1: https://v3.ko.vuejs.org/guide/component-props.html Props | Vue.js Props 이 페이지는 여러분이 이미 컴포넌트 기초를 읽었다고 가정하고 쓴 내용입니다. 컴포넌트가 처음이라면 기초 문서를 먼저 읽으시기 바랍니다. Prop 타입 이제까지는 문자열 배열로 나열 된..
JavaScript - Prototype
Prototype 원형이라고 불리나 유전자가 더 와 닿는 말 해당 객체의 상위 객체(부모)라고 생각하면 됨 // 클래스 function Person() { this.name = 'kim'; } var person = new Person(); // 클래스 생성 console.log(person.name); // 출력 값: kim person.prototype.age = 24; // Prototype(부모)에 age = 24 넣기 console.log(person.age); // 출력 값: 24 console.log(person); // 출력 값: Person {name: 'kim'} 해당 객체에는 존재하지않지만, 상위 객체에 존재를 함 (age) 변수를 찾을 때 해당 객체에서 먼저 찾은 다음 없으면 상위 ..
JavaScript - JSON String ↔ JSON Object
JSON.parse() [JSON String → JSON Object] JSON 문자열을 객체로 변경할 때는 JSON.parse() 함수를 사용 JSON.parse(text[, reviver]) text (필수입력) 객체로 변환할 JSON 문자열 reviver (선택입력) JSON 문자열을 객체로 변환하여 리턴하기 전에, 값을 변형시키기 위한 함수 예제 1 (reviver 미 사용) const json = `{"id": "kim","age": 24}`; const obj = JSON.parse(json); console.log(obj.id); // 출력 값: "kim" 예제 2 (reviver 사용) // 키와 값을 이용해 변환 const function_json = (key, value) => { i..
JavaScript - Class
ES6 이전 ES6 이전에는 Class가 존재하지 않아서 함수가 대신 역할을 했음 // 생성자 function Person({name, age}) { this.name = name; this.age = age; } Person.prototype.getName = function() { return this.name; }; const person = new Person({name: 'kim', age: 24}); console.log(person.getName()); // 출력 값: kim ES6 Class는 ES6에 도입되었음 생성자 선언 시 constructor를 이용함 메소드 선언 시 객체 리터럴에서 사용하던 문법과 유사한 문법을 사용 대괄호를 사용해 변수를 메소드명으로 지정할 수 있음 const m..
JavaScript - Object 타입
Object 타입 하나에 변수에 여러가지 속성을 이용해 변수를 저장하는 데이터 타입 Key / Value 로 이루어진 구조 기본 구조: { Key: Value } 선언 방법: { } 혹은 new Object( ) 함수도 넣을 수 있으나 화살표 함수는 넣을 수 없음 값 가져오는 방법: Object_이름.Key 혹은 Object_이름["Key"] let object_example = { name: "kim", age: 10, getName: function () { console.log(this.name); // 출력 값: kim }, getAge () { console.log(this.age); // 출력 값: 10 } } console.log(object_example.name); // 출력 값: kim..
JavaScript - DOM 요소 선택자 (요소 접근)
querySelector() css 선택자를 사용하여 해당 요소의 첫번째 요소를 찾음 querySelectorAll() querySelector()와 동일하나 모든 요소를 찾음 가져올 때 오브젝트로 가져오며 for 문 또는 for-each 문을 사용함 1 2 3 getElementById() HTML 태그의 ID 속성으로 요소 가져오기 1 getElementsByClassName() HTML 태그의 Class 속성으로 요소 가져오기 가져올 때 오브젝트로 가져오며 for 문 또는 for-each 문을 사용함 1 2 3 getElementsByTagName() HTML 태그 요소 가져오기 가져올 때 오브젝트로 가져오며 for 문 또는 for-each 문을 사용함 1 2 3
JavaScript - 조건문, 반복문
조건문 if문 const number = 5; if(number >= 5) { // number가 5보다 이상 일때의 처리코드 } if-else 문 const number = 5; if(number >= 5) { // number가 5보다 이상 일때의 처리코드 (조건이 참일 때) } else { // number가 5보다 미만 일때의 처리코드 (조건이 거짓일 때) } if-else-if 문 const number = 5; if(number >= 5) { // number가 5보다 이상 일때의 처리코드 (조건이 참일 때) } else if(number >= 0) { // number가 5보다 미만이고 0 보다 이상 일때의 처리코드 (첫번째 조건이 거짓이고 현재 조건이 참일 때) } else { // 두 조..
JavaScript - 이벤트 핸들러, 이벤트 리스너
이벤트 핸들러 (같은 이벤트는 하나밖에 바인딩 안됨) 인라인(Inline) 방식: 이벤트를 HTML 요소의 속성으로 직접 지정하는 방식 버튼 프로퍼티 방식(Property): 자바스크립트 코드에서 프로퍼티로 등록하여 사용하는 방식 버튼 이벤트 리스너 (같은 이벤트 여러개 바인딩 가능) addEventListener() 방식, attachEvent() 방식 IE 9 이상에서 동작 한다. (IE 8이하에는 attachEvent() 방식을 사용해야 한다.) 프로퍼티로 방식은 "on"이 붙은 이벤트 타입을 사용하지만, addEventListener() 방식은 "on"이 붙지 않은 이벤트 타입을 사용한다. removeEventListener() 를 이용해 해당 리스너를 삭제 가능 버튼 참고 링크 1: https:..