컨플릭트를두려워하지말자

1. inline과 inline block , block의 차이 

2. promise와 async/await의 차이 

에러처리 방식이 다르다

promise: .catch()

async/await : try-catch() 사용 

async/await이 Promise를 좀 더 쉽게 작성 할 수 있게 한 버전. 

promise는 비동기 처리를 위해 .then() .catch() .finally() 등 체인형태로 사용되어 

비동기 작업이 늘어나면 코드가 복잡해진다. 비동기작업 병렬실행 가능. 

둘 다 리턴값은 Promise객체이다. 

그러나 async/await은 비동기코드를 마치 동기코드처럼 작성할 수 있어 가독성이 높아진다. 

3. 자바스크립트 class 에서의 this의미 

>클래스의 생성된 인스턴스를 가리킴. 

4. let var const 의 차이

var가 가장 오래됨. ES5버전 이전에는 변수선언시 var만 사용했음.  변수가 선언된 함수 내에서만 유효하다.

전역변수로 쓰려면 함수 외부에서 선언해야. 

그러나 if와 for와 같은 블록스코프는 인식하지않음 블록(if or for) 내부에서 선언한 함수는 외부에서도 접근 가능하다. 

같은 스코프 내에서 재선언 가능하다. 

let, const 는 ES6부터 도입되었다.  var의 문제점을 해결하기위해 도입됨. 

둘 다 블록 스코프를 가지고, 선언된 블록 {} 안에서만 유효하다. 

같은 스코프 안에서 재선언 하는 것이 불가능하다. 

const는 상수, let은 변수

let은 재할당 가능, 그러나 const는 재할당 불가능. 그러나 const로 선언된 객체나 배열같은 참조형 데이터의 요소는 변경가능.  

https://school.programmers.co.kr/learn/courses/30/lessons/160586

function solution(keymap, targets) {
    var answer = [];
    var map = new Map();
    keymap.forEach((keys) => {
    for (let idx = 0; idx < keys.length; idx++) {
      let k = keys[idx];
      if (!map.has(k)) {
        map.set(k, idx + 1);
      } else {
        if (map.get(k) > idx + 1) {
          map.set(k, idx + 1);
        }
      }
    }
  });
    
    targets.forEach((t) => {
    let ans = 0;

    for (let i = 0; i < t.length; i++) {
      if (!map.has(t[i])) {
        ans = -1;
        break;
      } else {
        ans += map.get(t[i]); 
      }
    }

    answer.push(ans); 
  });
    return answer;
}

keymap으로 넘어오는 값을 배열로 착각하고 forEach로 풀었더니 초반에 오류가 발생했는데

for 반복문으로 푸니까 바로 해결이 되었다 ㅎㅎ 간단한문제! 

function solution(begin, target, words) {

    if (!words.includes(target)) return 0;

  
    let queue = [[begin, 0]]; 
    let wordAll = new Set(words); 
    let now = begin;
    let answer = 0;
 
    function findSimilar(word1, word2) {
        let diff = 0;
        for (let i = 0; i < word1.length; i++) {
            if (word1[i] !== word2[i])
                diff++;
            if (diff > 1) return false; 
        }
        return diff === 1; 
    }

  
    while (queue.length > 0) {
        let [current, step] = queue.shift();

      
        if (current === target) return step;

     
        for (let word of wordAll) {
            if (findSimilar(current, word)) {
                queue.push([word, step + 1]); 
                wordAll.delete(word); // 방문한 단어는 Set에서 제거
            }
        }
    }

  
    return 0;
}

아직도 이해가 잘 안 된다.........................

https://school.programmers.co.kr/learn/courses/30/lessons/42840

function solution(answers) {
  var answer = [];
  var ansMap = new Map();
  ansMap.set(1, 0);
  ansMap.set(2, 0);
  ansMap.set(3, 0);

  var one = [1, 2, 3, 4, 5];
  var two = [2, 1, 2, 3, 2, 4, 2, 5];
  var three = [3, 3, 1, 1, 2, 2, 4, 4, 5, 5];
  var myAnswer = [one, two, three];

  answers.forEach((a, idx) => {
    myAnswer.forEach((m, num) => {
      if (a === m[idx % m.length]) {
        ansMap.set(num + 1, ansMap.get(num + 1) + 1);
      }
    });
  });

  let res = [ansMap.get(1), ansMap.get(2), ansMap.get(3)];

  function findMaxIndices(arr) {
    if (arr.length === 0) {
      return [];
    }

    const maxValue = Math.max(...arr);

    const maxIndices = arr
      .map((value, index) => (value === maxValue ? index + 1 : -1))
      .filter(index => index !== -1);

    return maxIndices;
  }

  return findMaxIndices(res);
}

먼가 구질구질하게 푼 것 같지만...일단풀었다 ㅎㅎ 

https://school.programmers.co.kr/learn/courses/30/lessons/86491

function solution(sizes) {
    var answer = 0;
    var width = 0;
    var height = 0;
    var size = sizes.map((s)=>s[0]>s[1]?[s[1],s[0]]:s);
    size.forEach((s)=>{
            if(s[0]>width)
                width=s[0]
            if(s[1]>height)
                height=s[1]
          } 
        )
        
    return width*height;
}

width, height 비교해서 내부 정렬하고

다시 forEach 돌려서 비교하면 끝 ~ 

https://school.programmers.co.kr/learn/courses/30/lessons/42748

function solution(array, commands) {
    var answer = [];

    for(i of commands){
        let larray = [...array];
        let trim = larray.slice(i[0]-1,i[1]).sort((a,b)=>a-b);
        var num = trim[i[2]-1];
        answer.push(num);
    }

    return answer;
}

slice와 sort 같은 자바스크립트 메서드를 쓸 줄 안다면 쉽게 풀 수 있는 문제

**splice는 원본 배열을 변경하는 메서드로 이 문제에서는 사용하면 안 됨! 

https://school.programmers.co.kr/learn/courses/30/lessons/1845

function solution(nums) {
    var max = nums.length/2;
    var ponkemon = new Map();
    for(i of nums){
        if(!ponkemon.has(i))
            ponkemon.set(i,1);
        else 
            ponkemon.set(i,ponkemon.get(i)+1);
    }
    if(ponkemon.size<max)return ponkemon.size;
    else return max;
}

해시맵으로 각 폰켓몬별 마릿수를 구하고, 

폰켓몬 / 2 값보다 폰켓몬 종류값이 큰 경우 폰켓몬 / 2 값을, 

아닐 경우 폰켓몬의 종류값을 .size로 구해서 리턴하면 된다. 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map

자바스크립트의 해시맵을 사용할 줄 안다면 쉽게 풀 수 있는 문제다! 

https://emotion.sh/docs/typescript

이모션 공식 문서대로 

tsconfig.json 파일 안에 

{
.
.
.
.

"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"
}

이 부분을 추가하자!

css-in-js 스타일 라이브러리중에 emotion이 코드도 깔끔하고 수정이 쉬워서 자주 사용중인데

프로젝트에 typescript를 도입하니 여기저기 에러가 튀어나온다 ...

번들러랑 바벨 다루는게 더 익숙해져야겠지 ~.~