잼굴 코딩공장

문제 1. 두 개 뽑아서 더하기 풀이순서 1. 이중 for문으로 배열내에 있는 것들 더해준다. 2. 더한 값들을 push한다 3. 중복제거한다 4. 오름차순으로 바꾼다. function solution(numbers) { var answer = []; for(i=0; i

문제 1. K번째 수 풀이순서 : 1. array.slice로 commands요구 사항에 맞춰서 자른다. 2. 오름차순으로 정렬한다. 3. commands 요구사항에 맞는 값을 push한다 function solution(array, commands) { var answer = []; for(i=0; ia-b); answer.push(arrayslice[commands[i][2]-1]) } return answer; } 문제 2. 숫자 문자열과 영단어 풀이순서 1. replace를 사용해서 영단어를 숫자로 변경한다. 2. 정규표현식을 사용한다. /gi /g = 모든 패턴검색, /i는 대소문자구분X 3. parseInt보다는 Number가 조금 더 빠름 function solution(s) { s = s ..

문제 1. 문자열 내 마음대로 정렬하기 풀이순서: 1. 문자를 오름차순으로 정렬한다. 2. n번째 원소 값의 비교를 통해서 정렬한다. 값이 크면 뒤로보내기 3. 주어진 문자가 같으면 문자열을 비교해서 더 큰 문자열을 뒤로 보낸다. function solution(strings, n) { strings.sort((a, b) => { // a[n]이 b[n] 보다 클 경우 뒤로 보낸다. if (a[n] > b[n]) { return 1; // a[b]이 b[n] 보다 작을 경우 앞으로 보낸다. } else if (a[n] b) { return 1; } else { retu..

문제 1. [1차] 비밀지도 풀이 순서: 1. 숫자로 받은 arr을 이진법으로 바꾼다. 2. 이진법으로 바꾼숫자를 n의 길이에 맞게 맞춘다. 3. if문으로 1이 있으면 #을, 없다면 공백을 넣는다. function solution(n, arr1, arr2) { var answer = []; for(i=0; i

1. HTML 변경, 조작하기 기본 틀 안녕하쇼 링크 버른 1) 제목을 변경해보자. 기존 자바스크립트에서는 let 제목 = document.querySelector('#title'); 제목.innerHTML = '반갑소' 이렇게하면 변경 됐지만, 타입스크립트는 에러가 난다. "제목"이라는 변수가 null일수 있다 --> 셀렉터로 html을 찾으면 타입이 Element | null 이라서 그럼 // html 못찾으면 null처리 됨 타입스크립트로 하는방법 총 5개 있다. ① narrowing let 제목 = document.querySelector('#title'); if (제목 != null) { 제목.innerHTML = '반갑소' } ② instanceof (★) let 제목 = document.qu..

요즘 좀 안했어서 다시 재활.. 문제 1. 최소직사각형 풀이 1. 명함은 회전가능 -> 가로 세로 비교해서 큰값은 가로, 작은값은 세로 2. 가로 길이 max값 X 세로길이 max값 => 모든 명함 OK function solution(sizes) { let width = []; let height = []; for(i=0; i

1. 타입스크립트를 쓰는이유 기존 자바스크립트는 타입에 관대하다. 10-"3"을 해도, parseInt([1,2,3]) 이런 이상한걸 넣어도 아무런 제지가 없다. => 타입스크립트는 이런걸 모두 잡아낸다. 근데 굳이? 작은 프로젝트들은 코드량이 그렇게 많지 않다보니 상관없지만, 협업프로젝트에서 코드량이 천줄, 만줄단위의 큰 프로젝트에서는 타입에러가 문제되는 경우가 있다. 남이 쓴 코드에서 에러가 발생했는데 알수없는 타입에러가 뜬다면 골치아프기 때문이다.. 그리고 에러가 나도 자바스크립트보다 더 구체적으로 에러원인을 알려준다. 2. 타입스크립트 기본 룰 1. 변수 옆에 :를 붙이고 타입을 지정해준다. let 타입1 :string = "문자" let 타입2 :number = "3" 타입으로 쓸수있는 것은 s..

영화제목, 개봉년도, 평균 평점 , 장르를 설정하는 컴포넌트들을 작성했다. 각 컴포넌트들은 각자 movieFilterReducer를 통해 state에 값을 저장하고 있으며, state에 저장된 값들을 전달인자로 movieFilterActions의 getFilteredMovies 함수를 통해 GET 요청을 하도록 한다. 문제 1. movieFilterReducer의 state에 저장된 각 필터링 값들을 movieFilterAction의 action에서 GET요청을 하기전에, redux의 useSelector를 통해 전달받으려 하였고 에러가 발생했다. 에러: React Hook "useSelector" cannot be called at the top level React Hooks must be calle..

컴포넌트 성능 최적화의 대표적인 방법에 useMemo와 useCallback이 있다. useMemo 훅에 대해 알아보자 1. useMemo란? 여기서 Memo는 Memoization을 뜻한다. Memoization이란 동일한 값을 리턴하는 함수를 반복적으로 호출해야한다면 맨처음값을 계산할때 해당값을 메모리에 저장해서 필요할때마다 계산하지않고 메모리에서 꺼내쓰는것이다. 자주 필요한값을 캐싱을 해둬서 캐시에서 꺼내 쓴다는 느낌 함수형 컴포넌트는 함수이다. 함수형 컴포넌트를 렌더링 한다 = 함수를 호출한다. => 모든 내부 변수가 초기화 된다. 그렇다고 남용하면 성능이 안좋아질수도 있다. 무거운거만 따로 메모리에 저장해두는거라 별 필요없는거까지 해두면 성능 그닥~~ 2. useMemo의 구조 const val..

언제 쓰나? 1. 렌더링을 발생시키지 말아야하는 값을 다룰때 편리하다 어떤 값을 저장하는 저장공간으로 사용된다. State의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화됨. 원하지 않는 랜더링이 될때가있다. Ref가 변화하면 렌더링이 일어나지 않아서 변수들의 값이 유지된다. State의 변화가 일어나서 렌덜이이 되어도 Ref의 값은 유지된다. 2. Ref를 통해서 Dom요소에 접근할수있다. 일단 제일 중요한건 Ref는 렌더링 되지않는다이다. 간단하게 카운트 버튼으로 설명해 본다 import React, { useState, useRef } from 'react' import '../Pages/test.css' const Test = () => { const [count,setCount] = use..