Today I Learn 20220616

❤ Todo

💡 면접 질문 4개 ✔
👩‍💻 GraphQL server 만들기 ✔
👩‍💻 Next.js 블로그 만들기 🔺
📗 자바스크립트 마스터북 예제 정리 ✔
📗 자바스크립트+jQuery 완전정복 스터디 1 🔺
📗 자바스크립트+jQuery 완전정복 스터디 2

❤ Error & Solution

github front-practice repository에 하위 폴더 graphql-server commit시 에러 발생

$ git push origin +master

❤ What I learned

면접 질문

→ github frontend-interview
1. Context-API
2. 클래스형과 함수형의 차이
3. Angular와 React의 차이점
4. 라이브러리와 프레임워크

GraphQL server 만들기

→ 독학 카테고리 및 github front-practice

자바스크립트 마스터북

1. Anchor 태그에 스크립트 집어넣기 (JavaScript 의사 프로토콜)
   <a href="JavaScript:스크립트 코드"> 링크 텍스트</a>
<a href="JavaScript:window.alert('안녕, 자바스크립트');"> 대화상자 표시</a>
2. JavaScript의 데이터형은 크게 기본형과 참조형으로 분류할 수 있다. 이 둘의 차이점은 '값을 변수에 대입하는 방법'에 있다. 우선 기본형의 변수에는 값 그 자체가 직접 보관된다. 그에 반하여 참조형의 변수는 그 참조값(메모리의 어드레스)을 보관한다.
3. 분할 대입(배열)

let data = [56,40,29,39,41,33,17];
let [x0,x1,x2,x3,x4,x5,x6,x7] = data
console.log(x0); // 56
console.log(other); // [40,29,39,41,33,17]

4. 분할 대입(객체)

let book = {title:'Java', publish:'기술평론사', price: 16000};
let {price,title,memo='없음'} = book;
console.log(title); // Java
console.log(price); // 16000
console.log(memo); // 없음

5. 중첩된 객체 분해하기

let book = {title:'Java', publish:'기술평론사', price: 16000,
           other: {keywd: 'Java SE 8', logo: 'logo.jpg'}};
let {title, other, other:{keywd}} = book;
console.log(title); // Java
console.log(other); // {keywd: 'Java SE 8', logo: 'logo.jpg'}
console.log(keywd); // Java SE 8

6. throw 명령
   throw new Error(에러 메시지)
7. 독자적인 규칙으로 배열을 나열하기 - sort 메소드

var classes = ['부장','과장','주임','담당'];
var members = [
  {name:'남상미',clazz:'주임'},
  {name:'김준수',clazz:'부장'},
  {name:'정인식',clazz:'담당'},
  {name:'남궁민',clazz:'과장'},
  {name:'이상주',clazz:'담당'},
];
console.log(members.sort(function(x,y){
  return classes.indexOf(x.clazz) - classes.indexOf(y.clazz);
}))

8. 연상 배열 조작하기 - map 객체

// map 객체에 값 추가
let m = new Map();
m.set('dog','멍멍멍');
m.set('cat','야옹');
m.set('mouse','찍찍');
console.log(m.size); // 3
console.log(m.get('dog'); // 멍멍멍
console.log(m.has('cat'); // true

// 키를 순서대로 취득
for(let key of m.keys()){
  console.log(key); // dog, cat, mouse
}

// 값을 순서대로 취득
for(let value of m.values()){
  console.log(value); // 멍멍멍, 야옹, 찍찍
}

// 키/값을 순서대로 취득
for(let[key,value] of m){
  console.log(value); // 멍멍멍, 야옹, 찍찍
}

// dog를 삭제
m.delete('dog');

// 모든 키/값 tkrwp
m.clear();

9. assign 메소드는 인수 target을 갱신한다. 만약 원래의 객체에 영향을 끼지고 싶지 않을 경우

// Object.assign(pet,pet2,pet3);
let merged = Object.assign({},pet,pet2,pet3);

10. 쿼리 정보 이스케이프 처리하기 encodeURI/ encodeURIComponent함수
    → 독학 카테고리
11. Iterator, Generator, Proxy → 독학 카테고리

자바스크립트+jQuery 완전정복 스터디 1

→ github front-code

❤ Thinking

아침부터 열심히 했다. 의외로 혼자 공부했을 때 배웠던 부분들이랑 겹치는 게 많아서 velog에 정리했는 것들을 쭉 훑어보는 시간을 가져야겠다.