Programming Language 이해하기/Javascript 이해하기11 [Vue]왜 mutation 에서는 왜 비동기(async wait 문법)를 사용하면 안될까? (수정: 되긴 된다) 이번에 Vue 프로젝트를 진행하면서 mutations의 남용으로 Vuex에 대한 이해를 도왔습니다. 그 부분을 조금 더 자세히 기입합니다. 문제 발생 mutations: { ... async getUserInfos(state, loginId) { const basicUserInfo = await UserInfoApi.getUserInfoById(loginId); state.userinfo.userId = basicUserInfo.data.userId state.userinfo.userLoginId = basicUserInfo.data.userLoginId state.userinfo.userName = basicUserInfo.data.userName state.userinfo.dutyName = basi.. 2020. 12. 26. [Vue] vue-router에서 Hash Mode Vs History Mode 차이점은 무엇인가? 들어가기 최근 Vue 를 사용하게 되면서 Hash Mode와 History Mode에 대해서 의문점을 가지게 되었습니다. Vue.js에 router 관련된 설정을 추가하면서 다음과 같은 설정에 직면하게 되었습니다. import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { .... } ] }) 여기서 history와 hash를 String으로 작성하여 설정할 수 있습니다 그렇다면 이 둘의 차이점은 무엇일까? 대체 무슨 차이이지? Hash mode Hash mode는 모든 URL을 HASH(.. 2020. 12. 8. Vuex 의 상태 값의 변화를 감지해서, data 에 반영하는 방법 이번 사내에서 Vue.js 를 활용한 웹 프로젝트를 진행하면서 echart 라이브러리를 통해 깊숙하게 활용하게 되었습니다. 한 페이지에 수십개의 차트 라이브러리가 만들어지고, 이를 사용자에게 보여주는 프로젝트입니다. 여기서 처음 Vue.js와 Vuex를 활용하면서 vuex에 state 값을 어떻게 하면 data에 있는 값에 반영시킬 수 있을까? 라는 고민을 하루 이상했습니다. 이 과정에서 computed 와 watch에 대해서 이해할 수 있는 기회도 얻었고, 동시에 조금 더 보람찬 개발을 할 수 있지 있었습니다. 포스팅의 제목처럼, "Vuex 의 상태 값의 변화를 감지해서, data에 반영하는 방법"이란? computed: { changedParams: function () { const params =.. 2020. 11. 6. You don't know JS : 타입과 문법, 스코프와 클로저 - 10. 스코프/클로저 스코프 클로저 깨달음 클로저? 클로저는 자바스크립트의 모든 곳에 존재한다. 그저 인식하고 받아들이면됨. 클로저는 렉시컬 스코프에 의존해 코드를 작성한 결과로 그냥 발생한다. 이용하려고 굳이 의도적으로 클로저를 생성할 필요가 없다. 모든 코드에서 클로저는 생성되고 사용된다. 그러므로 여기서 적절히 클로저의 전반을 파악하면 클로저를 목적에 따라 확인하고, 받아들이고, 이용할 수 있다. 핵심 클로저는 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 하는 기능을 뜻한다. 크도를 보면서 앞의 정의가 설명한 바를 살펴보자. function foo(){ var a = 2; function bar(){ console.log(a) } bar(); } foo().. 2019. 7. 27. You don't know JS : 타입과 문법, 스코프와 클로저 - 9. 호이스팅 호이스팅 닭이 먼저냐, 달걀이 먼저냐 코드가 한 주 한 줄 위에서부터 차례대로 해석될 것이라고 생각하기 쉽다. 대체로 옳은 생각이지만, 바로 이런 추정 때문에 프로그램을 잘못 이해 할 수 있다. a = 2; var a; console.log(a); ??? 답은 2가 나온다 왜?? 위에서 아래로 처리되는 방식이 아니었으니 이번 코드에서도 그런 식으로 처리되어 똑같이 2가 출력되리라 생각할지도 모른다. 또는 a가 선언되기 전에 사용되었으니 ReferenceError가 발생한다고 생각할 수도 있다. 불행히도 둘 다 틀렸다. 출력 결과는 undefined이다. 무엇이 먼저일까. 선언문(달걀)일까? 아니면 대입문(닭)일까? 컴파일러는 두 번 공격한다. 자바스크립트 엔진이 코드를 인터프리팅하기 전에 컴파일한다는 사.. 2019. 7. 27. You don't know JS : 타입과 문법, 스코프와 클로저 - 8. 함수 VS 블록스코프 함수 vs블록 스코프 함수 기반 스코프 function foo(a){ var b= 2; //some code function bar(){ // ... } //more code var c = 3; } 만약 console.log(a,b,c) 찍으면 모두 ReferenceError 발생할것 함수 스코프는 모든 변수가 함수에 속하고 함수 전체(심지어 중첩된 스코프에서도)에 걸쳐 사용되며 재사용된다는 개념을 확고하게 한다. 이런 디자인 접근법은 상당히 유용하고 자바스크립트 변수의 '동적 특성을 완전히 살려 다른 타입의 값을 필요에 따라 가져올 수 있지만, 스코프 전체에서 변수가 살아있다는 점이 예상치 못한 문제를 일으킬 수 있다. 일반 스코프에 숨기 함수를 선언하고 그 안에 코드를 넣는다. 바꿔 생각해보는.. 2019. 7. 27. You don't know JS : 타입과 문법, 스코프와 클로저 - 5. 문법 문법 문(Statement)과 표현식(Expression) 문장(Sentance)은 생각을 표현하는 단어들의 완전한 조형물. 문장은 하나 이상의 어구(Pharse)로 구성되며, 각 어구는 구두점이나 접속사로 연결할 수 있고 어구는 더 작은 어구로 나눌 수있다. 어떤 어구는 불완전하여 그 자체로 완성된 문장을 형성할 수 없지만 스스로의 힘만으로 완성되는 어구도 있다. 문은 문장 표현식은 어구 연산자는 구두점/접속사에 해당된다. 문의 완료값 var b; if(true){ b = 4 + 38; } 결과는 42 그러나 var a, b; a = if(true){ b = 4 + 38; } 안됨. 왜냐하면 문의 완료값이 존재하기 때문에! 표현식의 부수 효과 var a = 42; var b = a++; a = 43 /.. 2019. 7. 27. You don't know JS : 타입과 문법, 스코프와 클로저 - 4. 강제변환 자동타입변환 = 강제적 타입변환 = 타입 강제변화 값 변환 var a = 42; var b = a + ""; // 암시적 강제변환 var c = String(a); // 명시적 강제변환 변환을 어떻게 할 것인가? '명시적' : '암시적' = '명백한' : '숨겨진 부수 효과' 용어상으로는 이러한 대응 관계가 성립 추상 연산 ToString '문자열이 아닌 값 => 문자열' 변환 작업은 ToString 추상 연산 로직이 담당 // 1.07 에 1000 을 7번 var a = 1.07 * 1000 * 1000* 1000* 1000* 1000* 1000 a.toString(); // 1.07e21 JSON 문자열화 ToString은 JSO.. 2019. 7. 27. You don't know JS : 타입과 문법, 스코프와 클로저 - 3. 네이티브 #네이티브 String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() 대표적인 자료형 하지만 자바와 달리 String()이 String이 아니고 Object 이다. 내부 [[ Class ]] typeof가 'object'인 값(배열 등)에는 [[class]]라는 내부 프로퍼티가 추가로 붙는다. 이 프로퍼티는 직접 접근할 수 없고 Object.prototype.toString()라는 메서드에 값을 넣어 호출합니다. 래퍼 박싱 var a = "abc"; a.length; // 3 a.toUpperCase(); // "ABC" 객체 래퍼의 함정 var a = new Boolean(false); i.. 2019. 7. 27. You don't know JS : 타입과 문법, 스코프와 클로저 - 2. 값 2.값 자바스크립트에 내장된 값 타입과 작동방식을 살펴보고 정확하게 사용할 수 있도록 완전히 이해하자. 배열 var a = [1, "2", [3]] a.length; //3 a[0] === 1; //true a[2][0] === 3; //true 주의 구멍난 배열! var a = []; a[0] = 1' // 'a[1]' 슬롯을 건너 띄었다. a[2] = [3]; a[1]; //undefined a.length; //3 배열 인덱스는 숫자인데, 배열 자체도 하나의 객체여서 키/프로퍼티 문자열을 추가할 수 있다. (하지만 배열 length가 증가하지는 않는다)는 점이 다소 까다롭다. var a = [ ]; a[0] = 1; a["foobar"] = 2; a.length; //1 a[".. 2019. 7. 27. You don't know JS : 타입과 문법, 스코프와 클로저 - 1. 타입 1. 타입 자바스크립트에서 타입이라는 말의 의미는 무엇일까? 내장 타입 null undefined boolean number string object symbol 값 타입은 typeof 연산자로 알 수 있고, 해당 연산자의 리턴값은 언제나 String이다. typeof undefined === "undefuned" // true typeof true === "boolean" // true typeof 42 === "number" // true typeof "42" === "string" // true typeof {life: 42} === "object" // true typeof Symbol() === "Symbol" // true 여기서 예외가 존재하는데 바로 Null type null === "ob.. 2019. 7. 26. 이전 1 다음
