티스토리

도도의 IT이야기

검색하기

블로그 홈

도도의 IT이야기

dodo-itstory.tistory.com/m

도도버드 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

AJAX 우리는 저번에 콜백과 프로미스에 대해서 배웠다. 그리고 나는 강조했다. 콜백과 프로미스는 비동기적 AJAX request에서 많이 사용되는 것이라고. 이제 드디어 AJAX가 도데체 뭔지 배워보자. 일단 AJAX는 자바스크립트의 코어 기능 중 하나로 몇가지 중요한 일을 한다. 1. 페이지가 로딩된 후에도, 서버에서 데이터를 읽을 수 있다 2. 읽은 데이터로 HTML데이터를 새로고침하지 않고 바꿀 수 있다. 3. 백그라운드에서 서버로 데이터를 보낼 수 있다. 즉, AJAX의 주목적은 페이지의 작은 부분을 새로고침하지 않고 가져올 수 있다는 점에 있다. 이제 AJAX의 기능을 사용할 수 있는 방법에 대해서 알아보자. 1. XMLhttprequest XMLhttprequest는 전통적인 AJAX request의.. 공감수 0 댓글수 0 2020. 5. 16.
콜백 vs promise 콜백을 대체할 수 있는 프로미스를 대해서 알아보거다. 하지만 그전에 콜백에 대해서 한번 복습해보자. 콜백은 다른 함수(higher-order function)의 파라미터로 전달되는 함수로써 그 higher-order이 원할때 호출될 수 있다. function add(a,b,print){ let sum = a+b; print(sum); } function result(res){ console.log(res);//3 } add(1,2,result) 이런 식으로 우리는 result 함수를 add의 인자로 보내 사용할 수 있다. 물론 위의 함수를 이런식으로도 쓸수있다. function add(a,b){ return a+b; } function result(res){ console.log(res);//3 } le.. 공감수 0 댓글수 0 2020. 5. 16.
[jQuery]애니메이션 더하기 지금까지 우리는 CSS에 어떻게 애니메이션을 더했죠? .original{ height:0px; transition: 2s ease; } .original.someAnim{ height:100px; } 우리는 우선 .original이라는 class에 element의 initial height를 지정해주고 javascript를 이용해 click/focus등등 event가 일어나면 .someAnim이라는 class를 더해줘서 animation이 일어나게 했습니다. 하지만 jQuery에서는 위와 같은 일을 굉장히 쉽게 할 수 있습니다. 기본적인 ANIMATION $('.original').animate({"height":"100px"}); 위 코드는 jQuery가 select된 element가 height 0 .. 공감수 0 댓글수 0 2020. 5. 13.
[jQuery] 이벤트 바인딩 우리는 지금까지 이벤트를 이런형식을 달아왔습니다 button[0].addEventListener('click',myFunc); 이렇게 jquery object를 unwrap을 하고 Vanilla js의 메소드를 사용할 수 있었습니다. 하지만 여기에 한가지 문제가 있습니다. vanilla js addeventlistener는 IE8이나 다른 인터넷 버전 호완이 안좋다는 거죠. 그래서 우리는 jQuery의 이벤트 바인딩 메소드를 사용할 수 있습니다. .on()은 addEventListner랑 같은 방식으로 사용될수 있습니다. button.on('click',myFunc); 이런 식으로 말이죠 이제 클릭하면 콜백함수인 myFunc이 실행될것입니다. .on의 엄청난 장점이 하나 있습니다. 이런 JS코드를 봅시다.. 공감수 2 댓글수 0 2020. 5. 12.
[jQuery] CSS/class 바꾸는 방법 지금까지 여러 jQuery method들을 알아봤는데요. 이번엔 CSS를 바꾸는 방법대해서 알아보겠습니다. 당연히 CSS를 바꾸는 방법은 .css 메소드를 사용하겠죠. 하지만 좀더 자세히 알아봅시다. 일단 HTML코드를 만듭시다. blah 이런 코드가 있다고 해봅시다. 여기서 먼저 div element의 color속성을 알고 싶다! 하면 이렇게 합시다. $('div').css('color');//return red 이렇게 선택한 element의 css attribute을 인자로 보내면 value를 리턴합니다 그럼 선택한 css attribute을 바꾸려면? 쉽습니다. 그저 두개의 인자를 보내면되죠. $('div').css('color','black'); 이렇게 색을 바꿀 수 있습니다. 근데 바꾸고 싶은 .. 공감수 0 댓글수 0 2020. 5. 12.
[jQuery] 콘텐트 제거 그리고 attribute 바꾸기 .empty()는 innerHTML을 지움. .remove()는 어떠한 element를 아예 없앰. hi I am dodo $('p').empty()//결과 $('p').remove()//결과: 없어짐 이제 element의 attribute을 제거하거나 바꾸는 방법을 알아보자 이러한 html이 있다고 해보자 .removeAttr()은 받은 인자로 받은 attribute을 완전히 지운다. $('div').removeAttr('class')//결과: .attr 은 attribute의 값을 바꾸거나 return한다. $('div').attr('class','anotherBanner'); //결과: $('div').attr('class');// anotherBanner을 리턴함 공감수 0 댓글수 0 2020. 5. 12.
[jQuery]wrap, unwrap,wrapAll 우선 이러한 HTML코드가 있다고 해봅시다 someThing1 som any thing 보이는 대로 ul 태그들이 div.wrapper에 wrap되있습니다. wrapper는 안에있는 element들의 width를 900px로 줄이고 화면 중간에 합니다. 우리 한번 이 wrapper을 없애 봅시다. $('ul').unwrap(); 쉽죠? unwrap은 자신의 직속 parent를 없애버리는 역활을 합니다. wrapper를 없앴기 때문에 이제 더이상 width 가 900px이 아닐겁니다. 이제 없앤것을 다시 돌려보죠 let value = "" $('ul').wrap(value); 이런식으로 더하는게 맞을까요? 약간 틑립니다만 그전에 이코드를 설명하죠. wrap의 인자에 closing tag를 더해줄 필요가 없.. 공감수 0 댓글수 0 2020. 5. 12.
[jQuery] html에 element를 더하고 바꾸는 방법 js에서는 어떠한 element를 더할때 parent.appendChild(childElement)를 사용한다 jQuery에도 비슷한 것들을 사용하여 html에 element들을 더할 수 있다. 우선 html을 만들어보자 나는 처음이다 이러한 html이 있다고 해보자. 1. append() 우리는 ul의 마지막에 또다른 li element를 추가하고 싶다고 하면 이런 방법을 사용할 수 있다. let newLi = "나는 마지막!" $('ul').append(newLi); append는 ul 안의 마지막에 newLi를 더할 것이다. 결과는 나는 처음이다 나는 마지막! 이러할 것이다. 2. prepend(); append()와 비슷하지만 prepend()는 마지막이 아닌 처음에 더한다. 그러니까 prepen.. 공감수 0 댓글수 0 2020. 5. 12.
[jQuery] jquery chaining 저번 포스팅에 select된 element에서 출발하여 다양한 jquery DOM을 접근할 수 있는 방법을 알아봤습니다. $('#child1').parent().css({border:"2px solid"}) 이제 이 방법을 이용하여 jQuery chain에 대해 알아봅시다. $('#child1').css({style:"somevalue"}) 이렇게 child1의 스타일을 바꿨습니다. 이제 child1의 parent의 스타일 바꾸고 싶다면? $('parent1').css({style:"something"});//이렇게 할 필요 없음 $('child1').css({style:"something"}).parent().css({style:"somethingElse"});//이렇게 하면 됨 이렇게 chain을 이.. 공감수 0 댓글수 0 2020. 5. 11.
[jQuery] DOM을 탐험하는 방법 우리는 DOM을 사용하므로서 HTML의 element들을 하나의 커다란 tree로본다 맨위에 HTML tag가 있고 그 밑에는 head, body body밑에는 수많은 tag들이 있다. 즉 document(HTML)을 커다란 object로 보는것이다. 그래서 document에서 selector를 사용해 안에있는 속성들을 가지고 올 수 있다. $('.wrapper1'); 우리는 document안에 있는 wrapper1을 선택했다. 만약 wrapper1의 next sibling을 선택하고 싶다면? $('.wrapper1').next(); 이렇게 다음 sibling wrapper2를 선택가능하다. $('.wrapper1').prev();//prev sibling $('.wrapper1').parent();//.. 공감수 0 댓글수 0 2020. 5. 11.
[jQuery] jquery filter 우리는 $('#target'); 공감수 0 댓글수 0 2020. 5. 11.
[jQuery] jquery와 javascript의 차이점 우리는 jquery를 이용해 js dom을 아주 쉽게 사용할 수 있다. $(document).ready(function(){ }); 위의 코드를 분석해보자 $은 jquery keyword로써 모든 jquery문들은 $로 시작한다. $다음에 parenthesis가 온다. 그리고 이 괄호안에 우리가 select할 것을 두면된다. 여기서 우리는 document(전체 HTML)을 선택했다. 우리는 이제 jquery안에있는 내장 메소드를 사용해 document가 ready가 되면 안에있는 콜백함수 실행된다. 이제 jquery와 vanilla javascript의 차이점을 알아보자. 이 코드를 확인해보자. 첫번째 코드는 getElementById를 사용해 logo를 선택한다. 두번째 코드는 jquery를 사용해 l.. 공감수 0 댓글수 0 2020. 5. 11.
OOP Mixin과 클로져를 이용한 private 속성 Mixin 함수 우선 지금까지 inheritance를 이용해 속성들을 상속받는 방법을 알아봤습니다. function Machine(){} Machine.prototype = { material : 'matal', fuel : 'gasoline', engineOn : function(){return "출발";} } function Car(brand, color){ this.brand = brand; this.color = color; } Car.prototype = Object.create(Machine.prototype); Car.prototype.wheels = 4; Car.prototype.constructor = Car; function Scooter(brand, color){ this.brand .. 공감수 0 댓글수 0 2020. 5. 11.
prototypical inheritance 복습시작 그전에 new의 역활을 정리하자면 1. 비어있는 객체를 만든다 {} 2. 생성자의 this를 비어있는 객체에 bind한다 3. 비어있는 객체에 __proto__라는 속성을 만든다. __proto__는 객체를 만든 생성자의 프로토타입 속성을 포인트한다. 4. 생성자가 비어있는 객체에 새로운 속성을 파라미터로 받은 값으로 지정해 준 다음에 this(객체)를 return한다 다른 역활을 간단한지만 3번은 이해하기가 어렵다 그러니 그림으로 표현해보자 이렇게 모든 객체안에는 __proto__라는 속성이 있고 이 __proto__는 상위 객체에서 상속받은 속성들을 나타낸다. 이거 두 개만 기억하자 1. __proto__가 가리키는 속성들이 곧 객체에 상속되는 속성들이다. 2. literal notation.. 공감수 0 댓글수 0 2020. 5. 10.
[자바스크립트 기본]객체,생성자,프로토타입,프로토타입 체인 자바스크립트는 객체지향 프로그램이라는 말이 있을 정도로 자바스크립트에서 객체는 굉장히 중요한 부분을 차지합니다. 객체(Object) 뜻 우선 객체란 말이 너무 어렵군요. 저는 코딩을 공부하기 전에 객체라는 단어가 존재하는지도 몰랐습니다. 객체를 알기위해선 객체가 영어로 무엇인지 알아야합니다. 객체는 영어로 "Object" 즉 물건이라는 뜻 입니다. 그렇습니다. 객체란 물건을 의미하는 것이죠. 이게 무슨 개소리야? 이런 소리를 하신 분들도 있으겁니다. 그러니 이해하기 쉽게 코드를 예로 들면서 설명해봅시다. 그 전에 한 가지 물건이나 사람 아무거나 떠올려 봅시다. 마침 밖에 차가 있으니 저는 차를 선택하겠습니다. 그럼 밖에 있는 차에 대해 설명을 해보겠습니다 1. 바퀴가 네개있다. 2. 차는 검정색이다. 3.. 공감수 0 댓글수 1 2020. 5. 8.
Object.prototype.toString() 메서드 다른 부분들을 공부하다보니 객체에 toStirng()이라는 메서드를 많이 사용하더라고요 number이나 다른 data type에 .toString() 메서드를 사용하면 그저 string으로 반환된 값을 주는 역활을 하지만 객체 사용하면 약간 다르더라고요. 짧게 Object.prototype.toString()대해서 알아보겠습니다. 우선 Object.prototype이라고 쓰여있으니 toString()은 빌트인 constructor 함수인 function Object()로 생성된 모든 객체에 상속되고 있다는 것을 알 수 있습니다. 그럼 이게 도데체 무엇을 하걸까요? toString() 메서드는 객체를 문자열 같은 방식으로 사용하고 싶을때 사용합니다. 예를 들어봅시다. let girl = { name:'Li.. 공감수 0 댓글수 0 2020. 5. 7.
[자바스크립트 기본] 문법과 리터럴 *MDN 문법과 자료형을 개인의 복습을 위해 간추린 글입니다* 선언 방법 1. var - 변수를 선언한다. function scope이거나 global scope로 선언 가능. 동시에 값을 초기화 하는 것도 가능. 2. let - 변수를 선언한다. block scope 로 선언. 동시에 값을 초기화 하는 것도 가능 3. const - 상수를 선언한다. block scope이고 무조건 초기화 해야됨. 변수 선언 1. var a = 2; //전역또는 지역변수 가능 2. let b = 2; //block scope 지역변수 3. a = 2; // 선언되지 않은 전역변수 *초기화 되지 않은 변수는 undefined *선언되지 않은 변수를 console.log 하면 reference error let const .. 공감수 0 댓글수 0 2020. 5. 7.
[자바스크립트 기본] 자바스크립트의 정의와 web API 자바스크립트란? 자바스크립트는 복잡한 로직을 적용하여 "살아 숨쉬는" 웹페이지를 만드는 프로그래밍 언어입니다. 서버쪽에서 실행되는 언어가 아니라 사용자의 컴퓨터에서 실행되는 언어이기 때문에 클라이언트 언어라고도 합니다. HTML은 "정보" CSS는 "디자인" JAVASCRIPT는 "행동" 하지만 요즘 JavaScript가 엄청나게 발전했기 때문에 HTML과 CSS의 위치를 위협하고 있습니다. 자바스크립트의 날개 Web API 자바스크립트는 web API라는것을 탑재한 언어입니다. Web API 는 클라이언트 쪽에서 사용하는 API를 가르킵니다. 그럼 API가 뭔데? API (Application Programming Interface) 식당에 있다고 상상해봅시다. "오늘은 흠... 어린이 돈까스가 먹고 .. 공감수 0 댓글수 0 2020. 5. 6.
[자바스크립트 기본-1] 우선 웹이란 무엇일까? 저는 왕초보 독학러로써 제가 적은 부분에 틀린 부분이 있을 수도 있다는 점을 감안해주시길 바랍니다. HTML, CSS, 자바스크립트는 전부 다 웹 개발에 사용되는 언어입니다. 우리는 이 중에 자바스크립트(JavaScript)라는 언어에 대한 고찰을 시작하려고 합니다. 하지만. 그전에 우리가 꼭 알아야 하는것이 있습니다. 웹은 무엇일까? 인터넷 > 웹 > 웹사이트 > 웹페이지 우리는 웹을 자주 사용하지만 지나가다 아무나 붙잡고 "웹이 뭐야?!"라고 물어본다면 정확한 정의를 대답할 수 있는 사람은 많지 않을겁니다. 우선 웹을 이해하기 전에 인터넷이라는 것에대해 알아야합니다. 인터넷이란? 인터넷은 컴퓨터, 스마트폰을 포함한 전자기기들을 포괄하는 거대한 네트워크입니다. 비유를 하자면 우리가 전자기기고 인터넷은 .. 공감수 0 댓글수 0 2020. 5. 6.
콜백의 개념. 비동기적과 동기적 콜백의 차이점 우선 저는 엄청난 코딩 초보입니다. 그냥 제가 이해한 내용을 쓰는 것으로 틀린 부분이 있을 가능성이 있습니다. 진짜 콜백 때문에 미칠줄 알았습니다. 몇일 동안 하루 종일 책상에 앉아 공부를 해도 콜백이 도저히 이해가 안가더라고요. 그래도 겨우겨우 제가 이해한 내용들을 조금 적어볼까 합니다. 제가 아는 내용을 다 적는거라 불필요하게 길 수도 있습니다. 함수는 일급객체 우선 시작하기 전에 함수는 일급객체(first class object)라는 점을 집고 가겠습니다. 일급객체란 변수, 매개변수에 담길 수 있고 return값으로도 사용될 수 있는 것을 가리킵니다. 밑에는 함수가 여러가지 형태로 사용되는 방법의 예시를 코드로 쳐봤습니다 //변수에 담긴 함수 let x = function(){ return '나는 .. 공감수 1 댓글수 2 2020. 5. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.