본문 바로가기
반응형

Dev/JS

 (16)
사이즈 설정 정리 (function() { var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true; // Main initHeader(); initAnimation(); addListeners(); function initHeader() { width = window.innerWidth; height = window.innerHeight; target = {x: width/2, y: height/2}; largeHeader = document.getElementById('large-header'); largeHeader.style.height = height+'px'; canvas = document.getElementById('d..
getElementsByClassName, querySelectorAll 차이점! 우선, 결과만 보자면 querySelectorAll 은 NodeList 객체반환 getElementsByClassName 은 HTMLCollection 객체반환 둘다, 유사배열이다. 예를 들어보자면! 가 나 다 라 마 위 코드에 querySelector를 사용해 '바'가 담긴 li를 추가해보자! const ul = document.querySelector('ul'); const li = document.querySelectorAll('li'); let new_item = document.createElement('li'); new_item.textContent = '바'; ul.appendChild(new_item); console.log(li) //[li, li, li, li, li]new_item이 ..
객체 안의 객체 가져오는 법! 객체 안의 객체를 가져 오는 방법은 여러가지가 있다 var clickCheck = { 'l1' : '노란기', 'r1' : '붉은기', 'l2' : '쉽게탄다', 'r2' : '빨갛게 익는다', 'l3' : '브라운', 'r3' : '블랙', 'l4' : '초록색', 'r4' : '파란색', 'l5' : '밝은 갈색계열', 'r5' : '짙은갈색 혹은 검정', 'l6' : '봄 웜톤', 'r6' : '가을 웜톤', 'l7' : '여름 쿨톤', 'r7' : '겨울 쿨톤', } // 이렇게 객체가 있을 때, console.log(answer[1])로 가져올 수 있다! // []는 배열만 가져오는 줄 알았는데 신기방기.. // 다른 방법.. console.log(answer['l1']); // 더 여러가지가 ..
JavaScript - 쿠키를 사용해보자! 기본 문법! document.cookie = "쿠키이름=쿠키값" // Ex) document. cookie = "test=abcde"; cookie를 설정하는 setCookie() 함수 만들기! function setCookie(cookie_name, value, days) { var exdate = new Date(); exdate.setDate(exdate.getDate() + days); // 설정 일수만큼 현재시간에 만료값으로 지정 var cookie_value = escape(value) + ((days == null) ? '' : '; expires=' + exdate.toUTCString()); document.cookie = cookie_name + '=' + cookie_value; } ..
쿠키(Cookie), 세션(Session), 캐시(Cache) 정리! 쿠키, 세션, 캐시에 대해서 설명해봐! 하면 막막하다.. 마침 업무 중 쿠키와 관련된 내용이 있어서 쿠키를 보면서 세션, 캐시도 같이 한번 살펴보자! 목표: 쿠키, 세션, 캐시의 차이점을 설명해보시오~ 우선! 쿠키, 세션, 캐시를 사용하는 이유! (정확하게 말하자면 캐시는 제외!) 쿠키, 세션, 캐시를 사용하는 이유는 간단하다! 사용자가 로그인을 하고 다른 페이지로 이동을 했을 때, 그 로그인을 유지하기 위해서, 같은 사이트를 방문 시, 여러 개의 이미지들을 불필요한 로드를 없애기 위해서 등 여러가지 이유가 있다! 세밀하게 보면 HTTP와 관련이 있는데 다음을 읽어보자! HTTP의 특징과 쿠키와 세션을 사용하는 이유 HTTP 프로토콜의 특징이자 약점을 보완하기 위해서 사용한다. HTTP 프로토콜 환경에서..
JavaScript로 Excel export 구현하기! 현재 입력되어 있는 table 형태 나 같은 경우엔 ajax로 api를 받아와서 table이 추가 되게 설정해서 기본 table에는 내용이 별로 없다 그래도 excel로 변환하는데는 아무 지장 없으니 고고! 우선, excel 변환을 하기 위해서는 여러 방법이 있겠지만 이번엔 SheetJS를 통해서 해보도록 하자! cdn을 사용해도 되고 다운받아 사용해도 된다! npm install xlsx npm install file-saver --save 우선 세팅은 끝났고! 엑셀로 변환하는 전체 프로세스는 이렇게 된다 1. 엑셀 Workbook 생성 2. 데이터(배열/json/html table)를 가져와 sheet 생성 3. workbook에 만든 시트를 추가 4. 엑셀 파일 생성 5. 다운로드 받도록 처리 앞서..
forEach() vs map() 언제 무엇을 써야할까? 우선 MDN을 보고 원리를 이해하면 베스트!! forEach() : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach map() : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map 시간 없어도 나중에 꼭 찾아보고!! 간단하게 보자면! forEach() 주어진 함수를 배열 요소 각각에 대해 실행! map() 주어진 함수를 배열 요소 각각에 대해 실행하고 그 결과를 모아 새로운 배열을 반환! 정의는 이래! 그럼 똑같이 배열 요소 전부를 실행하는건데 차이점이 뭘까?! 가장 큰 차이점은 새 배열을 리턴한다는거야! 그게 ..
for ...in for ...of 반복문 비교!!! + forEach문 추가! ES6부터 추가된 for ...in, for ...of 둘 다 반복문으로 사용 되는데!! 뭐가 다르길래 나눠놨을까? 하나는 객체를 탐색하고 또 다른 하나는 배열을 탐색한다!! 무엇이 객체를 탐색하냐 바로 for ...in ! const myObj = { a: 1, b: 2, c: 3 } for(const item in myObj) { console.log(item) // a, b, c } for ...in을 쓰면 myObj 객체의 프로퍼티가 나오는 것을 확인 할 수 있다!! 그렇다면 for ...of !! const myArray = [1, 2, 3]; for(const item of myArray) { console.log(item); // 1, 2, 3 } 배열 순환이 잘 되는구만! 궁금점!! 배열에..
반응형

티스토리툴바