Lpla 개발 블로그

JavaScript/실전

[JavaScript] Swiper 해상도에 따라 다른 효과 사용하기 (반응형)

Swiper를 PC 해상도에서만 사용하거나 모바일 해상도에서만 사용하는 기능을 원하면 다음 포스팅을 참고하자. Swiper 예제 - 특정 해상도에서만 사용하기 (반응형) 1. breakpoints? swiper는 breakpoints로 반응형을 지원한다. const swiper = new Swiper('.swiper-container', { slidesPerView: 1, spaceBetween: 10, breakpoints: { // 1280px 보다 클 경우 1280: { slidesPe.. lpla.tistory.com 코딩을 하다보면 다양한 요구사항에 맞닥뜨린다. 이번에는 1200px 이상의 해상도에서는 슬라이드, 1200px 미만의 해상도에서는 페이드인 Swiper 슬라이드를 만들고자 한다. 1..

JavaScript/기초

[JavaScript] 배열의 최대값 구하기

1. Math.max.apply() Math.max()는 입력받은 값 중 가장 큰 수를 반환한다. Math.max(1, 3); // 3 Math.max(1, 9, 6, 11); // 11 하지만 숫자가 아닌 배열을 사용하면 제대로 동작하지 않는다. Math.max([1, 9, 6, 11]); // NaN 배열에서 사용하기 위해서는 apply() 메서드를 같이 사용해야 한다. let array = [100, 40, 80, 120, 50, 90, 10, 20]; let result = Math.max.apply(null, array); console.log(result); // 120 2. 스프레드 연산자(...) 스프레드 연산자로 배열을 풀어서 구하는 방법도 있다. 가장 간단하지만 ES6부터 사용할 수 있..

JavaScript/실전

[JavaScript] Click 이벤트 중복 해결하기

제이쿼리 resize 이벤트로 700px 이하에서만 클릭 이벤트를 적용하고 700px을 초과하면 어떠한 이벤트도 없는 버튼을 만들고자 한다. HTML button button은 클릭 이벤트를 생성할 요소, width 클래스는 윈도우 가로 크기를 볼 수 있도록 표시할 요소이다. JS let ww = $(window).width(); checkResize(); $(window).on('resize', function() { ww = $(window).width(); $('.width').text(ww); checkResize(); }); function checkResize() { if (ww

JavaScript/실전

Swiper 예제 - 첫번째 슬라이드에서 prev 기능 막기

1. 기본 구조 1 2 3 4 5 6 7 Swiper에서 loop 기능을 사용하지 않으면 첫번째 슬라이드에서 prev 버튼이 자동적으로 비활성화된다. 마찬가지로 마지막 슬라이드에서 next 버튼도 비활성화된다. 한편 loop 기능을 사용하게 되면 첫번째 슬라이드에도 이전 슬라이드가 존재하고, 마지막 슬라이드 다음에도 슬라이드가 존재하기 때문에 버튼이 항상 활성화되어 있다. 말 그대로 루프(반복)니까 당연한 현상이다. 그런데 사용자에 따라서 loop 기능을 사용하되 첫번째 슬라이드에서 prev 버튼을 비활성화하고 싶을 수 있다. 첫번째 슬라이드에서 마지막 슬라이드로 되돌아가는 것이 마음에 들지 않을 수도 있으니까. 이제 해결 방법에 대해 알아보자. 2. reachBeginning, reachEnd Swip..

JavaScript/실전

[JavaScript] 커서를 따라다니는 svg 효과

회사 웹디자이너분께서 다음 래퍼런스를 주면서 마우스 효과를 사용할 수 있는지 여쭤봤다. DFY® | Today’s Creative for Tomorrow™ 디파이는 디지털 마케팅의 모든 서비스를 제공하는 풀서비스 에이젼시입니다. www.dfy.co.kr 그런데 해당 사이트는 Vue.js 기반으로 제작된 사이트라 코드를 가져오려고 해도 쉽지 않았다. 필요한 커서 효과만 사용하기 위해 코드를 긁어 오면 다른 파일을 import 해야 하고, 그 파일은 또 다른 파일을 import 해야 하고.... import 지옥이 펼쳐졌다. 결국 노가다로 함수 하나하나 변수 하나하나 가지고 와서 적용하고 에러 뜨면 해결하는 방식으로 어렵게 코드를 가져올 수 있었다. See the Pen 커서를 따라다니는 svg 효과 by ..

JavaScript/실전

[JavaScript] 마우스 속도 구하기

See the Pen 마우스 움직임 속도 구하기 by lpla (@lpla) on CodePen. 자바스크립트로 마우스 속도 구하는 방법을 이해하면서 사용하고 싶어서 정리했다.

JavaScript/실전

[JavaScript] sketch.js로 마우스를 따라 다니는 파티클 효과 구현하기

sketch.js로 마우스를 따라 다니는 파티클 효과를 구현할 수 있다. 공식 사이트는 참고하면 좋고, 코드를 바로 사용하려면 아래 codepen에 있는 코드를 그대로 사용하면 된다. sketch.js 데모 사이트 sketch.js Parallax Mountains Excellent parallax effect from Jack Rugile, using the sketch.js 2d canvas soulwire.github.io 파티클 효과 데모 사이트 sketch.js » Basic Example soulwire.github.io See the Pen sketch.js Demo by lpla (@lpla) on CodePen. 실제 웹사이트에 적용할 때 sketch.js 스크립트를 추가하는 것은 필수다..

JavaScript/기초

[JavaScript] 조건문 응용

이 글은 벨로퍼트와 함께하는 모던 자바스크립트의 내용을 공부하고 정리한 글입니다. 05. 조건문 더 스마트하게 쓰기 · GitBook 05. 조건문 더 스마트하게 쓰기 이번에는 조건문을 조금 더 스마트하게 쓰는 방법에 대해서 알아보겠습니다. 특정 값이 여러 값중 하나인지 확인해야 할 때 만약, 여러분이 특정 값이 여러 값 중 learnjs.vlpt.us 1. 특정 값이 참인지 확인하는 상황 function isAnimal(text) { return ( text === '고양이' || text === '개' || text === '거북이' || text === '너구리' ); } isAnimal('개'); // true isAnimal('노트북'); // false 특정 값이 동물인지 확인하는 함수 isA..

JavaScript/기초

[JavaScript] forEach, map, fill

1. forEach forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다. forEach는 중간에 멈출 수 없다. for문 const array1 = [2, 4, 6, 8, 10]; const array2 = []; for (let i = 0; i { array2.push(element * 2); }) console.log(array2); // [4, 8, 12, 16, 20] 2. map map 메서드는 주어진 함수를..

PHP

[PHP] 자바스크립트로 php 변수 변경은 불가능

이번 포스팅은 강의나 지식 제공 용도가 아니라 개인 복습용 내용 정리글이다. 자바스크립트를 사용하여 php 변수의 값을 변경하는 것은 불가능하다. php는 서버에서 실행되고 자바스크립트는 클라이언트 pc에서 실행된다. 즉 위 코드를 살펴보면 php가 먼저 실행되고 그 다음에 자바스크립트가 실행되기 때문에 자바스크립트의 조건문은 무시하고 php가 모두 실행된다. 따라서 $box 변수에는 마지막 3 값이 할당된 상태다. 그리고 빈 값을 가지고 자바스크립트 조건문이 실행된다. 만약 자바스크립트로 php 변수를 변경하고 싶다면 쿠키에 저장하여 사용하거나 ajax로 php변수를 전달할 수 있다. 참고 : https://stackoverflow.com/questions/1917576/how-do-i-pass-jav..