본문 바로가기
반응형

분류 전체보기324

JSON Placeholder 무료 가상 REST API 서버 예전에 프로튼엔드 개발 시 http rest 구현할 때 백엔드 API가 없는 경우가 있어서 답답하거나 그래서 로컬에 테스트용 백엔드API를 별도 실행해서 개발하는 불편함이 있었다. JSON Placeholder 라는 사이트를 이용하면 무료로 가상 REST API를 제공해준다. 설치를 하거나 할 필요가 없이 그냥 호출만 하면되서 편리하다. https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving.. 2022. 3. 24.
Vue.js 웹팩(webpack) 개념 및 설정 Vue CLI를 통해서 프로젝트를 생성하면 webpack 설정이 자동 적용되어 'npm run serve', 'npm run build' 실행 시 webpack 기반으로 동작을 하게된다. vue CLI 2버전까지는 프로젝트 생성 시 웹팩설정 파일인 webpack.config.js 파일 생성되었고, vue CLI 3버전 부터는 vue.config.js를 통해서 좀 더 간단하게 설정하도록 지원을 하고 있다. 먼저 webpack이 뭔지부터 알아본 후 vue.config.js 설정에 대해 알아봐야 이해가 될 것이다. webpack - 최신 프론트엔드 프레임워크(vue, react, angular)에서 모두 권장하는 모듈 번들러 - 위 공식사이트 그림처럼 서로 연관 있는 모듈 간의 관계를 해석하여 정적인 자원(j.. 2022. 3. 24.
Vue.js Font Awesome 아이콘 사용 Font Awesome 웹 아이콘 모음 라이브러리 vue에서 사용 시 vue-fontawesome 컴포넌트 사용을 권장하고 있음 아이콘 렌더링 시 SVG + JS메소드를 사용 Font Awesome 설치(NPM) # 1. Core패키지 설치 npm i --save-dev @fortawesome/fontawesome-svg-core # 2. (무료) 아이콘 패키지 설치 npm i --save-dev @fortawesome/free-solid-svg-icons # 3. Vue 컴포넌트 설치 npm i --save-dev @fortawesome/vue-fontawesome 2번의 '아이콘 패키지'는 아래와 같이 무료/유료로 구성되어 있어서 원하는 패키지를 설치하면 된다. Vue 프로젝트 설정 src/main... 2022. 3. 22.
Vue-CLI 시작하기(프로젝트 생성 및 디렉토리 구조) Vue-CLI(Command Line Interface) vue 개발환경을 설정해는 명령어 실행 도구 기본적인 프로젝트 구조 세팅으로 디렉토리 구조 및 webpack 등 설정 Vue-CLI 설치 - 기본적으로 nodejs 및 npm 설치가 되어있어야 함 # Global 설치 npm install -g @vue/cli # 확인 vue --version - 5.0.3버전이 설치 되었음 Vue-CLI 프로젝트 생성 - vue create '프로젝트명'으로 실행 vue create hello-world - vue3가 디폴트로 선택되어 나오는데 일단 vue2를 공부 중임으로 Vue2선택하고 엔터 - 생성이 완료되면 아래와 같이 실행 명령이 나옴 - 명령어 실행 $ cd hello-world $ npm run se.. 2022. 3. 21.
IntelliJ Maven profile 선택 및 실행 Maven pom.xml에서 상황에 따라 profile을 선언해서 사용하는데 intelliJ에서 쉽게 profile을 선택하고 실행할 수 있다. 아래와 같이 pom.xml에 profile이 선언되어 있을 경우 IntelliJ [Maven Tool Windows]에서 profile을 선택하면 되는데, IntelliJ오른쪽에 Maven Tool Windows가 없으면 아래와 같이 실행해 준다.(View > Tool Windows > Maven) Maven Tool Windows를 열어보면 제일 상단에 Profiles라는 항목이 보이고 여기서 선택 후 빌드, 실행하면 된다 2022. 3. 21.
VSCode Parsing error: No Babel config file detected for .vue, .js 파일 VSCode로 vue 프로젝트를 생성하고 .vue, .js 파일들을 클릭해서 보니 아래와 같은 빨간색 밑줄과 함께 Parsing에러가 떴다. 실행에는 문제가 없어보이지만 신경이 계속쓰여 조치 내용을 알아봤다. VSCode에서 프로젝트의 ESLint 설정 파일 관련 에러라고 하는데 VSCode settings.json에서 아래 내용 추가하면 없어진다. 1. VSCode 단축키 ⌘,(=Code > Preference > Settings) 실행하고, 우측 상단에 아래 아이콘을 클릭한다. 2. 아래 eslint 관련 설정을 추가하는 내용 작성 후 저장한다. "eslint.workingDirectories": [ { "mode": "auto" } ] 3. 다시 화면을 가보면 에러가 사라진 것을 볼 수 있다. 2022. 3. 20.
Vue.js Router 개념 및 구성 Vue Router Vue에서 SPA(Single Page Application) 웹 페이지 변경/전환을 지원하는 라이브러리 페이지 변경을 위해서 DOM을 새로 갱신하는 것이 아닌 변경된 요소영역(컴포넌트)만 갱신 Vue Router 태그 - 페이지 이동 태그, HTML 태그로 표시되어 클릭 시 URL 값으로 이동 Login - 변경되는 URL에 따라 해당 컴포넌트를 표시해주는 영역 Vue Router 인스턴스 - Vue Router 기능은 Router인스턴스를 통해서 사용 가능 // Router 인스턴스 생성 var router = new VueRouter({ mode: "history", // 기본 값은 Hash모드(history 모드를 사용하면 브라우저 히스토리 스택에 기록) routes: [ //.. 2022. 3. 19.
Vue.js 컴포넌트와 컴포넌트 통신 Vue 컴포넌트 화면을 조합해서 구성할 수 있게 블럭형태로 분할 된 화면영역(Component)을 의미 컴포넌트 간의 관계는 일반적으로 Tree 구조 화면 구성요소의 재활용 각 컴포넌트는 각각의 고유한 유효범위를 가짐 전역(Global) 컴포넌트 Vue 변수를 사용해서 등록하는 컴포넌트 모든 인스턴스에서 접근 가능 일반적으로 전역 컴포넌트를 선언해서 사용하는 경우는 거의 없음, 대부분 플러그인, 3thParty 라이브러리 사용 시 활용 됨 Vue.component("global-component", { template: "Content", }); 지역(Local) 컴폰너트 Vue 인스턴스에서 'components' 속성을 사용해서 정의 해당 인스턴스의 유효범위 내에서만 사용 가능 new Vue({ el:.. 2022. 3. 19.
반응형

티스토리툴바