본문 바로가기

Frontend68

[JavaScript] 생성자 함수 / this / es6 class / 상속 / 확장 생성자 함수 - 일반적으로 사용하는 function이 내용이 같을 땐 효율이 좋지 않으므로 생성자 함수를 만들어서 작성한다. const solyi = { firstName: 'Solyi', lastName: 'Choi', getFullName: function (){ return `${this.firstName} ${this.lastName}` } } console.log(solyi.getFullName()) // 위가 일반적으로 사용하는 함수 // 아래가 생성자 함수 function User(first, last) {//생성자 함수는 첫글자를 대문자로 작성하는 암묵적인 룰! this.firstName = first this.lastName = last } const person1 = new user('.. 2021. 10. 26.
[JavaScript] 함수 기초, 화살표 함수, 즉시실행함수(IIFE), 호이스팅, 타이머 함수 성능에 영향을 끼칠수있으므로 함수 호출 회수는 줄이는 게 좋다. 반복적으로 사용 될때는 변수에 담아서 사용하고, 단일로만 사용될 땐 함수를 직접 호출하는 방법이 있다. 함수표현 : 변수에 담아서 사용하는 함수 익명함수 : 이름이 없는 함수 기명함수 : 이름이 있는 함수 함수 내에서 return 문을 만나면 종료된다. arguments : 인수를 지정하지 않아도 함수 내에서 활용할 수있다. 인수가 너무 많은 경우에 사용 function sum(){ console.log(arguments) return arguments[0] + arguments[1] + arguments[2] } const z = sum(1,2,3) console.log(z) 화살표 함수 : 일반 함수의 축약형 매개 변수가 하나라면 소괄호.. 2021. 10. 26.
[Netlify] 서버리스 배포 netlify.com login - functions https://docs.netlify.com/functions/overview/?_ga=2.6479674.907396097.1634890312-596079682.1634890312 netlify.toml 파일 생성 [build] functions = "functions" functions/hello.js 파일 생성 exports.handler = async function (event, context) { return { statusCode: 200, body: JSON.stringify({ name: 'choi-solyi', age: 31, email: 'choi-solyi@naver.com' }) } } --> https://unruffled-ja.. 2021. 10. 22.
[vue3] 동기? 비동기? promise // function a(callback){ // setTimeout(()=>{ // console.log('A') // callback() // },1000) // } // function b(callback){ // setTimeout(()=>{ // console.log('B') // callback() // },1000) // } // function c(callback){ // setTimeout(()=>{ // console.log('C') // callback() // },1000) // } // function d(callback){ // setTimeout(()=>{ // console.log('D') // callback() // },1000) // } // a(function (){ .. 2021. 10. 21.
[vue3] props, context setup 내부에서 props 와 context 사용하기 // App.vue Apple //MyBtn.vue ㅇ 2021. 10. 19.
[vue3] component api 적용/미적용 예제 // 컴포넌트 api적용 XXX {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} //컴포넌트 API 적용 OO {{ count }} {{ message }} 2021. 10. 19.
[vue3] composition api 컴포지션 API 기존에 배운 내용대로 코드를 짜게된다면 다른 로직이 서로 섞여있어서 읽기쉬운 코드가 아니다. 컴포지션 API를 사용하므로써 같은 로직은 한데 모아서 처리할수있게된다 {{ count }} 2021. 10. 19.
vue3 ref //App.vue Hello~~~~~.vue~~ Good!!! 2021. 10. 19.
vue3 provide, inject app.vue -> parent -> child 부모에서 자식으로 내릴때는 props라는 개념사용. 하지만 부모에서 손자로 내릴때는 provide, inject 사용하면 더욱 편리하다. 값을 넘길때 parent 에는 필요 없는 부분을 작성해줘야했는데 그걸 편리하게 하고자 변경! app.vue에서 provide로 데이터값을 지정하고 child.vue에서 inject 로 값을 받아줄수있다. ! 주의 할점 반응성 제공을 하지않는다. 1) 한번만 출력하게 만들거나 2)반응성을 유지하게 작성하려면 추가작업을 해야함. computed (계산된 데이터) import { computed } from 'vue'를 통해 provide 에 return computed ~.. //App.vue 클릭 App: {{ messag.. 2021. 10. 19.
vue3 slot //App.vue Banana (B) //MyBtn.vue 2021. 10. 19.
vue3 component emit //App.vue Banana //MyBtn.vue ABC button 2021. 10. 19.
vue3 component 속성 상속 //App.vue Banana 첫번째 두번째 2021. 10. 19.
vue3 Componunts Apple Bananaa Melon Strawberry Cherry 2021. 10. 19.
반응형