개발/Front-End(6)
-
Github.io 페이지에 퍼블리싱 하기
1. gh-pages 설치 npm i gh-pages 2. package.json 수정 deploy , predeploy, homepage부분을 추가해주면 된다. "scripts": { "start": "react-scripts start", "build": "react-scripts build", "deploy": "gh-pages -d build", "predeploy": "npm run build" }, "homepage": "https://[사용자ID].github.io/[Project이름]", 3. run deploy npm run deploy -> run deploy를 하면 자동으로 predeploy script (npm run build) 가 돌게 된다. 과정이 끝나면, 원하는 링크에 퍼블리..
2021.08.13 -
[javascript] minify javascript (자바스크립트 사이즈 줄이기)
가끔 Reactive Web 을 보면 어떻게 만들었나 궁금해서 개발자 도구를 이용해서 javascript를 꺼내볼때가 있다. 그럴때마다 "constructor(e){super(e)" 처럼 React에서는 props로 쓰이던 부분이 "e"로 변경되어있는 것이 눈에 띄이고, 코드가 모두 한줄로 나열되어 있는 모습을 볼때가 있었다. React를 공부해보던중 javascript minify 하는 방법이 있어 찾아보니 npm 모듈을 통해 손쉽게 만들 수 있었다. 방법은 간단하다. 먼저 node.js 가 설치되어있어야하고, terser 라는 모듈이 필요하다. 1. Node.js 설치 2. npm install terser 입력 3. npx terser -c -m -o like_button.min.js -- like..
2021.07.22 -
billboard.js 를 이용한 차트 그리기
billboard.js네이버에서 제공해주는 차트 라이브러리이다. 네이버에서 billboard.js외에 egjs도 제공해주기에 한번 사용해보면 좋을거같다. billboard.js는 D3 v4+ 를 기반으로 만들어진 라이브러리이다. 본문 : https://naver.github.io/billboard.js/ 사용법1. billboard.js와 D3.js를 로딩한다. 123456 cs 2. 차트를 넣을 영역을 셋팅한다.1cs 3. 차트의 옵션을 작성한다.12345678910var chart = bb.generate({ bindto: "#chart", data: { type: "bar", columns: [ ["data1", 30, 200, 100, 170, 150, 250], ["data2", 130, 100..
2017.11.14 -
jQuery Mobile 사용시 download Link가 동작하지 않을 때 해결 방법
문제 정의JQuery Mobile을 사용하다보면 download Link를 생성할때가 있다. a태그를 이용해서 링크를 걸어주어도 모바일에서는 download가 제대로 되지 않고, 특정 페이지로만 넘어가는 경우가 발생할 수 있다. 해결 방법JQuery Mobile을 사용하게 되면 기본적으로 AJAX loading을 시도하게 되어있는데 이 속성값을 false로 만들어주어야 한다. 1Linkcs
2017.11.01 -
javascript로 form 만들고 submit 하기
1234567891011121314151617181920function autoLogIn(un, pw) { var form = document.createElement("form"); var element1 = document.createElement("input"); var element2 = document.createElement("input"); form.method = "POST"; form.action = "login.php"; element1.value=un; element1.name="un"; form.appendChild(element1); element2.value=pw; element2.name="pw"; form.appendChild(element2); document.body.ap..
2017.08.28 -
[Front-End] Google 무료 폰트 사용하기
Front-End에서 웹 폰트를 사용하기 위해서 폰트를 로딩할 수 있는 링크가 필요하다. Google Font에 가면 무료 폰트를 골라서 쓸 수 있다. 사용방법 1. https://fonts.google.com/ 로 접속한다. 2. 원하는 폰트를 선택한다. 3. 왼쪽 하단에 있는 플러스 버튼을 클릭한다. 4. 팝업창에서 링크 및 font-family이름을 확인한다. 이내용을 그대로 head태그 안에 넣어주면 된다. 예시 코드123456789101112 : : div, a { font-family: 'Open Sans', sans-serif; } : :Colored by Color Scriptercs
2017.07.06