본문 바로가기

분류 전체보기502

40. Vue - netlify serverless function 설정 1. 사용 프로젝트 https://github.com/akaRaphael/vue3-movie-app.git akaRaphael/vue3-movie-app movie app made of Vue 3. Contribute to akaRaphael/vue3-movie-app development by creating an account on GitHub. github.com 2. 사용 목적 - 위의 프로젝트는 netlify 무료 호스팅 서비스를 이용하여 실제로 빌드를 해놓았다. - 아래의 링크를 통해 확인할 수 있다. https://silly-banach-bd5250.netlify.app/#/ Hello Vue Project! silly-banach-bd5250.netlify.app - 위의 프로젝트에는 한가.. 2021. 6. 23.
Vue3 - 영화 검색 사이트 1. 개요 - Vue 공부를 위한 클론 코딩 - 본 프로젝트는 패스트캠퍼스의 프론트엔드 초격차 패키지의 Vue 파트 강의 내용을 따라 만든 것입니다. 2. 사이트 소개 https://silly-banach-bd5250.netlify.app/#/ Hello Vue Project! silly-banach-bd5250.netlify.app - OMDbAPI를 사용하여 영화 검색 사이트 기능 구현 - Vue3를 사용하여 프론트 작업 진행 3. 사용기술 Vue3 BootStrap Webpack ESLint 4. Github https://github.com/devraphy/vue3-movie-app GitHub - devraphy/vue3-movie-app: movie app made of Vue 3 movie .. 2021. 6. 22.
39. Vue - router 개념 정리 1. 페이지가 변경되면 해당 페이지의 컴포넌트가 출력되는 부분이자 컴포넌트 2. 페이지 이동을 위한 링크 컴포넌트 3. $route 페이지의 정보를 갖고 있는 객체 페이지가 가지고 있는 여러가지 속성값 들을 조회하는 용도 ex) route 객체를 통해 fullPath, params와 같은 페이지 정보를 확인할 수 있다. 4. $router 페이지를 조작하기 위해서 사용하는 객체 페이지를 조작하기 위해, 페이지를 router 객체가 갖는 여러가지 메소드를 사용하여 조작하는 용도 ex) RouterLink 대신 router객체의 push()메소드를 사용해서 페이지 이동을 구현할 수 있다. 5. URL 구조분석 a. fullpath란? - 페이지의 경로와 해당 페이지가 갖는 정보를 표현하는 부분 - $rout.. 2021. 6. 21.
38. Vue - vuex 개념 정리 1. Store 각 vue 컴포넌트에서 사용하는 데이터를 다른 컴포넌트와 공유하여 사용하기 위해서 store라는 하나의 데이터 창고를 형성하여 각 컴포넌트의 데이터를 보관한다. 2. Store module 모듈이라는 분리된 저장공간을 만들어, 각 컴포넌트의 데이터를 따로 정리하여 보관할 수 있다. 3. Store의 속성(option)개념 namespaced: 스토어 모듈임을 명시하는 속성, boolean state: 뷰 컴포넌트에서 사용되는 데이터 getters: 뷰 컴포넌트의 computed()와 동일한 기능을 작성하는 부분 , 일방통행 - state 데이터를 읽기만 가능 mutations: 뷰 컴포넌트의 methods()와 동일한 기능을 작성하는 부분, 쌍방통행 - state 값 변경 가능 actio.. 2021. 6. 21.
37. Vue - vuex helper 1. Vuex Helper 이전 포스팅에서 Store 개념을 사용하기 위해 Vuex를 설치하고 사용법을 익혀보았다. 이번 포스팅에서는 Vuex를 사용하여 반복되는 코드를 줄이고 코드의 효율성 및 재활용을 높이는 방법을 알아보자. a. mapState https://next.vuex.vuejs.org/guide/state.html#the-mapstate-helper State | Vuex State Single State Tree Vuex uses a single state tree - that is, this single object contains all your application level state and serves as the "single source of truth." This also .. 2021. 6. 21.
36. Vue - 컴포넌트 전역 스타일 1. Sass loader 일반적으로 부트스트랩을 사용하게 되면 사용하는 컴포넌트의 script 태그에 매번 @import 키워드를 통하여 부트스트랩을 가져오게 된다. 하지만, 이러한 방식은 코드를 반복적으로 사용하게 되어 코드의 효율이 떨어지게 된다. 계속해서 컴포넌트를 로드할 때마다 해당 부트스트랩 파일을 읽어야 하기 때문이다. 그렇다면 한번에 스타일을 읽어올 수 있다면 더 효율적이지 않을까? 그러한 방법은 없을까? 이를 해결해주는 오픈소스가 Sass-loader 이다. 2. 설치 https://github.com/webpack-contrib/sass-loader webpack-contrib/sass-loader Compiles Sass to CSS. Contribute to webpack-contr.. 2021. 6. 21.
누적 방문수 10,000을 기념하며 1. 감사합니다. 중복 방문을 제거하면 당연히 방문자 수는 1만명보다 작겠지만, 누군가 내가 작성한 글을 10,000번 읽어주었다는 것에 뿌듯함을 느끼고 감사합니다. 앞으로도 저와 같이 개발자의 길을 걷고 공부하시는 분들에게 도움이 될 수 있는 포스팅을 꾸준히 작성하겠습니다. 2. 매너리즘에 대하여 저는 작은 스타트업에서 월 200만원을 받던 신입 개발자였습니다. 사실 개발자라 불리기도 우스운 실력이지만, 기존에 하던 일을 그만두고 개발자로 커리어를 변경한지 약 1년만에 이루어낸 성과로 나름 만족하는 결과였습니다. 그러나 회사에서 부품처럼 일하는 개발자의 모습은 제가 꿈꾸던 것이 아니었고, 임직원이 함께 성장하는 회사의 구조가 아닌 회사만 배불리는 구조에서 일 하고 싶지 않았습니다. 더불어, 나의 한달이.. 2021. 6. 12.
35. Vue - 비동기 처리(callback, promise, async, await) - 본 포스팅의 내용은 자바스크립트의 비동기 처리에 대해 간략하게 정리해 놓은 것이다. - 비동기식 처리에 대해서 배우고 싶다면 다음 포스팅을 참고하기를 권장한다. https://devraphy.tistory.com/115 JS 근본 공부 - 콜백(Callback) - 콜백은 비동기 처리방식을 구현하기 위해 기본적으로 이해 해야하는 개념이다. - 콜백은 무엇인지, 비동기/동기처리는 무엇인지 알아보자. 1. Sync & Asnyc a) Sync(동기) - 기본적으로 JavaScript는 동 devraphy.tistory.com https://devraphy.tistory.com/116 JS 근본 공부 - Promise 1. Promise란 무엇인가? - Promise라는 단어의 뜻처럼, 코드가 동작하는 순.. 2021. 6. 11.
34. Vue - vuex 기본구조(store, module) 1. 설치 - 터미널 입력: npm i vuex@next (vue 3버전 사용시) 2. 설정 a) src - store 폴더 생성 - index.js 파일 생성 import {createStore} from 'vuex' export default createStore({ modules: { // Store 모듈이 구성되는 곳 } }) b) main.js에 index.js를 연결하기 import {createApp} from 'vue' import App from './App' import router from './routes/index.js' import store from './store' // 원래는 './store/index.js' 이렇게 경로를 작성해야 하는데, // 어떤 폴더안에 있는 inde.. 2021. 6. 8.

티스토리툴바