듀비 라이프

최근 카페24의 쇼핑몰 호스팅을 사용하는 홈페이지의 소스를 수정할 일이 생겼다. 몇 년전 대학 다닐 시절에 닷홈의 호스팅 서비스를 사용해본 이후, 호스팅 서비스는 처음이라 많이 버벅였다. 카페24의 서비스에는 여러가지가 있는데, ftp에 직접 접근이 가능한 서비스와 그렇지 않은 서비스가 있다. 그 중 쇼핑몰 호스팅은 ftp에 직접 접근과 DB 접근이 불가능하다. 있는 템플릿에서 html과 javascript, jquery로 프론트엔드만 수정 가능하다는 말이다. 카페24의 쇼핑몰 호스팅의 프론트엔드 개발 방식은 모던 스타일과는 다른데, 모듈을 따로 생성해서 화면에 넣는 react의 방식과 조금은 유사하다. 하지만 EC 서비스에서는 모듈 생성하는 방법도 막혀있는 것 같고.. 자세히 나와있는 부분이 없어서 있..

결혼식도 끝난 지 한달 됐고.. 요샌 게임도 시들시들하다. 짝꿍은 퇴근하고 나면 방에 틀어박혀서 게임을 하거나 본인이 하고 싶은 개발공부를 한다. 난 리액트나 공부좀 해볼까 하다가 왠지 손이 안 가고, 근데 겜도 하기 싫고 심심하고................ 그러던 중 간단한 퍼블리싱 외주라도 받아서 용돈벌이라도 할까 싶어서 크몽에 가입했다. 전문가가 필요한 순간, 프리랜서 마켓 No.1 크몽마케팅·디자인·IT프로그래밍·영상 등 다양한 비즈니스 분야의 전문가를 만나보세요!kmong.com 솔직히 경쟁자도 많고 업체도 많이 입점해있는 상태기 때문에 나처럼 1인 영세 어쩌고 한 테 의뢰가 올 거라곤 생각하지 않았다. 그냥 오면 감사감사인 거고 아니면 마는 거고 ㅎ 아무튼 반응형 퍼블리싱, 프론트엔드 개발로..

예전에나 지금이나 차트를 표시해줘야 할 때는 c3.js를 잘 이용하고 있다. 근데 사용하다보니 디자인이 좀 질려서.. 직접 커스텀 하기는 또 귀찮고 다른 차트 라이브러리는 어떤게 있는지 좀 찾아봤다. 1. c3.js C3.js | D3-based reusable chart library Comfortable C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. Customizable C3 gives some classes to each element when generating, so you can..

쇼핑몰 관리자를 작업중인데, 대시보드에 매출이나 회원 등의 수치 변화를 나타내는 그래프를 표시해주어야 했다. 예전 작업에서 사용했던 c3.js가 생각나서 사용해보기로 했다. 시작하기 일단 아래 깃허브 링크에서 c3.js를 다운받는다. https://github.com/c3js/c3/releases/tag/v0.7.20 Release v0.7.20 · c3js/c3 Changes Fix config subchart_axis_x_show (#2806) Fix pan of y-axis when zoomed and rotated=true #2799 (#2805) github.com 서버에 올리고, 아래처럼 사이에 추가해준다. 1 2 3 4 5 6 cs c3는 d3기반으로 이루어져 있다. d3.js도 함께 불러와..

GoToPage 클래스를 누르면 페이지가 이동된다. 현재 페이지를 전역으로 선언하고 swiper에서 슬라이드 넘길때 현재 페이지 index값을 가져와서 저장 한다. 이후 버튼 눌렀을 때 현재 페이지의 다음 페이지로 넘어가도록 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 var activePage = 0; // 슬라이드 현재 페이지 var total_count = 5; // 슬라이드 전체 페이지 // 스와이퍼 생성 var swiperSlide= new Swiper(".swiperSlide", { loop : true, speed : 500, autoplay: { delay: 10..

슬라이드 조건 - 슬라이드 개수는 5개 - delay시간은 5초 - 자동으로 5초뒤면 넘어가고, 무한루프 swiper로 슬라이드 만들고, 세로 슬라이드 옵션을 켜면 익스플로러에서 깨지는 현상이 있었다. 그래서 그냥 직접 만들었던 세로 슬라이드 소스코드다. 그땐 DB에서 값 불러오는 슬라이드였어서 php 코드랑 얽혀있었는데 다 배제하고 슬라이드 기능만 있는 순수 html, javascript 코드다. 요샌 익스플로러까지 신경들 안쓰니, 그냥 스와이퍼 사용한다. 스와이퍼 짱짱맨 html, javascript 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40..

2022년 5월 기준 php 최신 버전은 8.x이다. php 7버전 이후인지 8버전 이후부터인지는 모르겠으나, 엑셀 다운로드 기능에 편하게 사용되던 PHPExcel 라이브러리가 정상 작동하지 않는다. 구버전에서는 정상작동한다. 개발측에서 더이상 업데이트 하지 않는것 같다. 따라서 PHP최신버전을 사용하거나 php 구버전 (예를들어.. 5.x버전)을 사용하다가 최신 8버전으로 마이그레이션 작업을 해야한다면, PHPExcel 라이브러리를 PhpSpreadsheet로 변경해줘야한다. PhpSpreadsheet는 PHPExcel과 다른 라이브러리라 새로 설치가 필요하지만, 소스는 비슷해서 마이그레이션 작업이 그닥 어렵지 않다. PhpSpreadsheet 설치 사실 서버단에서 composer를 이용하여 설치 해야..

input text의 placeholder에 css를 적용해야할 때가 있다. 아래와 같이 적용한다. 1 2 3 4 5 6 input:focus {outline:none} input::placeholder{padding-left:20px;color:#838383;font-size:14px;letter-spacing:-1.2px} input::-webkit-input-placeholder {padding-left:20px;color:#838383;font-size:14px;letter-spacing:-1.2px} input:-ms-input-placeholder {padding-left:20px;color:#838383;font-size:14px;letter-spacing:-1.2px} Colored by ..

1 .my_div{background:#404040 url('./search_icon.png') no-repeat;background-position:center center} cs 이미지 아이콘 백그라운드 색상 적용되도록 png 이미지 사용하는거 잊지 말기.

폰트 변환 폰트 변환이 필요하다. 만약, ttf 파일만 갖고있다면 해당 파일을 아래 사이트에 업로드 후 eot, woff2, woff 등으로 변환한다. https://convertio.co/kr/otf-ttf/ OTF TTF 변환 (온라인 무료) — Convertio otf 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요. convertio.co 변환 후 다운로드 시 파일명에 prefix가 붙으므로 파일이름 변경하는거 잊지말기 변환 후 홈페이지 서버에 변환한 파일들을 적절한 경로에 업로드 후 아래 css 작성 css 작업 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2..