알렉스 페레이라의 격투 블로그

데이터를 안전하게 관리하는 방법중 첫번째로 생각나는건 암호화다. ●암호화 관련 참고 : http://www.jidum.com/jidums/view.do?jidumId=614 지식덤프 I. 데이터 안전한 교환과 저장을 위한 보안 알고리즘, 암호화의 개요 가. 암호화(Cryptography)의 정의 메시지의 내용이 불명확하도록 평문(Plain text)재구성하여 암호화된 문장 (Cipher text)으로 만드는 www.jidum.com AES, SHA, RSA 등 다양한 방법이 있지만, AES256방식 암호화를 Vue.js에서 사용해보려한다. 1. npm install crypto-js명령어를 사용해 라이브러리르 설치한다. npm install crypto-js 2. Vue 컴포넌트의 script단에서 Cr..

아래 에러는 들여쓰기에 공백과 tab키를 동시에 사용하면 나는 에러 이다. 해결법 : package.json 파일의 eslintConfig 항목을 아래와 같이 수정한다 "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": { "no-mixed-spaces-and-tabs": 0, "no-unused-vars": "off" } }, 위와같이 수정하고 npm run build 혹은 npm run serve를 실행하여 확인.

Vue 프로젝트를 run하기위해 명령어를 날렸지만 아래와 같은 에러가 난다. 찾아보니 싱글파일 컴포넌트의 style태그안에 있는 lang ="scss" 속성때문에 발생한 에러다. 참고 : https://yamoo9.gitbook.io/webpack/webpack/webpack-loaders/sass-loader Sass 로더 - Webpack 러닝 가이드 앞서 웹 브라우저에서 결과를 확인했듯이 Sass를 사용해 스타일 모듈을 관리해도 번들링 되면 코드의 출처를 알 수 없어 스타일 디버깅이 어렵습니다. 이러한 문제를 해결하려면 소스 파일의 맵 yamoo9.gitbook.io 아래 두 명령어를 통해 필요한 라이브러리를 설치한다. npm i sass-loader npm i node-sass 설치완료. 재기동 ..

아래 사이트에 접속한다. https://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org 원하는 이미지를 넣고, Create Favicon 버튼을 클릭하여 다운로드 한다. 아래 태그를 index.html의 head태그 안에 삽입한다. 아래 페이지로 이동한다. https://fontawesome.com/v4/get-started/ Get Started with Font..

싱글파일 컴포넌트란 쉽게 말해서, Root하위에 있는 컴포넌트를 파일로 따로 구분해서 사용하는 것을 말한다. App.Vue파일을 생성해보자. 싱글파일 컴포넌트의 기본 구조는 이런식으로 나뉘어져 있는데, 소스상으로 보면 아래와 같다. 이와같은 템플릿을 사용하기 위해선 VSC 에디터 상에서 'vbase'라고 입력 후에 Enter키를 입력하면 된다. 버전마다 scf, vueinit등 다른것으로 알고있다. 나는 Vue.js 3버전을 사용해 개발중. 예시코드 {{ msg }} 컴포넌트 생성 컴포넌트는 ./src/components폴더에 모아둔다. AppHeader.vue파일 생성 컴포넌트를 생성할시에는 HTML에서 제공하는 기본태그와 혼동되지않게 두 단어를 조합해서 명명한다. 예제1 App.vue {{ msg }..

Command Line Interface의 준말로, 명령어를 통한 특정 액션을 수행하는 도구를 의미함. 곧 명령어 보조도구 https://cli.vuejs.org/ Vue CLI cli.vuejs.org VUe Cli첫 화면. Get Started를 선택하여 이동한다. npm -install을 이용하여 설치하기 전에, 각각의 명령어를 통해 node.js의 버전과 npm의 버전을 확인한다. 설치명령어를 입력한다. npm install -g @vue/cli 설치중... 완료! 사용법 아래명령어 입력 vue create vue-cli Vue 3선택 설치중.. 성공! vue-cli디렉토리로 이동후에 npm run serve를 통해 서버 실행. 서버가 올라왔다. 성공!

watch 속성은 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성이다. 사용법 {{num}} increase watch와 computed의 차이점? computed는 간단한 연산 위주, watch는 특정 메소드나 무거운연산, 혹은 비동기통신과같은 기능에 사용하는것이 좋다. 참고:https://vuejs.org/guide/essentials/computed.html#ad Computed Properties | Vue.js VueConf Toronto - Join the premier Vue.js conference | 9-10 Nov 2023 - Toronto, CanadaRegister Now Use code VUEJS to get 15% off vuejs.org 예제 {{ num }..

Vue.js의 템플릿 문법이란 Vue.js로 화면을 조작하는 방법을 의미한다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다. 데이터바인딩 데이터 바인딩은 Vue.js 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다. 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag) {{}}. //Vue.js 3버전 Vue.createApp({ data() { return { message: 'Hello Vue.js' } } }) div 태그에 콧수염 괄호를 이용해 뷰 인스턴스의 message 속성을 연결했다. 코드를 실행하면 화면에 Hello Vue.js라는 코드가 출력됨. *Computed* '계산된'이라는 뜻으로 데이터바인딩시 데이터를 가공하고자 할 때 사용하는 속성이다. {{n..

ajax란? 아래 링크 참조 쉽게 말하면 js환경에서 비동기통신으로 데이터를 가져와 뿌려주는것. https://developer.mozilla.org/ko/docs/Glossary/AJAX AJAX - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN AJAX (Asynchronous JavaScript와 XML)는 XMLHttpRequest 기술을 사용해 복잡하고 동적인 웹페이지를 구성하는 프로그래밍 방식입니다. developer.mozilla.org vue-resource란? 원래는 공식 라이브러리였지만 3년전쯤부터 관리하지 않는 라이브러리 https://github.com/pagekit/vue-resource GitHub - pagekit/vue-resource: The HTTP clie..

이 포스트에서는 Vue.js 2와 Vue.js 3의 차이점을 몇 가지 픽업해서 간단하게 소개하고자한다. Composition API Vue.js 2와의 가장 큰 변경점이라고 한다면 Composition API가 도입된 것이다. 이로 인해 Vue의 그러나 Composition API를 사용하면 아래와 같이 바뀐다. 상세한 내용에 대해서 설명하자면 길어지므로 다음에 기회가 된다면 구체적으로 설명하도록 하겠다. Fragments Vue.js 2에서는 컴포넌트의 루트 요소가 1개일 필요가 있었다. ... ... ... ({ ... }) }).mount('#app') 라이프 사이클 Vue3에서는 라이프 사이클의 일부 명칭이 변경된다. 역할 자체는 변경되지 않는다. beforeDestroy → beforeUnmou..