프론트엔드
-
[Node] Mac OS에서 NVM 설치 및 사용 명령어 정리프론트엔드/NPM 2024. 1. 15. 18:34
NVM이란? Node Version Manager. 노드 버전 관리자이다. 프로젝트마다 다른 노드 버전을 관리하기에 유용하다. 2. NVM 설치 1. Homebrew 설치 Homebrew는 Mac용 패키지 관리자이다. 사용하면 간단하게 명령어로 필요한 패키지를 설치할 수 있다. Homebrew: https://brew.sh/ 터미널을 열어 명령어로 Homebrew를 설치하고 잘 설치 됐는지 확인해보자. $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" $ brew --version Homebrew 3.6.20 2. NVM 설치 homebrew를 통해 NVM을 설치한다. $ brew..
-
vue Quasar 에 axios 추가하기프론트엔드/Vuejs 2023. 6. 22. 19:34
Axios 모듈 패키지 추가/설치 패키지에 axios 패키지 추가해서 쓸 수 있다. $ yarn add axios or $ npm install axios --save Boot File 에 추가하기 quasar new boot axios 명령어를 입력하면 src/boot 폴더에 axios.js 파일이 생긴다. 여기에 import { boot } from 'quasar/wrappers' import axios from 'axios' const api = axios.create({ baseURL: 'https://api.example.com' }) export default boot(({ app }) => { // for use inside Vue files (Options API) through this...
-
[vue] vee-validation yup 자바스크립트 validation 체크프론트엔드/Vuejs 2021. 9. 15. 18:05
npm install -S yup 기본사용법 import * as yup from 'yup'; let schema = yup.object().shape({ name: yup.string().required(), age: yup.number().required().positive().integer(), email: yup.string().email(), website: yup.string().url(), createdOn: yup.date().default(function () { return new Date(); }), }); // check validity schema .isValid({ name: 'jimmy', age: 24, }) .then(function (valid) { valid; // =>..
-
[vue] vuex binding helper - vue store 사용하기프론트엔드/Vuejs 2021. 6. 25. 15:23
vue 에서 vuex 를 사용하여 store 를 만들면, getters 의 경우 this.$store.getters.[getter이름] 로 사용가능 actions 의 경우 this.$store.dispatch(‘[action이름]’, data) 과 같이 사용할 수 있다. 또는 직접 state 에 바로 접근해서 this.$store.state.book.message 로도 사용가능은 하다. helper 없이 기본적으로 사용 {{getMsg}} Click store/index.js store 를 하나만으로는 사용하기 어려우므로 기능별 또는 페이지별로 분리해야한다. 기능/페이지별로 store를 분리하고, 하나의 store에는 state, mutations, actions, getters를 포함해서 관리하는게 편..
-
vue3 에서 vuex4 시작하기 - module 관리프론트엔드/Vuejs 2021. 6. 14. 17:03
vue3 를 사용하게 되면 vuex4 를 사용하여 store 를 관리 할 수 있다. vuex 4 설치 npm install --save vuex@4.0.1 store 작성 vuex 의 store를 module 형식으로 구성 |-- store | |-- index.js | |-- mutation-types.js | |-- modules | |-- person.js mutation-types.js : 뮤테이션 타입 정의를 담당 modules : vuex 에서 각 모듈들을 담아두는 폴더 index.js : vuex 의 store 를 정의 다음과 같은 구조로 해야 소스관리가 편하다. mutation-types.js 작성 export const PERSON = { SET_NAME: 'SET_NAME', // 이름..
-
vue cli 실행모드 설정 및 node 환경변수 설정(NODE_ENV)프론트엔드/Vuejs 2021. 6. 1. 18:33
실행 모드 vue cli 에는 기본적으로 3개 모드가 있다. vue cli 뿐 아니라 다른곳에서도 마찬가지. 1) development, 2) production, 3) test 그 외에 사용자가 정의한 모드를 추가 할 수 있다. 사용자 정의 모드 // 최상단 경로 /package.json "scripts": { .. 생략 // local 로컬 모드 추가 "local": "vue-cli-service serve --mode local", "mymode": "vue-cli-service serve --mode mymode", // 임의로 생성 .. 생략 }, > npm run local > npm run mymode 로 정의된 모드를 실행할 수 있다. 환경변수 실행 모드에 따라 변수 설정을 달리 할 수 있..
-
nodejs 와 node-sass 버젼 호환 : Node Sass does not yet support your current environment프론트엔드/NPM 2021. 5. 12. 18:18
node-sass 버젼과 node 버젼이 맞지 않을떄 빌드시 서버에서 다음과 같은 오류 가 낫다. npm ERR! code 1 npm ERR! path ~~~~node_modules/node-sass npm ERR! command failed npm ERR! command sh -c node scripts/build.js 로컬에서는 npm start 로 실행시 Syntax Error: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (88) 과 같은 오류가 난다. 오류 원인은 node 버젼이 해당 Node-sass 버젼을 지원하지 않기 때문에 발생한다 노드 버젼이 호환하는 ..
-
Flutter 시작하기 - sdk 세팅 및 안드로이드 스튜디오 실행프론트엔드/Flutter 2021. 3. 26. 12:25
개발 환경 : mac Flutter 를 시작하려면 문서부터 보고 차근차근 하면 된다. flutter-ko.dev/docs/get-started/install/macos 일단 flutter sdk 다운부터 하자 flutter 다운 $ cd ~/development $ unzip ~/Downloads/flutter_macos_2.0.3-stable.zip 다운받고 압축풀고, path 에 추가하자 $ export PATH="$PATH:`pwd`/flutter/bin" 위 명령어는 압축을 푼 경로에서 실행해야 한다. 또 위 명령어로 실행 하면 영구적이지 않고 터미널 열때마다 해당 작업을 해야 한다. 해서 위 명령어를 전역 path 로 저장하자. 영구적인 flutter 경로 등록 $ vi ~/.bash_profi..