개발자 최솔이

JSON은 이미 다양한 곳에서 사용되고 있기 때문에 사용방법은 생략한다. 자세한 내용은 Wiki(한글) 참조 : https://ko.wikipedia.org/wiki/JSON JSON - 위키백과, 우리 모두의 백과사전 JSON(제이슨[1], JavaScript Object Notation)은 속성-값 쌍( attribute–value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있 ko.wikipedia.org JSON은 "문자열"로 이루어져있지만 브라우저에서 읽을 때는 객체로 사용이 된다. 그래서 JSON 형식의 데이터는 코드를 짤때 문자열로 변환하는 방법..

이전 포스팅에서도 lodash 코드를 간략하게 올린 적이 있다. - 공식 문서 : https://lodash.com/docs/4.17.15 - 참조 URL : https://solyi.kr/215 [Javascript] 구조 분해 할당(배열,객체) / 전개 연산자 / 데이터 불변성 / 얕은복사와 깊은 복사 (lodas 구조 분해 할당 - 객체 / 배열의 구조 분해 할당 console.group('@ 객체의 구조 분해 할당') // 구조분해해서 원하는 데이터만 사용할 수 있음 const { name: me, age, email, address = 'Korea' } = user console.. solyi.kr lodash는 기능적 프로그래밍 패러다임을 사용하여 일반적인 프로그래밍 작업을 위한 유틸리티 기능..

js파일에서 데이터나 함수를 외부파일에서 사용할때 export 로 내보내줘야한다. export 와 export default 로 작성 되어있는 샘플을 흔히 볼 수 있는데 그 차이를 알아보려고 한다. export default : 기본 export 내보내는 JS파일에서 function 이름은 생략이 가능하다. 한가지 함수만 작성할 수 있다. 가져오는 JS파일에서 import 함수명 부분은 다른 이름으로 변경해도 상관없다. // getRandom.js export default function () { return Math.floor(Math.random() * 10) } // main.js import getRandom from './getRandom' export : named export 내보내는 JS..

목표 ⭕Part4 Ch2 74 ⭕컷편집 ⭕네관 2급 필기 2과목 정리 ⭕학은제 3과목 수강 +여유있으면 ⬜Part4 Ch3 77 리뷰 열품타 기록은 비록 2시간도 안되지만..! 오늘은 무리하게 계획짜지 않고 전부 달성해냈다 오늘의 잔디심기 https://github.com/choi-solyi/startJsTs js파일에서 쓰이는 export 와 export default의 차이 lodash 자주쓰는 함수 JSON 의 개념, JSON화 및 문자열화 LocalStorage의 개념과 SessionStorage 의 차이 axios의 개념과 사용방법

구조 분해 할당 - 객체 / 배열의 구조 분해 할당 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..

객체 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' ..

배열 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..

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(..

목표 + 결과 ⭕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

생성자 함수 - 일반적으로 사용하는 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('..

성능에 영향을 끼칠수있으므로 함수 호출 회수는 줄이는 게 좋다. 반복적으로 사용 될때는 변수에 담아서 사용하고, 단일로만 사용될 땐 함수를 직접 호출하는 방법이 있다. 함수표현 : 변수에 담아서 사용하는 함수 익명함수 : 이름이 없는 함수 기명함수 : 이름이 있는 함수 함수 내에서 return 문을 만나면 종료된다. arguments : 인수를 지정하지 않아도 함수 내에서 활용할 수있다. 인수가 너무 많은 경우에 사용 function sum(){ console.log(arguments) return arguments[0] + arguments[1] + arguments[2] } const z = sum(1,2,3) console.log(z) 화살표 함수 : 일반 함수의 축약형 매개 변수가 하나라면 소괄호..

오늘의 계획 파트3 챕터3 JS 함수 ⭕ 파트3 챕터4 JS 클래스❌ 파트4 챕터1 JS 데이터❌ 네트워크관리사 2급 과거문제지 4회분 정리⭕ (1,3과목 총정리) 영상컷편집❌ 학은제 강의 듣기⭕ 주절주절 코테 준비해야될텐데 오늘의 계획 리뷰 파트3 챕터3 JS함수만 수강... 무리하게 계획짜지 말기 ㅎㅎ; 대신 네트워크관리사 정리 많이하고 머릿속에도 많이 집어넣었다 학은제도 클리어 자기전에 파트4 수강 및 과거문제 5회분 눈으로 슥~ 읽기

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..

// 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 (){ ..

setup 내부에서 props 와 context 사용하기 // App.vue Apple //MyBtn.vue ㅇ

// 컴포넌트 api적용 XXX {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} //컴포넌트 API 적용 OO {{ count }} {{ message }}

컴포지션 API 기존에 배운 내용대로 코드를 짜게된다면 다른 로직이 서로 섞여있어서 읽기쉬운 코드가 아니다. 컴포지션 API를 사용하므로써 같은 로직은 한데 모아서 처리할수있게된다 {{ count }}

//App.vue Hello~~~~~.vue~~ Good!!!

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..

//App.vue Banana (B) //MyBtn.vue