Array.prototype.map arr.map(callback(currentValue[, index[, array]])[, thisArg]) 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 1) callback : 새로운 배열 요소를 생성하는 함수로 다음 세 가지 인수를 가짐 currentValue : 처리할 현재 요소 index : 처리할 현재 요소의 인덱스 array : map()을 호출한 배열 thisArg : callback을 실행할 때 this로 사용되는 값 2) map 메소드란 callback 함수의 각각 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다. callback 함수는 배열 값이 들어 있는 인덱스에 대해서..
1. Array.prototype.splice() array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가해 배열의 내용을 변경한다. 1) start : 배열의 변경을 시작할 인덱스 배열의 길이보다 클 경우 배열의 길이에서부터 시작된다. 음수일 경우 배열의 끝에서부터 요소를 센다. 절대값이 배열의 길이보다 큰 경우 0으로 세팅한다. 2) deleteCount : 배열에서 제거할 요소의 수 이 부분을 생략하거나 값이 array.length - start보다 큰 경우 start부터 모든 요소를 제거한다. 이 부분이 0 이하라면 어떤 요소도 제거하지 않는다. 3) start : 배열의 변경을 시작할 인덱..
경계 : \w로 word 선택하기 이전 글에서 어떤 범위를 지정할 때 [-]를 사용했었다. (ex. [a-z]) 경계를 사용하면 보다 간략하게 표시할 수 있다. w는 word라는 뜻인데, 이 word에는 알파벳(대소문자) + 숫자 + _(언더바)가 포함된다. ✏️ 예시) [Case 1] \w - 알파벳 숫자 언더바 모두가 선택된다. [Case 2] \w* - 수량자 '*'의 의미는 0~1~여러 개를 뜻한다. 위와 같아보이지만 First match에서 A / A1로 다르다. ✏️ 예시) [Case 3] [a-z]\w* - 소문자 중 아무거나로 시작하고 문자면 0~1~여러 개를 선택한다. - 그래서 c부터 시작하며 공백이나 콜론, 대시를 제외한 단어들이 선택된다. [Case 4] \w{5} - 중괄호 안의 ..
수량자 어떠한 패턴이 얼만큼 등장하는지 숫자를 나타내는 것으로, * / + / ? 세 가지 표현 방법이 있다. *는 0 또는 여러 개 +는 1 또는 여러 개 ?는 0 또는 1을 나타낸다. 수량자 뒤에 있는 문자를 기준으로 생각하는 것이 편리하다. 아래 예시로 보다 정확하게 이해해보자. ✏️ 예시) [Case 1] a*b - b 앞에 문자가 0번 나오거나 여러 개 있는 것이 선택된다. - 즉 b 앞에 문자가 1개, 2개, 3개... 여러 개 있어도 선택되고, 문자가 하나도 없어도 선택된다. [Case 2] a+b - b 앞에 문자가 최소 1번은 나와야 한다. - 앞에 문자가 아무 것도 없는 b는 선택되지 않는다. [Case 3] a?b - b 앞에 문자가 없거나 1번 있어야 한다. - b 앞에 문자가 여러..
정규 표현식의 기본 패턴 정규 표현식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. 먼저 정규 표현식은 대소문자를 구분한다. (구분하지 않게 하고 싶다면 정규 표현식의 내용이나 설정을 바꿔야 한다.) 또 띄어쓰기, 탭, 개행 등의 영향을 받는다. ✏️ 예시) 정규 표현식의 위치와 이스케이핑 ^ (캐럿)은 라인의 앞쪽에 있는 요소를 선택할 때 쓰인다. $ (달러)는 라인의 뒤쪽에 있는 요소를 선택할 때 쓰인다. 아래 예시처럼 같은 who여도 ^이냐 $이냐에 따라서 선택되는 부분이 다르다. ✏️ 예시) 만약 이런 ^, $가 소스에 포함되어 있다면 어떻게 해야 할까? Case 1의 정규 표현식은 라인 가장 앞 쪽에 있는 $를 표현하려고 했다. 하지만 뒤에 있는 $가 정규표현식의 $이기 때문에 작동되지 않..
들어가기에 앞서 여태까지 백준에서 파이썬으로 알고리즘을 풀었어서 몰랐었는데, JS로 풀려니까 입력 값을 어떻게 받아야 할지 의문이었다. 구글링을 해보니 알 수 없는... 무시무시하게 긴 코드들이 나와 지레 겁을 먹고 좀 더 용이한 프로그래머스로 빤스런을 했으나 오늘 한 문제를 만나면서 다시 그 긴 코드들을 마주하게 되어 그냥 찬찬히 뜯어보기로 했다. readline 모듈 내가 본 그 무시무시한 코드는 readline 모듈이었다. 이 모듈은 Readable Stream에서 한 번에 한 줄씩 데이터를 읽기 위한 인터페이스를 제공하는 모듈이라고 한다. 먼저 이 모듈을 불러온다. const readline = require("redaline"); 다음으로 데이터를 읽기 위한 인터페이스를 생성해보자. cons..
📌 마우스로 점을 찍자 캔버스 안에 마우스로 점을 찍을 때, 그 위치에 점이 찍히게 하고 싶다. 우선 캔버스 안에 점을 찍을 위치를 뽑아주어야 한다. 그 위치는 offsetX, offsetY이다. 점의 크기를 정해주고 사용할 색을 담은 어레이를 만들어주었다. 캔버스에 클릭이라는 이벤트가 일어날 때 cursor_move라는 함수가 작동하는데, 해당 함수는 이벤트가 발생한(클릭한) 위치의 offsetX, offsetY을 좌표로 사용한다. 참고로 매 좌표마다 패스를 새로 시작하게 설정해주어야 한다. 그렇지 않으면 점을 찍을 때마다 안 떨어지고 달라 붙는다. 점을 찍을 때마다 원이 찍힐 것이고, 그 원의 좌표는 아까 지정한 좌표 + 반지름 크기 10 + 원의 모양으로 arc를 정해준다. 컬러의 경우 이전에 배웠..
📌 Canvas를 만들어보자 -CSS, JS에서 모두 캔버스의 크기를 동일하게 지정해주어야 한다. CSS에서의 크기는 유저가 볼 수 있는 UI의 사이즈를 설정한 것이고, JS에서의 크기는 캔버스의 해상도이기 때문이다. canvas { width: 800px; height: 800px; border: 1px solid black; } body { display: flex; justify-content: center; align-items: center; } const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 800; canvas.height = 800; ctx.fillRect(5..
📌 위치/날씨를 찾아보자 navigator.geolocation.getCurrentPosition() 이런 놈을 써서 위치를 알아낸다. 근데 getCurrentPosition는 아래와 같이 인수를 2가지 가져야 한다. getCurrentPosition.(잘 됐을 때 실행될 함수, 에러가 발생했을 때 실행할 함수) function onGeoOk(position) { console.log(position); } function onGeoError() { alert("Can't find you. No weather for you.") } navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError); 잘 됐을 땐 onGeoOk라는 함수를 실행시킬 건데, 이 함수..
📌 to do list 만들기 본격적으로 졸업과제의 핵심인 to do list를 만들어보았다. 여러 가지 기능이 짬뽕되어 있어 한 번에 이해하기가 어려웠다. 그러니까 복습하는 거지만. HTML id가 todo-form이라는 form을 만들었고, 그 안에 input 타입이 text인 놈을 만든 후 밖에는 id가 todo-list인 ul을 만들었다. JS const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-list"); function handleToDoSubmit(ev..
