JavaScript

[JS] 프로그래머스 제일 작은 수 제거하기

출처 https://programmers.co.kr/learn/courses/30/lessons/12935 코딩테스트 연습 - 제일 작은 수 제거하기 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1 programmers.co.kr 문제 정수를 저장한 배열, arr에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를 들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴하고, [10] 면 [-1]을 리턴합니다. 제한 조건 ..

[JS] 스크롤 애니메이션 구현 (Intersection Observer)

Intersection Observer API로 스크롤 애니메이션을 쉽게 구현할 수 있습니다. Intersection Observer API const options = { root: null, rootMargin: "0px", threshold: 1.0, }; const observer = new IntersectionObserver((entries) => { // 관찰 중인 배열 형식의 객체 리스트 entries.forEach((entry) => { ... }); }, options); // target과 root가 교차되어 화면에 보이게 되었을 때 호출되는 함수 const target = document.querySelector('div'); observer.observe(target); // 새로..

[HTML] SVG안에 이미지 넣기

SVG 안에 이미지 넣기 흔히 SVG 태그 안에 이미지를 넣는 방법은 평소에 사용하던 태그를 SVG안에 넣어서 사용하면 해결될 것 같지만, SVG 태그 안에서는 태그를 사용할 수 없습니다. SVG 태그 안에 이미지를 넣는 방법은 태그를 사용하는 것입니다. 태그는 SVG 요소 안에 이미지를 포함시킬 수 있게 해주는 태그입니다. 사용할 수 있는 이미지 형식은 PNG, JPEG, SVG 형식이며, 아래 속성으로 이미지를 조정할 수 있습니다. x : 이미지의 x축 좌표 위치 지정 y : 이미지의 y축 좌표 위치 지정 width : 이미지의 너비 height : 이미지의 높이 href : 이미지 파일의 URL을 가리킵니다. PreservAspectRatio : 이미지의 크기 배율 조정. 코드 태그에서는 src 속..

[JS] 페이지 내 특정 위치로 스크롤 이동하기

페이지 내 특정 위치로 이동 시켜주는 window.scrollTo 메서드를 활용하는 방법을 소개해드리겠습니다. window.scrollTo 메서드 window.scrollTo 메서드를 사용하는 다음과 같이 X, Y 위치 값을 넘겨주면 즉시 해당 위치로 이동하게 됩니다. // ( x좌표 - 가로 , y좌표 - 세로 ) window.scrollTo(xpos, ypos); HTML 삽입 미리보기할 수 없는 소스 객체를 이용해서도 메서드를 사용할 수 있으며, left(가로), top(세로) 값으로 X, Y 값을 대신할 수 있습니다. { behavior: "smooth" } 속성을 지정해주면 위치를 이동할 때, 애니메이션 효과가 적용되게 됩니다. // option { left, top, behvior } wind..

[JS] 코드 실행시간 측정하기

코드 const start = new Date() ... 실행 코드 ... console.log((new Date() - start) / 1000) 코드가 끝난 시간 - 코드를 실행한 시간 수식을 사용하면 코드 실행에 걸린 밀리 초가 나오는데, 나누기 1000을 해주면 밀리초 단위를 초로 바꿔줄 수 있습니다. 예시 코드 const start = new Date() // 시작 시간 기록 // 실행 코드 let str = 0; for (let i = 0; i < 100000; i++) { str += i; } console.log((new Date() - start) / 1000) // 현재의 시간에서 시작 시간 뺀 값 출력 See the Pen Untitled by hyukson (@hyukson) on ..

[JS] 객체 길이 구하기

코드 자바스크립트에서 배열(Array), 문자(String)를 사용하는 경우에는 length 속성으로 쉽게 길이를 구할 수 있습니다. 하지만 객체(Object)에서는 그것이 불가능합니다. 객체의 길이를 알기 위해서는 객체에 몇 개의 아이템 즉 "KEY"가 몇 개 존재하는 지를 파악하면 됩니다. const obj = { a: "AA", b: "BB", c: "CC", d: "DD", e: "EE" }; Object.keys(obj); // 출력 - ["a", "b", "c", "d", "e"] JS에는 Object.keys라는 메서드가 존재합니다. 해당 메서드는 객체의 key들을 모아 배열로 반환하는 메서드입니다. key들을 모은 배열을 파악했습니다. 그럼 이에 따른 길이도 구할 수 있게 됩니다. cons..

[JS] 반복문 (for, forEach 등) 속도 비교

JavaScript의 반복문으로 for loop 문, forEach 메서드, map 메서드, reduce 메서드, $.each (Jquery) 등 정말 많은 종류의 반복문이 존재합니다. 비교 해볼 반복문 for loop forEach map reduce $.each 속도 비교에 사용할 코드 const start = new Date() ... 실행 코드 ... console.log((new Date() - start) / 1000) 먼저 비교 코드를 실행 전 시간을 저장한 다음에 비교할 코드를 실행, 그 후 현재의 시간과 코드를 시작한 시간을 비교하여 걸린 시간을 구할 수 있습니다. 코드가 끝난 시간 - 코드를 실행한 시간 수식을 사용하면 코드 실행에 걸린 밀리 초가 나오는데, 나누기 1000을 해주면 밀..

[JS] 반복문 정리 (for, while, forEach 등...)

for 문 for 문은 조건식이 참일 경우에 증감식 구문을 거쳐 명령문 구문을 반복하여 실행합니다. for (초기값; 조건식; 증감식) { 조건이 참인 동안 실행할 명령문 } // 예시 for (let i = 0; i < 10; i++) { console.log(i); } for in 문 for in 문은 객체의 모든 문자열로 된 키를 반복하여 열거합니다. 하지만 해당 문법은 자주 사용되지 않고 아래에 소개드릴 for of, forEach의 사용을 추천드립니다. const object = { a: 1, b: 2, c: 3 }; for (const key in object) { console.log(`${key}: ${object[key]}`); } for of 문 for of 문은 반복 가능한 객체 ( ..

[티스토리] JavaScript 소스코드 하이라이트 추가하기

문제점 해당 블로그는 티스토리에서 제공해주는 플러그인 코드 테마를 사용하고 있습니다. 하지만 JavaScript 코드 블록에 소스코드를 입력하면 메서드 부분이 똑같은 검은색이어서 가독성을 해치는 것 같았습니다. highlight.js를 사용해보기도 하였고 다른 방법을 찾아보았지만 만족하는 코드 하이라이트를 찾지 못하였습니다. 결국 나온 결론이 " 구현되어있는 하이라이트 원하는 기능에 추가를 시키자! "였습니다. 해결 먼저 하이라이트 된 코드의 색깔 스타일을 추가했습니다. 그 후 선언된 하이라이트 코드 블록 모두를 가져와 정규식으로 메서드인 코드만을 구분했고 스타일을 적용시켰습니다. $target .html(html.replace(/(\.[A-z]+\()/g, `$1`)) .html(html .replac..

[JS] 두 날짜 사이의 일수 구하기

코드 const getDateDiff = (d1, d2) => { const date1 = new Date(d1); const date2 = new Date(d2); const diffDate = date1.getTime() - date2.getTime(); return Math.abs(diffDate / (1000 * 60 * 60 * 24)); // 밀리세컨 * 초 * 분 * 시 = 일 } getDateDiff("2021-09-01", "2021-10-01"); // 30 코드 풀이 두 날짜의 밀리초의 차이(date1 - date2 수식)를 통해서 두 날짜의 차이 값을 계산해 주는 방법입니다. 차이 값을 하루의 밀리초인(1000 * 60 * 60 * 24)으로 나눠주면 밀리초가 아닌 일 단위 값을 얻..

[JS] 연속된 순서를 가진 숫자, 영문 체크하기

A가 3번 들어간 문자를 찾는 방법은 정규식을 이용하면 간단한 코드로 체크할 수 있습니다. const a = "AAAbbCC"; a.match(/[A-z]{3}/); // AAA 하지만 ABC 처럼 연속되는 순서를 가진 영문을 체크할 수 없습니다. const str = "1234"; // 예시 const chrStr = [...str].map(v => v.charCodeAt()); let preStr = 0; let chr = 0; chrStr.forEach(s => { if (Math.abs(preStr - s) == 1) { chr++; } preStr = s; }) console.log(chr); // 3 문자의 unicode 코드로 이전의 문자값의 차로 구분하는 코드입니다. 함수화 시킨 코드 파라..

[React] 컴포넌트(Component) 에 대해

컴포넌트는 템플릿 이상의 기능을 수행합니다. 데이터를 UI로 만드는 가장 최소한의 단위 모듈을 의미합니다. 독립적이며, 재사용 가능하게 만든 부품 조각들을 의미하며 리액트로 만들어진 홈페이지는 즉 컴포넌트의 조합입니다. 근본적으로 컴포넌트는 데이터를 입력받아 DOM Node를 출력하는 함수를 뜻합니다. Props를 받아 Node를 랜더 하는 함수에 가까운 개념입니다. props React에서 props는 변하지 않는 데이터입니다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용합니다. 컴포넌트에 props로 전달하는 방식은 아래와 같이 사용합니다. // const Modal = (props) => { return ( { props.name } ); } 컴포넌트에 전달되는 props는 객체 형태로 전달되며..