코딩 발걸음

오늘은 Vue Cli를 이용하여 Vue 프로젝트를 생성할 때에 추가한 EsLint와 Prettier에 대해 공부해 보겠습니다. 먼저 EsLint란 무엇일까요? EsLint란 코드를 정적 분석하며 오류를 찾아내고 ( 코드품질 검사 ) 코딩 컨변션을 검사,수정( 코드 포매팅 ) 하여 일관성과 가독성을 높여주는 도구입니다. 쉽게 잘못된 문법을 알려주고 고칠수 있도록 도와주며( Linter로서의 기능 ), 이상하게 작성한 코드도 예쁘게 만들어주는( Fomatter로서의 기능 ) 도구이다 비슷한 도구로 JSHint와 JSLint 등이 있는데 확장성이나 커스터마이징 부분에서 더 뛰어나 ESLint를 많이 쓰입니다. 그렇다면 Prettier라는 것은? Fomatting만 지원하는 Fomatting에 특화된 도구입니다..

Vuetify란? Material Design이 적용된 디자인 방식입니다. 구글에서 개발이 되었고 vuetify개발을 하면서 디자인이 눈에 익으면 비슷한 느낌의 어플리케이션을 많이 발견할 수 있을 겁니다. vuetify 설치 명령어 입니다. vue add vuetify 버전선택 화면이 나옵니다. Default를 선택합니다. 설치가 완료되면 ~/src/plugins경로에 vuetify.js가 추가된 것을 확인할 수 있고 npm run serve로 서버를 실행하면 아래 그림처럼 Vuetify가 적용된 것을 확인할 수 있습니다. Vuetify에서 제공하는 Card디자인과 textfiled, Button등 을 조합하여 간단하게 만든 모습입니다. 최초 App.vue의 코드를 지우고 view폴더에 Login.vue..

Vue Cli란? Vue.js 개발을 위한 표준 도구입니다. 이 Vue Cli를 이용하면 Vue 개발환경을 손 쉽게 설정할 수 있다. 1.Vue Cli 설치 VS Code를 실행하고 프로젝트의 폴더를 오픈해준다. 터미널을 이용하여 아래 명령어를 입력하여 설치를 진행한다. npm install -g @vue/cli 2. 개발환경 설정 및 프로젝트 만들기 Cli의 설치가 완료되었으면 우리는 vue create 라는 명령어를 사용하여 vue 프로젝트를 생성한다. //vue create [프로젝트 명] vue create vue_login 위 처럼 명령어를 입력하면 아래의 그림처럼 설정을 선택할 수 있는데 (제일 위에 보이는 vue3 Babel, Router~~~ 목록은 제가 이전에 만든 Vue setting목..

앞으로 구현할 프로젝트를 관리 할 수 있게 Git을 설치하고 Github에 ssh를 연동할 수 있도록 해보겠습니다.

이전 포스팅 https://codingstep.tistory.com/entry/Vue-Express-MySQL-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EB%A7%8C%EB%93%A4%EA%B8%B0-1-Nodejs-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0 Vue + Express +MySQL 게시판 만들기 - 1. Node.js 설치하기 안녕하세요. Vue.js, Express, MySQL을 이용하여 게시판을 만드는 포스팅을 제작하려고 합니다. 저도 아직 배워야할게 아주 많은 입장이라 가능한 알고있는 상식들은 적겠지만 자세한 개념들은 패쓰 codingstep.tistory.com 저번시간 Node.js를 설치한 후()에 이어서 코드를 작성할 에디터인 Visual St..

안녕하세요. Vue.js, Express, MySQL을 이용하여 게시판 만들기 프로젝트를 구현하는 포스팅을 제작하려고 합니다. 저도 배워야 할 것이 아주 많은 입장이라 가능한 알고있는 상식들은 적겠지만 자세한 개념에 대해서는 넘어갈 수 있으니 양해 바랍니다. 혹여 포스팅을 진행하며 잘못된 부분 또는 추가로 말씀해주실 부분은 언제든지 적어주시면 감사하겠습니다. 그럼 시작 하도록 하겠습니다. 1.Node.js 설치하기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org nodejs 홈페이지에 접속을 합니다. 현재 최신버전을 다운로드하고 실행을 해줍니다. 1..

1. Node.js 설치 2. VS Code 설치 3. vue/cli 설치 npm install -g @vue/cli 4. extension - Vetur , HTML CSS Support, Vue3 Snippets 설치 5. 보일러 플레이트 설치 vue create [프로젝트명]