Lpla 개발 블로그

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. 자바스크립트로 마우스 속도 구하는 방법을 이해하면서 사용하고 싶어서 정리했다.

그누보드

그누보드 다중 게시판 최신글

1. 그누보드 최신글 그누보드는 하나의 게시판을 최신글로 불러올 수 있다. 하지만 이 방식으로는 두 개 이상의 게시판을 불러올 수 없다. 가령 공지사항 게시판, 소식 게시판을 하나의 최신글로 불러오고 싶다면 어떻게 해야 할까? 2. 그누위즈 다중 게시판 최신글 그누위즈에서 여러 게시판을 하나의 최신글로 불러오는 기능을 만든 것이 있다. [기능] 여러개의 게시판을 하나의 최신글로 불러오기 > 최신글 | 그누위즈 [기능] 여러개의 게시판을 하나의 최신글로 불러오기 > 최신글 | 그누위즈 www.gnuwiz.com 먼저 /lib/latest.lib.php 파일 하단에 다음 코드를 추가한다. function latest_all($skin_dir = '', $bo_tables, $rows = 10, $subjec..

PHP

[PHP] 맨땅에 헤딩으로 게시판 만들기 (2)

[PHP] 맨땅에 헤딩으로 게시판 만들기 (1) 게시판 만들기 (1) 포스팅을 하고 세 달이 흘렀다. 최근 한 달 정도 php를 사용할 일이 평소보다 많아지면서 실력도 단기간에 많이 끌어올릴 수 있었다. 그럼 지난번에 이어서 가보겠다. 4. PHP로 DB 컬럼 추가 이전 시간에는 phpmyadmin으로 4개의 컬럼(num title, content, date)을 추가했다. 하지만 게시판을 생성할 때 phpmyadmin에 접속하여 테이블을 만들고 컬럼을 추가하는 개발자는 없을 것이다. 이번에는 PHP로 컬럼을 추가하는 방법에 대해 공부해보겠다. 먼저 secret 컬럼을 추가하는데, 무작정 추가하는 것이 아니라 없을 경우에 추가하도록 컬럼을 확인하는 과정을 거쳤다. $conn = mysqli_connect(..

JavaScript/실전

[JavaScript] Swiper 페이징(pagination) 2개 사용하기

1. 들어가며 오늘 동료 직원이 하나의 Swiper에 2개의 페이징을 사용할 수 있는지 질문했다. 구현하고자 하는 결과물은 아래와 같았다. 2. 페이징(Pagination)? Page + (i)tion API에 따라서 페이징(Paging) 혹은 페이지네이션(Pagination) 이라고 칭하는 이것은 요소의 개수를 나타내주는 UI를 말한다. (파기, 파지, 패지네이션이 아니다) 가장 흔한 페이징은 게시판의 하단에 있는 숫자들이다. 각설하고 Swiper의 페이징은 총 네 가지가 있다. bullets fraction progressbar custom 그리고 페이징에 포함되지 않지만 거의 같은 기능으로 Scrollbar가 있다. Scrollbar Swiper 페이징은 다음 코드로 추가할 수 있지만 오직 하나의 ..

JavaScript/실전

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

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

JavaScript/실전

[GSAP] 타이핑 효과

GSAP의 TextPlugin으로 타이핑 효과를 만들 수 있다. See the Pen TextPlugin - basic by lpla (@lpla) on CodePen. 이 플러그인을 이용하면 간단하게 타이핑 효과를 만들 수 있지만 한글은 'ㅌㅏㅇㅣㅍㅣㅇ' 으로 입력되지 않고 '타이핑' 처럼 자음모음이 합쳐져 입력 되는데 이런 작은 디테일에서 아쉬움이 있다. sdfsdfSee the Pen TextPlugin - basic by lpla (@lpla) on CodePen. 다행히 구글에 검색해보면 한글 타이핑을 할 수 있도록 누군가 친절하게 만들어 놓은 스크립트가 있다. See the Pen 타이핑 by lpla (@lpla) on CodePen. 하지만 이 스크립트는 스크롤 이벤트 없이 페이지가 로드되..

React

[React] 튜토리얼 자습하기 (2)

주요 개념 1. Hello World React에서 Hello Word를 출력하는 방법은 아래와 같다. ReactDOM.render( Hello, world!, document.getElementById('root') ); 2. JSX 소개 React는 마크업과 로직을 분리하지 않고 둘 다 포함하는 컴포넌트 단위로 이루어진다. a. JSX에 표현식 포함하기 중괄호에 변수를 감싸는 방법으로 JavaScript 표현식을 사용할 수 있다. const name = 'Ji Woon'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); b. JSX도 표현식이다. JSX 자체에 JavaScript 조건문..

React

[React] 튜토리얼 자습하기 (1)

설치하기 a. 웹사이트에 React 추가하기 (1) 1분 내로 React 추가하기 HTML 1분 내로 React 추가하기 javaScript 'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return '좋아요를 클릭하셨습니다.'; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, '좋아요' ); } } const domContainer..