본문 바로가기

전체 글

[자바스크립트 ES6+ 기본] 6. Destructuring (분할 할당) Destructing Destructuring Assignment 작성 형태 let one, two, three; const list = [1, 2, 3]; [one, two, three] = list; log(one); log(two); log(three); log(list); // 1 // 2 // 3 // [1, 2, 3] 사전적 의미 ~구조를 파괴하다 파괴, 해체는 있는 것이 없어지는 뉘앙스 원 데이터는 변경되지 않음 강좌 기준 이 관점에서 보면 분할/분리가 더 가까움 강좌에서는 "분할 할당"으로 표기 Array 분할 할당 배열의 엘리먼트를 분할하여 할당 인덱스에 해당하는 변수에 할당 /* 1. 왼쪽의 인덱스에 해당하는 오른쪽 배열의 값을 변수에 할당 2. one에 1, two에 2, three에.. 더보기
[자바스크립트 ES6+ 기본] 5. Spread, Rest let, const 사용 기준 강좌의 let, const 변수 사용 기준 let: 변경할 수 있다 const: 변경할 수 없다 let, const 변수의 시맨틱을 우선하여 사용 값이 변경되면 let 초기값이 변경되지 않으면 const const list = [10, 20]; let values = [10, 20]; values.push(30, 40); for (let k = 0; k param + 10; spread Syntax: [...iterable] [...iterable] [...]처럼 []안에 점(.) 3개를 작성하고 이어서 이터러블 오브젝트 작성 const list = [21, 22]; log([11, ...l.. 더보기
[자바스크립트 ES6+ 기본] 4. 이터레이션(Iteration) 이터레이션 (Iteration) 과정 중간에 이터레이션 개념 이해가 필요하므로 먼저 다루며 이 장에서는 이터레이션 개념만 다루고 자세한 것은 Symbol 오브젝트에서 다룸 이터레이션의 사전적 의미: 반복 for() 문의 반복 개념과 차이 있음 강좌에서는 이터레이션과 반복을 같이 사용 const list = [10, 20]; for (let value of list) { log(value); }; const obj = list[Symbol.iterator](); log(obj.next()); log(obj.next()); log(obj.next()); // 10 // 20 // {value: 10, done: false} // {value: 20, done: false} // {value: undefine.. 더보기
[자바스크립트 ES6+ 기본] 3. Arrow Function Arrow Function 코드 형태 (param) => {함수 코드} const add = function(one, two){ return one + two; }; log(add(1, 2)); const total = (one, two) => { // function 키워드 대신에 화살표 사용, => 양쪽에 공백 작성 가능 return one + two; }; log(total(1, 2)); // 3 // 3 function(){}의 축약 형태지만 고려할 사항도 있음(this 참조가 다름) 강좌에서 화살표 함수와 전통적인 함수의 구분이 필요할 때 전통적인 형태를 일반 함수라고 부름 함수 블록 사용 함수 블록과 return 작성 생략 const total = (one, two) => one + two; .. 더보기
[자바스크립트 ES6+ 기본] 2. let/const 변수 변수 구분 로컬(지역) 변수, 글로벌(전역) 변수 변수를 구분하는 이유는? 기능과 목적이 다르기 때문 글로벌 변수의 기능, 목적 다른 js 파일에서 변수값 공유 파일에서 공통 변수 개념으로 사용 의도는 좋으나 처리 속도가 떨어짐 로컬 변수의 기능, 목적 빠르게 식별자를 해결하기 위해 가까운 스코프의 변수를 사용하려는 것 var 키워드 문제 글로벌 변수 오해 글로벌 변수는 글로벌 오브젝트의 로컬 변수 var value = 100처럼 var 키워드 사용이 정상 var 키워드를 작성하지 않으면 글로벌 변수로 간주하는데 이것이 문제 // "use strict"; value = 100; funciton point(){ value = 300; // 함수 안에서 글로벌 변수에 값을 설정하는 것은 좋은 모슴이 아님 l.. 더보기
[자바스크립트 ES6+ 기본] 1. 소개 ES6+ 기본 과정의 주요 내용 기본 문법 let 변수, const 변수, 화살표 함수 Spread, Rest, Destructing, default value 연산자, getter/setter, Template 오브젝트에 추가된 함수 Number, String, Object Array, Math, RegExp ES6+에 새로 생긴 오브젝트 Iterator, Generator, Symbol Map, Set, WeakMap, WeakSet ES6+ 심화 과정의 주요 내용 ES6+에 새로 생긴 오브젝트 Class, Proxy, Reflect, Promise, Module ArrayBuffer, TypedArray, DataView 등의 유형 비동기 통신 전반 Node.js 환경에서 Ajax의 XMLHttpR.. 더보기
[SQLD] 하루 공부하고 SQLD 자격증 따기 SQLD 자격증이 필요하진 않은데 그냥 따고 싶어서 시험을 봤습니다 호호... 먼저 이 글은 반성문 목적으로 쓰는 겁니다. (다음엔 이렇게 하지 말아야지...) 아래는 시험 과목과 합격 기준입니다. 찾아보니까 보통 SQL 전문가 가이드라는 책으로 개념 공부를 하더라구요. 하지만 저는 전공 시간에 배운 부분이 많은 것 같아서 이 책은 안 봤습니다. (사실 책이 너무 두꺼워서....ㅎㅎ) (참고로 이 책은 인터넷에 pdf 파일이 있어서 책 가격이 부담스러우신 분은 pdf 찾아서 보시면 될 것 같습니다!) 문제풀이는 SQL 자격검정 실전문제라는 책을 사용했습니다. 갑자기 책 배달이 지연되면서 거의 시험 이틀 전에 받았습니다. 책을 더 미리 샀어야 했는데... 중간고사 기간이랑 딱 겹쳐서 SQLD 공부를 못하다.. 더보기
[GraphQL] 노마드코더 GraphQL로 영화 API 만들기 https://nomadcoders.co/graphql-for-beginners GraphQL로 영화 API 만들기 – 노마드 코더 Nomad Coders GraphQL for Beginners nomadcoders.co REST 대신 GraphQL BackEnd 개발 쉬워짐 Prisma QL이나 apollo 같은 엄청난 팀들이 참여 apollo는 엄청난 커뮤니티와 팀을 가지고 있음 페이스북도 사용 GraphQL로 해결할 수 있는 두 가지 문제 1. Over-fetching 2. Under-fetching 예를 들어, 우리가 모든 유저들 이름을 웹사이트에 보여주고 싶으면 GET 사용 그런데 users에서 우리에게 사용자 명만 주는 것이 아니라, 성별이나 프로필사진 등도 제공 - 모든 유저들의 정보들 처음.. 더보기

티스토리툴바