본문 바로가기

전체 글61

CentOS7 + Vue CLI 3.0 프로젝트 환경 구축 vue-cli는 Vue.js 의 작업환경을 간편하게 생성해준다. 나는 CentOS7 (7.4v) 환경에서 설치 / 프로젝트 생성을 했다. 저장소 할당 후 node js / npm을 설치한다. 저장소에 추가 curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash - curl -sL https://rpm.nodesource.com/setup_10.x | bash - node js 설치 sudo yum install nodejs 버전확인 node --version npm 및 vue-cli 설치 sudo yum -y install npm sudo npm install -g @vue/cli버전확인 vue --version 혹여 vue --version 명령어에 n.. 2019. 3. 20.
[React] Windows or CentOS7 / React + create-react-app + yarn + Node js 환경 구축 React를 사용해보고싶지만 webpack / babel 등을 설정하느라 시간을 투자하기 싫을때create-react-app 도구를 사용하면React 작업환경을 명령어 하나로 설정 할 수 있다. Windows 운영체제와 CentOS7 (7.4v) 환경에서의 React + create-react-app + yarn + Node js 환경을 구축해보자 [Windows에서 환경 구축] 1.Node js 설치 NodeJs 공식 사이트(https://nodejs.org/ko/download)에서 Windows Installer를 내려받아 설치한다. 설치가 끝나면 cmd 창에서 버전확인 및 설치여부 확인이 가능하다. 2. yarn 설치 npm은 의존하는 라이브러리 개수가 많으면 속도가 저하된다. yarn은 npm .. 2019. 3. 13.
웹폰트 - 크로스도메인 문제해결 모든 도메인에서 웹 글꼴에 액세스 할 수 있는 작업 https://httpd.apache.org/docs/2.2/ko/sections.html Header set Access-Control-Allow-Origin "*" 글꼴 - 굉장한 자산에 액세스하는이 문제는 포괄적 인 설명과 문제 해결없이 많은 사람들에게 문제가되었습니다. CORS 란 무엇입니까? Cross-Origin Resource Sharing (CORS)은 추가 HTTP 헤더를 사용하여 사용자 에이전트가 현재 사용중인 사이트와 다른 원산지 (도메인)의 서버에서 선택된 리소스에 액세스 할 수있는 권한을 얻을 수있게하는 메커니즘입니다. 사용자 에이전트는 현재 문서의 출처가 아닌 다른 도메인, 프로토콜 또는 포트에서 자원을 요청할 때 원본 HTTP.. 2018. 4. 30.
request와 cheerio를 이용한 웹페이지 크롤링 request와 cheerio를 이용한 웹페이지 크롤링 request 모듈 : 웹 페이지를 받아오는 모듈 cheerio 모듈 : HTML 문자열을 jQuery 객체로 만들어주는 모듈 HTML 데이터를 request로 가져오고, 크롤링 한 HTML 데이터를 파싱하기 위해 cheerio를 사용한다. request 와 cheerio 모듈 설치 npm install request && install cheerio 긁어올 html파일 구조 0000 test js파일 //모듈 추출 var request = require('request'); var cheerio = require('cheerio'); //request 모듈 사용 var url = '웹페이지주소'; requ.. 2018. 3. 19.
[AngularJS] 폼/유효성 검사를 위한 템플릿 ng-model : 바인딩 대상이 되는 모델명name : 폼에서 사용하는 이름ng-required : 필수 입력 여부ng-minlength : 입력값의 최소 글자 수ng-maxlength : 입력값의 최대 글자 수ng-pattern : 입력값과 비교될 정규표현식ng-charge : 사용자 입력이 발생할 때 실행될 정규표현식 유효성 검사 예제 ↑ 위 인풋값에서 각 값을 넣어 유효성검사를 해보자. name : 필수입력 phone number : 000-0000-0000 user info : {{name}} / {{tell}} sampleForm.name.$valid = {{sampleForm.name.$valid}} sampleForm.name.$error = {{sampleForm.name.$error}}.. 2018. 3. 19.
[AngularJS] 조건 데이터 표현을 위한 템플릿 (ng-switch, ng-if) 조건 데이터 표현을 위한 템플릿 ng-switch : 어떠한 html태그에서도 사용할 수 있으며, 부모 요소에서 ng-switch="표현식"을 작성. (표현식에 $scope의 속성명이 오게 된다.) 자식 요소에서 ng-switch-when="조건일치값" 을 작성한다. ng-switch를 사용한 조건에 따라 div의 색이 변경되는 예제 red blue ng-show, ng-hide : 적용 요소를 css의 display 속성변경으로 보여주거나 숨김 ng-if : 요소 자체를 없애거나 생성하는것. ($scope 또한 없어지고 생성된다.) ng-if를 사용한 checkbox 에 체크시 버튼이 보여지는 예제 show button 2018. 3. 13.