incodevelop

과제 중 이슈 1 - useRef는 이전 포스팅에서 다뤘던 바와 같이 2가지의 기능이 있다. 1. 저장공간 2. DOM 요소의 참조기능 여기서 2번의 DOM 요소를 참조할 때에는 ref가 부여되는 시점을 잘 알아야 한다. useRef를 통한 ref의 부여는 컴포넌트가 위에서 아래로 다 렌더링이 다 되고 부여된다. 따라서, ref.current로 특정 태그를 참조하려고 했는데 컴포넌트가 다 렌더링 되기 전에 ref가 부여되어서 undefined가 뜨며 참조할 수 없었다. {click ? ( ) : ( {foundLetter.content} )} 해결법 - 렌더링이 다 되고 ref가 부여되도록 해야겠다. 렌더링이 다 된 후 함수가 실행되도록 하는 기능: useEffect useEffect(() => { if..

useSate - state의 상태를 저장하는 기능 - state의 상태가 바뀔 때마다 렌더링 됨 useRef 1. 저장공간 - state와 비슷하게 저장기능이 있음 - But, ref에 저장한 값은 바꾸더라도 re-렌더링 되지 않음(= 페이지의 다른 변수들이 초기화되지 않음) - 거꾸로, 100번 렌더링 되어도 ref에 저장한 값은 유지됨 - 개인적인 생각으로 state는 "상태" 를 저장하는 것인데, ref는 "값"을 저장하는 느낌 => useState는 리렌더링이 꼭 필요한 변수에 사용하고, useRef 리렌더링이 굳이 필요하지 않은 변수에 사용하면 좋을 것 같음 (ex. id, 비밀번호.. etc) 2. DOM 요소의 접근 수단 - 리액트를 배우기 전 vanilla javascript에서 썼던 g..

1. 문자열의 불변성 - 직접 수정 불가 JavaScript에서 문자열은 불변(immutable)하기 때문에 문자열의 특정 인덱스에 직접 접근하여 수정하는 것은 불가능 -> 문자열을 수정하려면 해당 문자열의 일부분을 추출하고, 수정된 부분을 새로운 문자열에 추가 ex) let word = "try"; let newWord = ""; for (let i = 0; i String.fromCharCode( i + 97 ); Array(26).fill().map((v,i) => String.fromCharCode( i + 65 ); 7. 만약 z에서 다시 a로 넘어가고 싶다면? function solution(s, n) { let arr = Array.from(s); const alphabetUpperList ..

1. map을 쓸 때는 - 내가 원하는 반환 값이 그 배열의 길이만큼 반환하는지!! 먼저 확인 - 그 배열의 "요소"를 가공해서 새로운 배열을 반환 - return 뒤에 로직이 새로 반환될 배열의 요소 다 아는 거 같다가도 헷갈린다.. 2. forEach는 - 원래 반환값이 없고 안에 return 문이 있어도 undefined가 반환됨 그럼 언제 쓰이냐? (1) forEach 문 안에서 요소마다 함수를 실행하거나 const numbers = [1, 2, 3, 4, 5]; numbers.forEach((number) => { console.log(number); }); (2) 요소마다 "수정"할 때 효과적 const numbers = [1, 2, 3, 4, 5]; numbers.forEach((number..

1. 프로그래머스 문제 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. - 나의 첫 답변(오답) function solution ( arr1, arr2 ) { var answer = [ ]; for ( let i = 0; i { return a + arr2 [ i ][ i ] ; } ); answer. push ( newarr ); } return answer; } console.log ( solution ( arr1, arr2 ) ); - 이렇게 했더니 arr1 = [ [ 1, 2 ], [ 3, 4 ] ] 이고 arr2 = [ [ 5, 6..

1. typeof 연산자는 항상 문자열을 반환한다. 따라서, typeof 3 === number 은 항상 "false"를 반환한다. 2. 숫자인지 여부를 확인하기 위해서는 isNaN() 메서드를 이용해야 한다. - isNaN()은 값이 NaN일 때 "true"를 반환하고, 숫자일 때 "false"를 반환한다. 3. Javascript에서 NaN과 다른 값과의 비교는 불가능하다. NaN은 자기자신과 동등하지 않다고 판단한다. 예를 들어, let arr = ["a", 2, 3, 4], const found = arr .find((e) => isNaN(e)) 를 해서 found 라는 변수에 "a" 라는 문자가 담겼을 때, 즉 isNaN("a")가 true 일 때, if (a === NaN) 의 결과가 뭐라고 ..

1. string.substring(a,b) - a번째부터 b번째 전까지 문자열 자르기 let str = "Hello"; console.log(str.substring(2)); // "llo" console.log(str.substring(2, 4)); // "ll" console.log(str.substring(5)); // "" -> 아무것도 안나옴 : 마지막 문자열의 index +1 을 넣으면 "빈 문자열" 반환 console.log(str.substring(2, str.length)); // "llo" -> 2부터 끝까지 2. string.repeat(n) console.log("abc".repeat(1)); // "abc" console.log("abc".repeat(2)); // "abcabc..

1. ... Spread Operator (전개연산자) - let str = "12345" 일 때 [ ...str ] 은 뭐가 될까? (1) 하나의 문자열을 배열에 담았으니 [ 12345 ] 이렇게 한번에 들어갈까? (2) 아니면 배열로 넣는 거니까 [ '1', '2', '3', '4', '5' ] 일까? => 정답은 (2) [ '1', '2', '3', '4', '5' ] 이다. - let arr1 = [ a,b,c,d,e ] 일 때, (1)번과 (2)은 뭐가 다를까? (1) arr2 = arr1 - arr1 의 주소를 arr2 주소에 할당함 즉, 두 배열의 데이터 저장 주소가 같아짐 - 둘 중 하나가 변경되면 둘 다 변경 되어버림 (2) arr2 = [ ...arr1 ] : 얕은 복사 - 새로운 배열..

1. 배열.splice(a,b,c) - a : a번째 부터 시작해서 - b : b개를 빼고 - c : 추가할 요소들 - '사과', '바나나' => 제거된 요소들로 이루어진 배열을 반환한다(제거된 요소가 0개면 원본 배열을 반환) => 원본 배열이 변경된다. 2. 배열.slice(a,b) - a : a번째 부터 시작해서 - b : b번째 전까지 빼기 => 새로운 배열이 만들어진다 = 원본 배열은 변경되지 않는다. 3. Array(7).fill("*") - Array(7) 단독: 길이가 7인 배열이 만들어짐 - .fill("*") : 그 안의 요소를 *로 채움 => 길이가 7이고 그 안의 요소를 *로 채운 배열을 만듦 console.log(Array(4).fill("1")); // [ '1', '1', '1..

첫 번째 팀 프로젝트가 드디어 끝났다. 팀플을 할 때 배웠던 것을 작성해보자. 1. 함수, 변수를 따로따로 빼서 코드를 깔쌈하게, 다른 곳에서 오류없이 사용할 수 있도록 하자. 나는 detail.js 파일로 movie.js 파일에서 선언한 fetchMovies라는 함수를 import 해 오고 싶었다. 그래서 import 해왔는데 자꾸 에러가 나는 것이다. - 이유는 뭐였냐면, movie.js 에서 fetchMovies를 정의할 때 그 블록 안에 makeMovieCard 함수와 hideMovies 함수도 같이 실행되도록 정의를 해뒀었다. - 그래서 detail.js파일로 fetchMovies를 import 해 왔을 때, fetchMovies 함수만 써야하는 게 아니라 fetchMovies 안에 있는 mak..