js 썸네일형 리스트형 [javascript] 문자열 뒤집기 배열은 reverse를 사용하여 쉽게 뒤집을 수 있지만 문자열에는 reverse가 적용이 안된다. 그래서 문자열을 배열로 바꿔준 뒤 reverse 사용 그리고 다시 문자열로 변환해줘야 함 my_string.split('').reverse().join(''); 요런 방법도 있네요 [...my_string].reverse().join(""); 더보기 [javascript] Array map(), filter(), reduce() map(), filter(), reduce() 세 가지 함수는 배열 요소를 나열하거나 특정 조건에 맞게 보여줘야 할 때 자주 쓰인다. 중요한 친구들 다시 한 번 자세하게 정리!!!!!!! 1. Array.map() callback함수를 각각의 요소마다 실행시켜 리턴값으로 새로운 배열로 반환한다. arr.map(callback(currentValue[, index[, array]])[, thisArg]) callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가진다. currentValue : 처리할 현재 요소 index (Optional) : 처리할 현재 요소의 인덱스 array (Optional) : map()를 호출한 배열 thisArg (Optional) : callback을 .. 더보기 [javascript] replace() 문자열 치환 1. replace() 특정 문자를 다른 문자로 치환할 때 사용한다. str.replace(regexp|substr, newSubstr|function) str.replace(변환할 값을 찾는 파라미터, 파라미터를 대신할 문자열 또는 함수) replace는 제일 먼저 일치하는 값만 바꿔줄 뿐 일치하는 모든 값을 바꾸지는 않는다. 만약 첫번째 값뿐만이 아닌 일치하는 모든 값을 바꾸고 싶다면 정규표현식을 사용해도 되고, replaceAll을 사용해도 된다. const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?'; console.log(p.replace('dog', 'monkey')); // .. 더보기 [javascript] localStorage 사용방법 1. localStorage localStorage를 이용해서 key와 value값을 Storage에 저장할 수 있다. 저장된 데이터는 세션 간에 공유가 가능하기 때문에 세션이 바뀌어도 데이터는 유지된다. 2. setItem() localStorage에 item을 추가한다. localStorage에는 문자열만 저장이 가능하다. (숫자를 적더라도 문자열로 변환되어 저장됨) localStorage.setItem(key, value); 3. getItem() localStorage에 저장된 item의 value를 가져온다. localStorage.getItem(key); 4. removeItem() localStorage에 저장된 item을 삭제한다. localStorage.removeItem(key); 5... 더보기 [javascript] 마우스 좌표 (screenX, clientX, pageX, offsetX) 1. screenX, screenY 사용자의 모니터 화면을 기준으로 한다. 왼쪽 모서리가 좌표 (0, 0)이 됨 2. clientX, clientY 브라우저에서 현재 웹페이지가 보여지는 영역을 기준으로 한다. 스크롤을 하더라도 마우스 좌표의 값은 바뀌지 않음 3. pageX, pageY 현재 페이지의 전체 영역(길이)을 기준으로 한다. 페이지 길이에 영향을 받음 4. offsetX, offsetY 좌표를 출력하도록 이벤트가 적용돼있는 영역을 기준으로 한다. div내에서 왼쪽 모서리가 좌표 (0, 0)이 됨 더보기 [javascript] 재귀 함수 1. 재귀 함수(recursive function) 자신의 함수의 내부에서 자기 자신을 다시 호출하는 함수 종료 조건을 만들어줘야 한다. 2. Maximum call stack exceede 재귀 함수 사용 시 호출 스택의 최대 크기를 초과하는 경우가 자주 발생한다. 이때 발생하는 오류가 Maximum call stack exceede이다. 해결 방법으로는 setTimeout과 같은 비동기 함수를 사용하는 것이다. 연산량이 많으면 브라우저가 느려지므로 최소화하는 것이 좋다. function openAround(rI, cI) { // Maximum call stack size -> setTimeout으로 해결 setTimeout(() => { const count = open(rI, cI); if (cou.. 더보기 [javascript] 논리 연산자의 진짜 의미 (&&, ||, ??, ?.) 쉽게 or, end로 알아왔지만 실제 자바스크립트에서 해석하는 건 아래와 같다 1. && 앞이 true면 뒤에 걸 실행해라 2. || 앞이 false면 뒤에 걸 실행해라 3. ?? 앞이 null이나 undefinded면 뒤에 걸 실행해라 4. ?. (optional chaining) 앞에 값이 존재하면 뒤를 실행 앞에 값이 존재하지 않으면 거기서 멈춰서 에러를 표시하지 않고 undefinded를 만듦 더보기 [javascript] 호출 스택과 이벤트 루프 1. 호출 스택(call stack) 호출 스택은 함수를 저장하는 자료구조다. 함수를 호출하면 호출된 순서대로 쌓으면서 가장 위에 쌓인 함수를 먼저 처리한다. 2. 이벤트 루프 제로초님의 예제를 빌려서 설명을 해보자면! function run() { console.log('동작'); } console.log('시작'); setTimeout(run, 3000); console.log('끝'); ① main(크롬에서는 anonymous)과 setTimeout이 호출 스택에 순서대로 쌓이면 ② setTimeout 실행 시 콜백 run은 백그라운드에 담김 ③ 백그라운드에서 3초 후 태스크 큐로 보냄 ④ 호출 스택에 있는 함수들이 모두 실행되어 비워지면 ⑤ 이벤트 루프가 태스크 큐에 있던 run을 호출 스택으로 .. 더보기 이전 1 2 3 4 5 다음