웹개발환경설정 4

bootstrap, less 사용 ( ie8 지원)

개요 프로젝트 기본 폴더 구조를 잡는다 ( Boilerplate, bootstrap less 기반 ) 방법 # 폴더 및 파일 생성 # Fonts 추가 1. 글리피콘 복사 및 .htaccess 생성. 2. htaccess에 코드 추가 ( 크로스 도메인을 대비, CDN 서비스나 호스팅 서비스에 따라서 브라우저가 웹폰트를 인식 못하는 문제 해결 ) # Javascript 추가 1. 플러그인 ( 외부 라이브러리 ) 자바스크립트 파일을 js/vendor 폴더에 저장 ( bootstrap 3.0.0 ) 2. plugins.js 파일을 생성 후 아래 코드 추가 ( 외부 라이브러리에 대한 사용자정의 코드 ) 3. main.js 파일 생성 # less 파일 추가. 1. bootstrap 3.0.0의 less 모두 복사...

Task - Watch태스크 추가 및 기본 태스크 생성

개요 파일이 수정되면 자동으로 이를 감지하고 특정 task를 수행하도록 할 수 있는 watch 태크스를 추가하고, 여러 태스크를 함께 실행할 수 있는 registerTask 적용. 방법 # watch 태스크 설정 추가. 1. Gruntfile.js에 아래 코드 추가. # watch 태스크 실행 1. command 창에 grunt watch 실행. # 테스트 1. plugins.js 파일에 아래 코드 입력. 2. command 메시지 확인. 3. 생성된 파일에서 변경여부 확인. # registerTask 추가 1. task 생성. 2. grunt default 또는 grunt 로 실행. 참고 신규로 추가되는 파일은 감지하지 못함. watch 태스크를 ctrl + c 로 중지 후 다시 실행해야 함.

Tool/----- Grunt 2017.04.27

기본설정 - package.json 생성 및 패키지 설치

개요 개발에 필요한 기본환경을 위해 폴더의 구조를 잡고 패키지들을 설치한다. bower를 쓰지 않는 가장 기본적인 방법으로 최소한의 패키지만 사용. 방법 # 폴더 생성. # package.json 생성 1. root 폴더에 새로운 파일을 만들어 아래 코드를 입력. ( npm init 명령어를 이용해서 생성 가능 ) 2. package.json 파일로 저장. # package 설치 1. command 창 오픈 후 npm install 실행. 2. node_modules 폴더 아래 설치된 패키지 확인. 참고 package.json 파일에서 devDependencies 를 입력하지 않고, command창에서 'npm install --save-dev 패키지명' 를 실행하여 설치와 설정을 같이 할 수도 있음.

Tool/----- Grunt 2017.04.26