글

[front] Grunt와 Bower사용법 - 퍼옴

Grunt와 Bower를 이용한 웹 프론트엔드 제작하기 Grunt를 이용하여 static file의 압축, 문법 검사 등을 자동화 하고 Bower를 이용하여 웹 프론트엔드에 필요한 라이브러리를 간편하게 관리하는 방법을 알아봅시다. 예전에 좋은 프로그래머가 되기 위해서는 자동화 할 수 있는 부분은 모두 자동화하라는 말을 들은 적이 있습니다. 그 말을 뒷받침 하듯이 개발자를 돕기위한 자동화 툴이 상당히 많습니다. 물론 웹 프론트엔드 개발에도 예외는 아닙니다. 웹 프론트엔드 개발을 위한 자동화 툴 중 Bower와 Grunt에 대해서 소개하겠습니다. Grunt 예전에  ‘보다 좋은 자바스크립트 코드를 작성하기 위한 7단계’ 라는 글을 번역한 적이 있습니다. 이 글에서 소개하는 7단계의 대부분을 Grunt를 이용하여 자동화할 수 있습니다. 먼저 Grunt란 무엇일까요? Grunt는  ‘Grunt is a task-based command line build tool for JavaScript projects.’  라고 정의할 수 있습니다. 여기서 중요한 것은 task-based 입니다. Grunt에 적당한 task를 작성하면 Grunt가 task에 따라서 프로젝트를 자동으로 빌드해준다는 뜻입니다. 설치 설치는 npm을 통해서 설치할 수 있습니다. npm이란 Node Packaged Modules의 약자로 node.js에서 사용하는 모듈을 npm을 이용하여 설치할 수 있습니다. node.js를 설치하면 npm도 같이 설치됩니다. node.js설치는  공식 홈페이지 에서 할 수 있습니다. npm이 설치되었으면 다음과 같은 명령을 입력합시다. $ npm install -g grunt-cli 위 명령어 에서 ‘-g’는 글로벌을 나타냅니다. grunt-cli를 콘솔 어디서나 사용 편하게 가능합니다. grunt-cli를 설치했으면 grunt를 설치해봅시다. $ npm init ...
댓글 쓰기
자세한 내용 보기

[git] github 푸쉬에러, $ git push origin master remote: Permission to 저장소주소 denied to A.

github 개인 repository push시 permission denied 에러 발생. $ git push origin master remote: Permission to 저장소주소 denied to A. fatal: unable to access '저장소전체주소' : The requested URL returned error: 403 위와 같은 에러 발생시, 해결책. 로컬PC의 github키를 삭제(windows 기준) : 제어판 - 사용자 계정 - 자격 증명 관리 - Windows 자격 증명 - 일반 자격 증명에서 github키 제거 그 후 push를 해보면 github사용자 계정을 다시 물어봄. 이 방법의 단점은 로컬PC의 초기 사용자가 아니라면 다시 키 제거를 해야함.
댓글 쓰기
자세한 내용 보기

[git]GitHub 환경에서의 실전 Git 레시피

이미지
GIT 기본 사용법  ===================================================================== 저희 팀은 Git으로 소스를 관리하고, GitHub로 코드 리뷰를 진행하고 있습니다. 또한, 저희 팀 상황에 맞춰 변형한 Git Flow 전략으로 브랜치 관리를 하고 있죠. 하지만 Git을 사용하며 개발을 하다 보면 종종 뭔가 잘못되거나, 예상과는 다르게 동작할 때가 많습니다. 이 글에선 저희가 현재 사용하고 있는 Git 환경을 간략히 설명한 후, 자주 마주치는 상황에서 사용할 수 있는 Git 명령어를 알아보려고 합니다. 레시피 성격인 만큼 심도 있게 설명하거나 Git의 모든 옵션을 언급하진 않겠습니다. 본 글에서 예제로 사용하는 repository 링크는 임의로 지어낸 것입니다. 그대로 사용할 수는 없으니, 참고하셔서 본인의 환경에 맞게 바꾸어 사용하시기 바랍니다. 로컬 환경 구축 [그림 1] GitHub의 repository 상호 관계도 [저작자]  GitHub [이미지출처]  https://github.com/blog/2042-git-2-5-including-multiple-worktrees-and-triangular-workflows [그림 1]은 GitHub 사용자가 repository를 사용하는 시나리오를 간략히 나타낸 관계도입니다. upstream은 메인 repository입니다. origin은 메인 repository를 자기 계정으로 fork한 repository이죠. fork는 GitHub의 fork 버튼을 사용해 간단히 실행할 수 있습니다. 이제 fork된 repository를 로컬로 clone해봅시다. 이하 명령어에 사용한 링크와 같은 repository 링크는 개인 GitHub 페이지에서 복사하여 가져올 수 있습니다. $ git clone https://github.com/junsik-shim/some-project.git so...
댓글 쓰기
자세한 내용 보기

[pub] css 영문, 텍스트 줄바꿈 오류

[pub_cl] css 영문, 텍스트 줄바꿈 오류 프로젝트, 이벤트 페이지 댓글창 영문 입력시 줄바꿈이 되지 않고 엘리먼트 박스 밖으로 텍스트가 나가는 현상 발생. 밑의 블로그를 참고하여 해결 selector{  word-break:break-all } ======================================================================= 1번과 2번은 특수문자의 종류에 따라서 결과가 다를 수도 있으니 주의하세요~   1. 아무 처리도 하지 않았을 경우,  IE - 숫자/특수문자는 줄바꿈 안됨. 영문은 단어별로 줄바꿈 됨. 한글은 강제 줄바꿈 됨.  (단 특수문자의 종류에 따라서 줄바꿈이 되는 것도 있습니다. 예를 들어 %는 줄바꿈이 됩니다.)   FF - 숫자/특수문자는 줄바꿈 안됨. 영문은 단어별로 줄바꿈 됨. 한글은 강제 줄바꿈 됨. 2. word-break:break-all IE - 숫자, 특수문자, 영문, 한글 모두 강제 줄바꿈됨  (단, 특수문자의 종류에 따라서 줄바꿈이 되지 않는 것도 있으니 주의해야함)   FF - 숫자/특수문자는 줄바꿈 안됨. 영문은 단어별로 줄바꿈 됨. 한글은 강제 줄바꿈 됨. 3. word-break:keep-all IE – 영문,숫자,특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 안됨, 한글 단어 단위로 줄바꿈 됨. FF – 영문, 숫자, 특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 안됨, 한글 강제 줄바꿈 됨. 4. word-wrap:break-word IE - 영문, 숫자, 특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 됨. 영문 단어 단위로 줄바꿈됨. 한글 강제 줄바꿈 됨. FF - 영문, 숫자, 특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 됨. 영문 단어 단위로 줄바꿈됨. ...
댓글 쓰기
자세한 내용 보기