Front-end85 7. webpack에 대한 이해(사용목적, 기본개념) - Vue 프로젝트 클론코딩을 완료한 이후, Vue와 webpack에 대한 기본적인 개념적 이해가 궁금했다. - 그러므로 본 포스팅에서 webpack을 왜 사용하는지와 webpack의 기본구조에 대한 이야기를 해보려고 한다. 1. webpack을 사용하는 이유 프론트 개발의 영역이 넓어지면서 JavaScript를 이용한 다양한 기술적 풀이가 생겨났다. 하나의 웹 페이지에 연결된 JS파일이 많아지면서 관리에 있어 한계가 발생했고, 웹사이트의 로딩속도가 길어지고 그만큼 더 많은 요청이 발생하여 네트워크 비용이 증가했다. 더불어, JS파일이 많아지면서 서로의 scope를 침범하여 변수간의 충돌을 일으킬 위험성이 증가했다. 이를 해결하기 위해, JS의 즉시호출함수(IIFE) 기능을 이용한 CommonJS, AM.. 2021. 6. 25. 42. Vue - 포트 수정 및 배포 - 본 포스팅은 이전 포스팅과 이어지는 내용임을 알려드립니다. 1. 개요 - 지금까지 Netlify를 이용하여 프로젝트를 관리하고 배포하는 설정을 했다. - 마지막으로 설정해야 하는 부분이 있다면 포트번호를 수정하는 일이다. 2. 명령어(스크립트) 변경 - 위의 사진은 package.json의 일부분이다. - 현재 Netlify의 serverless 함수를 사용하기 위해 개발환경으로 프로젝트를 빌드를 할때 다음과 같은 명령어를 사용한다. - npm run dev:netlify - webpack 서버를 이용하는 개발환경 빌드는 더이상 사용하지 않기 때문에 이 부분을 변경시켜주고 - netlify 서버를 이용한 개발환경 빌드 명령문을 기본 개발환경 명령어로 변경한다. 3. netlify.toml 수정 - 조.. 2021. 6. 24. 41. Vue - 로컬 및 서버의 환경변수 구성 - 본 포스팅은 이전 포스팅에서 사용한 프로젝트와 이어지는 내용입니다. 1. 개요 - 이전 포스팅에서 Netlify serverless 함수를 사용하여 중요한 API key가 사용자측 브라우저에 노출되는 것을 막는 방법을 알아 보았다. - 해당 프로젝트는 git이라는 공개 플랫폼에 소스코드가 공유되어 있다. - 이 경우, 소스코드를 통해서 API key가 노출되는 문제점이 발생한다. - 이를 해결하기 위해 환경변수라는 것을 이용하여 API key를 감추는 방법을 알아보자. 2. 환경변수 설정 - 환경변수를 사용하기 위해서는 하나의 패키지를 설치해야한다. 터미널 입력: npm i -D dotenv-webpack a) webpack.config.js - 새로운 패키지를 설치했으니 환경구성을 해줘야 한다. -.. 2021. 6. 24. 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. 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. 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. 이전 1 2 3 4 ··· 10 다음
