javascript2018. 9. 4. 01:19

이 글은 chanspark 님의 블로그에서 가져왔습을 알립니다.원본 출처: https://chanspark.github.io/2017/11/28/ES6-꿀팁.html 최근에 ES6 관련글을 많이 보았었고 관련 스터디 및 세미나에도 적극적으로 참여했습니다.그러다 보니 종종 손에 익질 않거나 다소 생소했던 표현이 있었는데 이 글이 정말 많은 도움이 되었습니다.블로그 하시는 챈스파크님께 정말 많은 고마움과 자극을 얻어서 양해를 구하고 글을 올립니다. Michael Wanyoike , Sam Deering가 저술한 Sitepoint의 아티클을 번역하였습니다. 원문보러가기자바스크립트 기반 개발자라면 꼭 읽어보세요. 제가 수년간 자바스크립트 개발을 하며 익힌 축약코딩 기술들에 대한 리퍼런스로 사용하기 위해 이 아티..

javascript2018. 6. 12. 16:45

굉장히 흥미로운 글을 발견해서 오랬만에 글을 남겨 봅니다.일단 사건의 발단은 바로 이 콘솔창이였는데요.티스토리 블로그에서 콘솔창을 찍어보면 이런 콘솔창이 찍힙니다. 아주 있어보여요 간지가 철철 흐릅니다. 그래서 검색을 좀 해봤더니 이런 방법으로 console log 를 꾸밀 수 있더라구요 매력 티스토리 바로가기 : http://heeya7.tistory.com/7 적용 방법 등은 위 블로그에 스샷과 함께 친절한 설명이 있습니다. 여기에 +@ 를 하나 해보자면IE테스터로 IE8을 볼때 console.log 를 사용시 에러가 출력이 되는데스크립트 상단에 다음의 코드를 넣어주면 console log 사용 시 에러가 안나옵니다. 1var console = window.console || {log:function..

javascript2017. 12. 11. 23:53

자바스크립트 this this 는 일반적으로 메서드를 호출한 객체가 저장되어 있는 속성 콘솔 찍어보기 전까지 예상하기 어려운 녀석이네요.코딩을 하면서 조금씩 움찔움찔 합니다. 어... 이게 이걸 가르키나 하구요. 일반 함수에서의 this123function a() { console.log(this);}csa 함수를 호출하기 전에 this가 무엇인지 생각해 봅시다......예상하신게 이 다음 적을 결과와 같다면 아마 this를 이미 잘 아시는 분이실꺼 같습니다. 저는 자바스크립트 에서의 this 는 많이 공부해야 하지만 얕게 알고있는 내용이라도 몇자 남겨 보겠습니다.자바스크립트의 this만 하더라도 책한권의 분량이 나온다고 하니 많이 공부가 필요할듯싶습니다.이 글에서 전달하고자 하는 부분이 잘못되어 있으면..

javascript2017. 11. 23. 15:10

스터디에서 꽤나 재밌는 방식으로 객체를 만들고 놀았습니다. 제가 추구하는 방식이라 너무 공감 되더군요. 뭔가 스토리가 있는? ㅋㅋㅋ 먹고 싸는 객체를 만들어 보겠습니다. 1. 먹고 쌀려면 먹고 싸는 대상이 필요하겠죠. 대상을 객체로 만듭니다. 1 2 3 4 var 인간 = { 이름: '회복맨', 나이: 20 } cs 한번 이 객체를 console 로 찍어보겠습니다. 인간이라는 대상은 이름이 회복맨이고, 나이가 20 ㅋㅋ 입니다. 이렇게 작성하는 방식을 '리터럴 표기법' 이라고 부릅니다. 이건 객체니까 '객체 리터럴'이 명확하겠네요. 1 var obj = {}; cs 그리고 이렇게 객체 안에 키와 키값을 입력할 수 있는데, 여기선 name 가 키, 'recoveryman' 이 키값이 됩니다. 근데 키값으로..

javascript2017. 11. 21. 15:28

정말 기초 부분인데 다시한번 생각해 보려고 글을 남깁니다.스터디에서 했던 내용인데 제가 했던 스터디 본연의 내용 보단,깐깐하게 생각해 보자라는 의미로 작성했습니다. 반복문(for) 반복문 많이 쓰실꺼예요.처음 js 기초를 공부할때 가장 많은 시간을 들이는 것도 이 반복문 입니다.그리고 어디서나 볼 수 있는 구구단 만들기.이거 2단 짜리 한번 해보겠습니다. 어느책에서나 거의 꼭 나오는 문제입니다. 123for( var i=1; i

javascript2017. 9. 24. 15:16

이 글은 웹동네 님의 javascript + jQuery 완전정복 스터디 3권의 내용중 일부를 짧게 정리한 내용 입니다.명확한 설명을 원하시는 분은 위의 서적을 보시는걸 권장합니다. 클래스함수는 기능을 포장하는 기술 이라면 클래스는 그렇게 만들어진 변수와 함수 중 연관있는 변수와 함수를 선별해 포장하는 기술.포장하는 이유는 객체 단위로 코드를 그룹화하고 재사용하기 위함. 인스턴스클래스를 사용하려면 일반적으로 인스턴스를 생성해서 사용.한 페이지 내에 두개 이상의 같은 동작을 하는 UI를 만들경우 두개의 클래스를 만드는 것이 아니라 하나의 클래스를 만든 후 두개의 인스턴스를 만들어 사용. 객체객체라는 용어는 인스턴스의 다른 말 (두 용어 모두 클래스의 실체를 나타냄.)명확히 구분해서 설명하면 인스턴스 라는 ..

javascript2017. 9. 3. 16:51

일반적인 함수 일반적인 함수는 파라미터를 받아 함수 내부로 진입하고 결과값을 돌려줄 때는 return키워드를 사용해 호출자에게 값을 돌려 주는 구조로 되어 있습니다. 또는 파라미터 자체를 Call by reference로 전달(포인터 전달)해 호출자가 참조하는 값 자체를 함수 내부에서 변경하기도 합니다. 이 경우 리턴값은 없거나 에러 여부를 전달하는 데 쓰이게 됩니다. 예제1234567// 일반적인 함수function sum(num1, num2){ return num1+num2;} // 함수 호출sum(1, 2);cs 콜백 함수 콜백 함수는 함수로써 다른 함수에 전달되며, 이는 외부 함수 내에서 일종의 루틴 또는 동작을 완성하기 위해 호출됩니다. 예제12345678910function greeting(n..

javascript2017. 8. 31. 14:19

메서드 체이닝 메서드가 객체를 반환하게 되면, 메서드의 반환 값인 객체를 통해 또 다른 함수를 호출할 수 있습니다. 이러한 프로그래밍 패턴을 메서드 체이닝(Method Chaining) 이라 부릅니다. 마치 쇠사슬 처럼 객체를 연결고리로 함수를 지속적으로 호출한다고 하여 Method Chaining입니다. - Photo By Philippe P - 객체 선언 및 생성 다음과 같이 자바스크립트 코드 객체를 작성합니다.12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 함수 테스트 //객체 생성 var MySquare = function () { this._width = 0; this._height ..

javascript2017. 8. 28. 18:33

프로토타입 코딩을 하다보면 동일한 객체를 여러 개 생성하는 경우가 매우 빈번히 발생합니다. 속성은 어차피 각자 다른 값을 가져야하기 때문에 그렇다 치더라도 함수의 경우 동일한 기능을 하는 것들이 메모리 상에 각자 상주하게 되면 이는 메모리의 낭비로 이어질 수 있습니다. 이 논리는 여러 객체들이 동일한 값을 가져야하는 속성에도 동일하게 적용될 수 있습니다. 이러한 문제점을 해결하기 위한 방법으로 자바스크립트에서는 프로토타입이라는 개념을 사용합니다. 프로토타입(prototype)은 원래 형태 또는 전형적인 예, 기초 또는 표준을 의미하는 단어로 자바스크립트에서는 구속이 약한 형태의 클래스를 의미합니다. 객체의 함수를 프로토타입으로 선언하면 객체는 객체 원형의 함수를 참조하여 작업을 수행하기 때문에 메모리 상..

javascript2017. 7. 16. 17:32

다음의 예제를 먼저 예상해 봅니다.12345function fruit(fr1, fr2){ console.log(fr1); console.log(fr2);}fruit("바나나", "딸기");cs 정확히 바나나 와 딸기 를 출력하고 있습니다.fruit함수를 호출할때, 바나나와 딸기를 인자로 넣어 주고,fruit라는 함수는 이 바나나와 딸기를 받아줄 매개변수를 가지고 있습니다. 그럼 다음의 예제를 예상해 봅니다.함수 fruit는 아무런 매개변수를 가지고 있지 않습니다.12345function fruit(){ console.log(fr1); console.log(fr2);}fruit("수박", "참외");cs Uncaught ReferenceError: fr1 is not defined라는 에러가 출력되고 있습..