본문 바로가기

Dev/JS

(16)

JavaScript 객체 기본 중의 기본 중의 기본 중의 기본!! 객체를 이해한 줄 알았는데 다른 사람한테 설명하려고 하니까 막막... 그래서 다시 한번 정리 해보려고 글 씀ㅠㅠ 이번엔 확실히 잡고 가자ㅏㅏㅏㅏ 바로 본론으로 들어가서!! 객체란 무엇이냐? 관련된 데이터와 함수의 집합이야 (일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 불러) 예제를 통해서 실제 객체가 뭔지 보자! var person = {}; 생성하고 콘솔에 person 입력 ㄱㄱ 결과는? 축하해~ 너는 지금 객체를 생성 했엌ㅋㅋㅋㅋㅋㅋㅋ 하지만 이건 텅 빈 객체여서 우리가 이걸로 뭘 할 수는 없어.. 수정해보자! var person = { name : ['Bob', 'Smith'], age: 32, gender: 'male', interests: ['m..

페이지 로드 후 스크립트 실행! window.onload, ready, DOMContentLoaded 뭘 써야할까?! 코딩을 하다 보면 가끔 스크립트가 제대로 작동하지 않는데 여러 이유가 있겠지만 그중 하나는 페이지가 로드되기 전에 스크립트가 실행되는 이유가 있다. 이러한 점을 방지하기 위한 방법은 여러 가지가 있는데 스크립트를 바로 위에 로드해서 마지막에 실행되게 하는 방법, onload, jquery.ready, DOMContentLoaded를 사용해 특정한 콘텐츠가 로드된 후 실행되도록 하는 방법 등 여러 가지가 있다! 오늘은 여러 방법들 중 window.onload, jQuery.ready, DOMContentLoaded의 차이점을 알아보고 무엇을 써야 할지 알아볼 것이다! 우리는 항상 시간이 없다.. 바로 본론으로 들어가자!! DOMContentLoaded 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는..

getElementById ? querySelector ? 뭘 써야 해 .. ? 호홯하ㅓㅎ허ㅏㅏㅎ 하이하히아힝하이 이번엔 요소를 잡아오는 getElementById 와 querySelector의 차이점을 알아볼거야! 원래 같으면 제이쿼리로다가 $('#id')나 $('.class')로 편하게 사용하겠지만 이제는 안돼.. 본질을 알아야 나중에 이게 이렇게 돌아가는구나라는 짐작이라도 하겠지!! 가보자고~~ 우선, 난 답답한건 싫어하니까 답부터 보고 가자! 사실 정답은 생각하기 나름이겠지만! 굳이 답을 얘기해보자면! getElementById!! 두 가지 기능 모두 좋지만 상황에 맞게 써야 해! getElementById를 사용하라고 했지만, querySelector를 사용하지 말아야지! 라는 강박은 없어도 돼!! 만약, 페이지가 복잡하고 모든 페이지에 ID를 추가하지 않으려면 queryS..

innerHTML ? innerText ? 삐--- textContent를 지향하자 코딩을 하면서 더 좋은 코딩을 하고 싶은 것에 대한 욕심이 생긴다.. 이 글도 그 과정 중 하나... 바로 본론으로 가보자ㅏㅏㅏ 우선, 한눈에 보기 편하게 textContent, innerText, innerHTML 을 비교 해보자! 프로퍼티 innerHTML innerText textContent 값 HTML parsed text rendered Text raw text 성능 나쁨 보통 좋음 보안 - - 취약 innerHTML innerHTML 프로퍼티의 값은 text/html으로 파싱한 결과. 그래서 상대적으로 파싱이 느리다. (사실 큰 차이는 아님) 하지만 더 큰 문제는, innerHTML가 대표적인 XSS(Cross-Site Scripting) 공격에 취약한 사례로 언급된다는 점!! HTML5에서..

브라우저가 지원하지 않아서 ES6를 안쓴다? 핑계 노노해! 바벨(BABEL) ES6는 이제 충분히 써도 될만한 시기라고 생각한다. "나는 front developer가 아니기도 하고 브라우저가 모두 지원하지도 않기에 ES6는 아직 못쓴다" 라고 생각하고 있다면 이 글을 통해 생각을 바꿀 수 있길 바란다. 어차피 쓰는 거 ES6뿐 아니라 ES8까지 사용하는 것을 권장한다. IE11 이하 버전들은 ES6나 이후에 대한 고려가 거의 없지만 엣지(MS Edge)를 포함한 모든 모던 브라우저들은 네이티브로 ES8(ECMAScript2017)의 대부분의 스펙을 지원한다.(실용적인 사용에 있어서는 100%라고 봐도 된다) 모던 브라우저들은 이렇게 열심히 스펙을 따라가 주고 있다. 프로젝트의 지원 대상 브라우저가 IE11 이하 버전을 포함하고 있다면 그때는 우리의 무기 바벨을 사용할 때이다. ..

ES6 : 비구조화 할당~ 오우오우~ 일단 이런 배열이 있다고 보자! const animalList = ["CAT", "DOG", "TIGER"]; const cat = animalList[0]; const dog = animalList[1]; const tiger = animalList[2]; console.log(cat); // CAT console.log(dog); // DOG console.log(tiger); // TIGER animalList라는 변수는 순서대로 'cat', 'dog', 'tiger'를 갖고 있는 배열이야. 이 변수가 가진 값을 각각 변수에 꺼내서 쓰려면 직접 하나씩 지정을 해줘야 해.. 이런 작업은 엄청 귀찮고 코드를 읽기에도 엄청 복잡하게 보이는 단점이 있어! 비구조화 할당을 써보자고 뚜둥! const [cat..

ES6 : 전개연산자(Spread Operator) ㅗㅜㅑ 전개연산자(Spread Operator)는 객체나 배열의 값을 하나 하나 넘기는 용도로 사용할 수 있어! 전개연산자를 사용하는 방법은 점 세개(...)를 붙이면 돼! ES5에서 배열의 내용을 합쳐서 새로운 배열을 만들기 위해선 concat 메소드를 썼거든? 예를 들자면 이렇게! var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; var arr3 = [7, 8 ,9]; var arrWrap = arr1.concat(arr2, arr3); console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9] ES6에서 전개연산자를 쓰면! const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, 8,..

JavaScript - var, let, const 차이점 // 선언, 할당 JavaScript에서 변수 선언 방식인 var, let, const 의 차이점에 대해 알아보자. 1. 변수 선언 방식 우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. var name = 'bathingape' console.log(name) // bathingape var name = 'javascript' console.log(name) // javascript 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다. 그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선..

이전 1 2 다음

티스토리툴바