분류 전체보기260 [Javascript] 구조 분해 할당(배열,객체) / 전개 연산자 / 데이터 불변성 / 얕은복사와 깊은 복사 (lodash deepClone) 구조 분해 할당 - 객체 / 배열의 구조 분해 할당 console.group('@ 객체의 구조 분해 할당') // 구조분해해서 원하는 데이터만 사용할 수 있음 const { name: me, age, email, address = 'Korea' } = user console.log(`이름은 ${name}입니다.`) console.log(`${me}의 이름은 ${age}살이며`) //me라는 이름으로 대체해서 가져올 수 있다. 그럼 name이란 변수는 사용할수없음! console.log(`${address} 에 거주중입니다.`) //구조분해할당시 default 값 지정할 수 있다 ! console.log(`문의사항이 있다면 -> ${email}`) console.log(user.name === `${nam.. 2021. 10. 27. [Javasciprt] 객체 Object 객체 Object 참조 URL :https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object Object - JavaScript | MDN Object 생성자는 객체 래퍼(wrapper)를 생성합니다. developer.mozilla.org assign keys values // Object.prototype... prototype안붙어 있으면 정적 메서드 // [].reverse() 는 가능하지만 {}.assign()은 불가능하다. const userAge = { name: 'solyi', age: 31 } const userEmail = { name: 'solyi', email: 'solyi@solyi.kr' .. 2021. 10. 27. [Javascript] 배열 Array 배열 Array 참조 URL :https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array Array - JavaScript | MDN JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다. developer.mozilla.org 용어 설명 index - 배열 내의 특정 위치 indexing - 인덱스 위치 조회 element / item - 각 요소들을 의미 console에서 수월하게 보기위해서 console.group('제목')으로 제목을 달았고 console.groupEnd() 로 닫아주었다. 코드에선 보기 불편해도 콘솔확인은 편함! length find conc.. 2021. 10. 27. [Javascript] 문자열 / 숫자와 수학 String 참조 URL : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN String 전역 객체는 문자열(문자의 나열)의 생성자입니다. developer.mozilla.org 문자열 length indexOf slice replace match trim // length const str1 = '0123' console.log(str1.length) // indexOf(이값이 몇번째에 있니) console.log('@ indexOf(이값이 몇번째에 있니) ') const str2 = 'Hello World' console.log(str2.indexOf(.. 2021. 10. 27. 2021년 10월 27일 수요일 기록 목표 + 결과 ⭕JS Part4 Ch1 04~ 09 ❌추가로 가능하다면 Ch2 01~05 까지 ⭕학은제 중간고사 준비 (중간고사 10월30일~11월2일) ⭕네트워크관리사2급 필기 정리 ❌열품타 4시간 30분 이상 기록하기 주절주절 리뷰 1번 정리 URL JS 문자열, 숫자, 수학 https://solyi.tistory.com/212 JS 배열 https://solyi.tistory.com/213 JS 객체 https://solyi.tistory.com/214 JS구조분해할당, 전개연산자, 데이터불변성, 얕고 깊은 복사 https://solyi.tistory.com/215 2021. 10. 27. [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. 2021년 10월 26일 화요일 기록 오늘의 계획 파트3 챕터3 JS 함수 ⭕ 파트3 챕터4 JS 클래스❌ 파트4 챕터1 JS 데이터❌ 네트워크관리사 2급 과거문제지 4회분 정리⭕ (1,3과목 총정리) 영상컷편집❌ 학은제 강의 듣기⭕ 주절주절 코테 준비해야될텐데 오늘의 계획 리뷰 파트3 챕터3 JS함수만 수강... 무리하게 계획짜지 말기 ㅎㅎ; 대신 네트워크관리사 정리 많이하고 머릿속에도 많이 집어넣었다 학은제도 클리어 자기전에 파트4 수강 및 과거문제 5회분 눈으로 슥~ 읽기 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. 이전 1 ··· 4 5 6 7 8 9 10 ··· 20 다음 반응형
