개인코딩개발공장

css에 v-bind가 갑자기 안됐다. 그 이유는 시발.. css에 v-bind로 바인딩 해놓은 부분을 '한 부분만이라도' 주석처리하면 전체 css v-bind가 막혀버린다 처음알았다 ㅡㅡ

# 먼저 vue에서 key이벤트는 아래 블로그를 참조하면 된다. https://ux.stories.pe.kr/119 Vue.js의 이벤트 사용 방법 정리 Vue.js에서 이벤트를 다루는 방법에 대해서 간단히 정리하려고 합니다. HTML에는 나 처럼 당연히 알고 있는 기본 이벤트가 있습니다. 그리고 이미 javascript를 통해서 기본 이벤트와 어우러지게 사용 ux.stories.pe.kr # 문제는 키 이벤트가 input 태그에서만 실행된다는 점! 키이벤트 정리는 저 위에 블로그를 보면 되고.. 암튼 left키를 누르거나 .right 키를 누르면 연결된 이벤트가 실행된다는 점인데 조건이 인풋태그가 활성화 될때만 이라는점.. # 해결방법? 자스에서 dom으로 만지면 된다. mounted() { docum..

const Dog = function () { this.name = "도리"; }; const dog1 = new Dog(); const dog2 = new Dog(); dog1.__proto__.sayHello = function () { console.log("헬로우 도리"); }; // 이건 dog1 dog2둘다 사용가능 dog1.__proto__ = { sayHello() { console.log("헬로우 무찌"); }, }; //이건 dog1꺼만 바꿈. // dog1.sayHello(); dog2.sayHello(); const Dog = function () { this.name = "도리"; }; const dog1 = new Dog(); Dog.prototype = { sayHello() ..

# 왜 이런걸 포스팅할까? 난 이책을 읽기전에 예전에 인수가 파라미터고 파라미터가 인수인줄 알았다. 뭐사실 중요한건가 싶기도했는데 자스를 깊게 파보기로 했으니 용어정리는 매우 중요하다고 생각한다. 함수에서 인수와 파라미터의 차이에 대해 명확히 구분하기 위해서 포스팅한다. # 매개변수란?(parameter) const fuc = function (parameter1, parameter2) { console.log(parameter1, parameter2); }; 이렇게 간단한 함수를 만들어봤다. 여기서 parameter1과 parameter2가 매개변수다. 함수를 정의할때 만들어주는것이 매개변수라고 보면된다. # 인수란?(argument) fuc("무찌", "도리"); // 무찌 도리 출력 위에서 만든 함..

# 일급객체란? 일단 일급객체 용어부터 정리하면 1. 무명의 리터럴로 생성할 수 있음. 런타임 생성 가능 const fuc = function(){ return } 뭐 이런뜻인듯? 중첩함수에서 만들어지는게 런타임중 만들어지는 함수인가..? 암튼 2. 변수나 자료구조에 저장할 수 있다. 3. 함수의 매개변수에 전달할 수 있다. 4. 함수의 반환값으로 사용될 수 있다. 2,3,4번은 그냥 함수리터럴이 메모리에 함수객체로 저장되는 표현식이니까 당연한거.. 3번은 자주쓰이는 콜백함수다. 뭐 이렇단다.. 아직 중요한지는 모르겠음. # 함수객체의 프로퍼티 함수객체를 console.dir로 찍어보자 const fuc = function () { return; }; console.dir(fuc); 저렇게 argumen..

const checkJokbo = (para, count) => { if (typeof para !== "object") { console.log("객체만 써"); return; } else { if (!count || 0) { console.log(`조상님 찾기 시작!`); count = 1; } else { count = count; } if (para.__proto__ == Object.prototype) { console.log(`${count}촌 : Object`); console.log("조상님 찾기 끝!"); return; } else { console.log(`${count}촌 : ${para.__proto__.constructor.name}`); count++; checkJokbo(par..

# 왜 포스팅하니? getter setter 프로퍼티를 접하고 신기해서 써봄.. 이 문법에대해서 사실 몰랐다. 근데 생각보다 꽤나 유용할것 같아서 포스팅하려고 함. # 내가 문제로 삼았던것. const obj = { dog1: "무찌", dog2: "도리", teamName: obj.dog1 + obj.dog2+'듀오', }; 위 코드는 에러가 뜬다 요렇게 참조에러가 뜬다. teamName프로퍼티가 dog1과 dog2를 참조하는건데 teamName프로퍼티가 자기자신 obj를 참조하는 시점이 실행컨텍스트의 코드평가할때 참조하려고해서 참조에러가 뜨는거다. 호이스팅이 발생하는거지. 그래서 이걸 억지로 만들어보려면..? - 즉시실행함수 const obj = { dog1: "무찌", dog2: "도리", }; (..

객체지향을 모르고 걍 코더로써 코딩을 할때 이 세가지의 차이를 잘 몰랐었다. 근데 사실 계속 코드짜면서 굳이? 왜 클래스로 객체를 만들까? 이런 의문은 있었다. 뭐 이걸 공부하기 전까진 동작이되게 코드를 짜는정도 수준이었던것같다. 그래서 이번에 공부하다가 이 세가지의 차이점에 대해서 명확하게 구분하기위해 포스팅을 해보겠다. 일단 세가지 예시코드를 보자~ # 객체를 리턴하는 함수 const makeDog = (name, age) => { return { name, age }; }; 저 함수를 호출하면 객체가 튀어나온다. console.log(makeDog("무찌", 2)); //{ name: '무찌', age: 2 } 이렇게 함수에다가 적절한 파라미터를 넣고 함수를 호출하면 객체를 만들 수 있다. # 생성..

흔히들 메서드는 객체안에 존재하는 함수? 같은걸로 생각을 한다. 뭐 기능면에서는 동작이야 다 잘되겠지만.. 일단 아래코드를 보자. const obj = { 화살표함수: () => { console.log("화살표함수"); }, 메서드() { console.log("메서드정의방식 메서드"); }, 표현식: function () { console.log("표현식"); }, }; 객체 obj에 저렇게 프로퍼티? 메서드를 써봤다. 일단 코드에서 봐서 알겠지만 저기서 메서드라고 적힌 함수?만 메서드다 일단 다 호출해보면 모두 제대로 호출된다. const obj = { 화살표함수: () => { console.log("화살표함수"); }, 메서드() { console.log("메서드정의방식 메서드"); }, 표현식..

# 기본 코드 const Dog = function (name) { this.name = name; }; const dog1 = new Dog("무찌"); Dog라는 생성자 함수와 이 생성자 함수로 새로운 객체를 만들어, 식별자 dog1에 할당했다. 기본적인 생성자함수의 문법이다. # Dog의 프로퍼티 console.dir(Dog); 위 코드를 쳐보면 뭐 이렇게 생겼다. 우리가 주목할건 저 prototype이라는 프로퍼티다. 저 prototype프로퍼티를 또 펴보면 요렇게 생겼고 constructor이라는 프로퍼티가 또 들어있다. 저 constructor이라는 프로퍼티를 또 펴보면 얘는 Dog라는 함수란다.. 읭? 우리가 처음 만든 Dog 생성자 함수다. 여기엔 또 prototype이 들어있다. 저 pr..