본문 바로가기

분류 전체보기369

[vue.js]vue-router 튜토리얼-3

개요 이번에는 vue-router의 중첩 라우팅 기능을 간단하게 구현해보겠습니다. 중첩 라우팅은 다음과 같은 개념입니다.(제가 만든 그림입니다.) 구현 방법 간단합니다. 1. 프로젝트 홈/router/index.js 파일을 수정하면 됩니다. children 내부에 router 객체를 정의할 때에 path에는 '/'를 붙히지 않습니다. import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path: '*', redirect: '/404' }, { path: '/404', name: 'NotFound', component: () => import('@/pages/404.vue') }, {.. 2021. 9. 7.

[vue.js]vue-router 튜토리얼-2

개요 jquery나 pure js로 개발된 페이지는 사용자가 매 번 요청하는 경로가 달라지면, 서버에서 페이지 자원을 다시 받아오게 됩니다. 받아오는 동안에도 시간이 걸리기 때문에 화면이 번쩍하면서 랜더링이 됩니다. 반면어 spa는 사용자가 처음 애플리케이션에 접속할 때 보내는 서버 요처으로 애플리케이션에 필요한 자원을 모두 받아옵니다. 사용자가 경로를 다르게 요청하면, 서버에 다시 페이지 자원을 요청하지 않습니다. 처음에 받아온 script 파일로 동적으로 페이지를 변환합니다. 덕분에 서버는 해당 경로에 페이지에 필요한 데이터만 브라우저에 전송해 주면되므로, 서버에 부담이 덜 하게 됩니다. 그럼, 브라우저에서는 어떻게 동적으로 경로에 맞는 페이지를 랜더링해주는 걸까요? vue에서는 사용자가 요청한 경로.. 2021. 9. 7.

vue.js에서 SASS 사용하기

1. 설치 npm i -D sass-loader@7.3.1 node-sass 2. 사용 header { .title { font-weight: 300; } } 2021. 9. 4.

[Vue Test Utils] Vue 테스트 코드 작성 방법2️⃣- jest에 라이브러리 설정하고 사용하기

개요 app을 빌드하고 실행하면, vue 인스턴스에 라이브러리들이 import되어서 빌드되면서 라이브러리의 필요한 기능을 사용할 수 있었습니다. jest에서는 컴포넌트를 mount해서 실행합니다. jest가 컴포넌트를 실행하다 보니, 컴포넌트가 의존하는 라이브러리의 경로를 못 찾거나 라이브러리의 기능을 온전히 실행하지 못하는 경우가 많습니다. 그래서 test코드나 jest 설정으로 의존하는 라이브러리를 설정하거나 테스트하는 컴포넌트에 주입해줘야 jest로 제대로 기능을 테스트할 수 있습니다. 팀에서는 제가 최초로 웹 테스트 방법을 개척하고 있기 때문에 기술문서를 많이 찾아보면서 문제를 해결해 나갔습니다. jest에 컴포넌트에서 사용하는 라이브러리에 맞춤 설정하기 ⚡️ Vuetify를 사용할 경우 설정 j.. 2021. 8. 21.

[json-server] 프론트 개발자가 json만으로 mock rest api 만들기

개요 프론트엔드 개발자가 빠르게 백엔드를 json만을 사용해서 프로토타입으로 만들어 볼 수 있습니다. json으로만 rest api를 만듭니다. 코딩이 필요없습니다. json만 작성합니다. 사용 방법 $ npm install -D json-server // npm 설치 $ json-server --watch mock.json // 실행 실행하면, 홈 경로에 mock.json 파일이 생성됩니다. 초기 세팅을 보시면, 다음과 같을겁니다. 📄 mock.json { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], ".. 2021. 8. 19.

[React]react router 사용법

react-router-dom 페이지 1. 설치 $ npm i react-router-dom 2. 디렉토리 구조 📁 프로젝트 |--📁src | |--📁 router | |--Router.js | |-- 📁 page | |--Community.tsx |-- app.tsx 3. 작업 대상 파일 📄 src/router/Router.js 📄 src/page/community.tsx 📄 app.tsx 4. 📄 src/router/Router.js 작성 React-router-dom 라이브러리에서 다음 3개지 프로퍼티를 사용했습니다. 접근경로에 따른 컴포넌트가 많을 경우, Switch 태그를 사용합니다. Switch태그 안에 태그를 여러 개 지정해서 사용합니다. 태그에 path에 설정한 경로에 맞는 경로로 comp.. 2021. 8. 7.

[Vue Test Utils] Vue 테스트 코드 작성 방법1️⃣- 테스트 환경 설정 및 간단한 테스트 코드 작성 방법

개요 프로그램은 테스트가 가능하게 개발되어야 합니다. 프로그램이 개발만 되고, 자신이 작성한 코드 기능을 증명할 수 없다면 완전이 개발된 프로그램이 아닙니다. 제가 담당하는 제품은 테스트 코드가 전혀 작성되지 않았습니다. 이제서야 테스트 코드를 작성하기 시작하려고 하고 있습니다. 팀에 테스트 코드를 작성하는 문화?가 없고, 개발만 하기 때문에 이번 이 글을 통해서 웹 테스트 코드를 작성하는 방법을 공유해보려고 합니다. 목표는 올 해 안에 테스트 커버리지 80%를 달성하는 것입니다. 사용 라이브러리 제품이 vue 2 로 개발되어 있습니다. 라이브러리 설명 jest@27.0.6 vue-jest@3.0.7 Vue 파일을 Jest가 실행할 수 있는 자바스크립트로 컴파일을 합니다. @vue/test-utils@1.. 2021. 8. 5.

[Chart.js] Vue에서 사용하기.

안녕하세요. 회사에서 외주로 맡겼던 제품코드를 보면서, Chart.js라는 라이브러리를 처음 접하게 되었습니다. 기존에는 apex chart를 제품에 사용하고 있었습니다만, chart.js 또한, 커스텀이 광범위하게 가능하다는 점에서 많이 사용하고 있는 것 같더라구요. 그래서, chart.js를 사용해서 실제 작업 중인 프로젝트에 처음 적용해보면서 공부한 내용을 정리해보고자 합니다. 제가 chart.js로 프로토타입은 만든 결과는 다음과 같습니다. Chart 만들기 Vue 프레임워크에 chart.js를 사용해서 chart를 화면에 그리는 과정을 설명한 글입니다. 일단, 공용으로 여러 컴포넌트에서 재사용할 수 있도록, 파일 구성을 다음처럼 구성했습니다. 📂src | - 📂Modules |- 📂LineCha.. 2021. 7. 26.

[Vue] Vuetify 템플릿 적용 개발 팁

개요 제가 실제 업무에서 담당하는 제품의 스타일 작업은 scss로 개발되었습니다. 전부요. style 코드가 script 코드보다 많은 컴포넌트 파일도 많았습니다. 유지보수에 적합하지 않다고 생각했습니다. 그래서, components 템플릿을 찾아서 사용하면서, 템플릿의 장점과 사용방법을 공유하려고 합니다. 직접 css로 style 작업 Vuetify 템플릿 사용 장점 🤔. - 개발 생산성 증가. 빠르게 개발 가능. - UX 좋아짐. - css 코드를 작성할 일이 거의 없음. 유지보수 관리에 좋음. - 얼마든지 디자인 요구사항대로 커스텀 가능. - 정적 파일 img를 사용하지 않고, icon을 넣을 수 있음. 단점 - 개발을 할 때, 작업 시간 많이 걸림. - css 코드가 많아져서 관리에 어려움. - .. 2021. 7. 18.

[CSS][툴팁]이미지 hover 설정 및 after에 contents 전달

결과물 이미지 hover scale 설정 이미지에 hover기능으로 틀 안에서 이미지가 커지는 설정을 알아보겠습니다. 부모요소에 overflow: hidden을 주면 됩니다. // 📁 index.html // 📁 article.css .grid_item { position: relative; display: flex; align-items: flex-end; width: 23vw; height: 15vw; overflow: hidden; // 👈 이미지가 scale로 커지지만, 이미지를 감싸는 부모 요소가 넘치는 자식 요소를 감춤 border: 1px solid gray; } .filter_img { width: 23vw; overflow: hidden; } .filter_img:hover { // 👈 .. 2021. 7. 18.