Lpla 개발 블로그

JavaScript/실전

[JavaScript] 끝말잇기 (2)

[JavaScript] 끝말잇기 (1) 5. 현재 제시어와 이전 제시어 정의 이제 이전 제시어의 마지막 글자와 현재 제시어의 첫 글자의 일치 여부를 확인하여 일치할 경우에 다음 제시어를 변경하고, 일치하지 않을 경우에는 변경하지 않도록 해야 한다. 따라서 현재 제시어를 nowWord, 이전 제시어를 prevWord라는 변수로 정의한다. 변수를 추가한 만큼 기존 코드에도 변수를 입력하여 수정할 필요가 있다. [기존 코드] wordBtn.addEventListener('click', function(){ wordDisplay.textContent = wordInput.value; wordInput.value = ''; }); [수정한 코드] let wordInput = document.querySelecto..

JavaScript/실전

[JavaScript] 끝말잇기 (1)

이 글은 유튜브 ZeroCho ES2021 자바스크립트 강좌에 나온 내용을 기초로 작성했지만 다른 부분이 존재합니다. 1. 순서 혼자서 하는 끝말잇기 놀이를 자바스크립트로 구현하려고 한다. 무작정 코드를 작성하기 이전에 먼저 머릿속으로 구상해보자. 필요한 HTML에는 무엇이 있을까? 끝말잇기 제시어를 작성할 input 요소, 작성한 제시어를 제출할 button 요소, 그리고 제출한 제시어를 출력할 div 요소까지 필요하다. 다음으로 필요한 JavaScript에는 무엇이 있을까? 입력한 제시어를 기억하는 변수와 div 요소에 출력하는 코드, 직전에 입력한 제시어의 마지막 값과 방금 입력한 제시어의 처음 값이 일치하는지 판단 여부, 두 값이 일치한다면 div 요소의 값을 바꾸고 일치하지 않는다면 div 요소..

JavaScript/실전

Swiper 예제 - 특정 해상도에서만 사용하기 (반응형)

1. breakpoints? swiper는 breakpoints로 반응형을 지원한다. const swiper = new Swiper('.swiper-container', { slidesPerView: 1, spaceBetween: 10, breakpoints: { // 1280px 보다 클 경우 1280: { slidesPerView: 2, spaceBetween: 20 } } }); breakpoints는 반응형에 따라 swiper 효과를 다르게 주고 싶을 때 유용하다. 하지만 swiper 기능 자체를 호출(실행)/제거하려면 breakpoints로 해결할 수 없다. 가령 pc 해상도에서만 사용하고 모바일 해상도에서는 사용하지 않으려면 가장 단순무식한 방법은 display: none; 으로 pc에서 보여..

JavaScript/실전

[JavaScript] Tilt.js 사용하기

1. Tilt.js 소개 Tilt.js 라이브러리를 사용하면 요소에 마우스의 움직임에 따라 변하는 3D 틸트 효과를 부여할 수 있다. 1.71kb로 가볍고 사용법도 간단해서 쉽고 예쁜 효과를 빠르게 구현할 수 있는 장점이 있다. gijsroge/tilt.js A tiny 60+fps parallax tilt hover effect for jQuery. - gijsroge/tilt.js github.com See the Pen Tilt.js by lpla (@lpla) on CodePen. 2. Tilt.js 사용법 Tilt.js 라이브러리를 사용하기 위해서는 제이쿼리와 Tilt.js를 추가해야 한다. 틸트 효과를 부여하는 방법은 두 가지로 첫번째는 해당 요소에 data-tilt를 추가하는 것이다. 두번째..

JavaScript/실전

[JavaScript] 익스플로러 유튜브 로딩 문제 해결

익스플로러에서 iframe이나 object로 유튜브를 삽입하면 타 브라우저에 비해서 로딩 속도가 매우 느린 현상이 있다. 이미 이 자체만으로도 심각한 문제지만, 사이트에 페이드 등 일부 효과들이 렉을 동반한 버벅임으로 정상 실행되지 않는 것도 문제다. 크롬은 지연 로딩을 지원하고 있다. 이치럼 loading="lazy" 를 추가해주면 페이지를 로드할 때 유튜브를 읽지 않고 스크롤이 됐을 때 유튜브를 로드하여 페이지 로딩 시간을 단축시키고 렉도 줄인다. 하지만 아쉽게도 익스플로러는 지연로딩 기능이 없다. 지연로딩도 없지만 로딩 속도가 비정상적으로 느리다. 이 문제를 해결하기 위해서 익스플로러에서 페이지 로드시 유튜브를 읽지 않고 썸네일만 불러들인 다음, 썸네일을 클릭하면 유튜브 영상이 시작되도록 하는 방식..

JavaScript/실전

Swiper 예제 - display: none 이슈 해결

탭이나 팝업 형태로 swiper를 사용한다면 페이지를 로딩한 직후에는 슬라이더가 노출되지 않고 어떤 동작을 한 이후에 나타나게 된다. 즉 처음에 보이지 않는 display: none 상태인 요소에 swiper를 사용하게 되면 에러가 발생하곤 한다. See the Pen swiper display:none issue by lpla (@lpla) on CodePen. 위 예제에서 tab2를 클릭하면 나타나는 두번째 swiper는 제대로 동작하지 않는다. 이 문제를 해결하기 위해서는 observer 매개변수를 사용해야 한다. See the Pen swiper display:none issue solve by lpla (@lpla) on CodePen. observer: true, observeParents: ..

JavaScript/실전

swiper 예제 - 페이징 커스텀

swiper의 default 페이징(pagination)은 파란색 점 모양이다. 이것은 swiper에서 지원하는 페이징 타입 중 bullet의 기본 형태이다. 하지만 css로 이 bullet을 꾸미거나 renderBullet 매개변수로 색다르게 커스텀 할 수 있다. 1. 기본 페이징 See the Pen swiper 기본 by lpla (@lpla) on CodePen. 2. 페이징 css 커스텀 See the Pen swiper 페이징 커스텀 by lpla (@lpla) on CodePen. 3. renderBullet See the Pen swiper 페이징 renderBullet by lpla (@lpla) on CodePen.

JavaScript/실전

Swiper 예제 - 슬라이드가 넘어갈 때 이벤트 호출

swiper는 다른 라이브러리보다 직관적이고 친절한 demo와 api를 제공하고 있다. Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Swiper API Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 그 중 여러가지 이벤트 메서드를 지원하는데 activeIndexChange와 slideChange는 슬라이드가 바..

JavaScript/실전

[JavaScript] for문으로 홀수 짝수값 각각 더하기

for문을 사용하여 1에서 20까지 반복하면서 홀수일 경우 홀수끼리 더하고 짝수일 경우 짝수끼리 더한 값을 출력하는 방법에 대해 알아보겠다. 1. 1부터 20까지 for문 작성 for(var i=1; i

JavaScript/실전

[GSAP] 애니메이션 ScrollTrigger - 자주 묻는 질문

gsap의 자주 묻는 질문 중에 몇 가지를 간추려 정리해봤다. Most Common ScrollTrigger Mistakes Are you guilty of any of the most common mistakes people make in their ScrollTrigger code? Creating to() logic issues Nesting ScrollTriggers inside multiple timeline tweens Using one ScrollTrigger or animation for multiple sections Forgetting to use functi greensock.com 1. 애니메이션이 뷰포트 중간에서 시작하고 화면을 벗어나면 초기화하고 싶습니다. GSAP는 스크롤트리거..