전체 글
-
JavaScript - 객체 메소드와 thisFrontend/JavaScript 2021. 7. 6. 18:52
- 메소드(method) 객체 프로퍼티에 할당된 함수 객체에게 행동할 수 있는 능력 let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); // 안녕하세요! - 메소드 단축 구문 function을 생략해도 메소드를 정의할 수 있음 일반적인 방법과 단축 구문을 사용한 방법이 완전히 동일하진 않음(객체 상속과 관련된 미묘한 차이가 존재) // 아래 두 객체는 동일하게 동작합니다. user = { sayHi: function() { alert("Hello"); } }; user = { sayHi() { // "sayHi: function()"과 동일합니다. alert("Hello"); } }..
-
JavaScript - 객체Frontend/JavaScript 2021. 7. 6. 15:43
- 객체 정렬 방식 특별한 방식으로 정렬 정수 프로퍼티는 자동으로 정렬 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬 let codes = { "49": "독일", "41": "스위스", "44": "영국", // .., "1": "미국" }; for (let code in codes) { alert(code); // 1, 41, 44, 49 } let user = { name: "John", surname: "Smith" }; user.age = 25; // 프로퍼티를 하나 추가합니다. // 정수 프로퍼티가 아닌 프로퍼티는 추가된 순서대로 나열됩니다. for (let prop in user) { alert( prop ); // name, surname, age } - 정수 프로퍼티란? 변형 없이 ..
-
Vuex 핵심 컨셉(5) - 모듈(module)Vue/Vuex 2021. 7. 2. 11:35
단일 상태 트리를 사용하기 때문에 어플리케이션의 하나의 큰 객체 안에 포함 규모가 커짐에 따라 저장소는 매우 비대해질 수 있다. 이를 위해 Vuex는 Store를 모듈로 나눌 수 있다. 각 모듈은 자체 상태, 변이, 액션, getters 및 중첩된 모듈을 포함할 수 있다. const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: () => ({ ... }), mutations: { ... }, actions: { ... } } const store = createStore({ modules: { a: moduleA, b: moduleB } }..
-
Vuex 핵심 컨셉(4) - 액션(actions)Vue/Vuex 2021. 7. 1. 18:08
- 액션(actions) 변이(mutation)와 유사 변이와 차이점 상태를 변이 시키는 대신 액션으로 변이에 대한 커밋을 함 작업에는 임의의 비동기 작업이 포함될 수 있음 액션 Handler는 Store 인스턴스의 동일한 메소드/프로퍼티 정보를 가지고 있는 컨텍스트(context) 객체를 받는다. context.commit: 변이를 커밋 context.state: 상태에 접근 context.getters: getters에 접근 // store/index.js const store = createStore({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { cont..
-
Vuex 핵심 컨셉(3) - 변이(mutations)Vue/Vuex 2021. 7. 1. 17:03
- 변이(mutations) Vuex Store에서 실제로 상태를 변경하는 유일한 방법 이벤트와 매우 유사 각 변이에는 문자열 타입, Handler 존재 Handler 함수는 실제 상태 수정을 하는 곳이며, 첫번째 전달인자로 상태(state)를 받는다. Handler 함수를 직접 호출 할 수 없다.(이벤트 등록과 유사) Handler 함수를 호출하려면 해당 타입과 함께 store.commit을 호출 // store/index.js const store = createStore({ state: { count: 1 }, mutations: { increment (state) { // mutate state state.count++ } } }) // Vue component에서 호출 store.commit('..
-
Vuex 핵심 컨셉(2) - GettersVue/Vuex 2021. 7. 1. 15:25
- 둘 이상의 컴포넌트에서 Store 상태를 기반으로 computed를 계산해야 하는 경우 (예: 아이템 리스트를 필터링하고 계산) computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } } 함수 복제 공유된 헬퍼를 추출하여 여러 위치에서 가져오기 => 둘 다 이상적이지 않다. - 위와 같은 경우 Vuex를 사용하여 Store에서 'getters'를 정의 Store의 computed 속성으로 생각할 수 있음 computed 속성처럼 getter의 결과는 종속성에 따라 캐쉬되고, 일부 종속성이 변경된 경우에만 다시 재계산 getters는 첫번째 전달인자로 상태(state)를 받는다. co..
-
Vuex 핵심 컨셉(1) - 상태Vue/Vuex 2021. 7. 1. 13:59
Vuex는 단일 상태 트리를 사용 즉, 이 단일 객체는 모든 어플리케이션 수준의 상태를 포함하여 '원본 소스' 역할 각 어플리케이션마다 하나의 저장소만 갖게 된다는 것을 의미 단일 상태 트리를 사용하면 특정 상태를 쉽게 찾을 수 있으므로 디버깅을 위해 현재 앱 상태의 스냅 샷을 쉽게 가져올 수 있음 Vuex Store의 데이터는 Vue 인스턴스의 데이터와 동일한 규칙을 가진다. - Vuex 상태를 Vue 컴포넌트에서 가져오기 가장 간단한 방법은 computed 속성 내에서 일부 저장소 상태를 가져오는 것 store의 값이 변경되면 computed 속성이 다시 변경되고 관련 DOM 업데이트가 트리거 된다. Vuex는 store 옵션( Vue.use(Vuex) )으로 루트 컴포넌트의 모든 자식 컴포넌트에 저..
-
자료구조 - 링크드 리스트(Linked List)CS/자료구조 2021. 6. 30. 23:54
- 링크드 리스트 구조 연결 리스트 떨어진 곳에 존재하는 데이터를 화살표로 연결해서 관리하는 데이터 구조 배열의 미리 공간을 지정해야 하는 단점을 극복한 자료구조 - 링크드 리스트 기본 구조와 용어 노드(Node): 데이터 저장 단위(데이터값, 포인터)로 구성 포인터(Pointer): 각 노드 안에서, 다음이나 이전의 노드와의 연결 정보를 가지고 있는 공간 - Linked List 장단점 장점 미리 데이터 공간을 할당하지 않아도 됨 단점 연결을 위한 별도 데이터 공간이 필요하므로 저장공간 효율이 높지 않음 연결 정보를 찾는 시간이 필요하므로 접근 속도가 느림 중간 데이터 삭제 시, 앞뒤 데이터의 연결을 재구성해야 하는 부가적인 작업 필요 - 자바스크립트로 Linked List 구현 Linked List,..