본문 바로가기

HTML + JAVASCRIPT + CSS

Reactjs 초기 프로젝트 구성하기 Reactjs 초기 프로젝트 구성하기 Reactjs 초기 프로젝트를 구성하려는 방법 중 가장 쉽고 널리 알려진 것은 Create React App를 이용하는 방법이다. 아래와 같이 실행하면 바로 프로젝트 구성이 완료된다. npx create-react-app my-app cd my-app npm start아쉬운 점은 무엇이 설치 되었는지 내가 알지 못하고, 또한 컴파일에 오랜 시간이 걸린다. npm run eject를 이용해서 묶음을 풀어 보면 너무 많은 것들이 설치 되어 있다. 그래서 방법을 찾아 보던 중 @babel/preset-env와 plugins이라는 유튜브를 보고 한땀씩 진행을 해보았다. 우선 나에게 필요한 기본 모듈은 다음과 같다. 기본 모듈 react react-dom react react.. 더보기
Reactjs] Create-react-app 시작하기 Reactjs] Create-react-app 시작하기 reactjs 시작은 다음과 같다. $> npx create-react-app my-app $> cd my-app $> npm start위와 같이 명령어를 실행하여 기본 react 구조와 모듈이 포함된 프로젝트를 생성한다. 생성된 프로젝트의 구조는 다음과 같다. my-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.s.. 더보기
How to fix this is undefined in Vue. How to fix “this is undefined” in Vue.Vue를 써보고 있는데, Vue 안에 method를 선언하고 this를 호출하니 undefined가 발생하였다.export default { methods: { sayHello: () => { this.val = 'hello'; console.log(this.val); } }, data() { return { val: '' } } } #### 결과 this is undefined 원인을 찾아 보니 다음과 같은 내용을 확인했다.If you try to access this from inside of an arrow function that’s on a Vue component, you’ll get an error because this d.. 더보기
D3] TEXT 태그를 wraping하여 라벨 나누기 D3에서 긴 텍스트에 대한 처리이전 포스팅의 텍스트 줄바꿈 처리는 모든 브라우져에서 동작 하지 않는다. 확인 해본 결과 Firefox에서는 동작 하지만, 많이 사용되는 Chrome에서는 동작 하지 않는다.모든 브라우져에서 동작하기 위한 코드를 찾아본 결과 Wrapping Long Labels을 발견 할 수 있었다.위의 코드에서 wrap을 해주는 매소드에 보면 text 태그 하단에 들어가는 tspan이라는 태그를 발견 하였는데, 이를 이용하여 여러 라인 처리를 하는 것을 확인했다. 이를 활용하면 긴 문장에 대한 여러 방법으로 처리가 가능 하다.function wrap(text, width) { text.each(function() { var text = d3.select(this), words = text.. 더보기
[JAVASCRIPT] - 주소창의 parameter 제거 [JAVASCRIPT] - 주소창의 parameter 제거보통은 주소창에 parameter 값이 다음과 같이 표출된다.https://lahuman.github.io/posts/?lang=ko이때 해당 주소에서 parameter 값만 제거 하고 싶을 경우 다음의 스크립트를 이용하면 간단히 처리 할 수 있다.history.replaceState({}, null, location.pathname);parameter가 제거된 값은 다음과 같다.https://lahuman.github.io/posts/ 더보기
Array.prototype.reduce VS for loop Array.prototype.reduce VS for loop Array.prototype.reduce Syntax arr.reduce(callback [, initialValue] ) [1, 2, 3].reduce(function(previousValue, currentValue, index, array){ .... return currentValue }, ''); previousValue : initialValue(사용자가 정의한 초기값) 혹은 currentValue의 이전 index 값 ( arr[index-1] ); 처음 실행시 초기값이 있으면 초기값이 전달 되며, 초기값이 없을 경우 배열의 0번째 index 배열값이 전달 된다. 이후 항상 currentValue의 이전 index 배열값이 전달 .. 더보기
[jsGantt]간트 차트 라이브러리 웹에서 간트 차트를 만들수 있는 쉽고 간단한 라이브러리를 추천 합니다. 사용 법은 다음과 같습니다. 주요 포인트 :1. 표출 하려는 div 밑에 꼭 "var g = new JSGantt.GanttChart('g',document.getElementById('GanttChartDIV'), 'day');" 이부분을 선언 하셔야 동작 합니다.2. jsGantt는 다시 그리기를 지원 하지 않습니다. 화면 재로딩을 이용하시기를 추천 드립니다.3. 라인이 조금씩 깨집니다. 길어질 경우 보기 안좋을 수 있습니다. URL : http://www.jsgantt.com/DOWNLOAD : https://code.google.com/p/jsgantt/ 더보기
requirejs 란 - 모듈정의, 모듈 로더 requirejs 는 어디에 쓰는 물건인가. requirejs 홈페이지에 가면 "RequireJS is a JavaScript file and module loader" 라고 제일 첫 줄에 나온다."자바스크립트 파일과 모듈 로더다." 아직 뭔지 와닫지 않는다.. 모듈이란. 일반적으로 컴퓨터 분야에서의 모듈은 "독립되어 있는 하나의 소프트웨어 또는 하드웨어 단위를 지칭하는데 사용된다. "라고 네이버 백과사전에 나와있다. 조금도 쉽게 말하면 JavaScript에서 jquery도 모듈이고, util성으로 만든 function들의 모음 js도 하나의 모듈로 볼수 있다.requirejs는 이런 모듈을 로딩하는 역활을 하는것이다.자 그럼 requirejs를 사용하기 위해서는 JavaScript 모듈화 작업이 필요하.. 더보기
[jQCloud] 간단하게 사용하는 TAG CLOUD Tag Cloud 기술을 간단하게 사용할 수 있는 Jquery plugin 을 소개 합니다. 사용법은 간단 합니다. /*! * Create an array of word objects, each representing a word in the cloud */ var word_array = [ {text: "Lorem", weight: 15}, {text: "Ipsum", weight: 9, link: "http://jquery.com/"}, {text: "Dolor", weight: 6, html: {title: "I can haz any html attribute"}}, {text: "Sit", weight: 7}, {text: "Amet", weight: 5} // ...as many words as.. 더보기
[TIP]IE 에서 Window.open 시 오류 발생 var win = window.open(url, wname, wfetures); 시 아래와 같은 오류가 발생할 경우, SCRIPT87 Message: Invalid argument. wname 에서 빈칸( )이나, 언더바(_) 가 들어가서 발생하는 오류일 가능성이 높다. Microsoft 에서는 두번째 인자를 아래와 같이 사용하라고 권고 한다.http://msdn.microsoft.com/en-us/library/ms536651%28v=vs.85%29.aspx wname 인자에는 target의 속성을 입력하라 되어 있다._blank_media_parent_search_self_top IE 에서만 발생하여 대략 난감할 수 있음 참조 : http://stackoverflow.com/questions/7107.. 더보기

티스토리툴바