분류 전체보기

[JS] 프로그래머스 두 큐 합 같게 만들기

출처 https://school.programmers.co.kr/learn/courses/30/lessons/118667 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 길이가 같은 두 개의 큐를 나타내는 정수 배열 queue1, queue2가 매개변수로 주어집니다. 각 큐의 원소 합을 같게 만들기 위해 필요한 작업의 최소 횟수를 return 하도록 solution 함수를 완성해주세요. 단, 어떤 방법으로도 각 큐의 원소 합을 같게 만들 수 없는 경우, -1을 return 해주세요. 제한사항 1 ≤ queue1의 길이 = queue2의 길이 ≤ 300..

[JS] 프로그래머스 성격 유형 검사하기

출처 https://school.programmers.co.kr/learn/courses/30/lessons/118666 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 매우 동의나 매우 비동의 선택지를 선택하면 3점을 얻습니다. 동의나 비동의 선택지를 선택하면 2점을 얻습니다. 약간 동의나 약간 비동의 선택지를 선택하면 1점을 얻습니다. 모르겠음 선택지를 선택하면 점수를 얻지 않습니다. 검사 결과는 모든 질문의 성격 유형 점수를 더하여 각 지표에서 더 높은 점수를 받은 성격 유형이 검사자의 성격 유형이라고 판단합니다. 단, 하나의 지표에서 각 성격 ..

[JS] 캔버스(Canvas) 이미지 다운로드

A태그에 존재하는 download 속성과 canvas.toDataURL 메서드를 이용하여 base64 방식의 인코딩 이미지를 다운로드할 수 있습니다. 예제 코드 See the Pen drawing by hyukson (@hyukson) on CodePen. 코드 // 다운로드할 캔버스 const $canvas = document.querySelector("canvas"); // A DOM 생성 const $link = document.createElement("a"); $link.download = "파일명.png"; $link.href = $canvas.toDataURL("image/png"); // element에 마우스 클릭 $link.click(); document.createElement 메서드..

[CSS] z-index에 딜레이 적용시키기

코드 See the Pen CSS z-index Delay by hyukson (@hyukson) on CodePen. 코드 풀이 .zIndexDelay { animation: zIndex .5s step-end forwards; } @keyframes zIndexDelay { to { z-index: 5; } } animation-timing-function의 step-end 속성을 이용해서 keyframes의 진행상태가 끝났을 때 적용되도록 지정해줍니다. to 영역에 지정된 z-index가 지정된 애니메이션의 duration 만큼 진행된 후에 적용됩니다. JavaScript 사용하여 구현하기 .zIndex { z-index: 22; } CSS로 z-index 속성 값이 적용된 클래스를 정의해줍니다. ..

[JS] 마우스 이동 방향 판단하기

마우스 이동방향을 감지하는 가장 쉬운 방법은 이전에 위치했던 마우스 좌표값과 현재 마우스 좌표 값의 대소를 비교하는 것입니다. 코드 See the Pen mouse movement direction by hyukson (@hyukson) on CodePen. 코드 풀이 // 이벤트 생성 window.addEventListener("mousemove", getMouseDirection); 마우스의 이동을 감지하는 대표적인 이벤트로는 mousemove가 존재합니다. addEventListener 함수를 이용해서 마우스 이벤트를 생성해줍니다. let prevX = 0, prevY = 0; // 이전에 있던 좌표 function getMouseDirection(event) { const xDir = prevX

[JS] 배열을 n개씩 나누어 묶기(Chunk)

1차원 배열을 n개씩 묶어서 정한 개수만큼 2차원 배열로 바꿔서 반환시켜 주는 함수를 제작해 보았습니다. 코드 function chunk(data = [], size = 1) { const arr = []; for (let i = 0; i [ [1,2], [3,4] ] chunk 함수의 매게 변수로 자를 원본 배열과 개수(n)를 받아줍니다. Array.slice 메서드를 이용해서 i번째부터 ( i + 나눌개수 ) 만큼의 배열 값을 가져와 새로운 배열에 담아줍니다. 해당 방식으로 데이터가 모두 Chunk 되면 새로운..

[티스토리] Codepen 코드블럭 적용 시키기

코드펜은 HTML, CSS, JS를 작성하고 결과를 실시간으로 확인할 수 있는 유용한 코딩 사이트입니다. 또한 제작한 코드를 공유하는 데에도 유용하기에 많은 코딩 블로그가 애용하는 코딩 사이트이기도 합니다. https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 간단 요약 계정 필요, 가입, 로그인 Pen 생성 후 코드 작성 Save 버튼 클릭 후 Embed 버튼 클릭 설정 후에 HTML 코드를 ..

[JS] 좌표로 요소(element) 가져오기

JavaScript에서 x, y 값으로 요소를 찾을 수 있는 native 함수가 존재합니다. 해당 함수의 이름은 " elementFromPoint "입니다. const element = document.elementFromPoint(x, y); 창 기준 지정된 좌표(x, y) 값에 존재하는 element를 찾아 가장 최상위에 존재하는 요소를 반환하는 함수입니다. 여러 개의 요소가 존재할 시 최상위에 존재하는 요소를 반환합니다. 해당 좌표에 요소가 존재하지 않거나 좌표가 음수이면 null을 반환합니다. 해당 메서드는 창 기준 좌표를 사용하기에 창 안에 보이는 영역에게만 작동합니다. pointer-events 속성이 none으로 설정된 요소는 무시됩니다. 예시 코드 mousemove 이벤트를 이용하여 움직인..

[JS] 드래그 이동이 가능한 draggable 요소 만들기

JQuery에 존재하는 draggable 메서드를 직접 순수 자바스크립트로 제작할 수 있습니다. draggable 메서드는 지정한 요소를 드래그로 이동시킬 수 있도록 만들어줍니다. 이때 draggable로 설정된 요소는 position: absolute 속성을 가지게 되며, left, top 속성으로 움직이게 됩니다. 코드 See the Pen Draggable HTML Element by hyukson (@hyukson) on CodePen. 코드 풀이 drag 먼저 드래그 이동이 가능하도록 만들 요소를 하나 생성해줍니다. let isPress = false, // 마우스를 눌렀을 때 prevPosX = 0, // 이전에 위치한 X값 prevPosY = 0; // 이전에 위치한 Y값 const $tar..

[CSS] 떨리는 효과 구현하기

별도의 라이브러리 없이 간단한 코드로 진동처럼 흔들리는 애니메이션을 구현할 수 있습니다. 코드 See the Pen Vibration Animation Box by hyukson (@hyukson) on CodePen. 코드 풀이 떨림 효과를 줄 박스 요소를 하나 만들어줍니다. .box { width: 150px; height: 150px; background: #febf00; } .box.vibration { animation: vibration 0.1s infinite; } 박스 크기와 색깔 속성을 통해 시각화시켜주고, vibration 클래스가 포함된 박스에는 흔들리는 효과를 가진 애니메이션이 작동되도록 구현해줍니다. @keyframes vibration { from { transform: rota..

[JS] 브라우저 크기 변경에 반응하는 이벤트

브라우저 창의 크기 변화에 반응하는 resize 이벤트를 사용하여, 변경된 브라우저 창의 크기를 가져올 수 있습니다. addEventListener 함수를 이용하여 이벤트를 지정하거나, window.onresize 함수를 통해 이벤트를 지정할 수 있습니다. // 1. window.addEventListener(`resize`, function() { }); // 2. window.onresize = function() { } 변경된 사이즈 가져오기 window.onresize = function() { const width = window.innerWidth; const height = window.innerHeight; console.log(width); console.log(height); } 윈도우..

[JS] 자동으로 글자 적는 타이핑 효과 구현하기

JavaScript를 이용하여 간단한 typing 효과를 구현할 수 있습니다. 예시 코드 See the Pen Text Typing Effect by hyukson (@hyukson) on CodePen. 위 예시코드는 동작을 보여주기 위해서 무한 반복하고 있습니다. 참고해주세요! 무한반복 막기 // 지우는 효과 if (letters[i + 1]) remove(); 코드 풀이 텍스트가 입력될 요소를 하나 생성해줍니다. // 텍스트 요소 const $text = document.querySelector(".text"); // 입력될 글자 모음 const letters = ["HTML", "CSS", "JavaScript"]; // 글자 입력 속도 const speed = 100; // 현재 지정된 글자 l..