'WEB개발이야기' 카테고리의 글 목록

[Extensions] VScode에서 이미지 캡쳐를 슬기롭게 사용하는 방법(feat. Paste Image)

저는 블로그 글을 VScode에서 마크다운(Markdown)을 이용하여 작성을 합니다. 그때 자주 사용하는 것이 스크린캡쳐 받은 이미지를 저장하고 링크를 거는 것입니다. 크게 어려운 작업은 아니지만 이미지가 많을 경우 여간 성가신 것이 아닙니다. 이런 불편함이 나뿐만이 아닌지 누군가 익스텐션으로 개발을 해 놓은 것이 있어 소개합니다. 이름에서도 알수 있듯이 클립보드에 저장되어 있는 이미지를 붙혀넣기 하는 것이 주요 기능입니다. 현재 46,438건의 다운로드가있었고 24명이 5점의 평점을 주었습니다. 익스텐션이 훌륭하다는 뜻입니다. ^^ Paste Image 기본 사용법 설치하는 방법은 간단하기 때문에 생략합니다. 1. 내PC에서 이미지 복사하기 먼저 내PC의 이미지나 웹브라우저의 이미지를 Ctrl+C나 ..

2020. 3. 27. 15:04 0

WEB개발이야기/웹퍼블리싱

Font Awesome 5를 슬기롭게 사용하는 방법

웹사이트를 개발하다 보면 아이콘이 필요한 경우가 많습니다. 인터넷을 찾아보면 다양한 방법과 형식으로 무료로 제공해 주는 웹사이트가 많이 있는데요. 그중에서도 가장 많이 사용되는 폰트어썸(Font Awesome)이라는 웹사이트가 있습니다. 예전에는 사용하는 방법에 대해서 이해하기도 쉽고 사용하기도 쉬웠는데 Font Awesome 5로 업데이트되면서 사용법이 상당히 복잡해 졌습니다. 그러면.. 복잡해져서 나빠진 것이냐? 하면 그렇지 않습니다. 잘 알고 슬기롭게 사용하면 이전 버전보다 더 좋아지고 더 많은 플랫폼을 지원하고 있다는 것을 알게 됩니다. 사실 폰트어썸에서도 먹고 살아야 하니 유료화 정책을 적용하기 위해 복잡해진 것도 없잖아 있습니다. ^^; 웹사이트에 폰트어썸(Font Awesome 5) 적용하기..

2020. 3. 24. 15:59 0

Vue.js와 NativeScript로 앱개발을 하기위한 환경 세팅하는 방법

Vue.js로 스마트폰 앱을 개발할 때 가장 많이 사용하는 것이 아마도 네이티브스크립트(NativeScript)일 것입니다. 그냥 웹을 개발하는 것과 달리 모바일 앱을 개발할 때는 JDK나 SDK등 여러가지를 설치하고 세팅하는 것이 헷갈리고 번거로울 수 있는데 그 환경 세팅을 하는 것에 대해서 포스팅하려고 합니다. 사전설치 장비는 Windows 10과 갤럭시 S10을 기준으로 설명하도록 하겠습니다. Chocolatey 설치 Chocolatey는 Windows용 패키지 관리툴이라고 보시면 됩니다. 리눅스나 맥OS는 패키지 관리툴을 많이 사용하지만 Windows는 패키지 관리툴이 있는지도 잘 모르는 사람들이 많습니다. 쉽게 설명하면 보통 윈도우에 프로그램을 설치하려면 웹사이트에 접속해서 설치프로그램을 다운로..

2020. 3. 17. 11:49 0

[Extensions] VScode에서 코멘트를 슬기롭게 사용하는 방법 (feat. Better Comments)

VScode를 사용할 때 유용한 익스텐션(Extensions)을 소개해 드리겠습니다. 이번에 소개할 익스텐션은 Better Comments입니다. 현재 72명에게 별5개 추천을 받고 있으니 어느정도 입증이 됬다고 볼 수 있겠네요. Better Comments 소개 코딩을 하다보면 반드시 주석을 달게 되는데요. Better Comments는 코드의 주석(코멘트)를 좀더 직관적으로 볼 수 있게 특정 특수문자에 대해 색상으로 설명을 볼 수 있게 해주는 기능을 합니다. 위의 이미지에서 주석 부분만 참고하면 됩니다. 주석표시 뒤에 특수문자에 따라 그 줄의 색상이 구분되어 집니다. * 문자 : 초록색으로 표시 - 일반 정보 ! 문자 : 빨간색으로 표시 - 중요한 주의사항 ? 문자 : 파란색으로 표시 - 궁금한 사항..

2020. 3. 12. 14:39 0

Git Flow 개념 이해하기

Git으로 협업을 하는 것이 매우 좋다라고는 알고 있으나 실제로 서로 다른 그 사람들이 어떻게 각자 작성한 코드를 합치고 배포하는지가 궁금해 졌습니다. Git-flow 이해하기 Git-flow는 Git이 새롭게 활성화되기 시작하는 10년전 쯤에 Vincent Driessen이라는 사람의 블로그 글에 의해 널리 퍼지기 시작했고 현재는 Git으로 개발할 때 거의 표준과 같이 사용되는 방법론입니다. 말하자면 Git-flow는 기능이 아니고 서로간의 약속인 방법론이라는 점입니다. Vincent Driessen도 언급했듯이 Git-flow가 완벽한 방법론은 아니고 각자 개발 환경에 따라 수정하고 변형해서 사용하라고 언급했습니다. Git-flow는 총 5가지의 브랜치를 사용해서 운영을 합니다. master : 기준..

2020. 3. 11. 19:37 0

그림으로 보는 Git의 개념 이해하기

Git은 Svn 이후로 현재 가장 많이 사용되어지는 형상관리 툴입니다. 위키백과를 보면 아래와 같이 정의를 하고 있습니다. 깃(Git /ɡɪt/)은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템이다. 소프트웨어 개발에서 소스 코드 관리에 주로 사용되지만 어떠한 집합의 파일의 변경사항을 지속적으로 추적하기 위해 사용될 수 있다. 기하학적 불변 이론을 바탕으로 설계됐고, 분산 버전 관리 시스템으로서 빠른 수행 속도에 중점을 두고 있는 것이 특징이며 데이터 무결성, 분산, 비선형 워크플로를 지원한다. 위키백과 참조 처음 Git을 접할 때 그 개념을 이해하는데 어려움이 많습니다. 그래서 간단하게 기초적인 이해를 그림으로 설명해 볼까 합니다...

2020. 3. 10. 18:22 0

Git GUI 소스트리(SourceTree) 설치방법과 사용방법

멋찐 개발자 같은 경우 검정 화면에 하얀색 글씨로 타이핑을 치며 Git 명령어를 실행시킬텐데요. 그게 멋지긴 하지만 편한 형태는 아닙니다. Git을 좀더 편하게 사용하기 위해서는 Git GUI(Graphic User Interface)를 사용하는 것입니다. Git GUI 중 대표적인 툴이 바로 소스트리(SourceTree) 입니다. SourceTree 설치하기 먼저 소스트리(SourceTree) 홈페이지에 접속합니다. 소스트리(SourceTree) 홈페이지 바로가기 홈페이지에 접속을 하면 다운로드를 받을 수 있는 버튼이 보입니다. 소스트리는 윈도우즈와 Mac OS를 지원하고 있으므로 원하는 시스템의 파일을 다운로드 받으면 됩니다. 다운받은 설치파일을 실행시킵니다. 설치는 아무나 할 수 있는 것은 아니고 ..

2020. 3. 5. 19:28 0

WEB개발이야기

코딩을 위한 최적의 폰트 Naver D2Coding Font

한국의 개발자인 경우 코딩을 할때 한번쯤 고민했던 부분이 있을 것입니다. 오로지 영문으로만 코딩을 하는 경우 Consolas, Courier New 같은 영문 코딩폰트를 사용하면 되지만 한글이 섞여 버리면 글자의 미세한 차이 때문에 코딩하기가 여간 찜찜한 것이 아닙니다. 자간도 밀리고 폰트도 이쁘지 않고 크기도 안맞고.. 기존에는 Hack이라는 오픈소스 폰트를 사용했었는데, 지금은 아무래도 한글에 대해서 잘 알고 개발한 네이버의 개발 전용 폰트, D2Coding Font을 사용하고 있습니다. 한글 코딩 폰트라고 하면 일단 특수문자, 숫자, 영문, 국문에 대해서 가독성이 좋아야 하고 글자의 폭도 동일하게 고정되어 있어야 합니다. Naver D2 coding font는 한글, 영문자 및 확장자 332자에 대..

2020. 3. 4. 18:57 0

Git으로 프로젝트 개발 할 때 작업 순서

Git으로 형상관리를 하며 작업을 할 때 여러가지 방법과 기능이 있지만 보편적으로 사용하는 순서에 대해서 포스팅하겠습니다. Git에 관한 기타 다른 정보는 해당 카테고리를 찾아 보시면 됩니다. Git 카테고리 바로가기 순서 순서는 사람마다 조금씩 다르긴 하지만 제가 주로 사용하는 방법은 아래와 같습니다. 한번만 하는 명령어 GitLab(또는 Github) 사이트에 프로젝트 저장소 만들기 Git 사용 선언 또는 원격 저장소에서 Clone 해오기 ( git init 또는 git clone ) 내 로컬PC와 원격 저장소 간 링크 연결하기 ( git remote ) 반복적으로 하는 명령어 코딩 작업하기 코딩 파일 중 내가 관리하고 싶은 파일로 선정하기 ( git add ) 기능 별 선정한 파일을 한 묶음으로 만..

2020. 2. 26. 15:58 0

[Gitlab Error] you are not allowed to push code to protected branches on this project 에러

Gitlab을 설치하고 혼자만 사용할 때는 없던 문제였는데 여러 명과 같이 사용하게 되면서 발생한 에러가 있습니다. Clone, Pull, Commit까지는 모두 문제없이 사용이 가능한데.. Push로 서버에 올릴려면 에러가 발생하는 경우 였습니다. 문제 발생 이런 화면이 나오면서 you are not allowed to push code to protected branches on this project 메시지를 토해 냅니다. 문제 원인 문제의 원인은 이 저장소의 해당 브런치에 업로드(Push)를 할 수 있는 권한이 없다. 라는 뜻입니다. 다시 말하면 권한의 문제 입니다. 혼자 사용 할 경우는 본인이 Owner이기 때문에 문제없이 Push가 되지만 새로 생성된 사용자인 경우는 대부분 권한이 Guest,..

2020. 2. 6. 18:33 0

Git 최초 사용 시 내 로컬 PC에 반드시 해야 할 사전 작업

Git server는 누군가(관리자)가 설치했고 사용자 입장에서 Git을 처음 사용한다고 했을 때 내 로컬 PC에 설치하거나 숙지해야 할 사항에 대한 내용입니다. 내가 참여하고 있는 프로젝트에서 Git으로 버전관리 한다고 하면 어떤 것을 어떻게 해야할지 난감한 사람이 있을 것입니다. 그런 Git에 대해 생판 모르는 초보자들을 위한 글이다 생각하시면 될것 같습니다. 깃(Git /ɡɪt/)은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템이다. 소프트웨어 개발에서 소스 코드 관리에 주로 사용되지만 어떠한 집합의 파일의 변경사항을 지속적으로 추적하기 위해 사용될 수 있다. 기하학적 불변 이론을 바탕으로 설계됐고, 분산 버전 관리 시스템으로서..

2020. 1. 29. 17:30 0

gitlab에서 한국어 설정 방법

Gitlab은 기본으로 영어로 보여집니다. 서비스형 gitlab.com도 설치형 gitlab도 모두 그렇습니다. gitlab는 멀티랭귀지를 지원하기 때문에 한글로 쉽게 설정 할 수 있는데요. 그 설정하는 위치가 알고 나면 쉽지만 모르면 참 찾기 어려운 곳에 있습니다. 설치형 gitlab과 서비스형 gitlab 모두 동일한 방법으로 변경할 수 있습니다. 멀티랭귀지는 사용자 개별로 지원된다. 일단 이 개념부터 가져야 합니다. 저는 설치형 gitlab서버를 설치하면서 고생을 하며 알게 된 건데 당연히 서버 전체에 대해서 한글로 바꾸려고 계속 gitlab의 서버 설정(Admin Area)만 찾고 있었습니다. 하지만 서버는 기본적으로 "거의 대부분의 언어를 지원한다".이고, 가입한 회원이 "난 한국어를 쓸거야"~..

2020. 1. 28. 18:43 0

리눅스(CentOS7) 서버에 방화벽(firewall)을 활용하여 특정 IP만 접근하게 하는 방법

회사 내부용으로 리눅스 서버로 돌릴 경우 특정사용자만 해당 서버에 접근 하도록 해야 할 필요가 있습니다. 여러가지 방법이 있겠지만 가장 간단한 방법은 방화벽으로 특정 IP외에는 모두 막아버리는 방법이 있습니다. Firewall을 설치하고 설정하는 방법을 간단히 기록해 두려고 합니다. Firewall 상태 확인하기 현재 firewall이 구동되고 있는지 죽어있는지 먼저 확인 합니다. firewall-cmd --state 현재 실행 중이면 running, 실행 중이 아니면 not running을 출력합니다. 시스템(CentOS) firewall 설치 보통 리눅스도 기본적으로 Firewall은 설치가 되서 나오기는 하지만 간혹 설치가 되어있지 않은 경우도 있습니다. 이렇때 firewall을 설치하는 방법입니다..

2020. 1. 28. 15:19 0

CentOS7에 gitlab ce 설치하기

리눅스 서버로 많이 사용하는 CentOS 7에 gitlab을 설치하는 방법을 Posting하려고 합니다. 먼저 공식 사이트에서 제공하고 있는 설치방법을 따르는 것을 권장합니다. 저는 그 가이드를 따라 설치하면서 주의해야 할 점이나 기억해야 할 점에 대해서 주로 작성하려고 합니다. 공식 사이트의 설치가이드는 아래의 URL을 참조하세요. 주의 할 점은 무료 버전인 ce(Community Edition)을 찾아서 설치해야 라이선스의 찜찜함 없이 설치할 수 있습니다. 그냥 공식사이트에서 설치가이드를 따라 설치하면 ee(Enterprise Edition)의 가이드를 먼저 보여주기 때문에 영어 울렁증이 있는 사람은 나도 모르게 ee버전을 설치하게 되어 있습니다. ce(Community Edition) 설치가이드 :..

2019. 9. 16. 21:47 0

VScode 최고의 익스텐션 project Manager

VScode의 유용한 익스텐션인 프로젝트매니져-Project Manager를 소개합니다. 이 익스텐션은 개발 소스를 프로젝트 단위로 쉽게 관리하게 해주는 익스텐션입니다. 장점 제목에서도 알 수 있듯이 프로젝트를 매우 쉽게 전환 시켜주는 익스텐션입니다. 프로젝트의 구분은 보통 폴더단위로 구성되는데, 프로젝트를 변경하거나 생성하려면 폴더열기를 통해서 다른 프로젝트의 경로를 찾아서 열거나 해야하는데 프로젝트 매니저는 쉽게 버튼하나 누르면 변경을 할 수 있습니다. 또한 쉽게 사용할 수 있게 VScode의 좌측에 아이콘 버튼을 달아 놨습니다. Git, Mercurial, SVN repositiories는 자동으로 감지를 합니다. 사용법 간단하게는 좌측의 버튼을 사용하여 활용할 수도 있고 F1을 눌러서 명령실행줄을..

2019. 9. 16. 12:02 2

VScode 최고의 익스텐션 Path Intellisense를 소개합니다.

안녕하세요. 반갑습니다. 이번에는 VScode의 익스텐션 중에 제가 사용해 본 것 중 괜찮다 싶은 것을 시리즈로 소개해 볼까 합니다. 첫번째로 소개할 것은 Path Intellisense입니다. Path Intellisense Path Intellisense는 VScode를 사용중에 파일이나 이미지 등의 경로를 지정할때 자동으로 경로를 선택해서 지정할 수 있게 해주는 아주 편리한 익스텐션입니다. 설치하는 방법은 따로 설명할 필요는 없겠지요? 저는 이미 설치한 상태입니다. Path Intellisense를 설치하고 몇가지 옵션이 있기는 하지만 설치하는 것으로 기본적인 작동을 합니다. 기준은 프로젝트 기준으로 작동을 합니다. 프로젝트는 해당 파일들이 모여있는 폴더라고 보시면 되고 그 폴더를 기준으로 상대경로..

2019. 9. 14. 23:40 2

VScode Code Formater 인 Prettier 완벽 적용하기

VSCode 익스텐션 중에 코드를 정렬해 주는 Formatter는 크게 Prettier과 Beautify가 있습니다. VScode에서는 2가지의 Formatter가 가장 많이 사용되는데 2가지는 약간 다른 특징이 있습니다. Prettier가 코드를 강제적으로 변경을 시킨다면 Beautify는 좀더 자유롭게 놔두는 편입니다. 자신만의 코드작성 규칙을 가지고 있다면 Prettier가 짜증 날 수도 있습니다. 내 코드를 막 바꿔버리닌까요. 하지만 그런면이 코드를 항상 일정하게 정렬을 시켜 주기도하닌까 심리적인 타격만 없다면 이보다 좋을 수 는 없을 겁니다. 또한 여러 사람이 한 프로젝트를 같이 코딩을 해야 한다면 꼭 필요한 익스텐션이라고 할 수 있습니다. VScode에 prettier 적용하기 VScode에 ..

2019. 7. 24. 17:14 12

개발하면서 경험으로 알게 된 Vuex에서 Store활용 방법

Vue의 개발을 편리하게 도와 주는 공식 툴 중에 Vuex가 있습니다. Vuex의 주요 기능은 개발하는 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역활 및 관리 입니다. 만약 이게 없다면 컴포넌트간 데이터를 주고받기 위해서 부모는 자식에서 props의 방법으로, 자식은 부모에게 Emit event의 방법으로 데이터를 주고 받아야 합니다. 또한 형제 컴포넌트간 데이터를 주고 받으려면 너무 복잡해져서 EventBus를 활용해야 그나마 사용을 할 수 있게 됩니다. 간단한 프로젝트인 경우에야 사용이 가능하겠지만 대형 프로젝트인 경우에는 이러한 방법으로는 도저히 감당이 되지 않고 개발 후 운영을 한다고 해도 거의 맨붕이 올 것입니다. 이러한 문제를 해결해 주는 것이 Vuex라고 보시면 됩니다. 데이터..

2019. 6. 28. 11:05 0

Vue의 Nuxt로 개발할 떄 자동으로 브라우저 띄우는 방법

Nuxt로 Vue를 개발하다 보면 항상 사용하는 명령어가 npm run dev 또는 npm dev 또는 yarn run dev 또는 yarn dev 일 것입니다. 모두 동일하게 Nuxt를 개발 모드로 띄워라 인데.. 몇가지 명령어를 덫붙히면 dev모드 실행과 동시에 브라우저를 자동으로 띄 울 수 있는 몇가지 방법이 있습니다. 첫번째 방법 아주 간단한 첫번째 방법은 package.json을 사용하는 방법입니다. 아래와 같이 package.json의 scripts명령어 중에 원하는 실행 명령 뒤에 "dev": "nuxt --open"와 같이 --open을 붙히는 것입니다. { //... "scripts": { "dev": "nuxt --open", "build": "nuxt build", "start": "..

2019. 6. 21. 17:53 0

Vue의 NUXT에서 SASS를 적용해서 사용하는 방법(feat. BULMA)

웹화면은 HTML, CSS, JAVASCRIPT로 구성되어 있습니다. 웹개발자 분은 보통 HTML과 JAVASCIPT로 작업을 하고, 웹디자이너는 HTML과 CSS로 작업을 합니다. 하지만 점차 시간이 지남에 따라 HTML, CSS, JAVASCRIPT, 심지어 백오피스까지 손을 대는 풀스텍 개발자가 나오게 되었습니다. 그러면서 자연스럽게 CSS 마저도 마치 프로그램처럼 작성하고 싶은 요구가 생겨나기 시작했습니다. 그런 요구에 따라 CSS도 프로그램처럼 개발하는 언어가 생겼는데 그것을 CSS 프리프로세서, 한국말로 CSS 전처리기라고 합니다. CSS 프리프로세서로 코딩을 하고 컴파일을 하면 결과물은 기존의 CSS 형태로 되어져서 나옵니다. CSS프리프로세서의 종류는 LESS, SASS(SCSS), Sty..

2019. 6. 18. 18:19 0

Vue의 NUXT 템플릿을 쉽게 설치하는 3가지 방법

Vuejs의 장점은 매우 가볍고 쉽고 빠르게 기존에 있는 웹서비스에 접목해서 사용하는 것입니다. 새로운 웹프로젝트에도 쉽고 빠르게 적용을 할 수 있습니다. 하지만 쉽다고 해도 Vuejs의 최대 성능을 끌어 올려서 처음부터 파일을 만든다는 것은 생각보다 쉽지 않습니다. 더욱이 개발자 마다, 또는 개발할때마다 기본 틀이 달라진다면 혼자 개발할때는 문제가 없지만 통일된 규격을 가지고 있어야 할 대규모 프로젝트를 진행하기에는 어려운 점이 너무나 많습니다. 그래서 React의 NEXT처럼 Vue에서도 NUXT를 제공하고 있습니다. NUXT는 일반적인 Vue.js 어플리케이션을 정해진 규격에 맞게 만드는 프레임워크라고 할 수 있습니다. NUXT 설치하기 NUXT에 대한 설명은 나중에 포스팅을 하도록 하겠습니다. 여..

2019. 5. 24. 00:38 102

WEB개발이야기/웹퍼블리싱

현재 가장 모던한 모바일 터치 슬라이더 swiper

현재 github에서 거의 20,000에 달하는 Star을 받고 있는 모던한 모바일 터치슬라이더 플러그인입니다. 모바일뿐 아니라 Web화면에서도 아주 잘 작동하는 검증된 플러그인이라고 보시면됩니다. MIT 라이선스를 가지고 있어서 부담없이 사용할 수 있고 데모 사이트에서 다양한 Swipe DEMO를 보고 쉽게 적용할 수 있습니다. 홈페이지 http://www.idangero.us/swiper DEMO http://www.idangero.us/swiper/demos/ Install 아래와 같은 다양한 방법으로 소스를 적용할 수 있습니다. bower로 설치할 경우 $ bower install swiper 또는 Atmosphere as Meteor 패키지로 설치할 경우 $ meteor add nolimits4..

2019. 4. 24. 18:49 5

Vue.js용 페이지 네비게이션 인 vuejs-Paginate Component를 소개합니다

Vue.js를 사용하다보면 수많은 사람들이 만들어서 무료로 공유해 놓은 Components들이 많이 있습니다. 라이선스를 꼭 확인해야 하겠지만 대부분 사용에 안전한 MIT라이선스를 주로 사용합니다. 그중에 보통 게시판 리스트 하단에 페이지를 넘기는데 사용하는 Paginate 컴포넌트를 소개해 볼까 합니다. 이 컴포넌트는 디자인은 Bootstrap3을 사용하고 있기때문에 Bootstrap3도 같이 설치를 해야 합니다. 설치하기 npm이나 yarn을 사용한다면 설치는 쉽습니다. NPM으로 설치 $ npm install vuejs-paginate bootstrap@3.3.x --save Yarn으로 설치 $ yarn add vuejs-paginate bootstrap@3.3.x CDN으로 설치 CDN은 설치라..

2019. 4. 24. 12:42 228

Vue.js에서 axios를 사용하여 서버통신하는 방법

웹 또는 앱을 개발하다 보면 거의 대부분이 서버가 필요하게 됩니다. 서버에 내용을 저장하고 웹이나 앱에서 서버의 저장된 내용을 불러다가 사용자에게 보여주게 되는데요. 이때 javascript에는 axios라는 아주 훌륭한 플러그인이 있습니다. axios는 javascript용 플러그인으로 많이 사용하지만 Vue.js에서도 매우 요긴하게 사용되어 집니다. axios는 Promise 기반의 자바스크립트 비동기 처리방식을 사용합니다. 그래서 요청후 .then()으로 결과값을 받아서 처리를 하는 형식으로 구성되어 있습니다. axios.get('/api/data').then(res => { console.log(res.data) }) /api/data에서 데이터를 불러옵니다. 불러온 데이터는 .then()의 re..

2019. 4. 17. 15:14 0

Vuejs의 컴포넌트 사용 시 알아두면 좋은 6가지

Vue.js의 컴포넌트를 사용할때 알아두면 유용한 6가지에 대해서 포스팅을 해보겠습니다. 이것을 알게계시면 소스코드도 많이 줄일 수 있고 보기에도 좋은 코딩을 할 수 있습니다. 케밥표현과 카멜표현 컴포넌트의 영역에서 다른 컴포넌트 명을 작성할 때 2개 이상의 단어가 조합된 이름 일 경우 꼭 케밥(-) 형식으로 작성해야 합니다. HTML에서는 대소문자를 구별하지 않기 떄문에 hongGilDong 과 honggildong을 동일하게 처리하기 때문입니다. 컴포넌트의 영역에서 이름을 카멜형식(hongGilDong)으로 작성했더라도 영역에 작성할 때는 케밥형식으로 변경하여 작성하면 됩니다. Vue.js가 자동으로 같은 컴포넌트로 인식을 합니다. 케밥 형식 : 단어와 단어 사이를 '-'로 연결시키는 표현 (예 : ..

2019. 3. 29. 00:03 4

Vue-CLI 도구 활용방법

Vue를 활용하여 개발 한다면 Vue-CLI는 반드시 알고 있어야 하는 도구 입니다. Vue-CLI가 Vue의 코어는 아니지만 개발자가 쉽게 Vue 프로젝트를 개발 할 수 있게 해주는 아주 유용한 도구입니다. Vue-CLI 란 무엇인가??? Vue-CLI에서 CLI는 Command Line Interface의 약자로 윈도우에서는 Command 창, 맥에서는 터미널 창에서 타이핑으로 명령어를 입력하여 원하는 바를 실행 시키는 도구를 말합니다. Vue-CLI은 내부적으로 Webpack을 활용합니다. Vue-cli로 명령을 실행 시키면 cli가 자동으로 최적화된 Webpack 형태의 결과물을 생성 시켜 줍니다. Vue-CLI로 할 수 있는 것은 무엇인가??? 그럼 Vue-cli로 할 수 있는 것이 무엇이냐??..

2019. 3. 27. 18:46 4