개발자 도담씨

오랜만에 일기장 카테고리를 꺼내들었다 👋👋 처음엔 향수를 좋아하다가 그다음 디퓨저 섬유향수 그리고 지금은 향초를 좋아하고 있다 :) 아마 계속해서 향수처럼 뿌리는 것 보다는 향초를 계속 좋아하게 될 것 같다. 그러면서 향초도 만들어보고 하나씩 향초를 사 모으고 있다. 아직 몇가지 안되지만 써봤던 양키캔들 리뷰를 끄적여 보기로 한다 🙆 사실 양키캔들 향 맡으러 가보면 다들 나한텐 강한거 같아서 초반엔 선듯 못샀었는데 막상 발향해보면 브랜드는 브랜드구나 하면서 하나 둘씩 사게됐던 친구들 XD 🧡 레몬라벤더 이건 사실 남자친구에게 라벤더바닐라라고 계속해서 말했는데 결국 잘못시켜서 레몬라벤더가와서 썼던 향초... 많이 추천하는 향이지만 나에겐 그냥 레몬향 에프킬라냄새의 향이였다. 💛 라벤더바닐라 라벤더향을 좋아..

[ Node.js / Webpack ] 이번엔 웹팩 🤜 [ Node.js / Webpack ] 자산 관리 ( css, image, font, file, loader ) [ Node.js / Webpack ] 출력 관리 이번 챕터 - https://webpack.js.org/guides/development/ 오 나름 꾸준히 잘 하구 있다 :) 이번 챕터의 장은 Development 개발이라고 제목지어져 있다. 포스팅하면서 읽어 내려가겠지만 대충 훑어보니 개발환경에 관한 webpack의 기능을 설명해주려 하는가보다. mode 3편의 출력관리의 코드들을 가지고 이어서 해볼 것이다. 그리고 문서에서 대뜸 webpack 모드를 development 모드로 설정하라고 한다. 문서를 찾아 보니 webpack에서는 ..

인스타그램 api를 연동하면서 생각못했는데 비디오가 있더구만... 그래서 새로 비디오 태그 작업을 하게 되었다 👀 영상을 넣는데 어려울건 없었지만 알아야할 사항들이 몇가지 있었다. W3CSchool 비디오 태그 - https://www.w3schools.com/tags/tag_video.asp 해당 문서를 보면 알다시피 비디오 태그는 아래처럼 작성해주면된다. 이미지 태그와 별반 다를게 없다. Your browser does not support the video tag. 하지만 내가 메모하려는 정보는 옵션부분이다. 문서에도 있듯 비디오태그에는 여러 옵션이 있다. 우선 나는 autoplay를 해주고싶었다. 그리고 문서에 설명되어있는 것 처럼 autoplay를 작성해주었지만 실행되지 않았다. 검색해본 결과 ..

jQuery.noConflict() 함수명 그대로 jQuery 충돌을 막기 위한 함수다. 이 친구는 또 처음본다. ( 안녕..? ) 친구를 만나게 된 계기는... 카페24 쇼핑몰을 제작해보면 외부 스크립트 및 스타일시트를 불러올때 script태그랑 link태그를 사용하지 않고 자체 문법으로 불러오고 있는데 자체 문법을 사용한 파일들을 한데 묶어 optimizer이라는 이름으로 하나만 불러오고 있다. ( 디버깅할때 넘 힘들다 ) 그리고 레이아웃에 떡하니 이런 주석을 적어놨다. 스마트디자인에서는 JQuery 1.4.4 버전이 내장되어있습니다. 추가로 호출하면 충돌이 생길 수 있습니다. 하지만 그냥 script로 불러온 나로썬 내장 jQuery가 당연히 먹힐리 없고 ( 실행 순서가 다르기 때문에... ) 나는..

1편 - [ Node.js / Webpack ] 이번엔 웹팩 🤜 2편 - [ Node.js / Webpack ] 자산 관리 ( css, image, font, file, loader ) 관련 문서 - https://webpack.js.org/guides/output-management/ 2편에 이어 출력관리에 대해 정리하려한다. 자산관리편을 하면서 파일을 하나 생성할때마다 import해주어야 한다면 기존과 관리면에서 어떻게 좋다는건지 의문을 가졌었는데 이번 출력관리편에서 설명을 해주겠다 :) 문서에서도 이와 같이 설명하고 있다. "우리가 2편에서 수동으로 파일을 관리 했으나 시스템이 커짐에 따라 한계가 있다. 따라서 우리는 몇 가지의 플러그인을 사용해 프로세스들을 관리하려 한다. " 우선 /src 에 p..

1탄 - [ Node.js / Webpack ] 이번엔 웹팩 🤜 참고 문서 - https://webpack.js.org/guides/asset-management/ 저번주에 이어 두번째 섹션을 진행해보려한다. 공부하기 싫은데 남자친구한테 끌려 왔다. 두번째는 자산 관리라고 표현되어 있다. 저번엔 javascript만 관리를 했다면 이번엔 이미지와 css와 같은 파일들도 관리를 해보자는 의미인 듯 하다. 저번에 작성했던 index.html 을 다음과 같이 변경한 후 시작해보자. main.js가 아닌 bundle.js를 불러온다고 해놨으니 webpack의 설정도 main.js가 아닌 bundle.js를 생성하도록 변경해주어야 할 것이다. ( webpack.config.js ) const path = requ..

안뇽... 이전글에 이어 포스팅 또 왔다..😢 [ html2canvas / jszip ] html화면 캡쳐 zip파일로 다운받기 html2canvas + jszip을 같이 사용해서 자바스크립트만을 이용해 zip파일을 만들어서 뿌듯해 하고 있었는데... 다운 용량 제한이 있어서... 결국 php를 사용해야하는것이었다요... 그럼 이제 html2canvas로 만든 이미지를 base64 인코딩을 사용해 서버에 저장 후 zip파일을 만들려고한다. 이번에도 엄청 구글링 했다 :_) 벌써 3번째 언급하는 거지만 빠르게 훑어보고 가자. 자바스크립트에서는 canvas.toDataURL을 base64로 인코딩하여 ajax로 보내주었다. let url_arg = []; html2canvas(tag, { onrendered..

[html2canvas] 웹 화면을 이미지로 저장하는 방법 ( 캔버스 ) [html2canvas] 웹 화면을 이미지로 저장하는 방법 ( 캔버스 ) 회사 업무를 하다가 신기한 기능하나를 구현해서 기록하려한다. "웹페이지를 이미지화 시켜 저장하는 방법"이다. 백단으로 넘어가지 않고 라이브러리를 사용해 스크립트만 사용하여 페이지의 일부분을 저장하는 것.. do-dam.tistory.com 이전에 html2canvas를 이용해 html을 이미지로 변환하여 저장하는 포스팅을 한적이 있는데, 해당 기능은 기본으로 있는 다운로드 폴더에 이미지가 30개 40개씩 다운이 받아지니 아무래도 불편할때가 있었다. 그래서 혹시 zip파일로 할 수 있는지 알아보고 한번 해봐달라기에 열심히 검색해봤다. 검색 해본 결과 html2c..

멀티 채팅에 이어서 진짜 맛보기만 하고 있는 느낌이긴 하지만 그래도 한다는거에 나로썬 만족하겠다 :) ( 뻔뻔쓰 ) 이번에 관심을 가진건 웹팩이다. 저번처럼 등장배경및 친구소개먼저 받을꺼다. 우리가 CSS를 header에 적고 script를 body이후에 적을때가 있을 것이다. 브라우저 렌더링 과정을 보면 1. HTML읽은 후 파싱 2. DOM, CSSOM 생성 3. 렌더링 트리 생성 4. 레이아웃 계산 5. 페인트🎨 여기서 HTML을 읽는 과정중 스크립트를 만나게 되면 스크립트를 읽고 파싱 후 HTML을 다시 읽어내려간다. 자바스크립트를 분할 하여 여기저기서 여러개 불러올탠데 생각만 해도 엄청 느리지 않은가 -ㅅ- 이런 단점을 Webpack을 통해 브라우저 랜더링 시 파일들을 단일 파일로 만들어 주어 ..

저번엔 가장 최근데이터 가져오기를 짤막하게 포스팅했는데 이번엔 그룹별 최근 데이터를 가져오는 일이 생겼다. 사실 저렇게 해야하는줄 알았는데 어차피 반복문 돌려서 배열을 만들었어야 했지만.... 아래 참고 블로그링크를 걸어 놓겠다. 똑같은 쿼리지만 그래도 내가 글을 적어놓는게 한번 더 기억할거니까 :) 헣허... 컬럼이 좀 많지만 다 무시하고 우선 내가 원하는 목표는 eventId로 묶은 그룹별 최신 데이터를 두개만 가져오는 것이었다. 그러니 eventId와 regDate를 사용하게 될 것 같다. SELECT *, rnum FROM( SELECT a.*, (CASE @groupId WHEN a.eventId THEN @rownum:=@rownum+1 ELSE @rownum:=1 END) AS rnum, (..