본문 바로가기

분류 전체보기

 (7)
절대경로와 상대경로란? 절대경로와 상대경로 프로그래밍을 할 때 다른 폴더에 위치한 이미지나 파일을 가져와야 할 경우가 있다. 그때 경로를 지정해야 하는데 두 가지의 방법이 있다. 🔷절대경로 해당하는 파일이 가지고 있는 고유한 경로를 말한다. 예시) D:Workspace/document/img.jpg 🔷상대경로 현재 위치에서 해당하는 파일까지의 경로. 상대 경로는 아래와 같은 표기로 경로를 나타낸다. 표기 설명 / 루트, 최상위경로 ./ 현재 위치 (생략가능) ../ 현재 위치의 상단 폴더, 한단계 위 ../../ 두 단계 위 예시) 예를 들어 D:Workspace/document 폴더에 index.html 과 images폴더가 있다. index.html안에서 img.jpg 파일을 불러오고 싶다면 ➡ "./images/img.j..
[Algorithm] Tim sort (sort 알고리즘 중 하나) 오름차순 array.slice().sort((a, b) => a - b); //[1, 2, 3, 4, 5, 6, 7, 8, 9] slice를 하는 이유는 원본을 수정하지 않기위해. 내림차순 array.slice().sort((a, b) => b - a); //[9, 8, 7, 6, 5, 4, 3, 2, 1] 문자를 정렬하는 방법 arr = ['apple', 'orange', 'grape', 'banana', 'kiwi']; arr.slice().sort((a, b) => a[0].charCodeAt() -b[0].charCodeAt()) //오름차순 //첫번째 글자의 코드 넘버를 비교 arr.slice().sort((a, b) => b[0].charCodeAt() -a[0].charCodeAt()) //..
[Algorithm] 피셔 예이츠 셔플 (배열 요소 전부 다 섞는 것.) const candidate = Array(45).fill().map((v, i)=> i + 1); //빈배열 45개 만들고, undefined로 45개 채운다, map을 이용해 index에 1을 더한다. //1부터 45까지 뽑는 코드 const shuffle =[]; while(candidate.length > 0){ const random = Math.floor(Math.random() * candidate.length); // 무작위 인덱스 뽑기 const spliceArray = candidate.splice(random, 1); // 뽑은 값은 배열에 들어 있음. //빼냈던 것의 값이 return으로 나옴. // ex) [2,4,1] splice(1,1) //[4] const value = sp..
[Javascript] splice와 slice의 차이점 splice와 slice의 차이점 splice와 slice는 배열의 요소를 변경한다는 점은 같지만 다르게 동작한다. 두 배열 메소드의 차이점을 알아보자. 🔷splice 배열의 기존 요소를 삭제, 변경, 추가하여 배열의 내용을 변경한다. array.splice(a,b,c); ✔ 원본을 수정한다. ✔ 새로운 것 추가 가능. ✔ 첫 번째 매개변수는 배열의 변경을 시작할 인덱스. ✔ 두 번째 매개변수는 배열에서 제거할 요소의 수. (몇 개 자를지) ✔ 세 번째 매개변수부터는 배열에 추가할 요소들. 아무것도 지정하지 않으면 splice()는 요소를 제거하기만 한다. 🔷slice 앝은 복사본을 새로운 배열 객체로 반환한다. array.slice(a, b); ✔ 원본은 변하지 않는다. (원본이 변하지 않는 배열 메소..
[Javascript] 자바스크립트에서의 함수란 자바스크립트에서 함수란 무엇이고 왜 사용하는지, 함수의 특징 등을 알아보자. 🔹함수(function)란? 함수란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 **블록을 의미한다. 이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다. **블록 : 자바스크립트에서 블록이란 함수나 실행문의 중괄호({})로 묶여진 부분을 가리킨다. 🔹함수를 사용하는 이유 함수는 왜 사용할까? 1️⃣ 재사용성 같은 기능을 반복해서 사용하고 싶을 때 함수를 정의해 놓으면 같은 코드를 사용하지 않고 함수 호출만으로 원하는 기능을 사용할 수 있다. 코드를 한번만 작성하므로 지저분하지 않게 코드를 짤 수 있고, 용량도 줄어들 것이다. 2️⃣ 가독성 함수의 기능을 정의하고 함수의 명을 잘 지어놨다면 해당..
[Javascript] DOM이란? 문서객체모델(DOM, Document Object Model) 🔷DOM이란? DOM(Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 **인터페이스라고 볼 수 있다.넓은 의미로는 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다. 조금 좁은 의미로 본다면 **document 객체와 관련된 객체의 집합에 관한 이야기라는 것을 쉽게 추측 할 수 있다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM은 node와 object로 문서를 표현한다. 웹페이지를 스크립트 또는 프로그래밍 언어들에..
[Javascript] event.target / event.currentTarget 클릭한 요소를 가져오는 메소드 event.target / event.currentTarget 이벤트가 발생한 대상 객체를 가리킨다. 🔷 event.target 이벤트가 발생한 요소를 가리킨다. (이벤트 버블링의 가장 마지막에 위치한 최하위의 요소를 반환한다.) click const target = (evt) => { alert(evt.target); } ◾ 사용자가 div내부의 h1 태그를 클릭한다면 ➡ h1을 클릭했으므로 target은 h1태그를 가리킨다. ◾ 사용자가 div를 클릭한다면 ➡ div를 클릭했으므로 target은 div를 가리킨다. 🔷 event.currentTarget 이벤트 리스너(EventListener)를 가진 요소를 가리킨다. click const target = (evt) => { alert(evt.targ..

티스토리툴바