Lpla 개발 블로그

JavaScript/기초

[JavaScript] continue, break, return 차이

짧고 쉽게 설명해보겠다. 1. break break는 반복문을 즉시 빠져나온다. for (let i = 0; i < 10; i++) { if (i === 5) { console.log(`${i}에서 멈춘다.`); break; } console.log(i); } 2. continue continue는 반복문의 현재 단계를 중단하고 다음 단계를 이어서 진행한다. for (let i = 0; i < 10; i++) { if (i === 5) { console.log(`${i}에서 건너뛴다.`); continue; } console.log(i); } 실행된 코드를 보면, i가 5일 때, console.log(i)가 실행되지 않고 건너 뛴 것을 확인할 수 있다. 3. return return은 함수에 해당 값을 ..

JavaScript/실전

[JavaScript] Swiper 구버전 Demo, API 확인하기

최근 Swiper가 7 버전으로 업그레이드됐다. 그래서 현재 공식 사이트에 접속하면 최신 버전의 demo와 api 자료를 확인할 수 있다. Swiper는 다른 슬라이더 라이브러리에 비해서 피드백도 빠르고 업데이트도 빠른 점이 좋다. (너무 빨라서 문제다.) 문제는 예전에 작업한 사이트의 Swiper를 수정하고자 할 때 참고할 수 있는 페이지가 없다는 점이다. 이미 공식 api 페이지나 demo 페이지는 7 버전을 기준으로 업데이트되었고 구버전은 확인할 수 없다. 대부분은 최신 api를 참고하여 작업해도 문제 되지 않겠지만 위험성을 언제나 갖고 있는 것이다. 아쉽게도 Swiper 측은 신버전이 나오면 구버전은 더 이상 지원하지 않는다고 한다. Github를 보면 Swiper 5 버전의 API가 있는데 어째..

JavaScript/실전

[JavaScript] resize 한 번만 실행

다음 코드를 살펴보자. 이전 시간에 다룬 코드를 그대로 가져온 것이다. [JavaScript/jQuery] 요소 추가, 삭제, 이동 반응형에 따라 요소의 위치를 바꾸려고 한다. css만으로 해결할 수 있다면 좋겠지만 단순하지 않은 레이아웃에서 css로 해결하기 어려운 경우가 있다. 이 때 자바스크립트, 특히 제이쿼리의 도움 lpla.tistory.com 브라우저의 크기를 조절할 때 pcBox() 혹은 mobileBox() 함수가 실행되는 responsiveWidth() 함수이다. 그 결과 아래와 같은 기능을 수행한다. 하지만 브라우저의 크기가 1px이라도 변화가 있다면 즉시 resize 이벤트를 호출하게 되어 브라우저에 과부화를 일으킬 소지가 있다. 이는 콘솔로그를 찍어보면 더 극명하게 드러난다. 이렇게..

JavaScript/기초

[JavaScript/jQuery] 요소 추가, 삭제, 이동

반응형에 따라 요소의 위치를 바꾸려고 한다. css만으로 해결할 수 있다면 좋겠지만 단순하지 않은 레이아웃에서 css로 해결하기 어려운 경우가 있다. 이 때 자바스크립트, 특히 제이쿼리의 도움으로 요소를 재배치할 수 있다. HTML 1번 2번 3번 CSS .box_wrapper { margin-top: 100px; font-size: 40px; } .box { width: 300px; height: 300px; margin: 0 auto; display: flex; justify-content: center; align-items: center; color: #FFF; } .box1 { background: #dc6851; } .box2 { background: #dcae51; } .box3 { back..