개발자 도담씨

오늘 또 새로운 정보를 알았다! (흥분) 회사의 다른 부서에서 사용중인 페이지가 너무 기니까 랙을 먹어 불편하다고 말이 나와 고민중에 옆 선배한테 물으니 CSS 가속화 작업을 한번 해보라고 하셨다! CSS 가속화요...?😬 문제된 페이지는 sortable을 많이 사용한 페이지였다. 그렇다 보니 Reflow와 Repaint 작업이 많이 발생 할 수 밖에 없었다😫 Reflow와 Repaint를 모르고 계시다면 CSS랜더링에 관한 정보를 참고하시면 된다 :) 나는 위치가 이동될 수 있다고 미리 알려주는 css속성인 will-change를 걸어주었다. will-change:top, left; 다른 필요 지식이 더 있지만 아래의 참고 블로그에 너무 잘 정리해주셔서 기타 필요한 상세 내용은 적지 않겠다. 꼭 참고 ..

웹팩 해야하는데 또 새로운거 하고싶어서 리액트 찾다가 튜토리얼만 해봐야지 하고 시작한 리액트 튜토리얼 도전기🤤 틱택토를 만들어 본다구 한다 :) https://reactjs-kr.firebaseapp.com/tutorial/tutorial.html Tutorial: Intro to React – React A JavaScript library for building user interfaces reactjs.org react를 전역설치 하고 my-app이라는 react app을 하나 생성해 주었다. npm install -g create-react-app create-react-app my-app 해당 명령어를 실행하면 src폴더가 하나 생겼을 텐데 src하위 파일들을 모두 삭제한 후, /src/inde..

포트폴리오를 만들때 보통 이메일 주소를 적어 놓는데... 항상 이메일을 그냥 보낼 수 있도록 하고싶은데 고작 포폴에 이기능 넣자고 php나 jsp의 백단을 구축해서 서버를 24시간 돌리고 싶진 않아서 구글링 하던중 찾은 emailJS라는 친구를 오늘 한번 소개해보려한다. https://www.emailjs.com/ Send email from Javascript - no server code required | EmailJS Send email directly from your client-side Javascript code – no server side code required. Add static or dynamic attachments, dynamic parameters, captcha code ..

오랜만에 일기장 카테고리를 꺼내들었다 👋👋 처음엔 향수를 좋아하다가 그다음 디퓨저 섬유향수 그리고 지금은 향초를 좋아하고 있다 :) 아마 계속해서 향수처럼 뿌리는 것 보다는 향초를 계속 좋아하게 될 것 같다. 그러면서 향초도 만들어보고 하나씩 향초를 사 모으고 있다. 아직 몇가지 안되지만 써봤던 양키캔들 리뷰를 끄적여 보기로 한다 🙆 사실 양키캔들 향 맡으러 가보면 다들 나한텐 강한거 같아서 초반엔 선듯 못샀었는데 막상 발향해보면 브랜드는 브랜드구나 하면서 하나 둘씩 사게됐던 친구들 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..