개발자 도담씨

웹팩 해야하는데 또 새로운거 하고싶어서 리액트 찾다가 튜토리얼만 해봐야지 하고 시작한 리액트 튜토리얼 도전기🤤 틱택토를 만들어 본다구 한다 :) 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 ..

[ 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을 통해 브라우저 랜더링 시 파일들을 단일 파일로 만들어 주어 ..