Lpla 개발 블로그

JavaScript/기초

[JavaScript] 비동기와 콜백 - 쉽게 이해하기

비동기와 콜백을 깊이 공부하고자 하는 분에게는 맞지 않은 포스팅입니다. 1. 비동기 비동기와 콜백, 자바스크립트를 2년 가까이 공부하면서 나에게 가장 어려운 개념이었다. 용어가 생소하고 각종 사이트를 찾아봐도 한 문장으로 설명해주는 곳이 없었기 때문이다. 사실 이 두 개념을 몰라도 보통 난이도 이하의 자바스크립트 코드를 짜는데 별 어려움이 없었다. 이유는 알 수 없지만 함수를 찾을 수 없다는 에러 메시지가 뜬다? 혹은 실행 순서가 꼬인다? 그렇다면 함수 위치를 바꾸거나 요소가 존재할 때 실행되도록 하거나, 편법으로 setTimeout을 사용하면 대체로 해결됐다. 나는 비동기와 콜백을 잘 사용하는 것이 아니라 이것들이 대체 무엇인지 알고 싶었다. 따라서 이 글은 비동기와 콜백을 어느 정도 알고 있다면 시간..

JavaScript/실전

[JavaScript] 랜덤 이미지 보여주기

자바스크립트로 랜덤 이미지를 보여주는 방법에 대해 알아보겠다. 0. 기본값 세팅 HTML CSS html, body { width: 100%; height: 100%; margin: 0; } .container { position: relative; width: 100%; height: 100%; } .img_box { width: 100%; height: 100%; position: relative; left: 50%; transform: translateX(-50%); background-repeat: no-repeat; background-size: cover; } 먼저 HTML에는 container와 img_box 클래스로 된 요소 2개를 만들고 하단에 제이쿼리를 불러온다. 그리고 CSS는 각자 ..

JavaScript/기초

[JavaScript] 2중 객체(중첩된 객체) 접근

2중 객체(중첩된 객체) 실무에서 객체(Object) 안에 객체를 만들고 반복문을 돌려야 하는 일이 생겼다. 아래 예시 코드를 보자. let 팝업 = { 첫번째: { tab_name: ' 1 ', tab_bg: '#2D3E52', link: '', end_date: '2021-02-28' }, 두번째: { tab_name: ' 2 ', tab_bg: '#F1A5CC', link: 'www.naver.com', end_date: '2020-01-01' }, 세번째: { tab_name: ' 3 ', tab_bg: '#0060AC', link: '', end_date: '2020-08-31' }, 네번째: { tab_name: ' 4 ', tab_bg: '#FF540F', link: 'www.daum.net..

JavaScript/기초

[JavaScript] Class 클래스 (1)

기존 프로토타입 상속 문법 function Hello (name) { this.name = name; } Hello.prototype.sayHello = function () { console.log(this.name + "님 안녕하세요."); } const h1 = new Hello('lpla'); const h2 = new Hello('coffee'); h1.sayHello(); h2.sayHello(); // 결과 // lpla님 안녕하세요. // coffee님 안녕하세요. ES6 클래스 상속 문법 class Hello { constructor(name) { this.name = name; } sayHello() { console.log(this.name + "님 안녕하세요."); } } const..

JavaScript/실전

[JavaScript] 무작위 숫자 5개를 뽑아 오름차순으로 정렬 2

지난 포스트 : [JavaScript] 무작위 숫자 5개를 뽑아 오름차순으로 정렬 1 지난 번에 무작위 숫자 5개를 뽑아 오름차순으로 정렬하는 방법에 대해 알아보았다. var 추출 = []; for (i = 1; i

JavaScript/실전

스크롤 애니메이션 라이브러리 AOS.js

1. 소개 AOS.js는 스크롤의 움직임에 따라 요소에 애니메이션(트랜지션) 효과를 손쉽게 구현할 수 있는 자바스크립트 라이브러리다. AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io AOS.js의 장점은 굉장히 가볍다는 데 있다. 파일은 aos.css와 aos.js 2개로 동작하며 각각의 파일을 보면 코드도 간단하게 구성되어 있다. 간단하면서도 기본적인 애니메이션 효과를 모두 갖추고 있기 때문에 아주 훌륭한 라이브러리라고 할 수 있다. 2. 사용법 HTML에 아래 코드를 추가한다. 실행하려면 자바스크립트에 아래 코드를 추가한다. AOS.init(); 3. 기능설명 애니메이션 효과를 사..

JavaScript/실전

[JavaScript] 반응형 이미지 좌표값 구하기(jQuery RWD Image Maps)

이미지맵으로 하나의 이미지에 위치마다 여러 개의 링크를 걸거나 여러 개의 함수를 실행할 수 있다. 하지만 반응형의 경우 좌표가 매번 달라지기 때문에 일반적인 방법으로는 사용이 어렵고 rwdImageMaps 자바스크립트 라이브러리를 통해 정상적으로 이미지맵을 사용할 수 있다. Responsive Image Maps jQuery Plugin Responsive Image Maps jQuery Plugin Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize. Download the plugin from..

JavaScript/실전

[JavaScript] Swiper 마지막 슬라이드에서 페이지 스크롤

22-07-21 수정 기존 코드보다 더 좋은 코드를 작성했습니다. 마지막 슬라이드 뿐만 아니라 첫번째 슬라이드에서 위로 스크롤도 되고, 모바일에서 스냅도 적용됩니다. 스크롤을 막는 것은 releaseOnEdge 파라미터를 사용했고 터치를 막는 것은 touchReleaseOnEdges 파라미터를 사용했습니다. See the Pen Swiper snap & scroll when last slide - new by lpla (@lpla) on CodePen. 마땅한 문장이 떠오르지 않아서 '마지막 슬라이드에서 페이지 스크롤' 이라고 적어놨지만, '마지막 슬라이드에서 마우스 휠 이벤트 제어'가 가장 정확하고 'Swiper 마우스 휠 기능 정지' 도 나쁘지 않은 문장 같다. Swiper로 세로 스크롤(Vertic..

JavaScript/기초

[JavaScript] 반복문 (for in / for of)

1. for문 let data = [1, 2, undefined, NaN, null, ""] for(let i=0; i

JavaScript/기초

[JavaScript] startsWith, endsWith, includes

string.startsWith(matchString) matchString이 string의 문자로 시작하는지 여부 확인 string.endsWith(matchString) matchString이 string의 문자로 끝나는지 여부 확인 string.includes(matchString) matchString이 string의 문자를 포함하고 있는지 여부 확인 1. startsWith() matchString이 string의 문자로 시작하는지 여부 확인 (true/false) let str = "hello world!" let matchstr1 = "hel" console.log(str.startsWith(matchstr1)); //true 2. endsWith() matchString이 string의 문..