분류 전체보기 (45) 썸네일형 리스트형 해시테이블 // string 자료형의 key에 해당하는 공간에 string 자료형의 value를 넣은 것 // 키와 값의 형태로 데이터를 저장하는 구조는 자바스크립트 object or map으로 구현가능 class HashTable { table = new Array(100); // key, item을 파라미터로 받아와 넣어줌 setItem = (key, value) => {}; // key를 파라미터로 받아서 table key에 맞는 value를 불러옴 getItem = (key) => {return '' ; }; } // 함수 선언 function hashStringToInt(s) { return 3; } // setItem함수 선언 // key에 어떤 값을 넣든 idx =3 setItem = (key, val.. [자바스크립트] 동기 / 비동기 동기(synchronous) 서버에서 요청을 보냈을 때, 응답이 돌아와야 다음 동작 수행이 가능 A -> B 비동기보다 디자인이 간단하고 직관적일 수 있지만, 결과가 주어질 때까지 대기해야 함 비동기(Asynchronous) 비동기적 코드의 실행 결과는 동기적 코드가 전부 실행된 뒤에 값을 반환함 동기보다 복잡하지만 결과가 주어지는데 시간이 걸려도 시간동안 다른 작업을 할 수 있어 보다 효율적 비동기 요청 시, 응답 후 처리할 콜백 함수를 함께 알려준다. 해당 테스크가 완료되었을 때 '콜백 함수'가 호출 → 콜백 패턴을 사용하면, 여러개의 콜백함수가 중첩되 나타나는 콜백 지옥이 발생 ※ 자바스크립트에서 비동기 구현의 방식3 1) 콜백함수 2) Promise 3) await / aysnc Promise 주.. [자바스크립트] reduce() / Array.from() / ForEach() Reduce() reduce() 메서드는 배열에 대해 주어진 리듀서 함수를 실행하고 결과값을 반환 아래는 쉽게 이해할 수 있는 reduce 작동 방법 애니메이션이다. http://reduce.surge.sh/ Array.from() 배열이나 객체를 복사해 새로운 배열을 만듦 이터러블 객체나 유사배열은 실제 배열이 아닌 배열같은 객체임 → 배열 메소드들인 push나 pop사용 불가능 → 이런 객체들을 배열처럼 사용해야 할 때 Array.from()을 사용함 그 어떤 공식문서도 한번에 이해하기 힘든데 이분이 쉽게 정리해주신 것 같다. Array.from({ 객체: 를 받으면 }) → 요 객체가 이터러블이나 유사 배열인지 확인한다. Array.from({ 객체: 를 받으면 }, (요 함수) => 를 통해 ) .. [자바스크립트] Element.classList / 클래스 제어 클래스 목록을 조작하는데 사용하는 메서드 속성 자체는 읽기 전용이지만 메서드를 사용해 classList 연결 속성을 수정할 수 있음 DOMTokenList 란 Element.classList의 반환형 인터페이스는 공배긍로 구분된 토큰 집합을 나타내는데, 이는 classList 속성에서 반환될 수 있음 메서드를 사용해 classList 연결된 속성을 수정할 수 있음 DOMTokenList 메서드 1) add() 명시된 클래스 추가 2) remove() 명시된 클래스 제거 3) replace(oldToken, newToken) 기존 토큰을 새 토큰으로 바꿈, 추가과정없이 즉시 replace()로 반환 4) toggle(토글하려는 토큰을 나타낸 문자열, 토글을 단방향 작업으로 전환) 기존 토큰을 제거하고 fa.. [부산카페] 영도 피아크 안녕하세요, 이번 포스팅은 저번 명절에 다녀왔던 영도 카페에요! 이정도의 규모와 탁 트인 개방감이 있는 카페는 오랜만이었던 것 같네요~ 영도구 해양로 195번길 180 영업시간 10:00 ~ 23:00 (라스트오더 22:00) 전화번호 0507-1494-9208 저희는 영도 시내에서 대중교통을 타고 카페를 갔었는데요! 대부분은 가족들끼리 차를 많이 가지고 오고, 주차공간도 꽉 차있었어요 추석 때, 방문했던 곳이라 그 넓은 공간에 자리가 잘 없을 정도로 사람이 많았었는데요 다양한 종류와 맛있는 빵이 많아서 베이커리도 인기가 많은 곳이에요! 처음 도착했을 때 건물 외관 사진을 못 찍었지만!! 외관도 크고 총 여러층으로 있어서 처음에는 출입구를 잘 못 찼았답니다. **출입구는 주차장 한가운.. [자바스크립트] 이벤트 캡쳐링 / 이벤트 버블링 addEventListener() 웹 API는 웹 개발자들이 화면에 동적 기능을 추가하기 위해서 사용하는데, 이벤트를 등록하면서 브라우저는 이벤트를 어떻게 감지하는지에 대해 알아보자. 자바스크립트는 이벤트가 발생하면 이벤트가 발생한 노드(Event Target)를 찾기 위해 DOM 트리를 탐색을 합니다. 탐색 과정은 도큐먼트 루트, 또는 가장 바깥쪽 노드에서부터 이벤트가 트리거 된 타겟 노드까지 내려가는 탐색 방식과, 반대 방향으로 다시 올라오는 탐색 방식으로 구분합니다. 타겟 노드까지 내려가는 탐색 방식을 이벤트 캡쳐링(Event Capturing), 반대 방향으로 올라오는 탐색 방식을 이벤트 버블링(Event Bubbling) 이라고 합니다. 이벤트 전파(Event Propagation) : 이벤트가.. [자바스크립트] 이벤트(event) 호출 이벤트(event)란? 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 이벤트 타입 event type 발생할 이벤트의 종류를 나타내는 문자열 마우스 이벤트 설명 mouseover 요소에 마우스 오버했을 때 이벤트 발생 mouseout 요소에 마우스를 아웃했을 때 이벤트 발생 mousedown 요소에 마우스를 눌렀을 때 이벤트 발생 mouseup 요소에 마우스를 떼었을 때 이벤트 발생 mousemove 요소에 마우스를 움직였을 때 이벤트 발생 contextmenu 마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴가 나오기전 이벤트 발생 키 이벤트 설명 keydown 키를 눌렀을 때 이벤트가 발생 keyup 키를 떼었을 때 이벤트가 발생 key.. [자바스크립트] cloneNode() / 노드복사 요소를 DOM에 복제해 붙여넣기 하는 경우, 동일한 기능을 수행하기 때문에 코드를 쉽고 간결하게 만듦 함수는 생산성을 높여주는 함수로 매우 간단하게 코드 구현이 가능함 노드를 복사할 때 cloneNode(true/false)를 사용해 자식 노드를 함께 복사할것인지(true) vs 해당 요소만 복제할 것인지 결정가능함 (false) var test = Element.cloneNode(true); 예제 const testDiv = document.getElementById('test'); // 복사할 요소를 가져옴 // test라는 id를 가진 div 요소를 가져옴 const newNode = testDiv.cloneNode(true); const newNode = testDiv.cloneNode(false.. 이전 1 2 3 4 ··· 6 다음
