본문 바로가기

분류 전체보기260

vue3 클래스, 스타일 바인딩 //클래스 바인딩 Hello World ( {{ isActive }} ) 스타일 바인딩 :style 부분에 직접 color:red 를 입력하는 방식 fontStyle 오브젝트 입력 [배열, 배열] 형식으로 입력 Hello My name is Solyi 2021. 10. 18.
vue3 watch @watch }, watch: { //데이터들의 변경 사항을 감시하는 용도 //감지가 되면 내부 로직이 실행되는 구조 //데이터, function 모두 가능 msg: function(newValue){ console.log('msg: ', this.msg, newValue) }, reversedMessage(v){ console.log('reversedMEssage : ', this.reversedMessage , v) } }, 2021. 10. 18.
vue3 computed - getter setter {{ reversedMessage }} {{ reversedMessage }} ADD~! 2021. 10. 18.
vue3 computed 캐싱 //중괄호 내부에서 문자 합치기, 변형하기 {{ msg+'!?' }} {{ msg.split('').reverse().join('') }} //h1 태그 내부 {{ reverseMessage() }} //methods {{ reversedMessage }} //computed. computed 캐싱 - 한번 계산을 하면 저장된 값을 - computed에서 만들어둔 데이터는 캐싱이라는 기능이 있어서 한번 연산을 해두면 반복적으로 데이터처럼 화면에 출력할때 또 계산을 하지않음. 가지고 있는 데이터를 출력해줌 - 여러차례 출력되는 데이터 일땐 계산된 가지고 있는 데이터(캐싱)를 통해서 출력을 해준다. 기본적으로 application을 만들때 데이터를 최적화 할때 캐싱 기능을 이용할수있다. computed 에는.. 2021. 10. 18.
vue3 computed @@@Computed //계산된 데이터 computed 에 function haSFruits 생성후 v-if문에 hasFruits 입력 function reverseFruits 생성후 v-for문 fruit in reverseFruits Fruits {{ fruit }} Reverse Fruit {{ fruit }} 2021. 10. 18.
vue3 syntax //onClick @click="펑션명" //조건문 v-if //마운트된 이후로 데이터가 변하지 않음 v-once //원시 html v-html="msg" //v-bind msg : 'active' v-bind:id="" ->> :id v-bind:class="" ->> :class {{ msg }} 2021. 10. 18.
개발관련 사이트 코드펜 : html, css, js 를 웹에서 실행할수있는 https://codepen.io SASS https://sass-lang.com/ PARCEL - 번들러 https://ko.parceljs.org/ WEBPACK - 번들러 https://webpack.js.org/concepts/ NETLIFY : 정적 웹사이트를 위한 호스팅 및 서버리스 백엔드서비스를 제공 https://www.netlify.com/ 2021. 10. 17.
git 프로젝트 복제 / clone 새 프로젝트를 생성하고 깃헙에 있는 플젝을 가져올때 버전관리 없는 새로운 프로젝트에서 다운로드 받는것 npx degit choi-solyi/webpack-template-basic를 저장될경로 버전 내역까지 가져올때는 git clone 저장소이름 2021. 10. 17.
Netlify 배포 (+babel-loader, webpack mode 에러 등) 이전에 html, css만으로 배포했을때와는 설정이 조금 다르다. https://www.netlify.com/ Netlify: Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free! www.netlify.com github 연동 후 프로젝트를 불러와서 설정에서 다음과 같이 세팅.. build command -> npm run build publish directory -> dist/ 강의와 버전이.. 2021. 10. 17.
bundler 2.bundler 이번 강의 github -> https://github.com/choi-solyi/webpack-template-basic npm init -y npm i -D webpack webpack-cli webpack-dev-server@next //package.json 에 다음 추가 "scripts": { "dev": "webpack-dev-server --mode development", "build": "webpack --mode production" }, parcel과는 다르게 webpack.config.js 파일 생성 후 구성 설정을 추가해줘야한다. @html 경로 추가 npm i -D html-webpack-plugin @static img 추가 npm i -D copy-webpack-plugin .. 2021. 10. 17.
bundler 1. parcel 이번강의 github -> https://github.com/choi-solyi/parcel-template-basic 번들러는 대표적으로 parcel과 webpack 이 있다. parcel : 단순한 자동 번들링. 소,중형 규모에 적합 webpack : 매우 꼼꼼한 구성. 중,대형 규모에 적합 프로젝트 생성 후 npm init -y @이미지 정적으로 관리하기 npm i -D parcel-bundler npm i -D parcel-plugin-static-files-copy // package.json 에 다음 추가 "staticFiles":{ "staticPath": "static" } @autoprefixer : 브라우저리스트 옵션은 현재 npm프로젝트에서 지원할 브라우저의 범위를 명시하는 용도. 그.. 2021. 10. 17.
js 기초 (데이터타입, 연산자, 조건문, 반복문, 변수 유효범위, 형변환) import getType from './getType' import rd from './getRandom' //실행문 console.log("heloworld!") console.log(123) console.log(typeof "heloworld!") console.log(typeof 123) console.log(true) console.log(typeof null) console.log(typeof undefined) console.log(typeof {}) console.log(typeof []) // function getType(data){ // return Object.prototype.toString.call(data).slice(8, -1); // } console.log("-getTy.. 2021. 10. 16.
Node.js npm 버전관리 / gitignore 유의적 버전 - SemVer 버전 -> 12.14.1 // 메이저.마이너.패치 메이저 버전이 바뀌면 이전버전과 호환이 되지 않음. 마이너 버전은 기존버전과 호환이 되지만 새로운 기능이 추가된 버전 패치버전은 버그, 오타 등이 수정된 버전 맨앞 ^ 캐럿기호가 붙어있으면 메이저버전 중에서 가장 최신 버전으로 업데이트를 허용한다는 의미 npm info lodash // lodash 의 정보 확인에서 버전 확인 가능 npm install lodash@4.17.20 //하위버전으로 변경 npm update lodash npm 프로젝트의 버전관리 버전관리를 할 필요가 없는 파일들 node_modules는 따로 관리하지 않아도 package.json 에서 가지고 있기 때문에 깃에 올리지 않아도된다. node_modu.. 2021. 10. 15.
반응형

티스토리툴바