Hojin

알게된 점:

 str.repeat(num);  :  str를 num 만큼 반복시킬 수 있다.

이러면, 굳이 for문과 while같은 반복문을 사용 안해도 된다.

-Math.trunc(num) : 소수부분을 버리고 정수만 출력.

버블 정렬, 선택 정렬, 삽입 정렬

모두 다 O(n^2) 복잡도를 가지고 있지만,

버블, 삽입 정렬이 모든 상황을 고려해 괜찮고

버블, 선택 정렬이 조그마한 DB관리에 좋다고 한다. 

(어려워서 나중에 정리...)

대표로 삽입정렬만 남겼다.

function insertionSort(arr) {
  const len = arr.length;
  for (let i = 1; i < len; i++) {
    let current = arr[i];
    let j = i - 1;

    while (j >= 0 && arr[j] > current) {
      arr[j + 1] = arr[j];
      j--;
    }
    arr[j + 1] = current;
  }

  return arr;
}

// 예시 사용법
const array = [5, 2, 4, 6, 1, 3];
const sortedArray = insertionSort(array);
console.log(sortedArray); // [1, 2, 3, 4, 5, 6]

# 문제 풀면서 알게된 점

let str;
let str1= 'abc'

console.log('undefinedabc');

// str은 타입을 적지않아서 저렇게 뜬다.
// abc만 출력하기 위해선 let str= ''; 로 초기화 해준다.

// 백슬래쉬를 콘솔 창 띄우기 위해선 두번 작성한다.

console.log('\\');
// 결과값: \

#프로그래머스 대소문자 바꿔서 출력하기

 let arr= [...str];
    let result="";
  let ar =arr.map(el=>{
        if(el=== el.toUpperCase()) return el.toLowerCase();  //대문자이면
        else if(el=== el.toLowerCase()) return el.toUpperCase();  //소문자이면
        else return el.toUpperCase();
    })  
    for(let i=0; i<ar.length; i++){
        result+=ar[i]; 
    }

    console.log(result);

map, for문을 굳이 두 번 써서 출력해줬다.

왜냐하면 ...ar spread 표현식으로 해줄라 했는데 A b C  이런식으로 띄어서 출력됐다.

*알게된점..  => join(''); 함수를 사용하자.

ar.join(''); 을 사용하면 문자열을 합해준다.

결국, for문을 사용하지 않아도 되게 된다.

그리고 forEach((index,value)=> {

})

를 사용하면 더 명시적이고 직관적이다.

고전한 문제

- 다시 정리할 것

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

 const myStr = [...my_string]
    myStr.splice(s, overwrite_string.length, overwrite_string)
    return myStr.join("")

<!-- css 파일 적용 -->
    <link rel="stylesheet" href="style.css">
    <!-- js 파일 적용 -->
    <script src="app.js"></script>

 css와 js파일을 html에 불러오는 방법은 다르다.

<form class="search" onsubmit="handleSearch(event)">

검색 버튼 클릭 시 이벤트 변수를 보내준다.

function handleSearch(event) {
  searchMode= true;
  event.preventDefault(); // 기본 동작 취소

  const elements = document.getElementsByClassName('movie-card');
while (elements.length > 0) {
  elements[0].parentNode.removeChild(elements[0]);
}

handleSearch()에서 searchmode가 true로 된다. 기존에 있던  movie-card요소들을 다 제거 해주고

 let searchInput = document.getElementById("search-input");
  keyword = searchInput.value;

받아온 인풋값을 keyword에 저장한다.

function showList(){
    fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
    .then(response => response.json())
    .then(response =>  {
        const movies = response.results;
      
        
        if(searchMode=== true){
          let movie =movies.filter(movie => {
            return movie.title.includes(keyword);
          })
        
          console.log(movie);
        
          movie.forEach(movie => {
    
              makeCard(movie);
    
            });

        }

showList()에서 fetch해온 movies 정보들을 받아오고 만약, 검색 모드이면 

키워드에 맞는 영화 정보들만 가져온다. (filter 사용)

  if(searchMode === false){
        movies.forEach(movie => {
           // console.log(movie);

           makeCard(movie);

        });
      }

    }

검색모드가 아닐때는 forEach로 영화 정보들을 card에 넣어준다.

showlist는 처음 시작할 때, 한 번 실행 된다.

function makeCard(movie){
  let moviesContainer = document.getElementById('card-list');
  
 ```
 
  card.appendChild(poster);
  card.appendChild(vote_average);

  moviesContainer.appendChild(card);
  
  }

영화 카드 뷰를 만들어주는 함수이다.

많은 부분이 생략됐지만 결국에는 요소를 생성해주고 영화 정보들을 하나의 카드에 넣어주는 작업이다.

*

event.preventDefault(); // 기본 동작 취소

클릭 이벤트 발생해도 화면이 깜빡이지 않고 정적으로 유지된다.

영화 DB는 이 사이트에서 가져왔다.

https://www.themoviedb.org/?language=ko 

조잡한 UI를 꾸며줄 일만 남았다.

function getTruthyArray(arr) {
	const truthyArr = [];
	// 이 부분을 완성해 보세요.
	var array= new Array();

	arr.forEach(element => {
		if(Boolean(element) === true){
			array.push(element);
		}
	});
	//truthyArr= {array}
	// truthyArr= {arr}

	// return truthyArr;
	return array;
}

const result = getTruthyArray( [-1, 0, "", {}, [], null, undefined, NaN ] );
console.log(result); // 출력 결과: [-1, {}, []]

배열에서 Boolean값이 true로 적용되는 값을 받아오면 되는 문제였다.

나는 처음에 pop을 사용해서 배열의 값이 false이면 사라지게 할라고 했다.

Mdn에서 검색 결과이다. 마지막 요소를 제거한다는 걸 간과하고 있었다.

결국엔, push()를 이용해 true가 아닌 값들을 밀어내면 되는 문제였다.

---

function getGrade(score) {
	// 이 부분에 코드를 작성하세요.
    if(score> 90){
        return 'A'
    }else if(score > 80){
        return 'B'
    }
    else if(score> 70){
        return 'C'
    }
    else if(score > 60){
        return 'D'
    }else return 'F'
}

처음에 if() 구문에

if(90<grade<=)

이런식으로 grade가 가운데 있는 if구문을 사용하려 했는데

이상하게 오류가 떴다. 알고보니 자바스크립트에서는 

저렇게 단일 비교 연산을 사용해야 되는 거였다.

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

function solution(strings, n) {
    var answer = [];
    
     strings.sort((a, b) => {
            if (a[n] < b[n]) {return -1;}
            else if (a[n] > b[n]) {return 1;}
            else if (a < b) {return -1;}
            else if (a > b) {return 1;}
            return strings
    });
    answer= strings;
    return answer;
}

string 안에 단어로 이루어진 배열이 들어가고 n은 몇 번째 낱말이 오름차순으로

앞에 오느냐를 판단한다.

도저히 못 풀겠어서 답을 봤는데 공식이었다.

a b 둘 중 b가 크다고 하면 return -1 

a가 크면 return 1 

함수를 빠져나가면 놀랍게도 오름차순 형태의 배열이 완성된다.

이거는 공식으로 외어야 풀 수 있겠구나 싶었다.

물론 다른 방식으로 풀 순 있지만 생각이 안 났다.

'호이스팅'을 배우기 전과 후의 코드의 해석 차이는 다르다.

var b= 3;
// 여기서 var b;가 호이스팅 되고
// 그래서 b=3; 은 아래만 따로 나중에 읽힌다.

function b() {
}
// 함수 b()전체가 호이스팅 된다.

var sum= function(x,y){}
//이렇게 변수로 쓰여야 코드 혼란을 사전에 막을 수 있다.
// 그러므로 함수 표현식으로 함수를 표현해야 혼란을 막을 수 있다.

함수와 매서드는 같아보이지만

: 함수는 호출 주체가 없고 스스로 수행될 수 있다.

매서드는 누군가 실행시켜줘야 한다. 호출의 주체로는 . 과 []가 있다.

As-Is : 기존거

To-be: 이후 거

일반함수와 화살표 함수의 차이는: this binding의 여부이다.

function solution(absolutes, signs) {}

https://school.programmers.co.kr/learn/courses/30/lessons/76501?language=javascript 

 저 안에 absolutes 안에 절대값 배열이 들어가고 signs에는 +-를 boolean으로 표현한 배열이 들어있다.

두 배열을 조합하고 더한 값을 출력해주는 문제이다.

처음에는 어떻게 할지 난감했다.

근데 잠깐 생각하니 쉬운 문제였다. 이미 +인 숫자는 -로 변환해줄 필요가 없다.

그래서 false인 값만 forEach로 돌려서 (그 숫자)*= -1  해주고 정답 변수에 모두 더해주면 답이 나왔다.

배운점: forEach만 적고 엔터치면 vscode에서 자동으로 형식 만들어줘서 편리하다.

TIL 특강을 듣고

TIL은 곧 '앎의 증명이다.'

어떤 문제에 대하여 뭘 시도했는지와 뭘 알게되었는지가 중요하다.!!

key-value가 동일한 객체는 생략 가능하다?

Obejects

.keys : key 나열

.values

.entries : key-value값 형태로 나열

.assign([객체명] , 객체 {name: "Hojin"}) : 객체 복사

* 객체는 저장되는 장소가 다르기 때문에 같은 객체라도 (===) 연산 해보면

다르다고 뜸.

Json.stringfy()  : 객체를 문자열화

...: spread oprator : 펼쳐서 표현함.

 ->

let str= "hello";

console.log(...str);

결과: h e l l o

배열

push(" ");  : 맨 뒤 배열에다 값을 추가해줌

pop();  : 맨 뒤의 인덱스 값을 없애줌.

shift();  : 맨 앞에 값을 추가해줌.

unshift();  : 맨 앞에 값을 없애줌.

.splice(1,2, "포도");   -> 1~2 인덱스의 값을 없애고 "포도" 를 넣어줌.

.slice(0,2);   -> 0~ 1 인덱스 값을 가져옴.

forEach(function(item){});

Es6 문법이란 ?

자바 스크립트에 추가된 편리해진 문법이다. 보편적으로 쓰인다.

// 어떤 문제에 대하여 뭘 시도했는지와 뭘 알게되었는지가 중요하다.!!

1강을 듣고 첫 번째 문제를 풀어보았다.

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

간단한 문제인데 알고리즘을 공부안한 나에겐 쉽지 않았다.

s가 문자열이 들어있는 변수인데,

이걸 그대로 배열 변수에 넣으니 당연히 0번째 인덱스에 "${s}" 가 되었다.

문자열 알파벳 숫자만큼 배열을 만들고 그 배열을 소문자든 대문자든 바꾸어주고

그 배열에 y와 p가 몇개 들어 있고 그 두 개수의 값이 다른지 같은지 알아내는 문제이다.

그래서 구글링 해본 결과, 문자열을 let str =...s;

이렇게 하면, 배열이 생성되고

let pArray= arr.filter(item=> item=== "p" || item=== "P");

그 배열에 해당 알파벳이 있는지 확인해주었다. y도 마찬가지로 진행한다.

그래서, 배열 크기도 구하고 조건문으로 비교해주어서 해결하였다.

알게된점: 화살표 함수의 간편함. 그렇지만, 익숙치 않음.

저 위에있는 arr.filter(function(item){

    return item === "p";

});

이게 곧, arr.filter(item => item === "p");

이렇게 코드가 단순화된다.

새로 배운 거 적기

기본 문법 배우기

변수 선언 

var let const

var egg= "big_egg";

-> var : 변수를 선언하고 같은 이름으로 값을 저장 가능.

-> let : 그렇게 까진 불가능. 하지만, 미리 지정한 이름으로만 하면 계속 그 안에 값을 지정 가능.

-> const: 한번 지정하면 아예 변경 불가.

명시적 vs 암시적 형변환

명시적:  예를 들면 , var num =Number("32");

암시적:

3+ "2"

let num= 3+"2"
num= 32

//즉, string형으로 암시적 변환됨.
//허나, +가 아닌 -, *, /, % 는 적용안됨.

let multiply= 3 * "2";
multiply= 6;

NaN : Not a number , 

Infinit : 1 / 0  

-Infinit: - 1 / 0

삼항연산자: y > 10? "y가 더 크다 ": "아니다";

화살표 함수

let add(x,y) => y;

코드가 두줄 이상이면 {} 로 감싸준다.