0. 컴포넌트React는 UI를 작고 이해하기 쉬운 컴포넌트 단위로 나눠 프로젝트를 구조화한다 (Structure).기능별로 나눈 컴포넌트는 재사용성(Reusability)이 높고,복잡한 로직이 있더라도 외부에서는 단순한 이름으로 사용할 수 있어 추상화(Abstraction)에 유리하다.이로 인해 개발자는 전체 흐름에 집중할 수 있고,UI가 변경될 경우 해당 컴포넌트만 수정하면 되므로 유지보수(Maintainability)가 쉬워지고 안정성도 높아진다. React 에는 두 가지 종류의 컴포넌트가 있다. 클래스 컴포넌트와 함수형 컴포넌트이다.두 컴포넌트는 동일한 작업을 수행할 수 있지만, 구문과 특정 기능 사용 방법에 차이가 있다. import React from 'react';import { creat..
iTerm2 설치Mac 에 깔린 기본 터미널 말고 iTerm2 를 쓰자.탭기능과 분할 창을 쓸 수 있고 커스터마이징도 된다. https://iterm2.com/ iTerm2 - macOS Terminal ReplacementiTerm2 by George Nachman. Website by Matthew Freeman, George Nachman, and James A. Rosen. Website updated and optimized by HexBrainiterm2.com oh my zsh 설치- zsh 쉘 프레임워크- 터미널 외관 및 플러그인(자동완성, 구문강조, Git 통합 등 다양한 기능 제공) 추가 가능sh -c "$(curl -fsSL https://raw.githubusercontent.co..
git clonecd 원하는경로git clone 리포지토리주소 1. 리포지토리 생성 후 url 복사2. 원하는 경로로 이동3. clone으로 리포지토리 파일 내려받기 git configgit config --global user.name 깃아이디git config --global user.password 토큰 이때,fatal: Authentication failed for '리포지토리주소'에러가 뜰 경우, 깃 설정에서 토큰 발급 후 로컬 컴퓨터에 깃 정보 등록 ▼ 추천 게시글 Github 에러 해결법: Authentication failed for ~ use a personal access token insteadGithub 을 사용하다 보면 2021년 8월 이후로 git pull 을 하려 할때에 아래..
1. findLast / findLastIndexfind() 는 앞에서부터 조건을 만족하는 첫 요소를 찾고,findLast() 는 뒤에서부터 찾는다. const numbers = [1, 2, 3, 4, 5, 6];console.log(numbers.find(n => n % 2 === 0)); // 2console.log(numbers.findLast(n => n % 2 === 0)); // 6console.log(numbers.findLastIndex(n => n % 2 === 0)); // 5 2. toSorted / toReversed / toSpliced / with원본 배열은 변경하지 않고, 새로운 배열을 반환한다.React 같이 불변성 유지가 중요한 프레임워크에서 유용히..
1. replaceAllreplace 는 첫번째 키워드만 바꿀 수 있지만replaceAll 은 문자열의 모든 키워드를 바꿀 수 있다.const str = "You are the best of the best";const str_1 = str.replaceAll('best', 'worst');// "You are the worst of the worst"const str_2 = str.replace('best', 'worst');// "You are the worst of the best" 문자열은 불변(immutable) 타입이기 떄문에 문자열 자체를 바꿀 수 없다.대신, replace() 같은 메서드로 원본을 직접 수정하지 않고, 새로운 문자열을 반환해 사용한다.이때, let 으로 선언한 문자열은 재..
1. Optional Chaining: ?. : 값이 있을 수도 있고 없을 수도 있는 상황에서 주로 사용한다. 중첩 객체의 특정 속성에 접근하기 위해서 기존에는 일일이 And 로 연결해 속성의 존재 여부를 확인해야 했다.하지만 이렇게 되면 코드가 너무 길어지고, 조건문 속 속성이 없을 경우 TypeError 에러가 뜰 수 있다. 옵셔널 체이닝 (A ?. B) 은 A가 undefined 나 null 이면 바로 undefined 를 반환하고 에러 없이 멈춘다. 또한, 코드가 간결하고 읽기 쉬우며null 체크를 매번 하지 않아도 돼서 실수가 줄어든다. let will_pokemon = { pikachu: { friend: { charizard: { ..
0. map 이란: 기존 배열을 변형(각 요소를 가공)해서 새로운 배열을 반환한다.: 기존 배열은 변경되지 않는다. (불변성 유지): 콜백 함수를 인자로 받고, 원본 배열의 각 요소를 순회하면서 변형된 값을 새 배열에 저장한다.- 숫자 변환, 데이터 매핑 등, 배열의 각 요소를 변형해야 하는 경우 유용하다. ※ reduce() 는 배열을 순회하며 하나의 최종 값을 반환할 때 쓰인다. (합계, 평균, 객체 변환 등)※ forEach() 는 배열을 단순히 순회하고 작업을 수행할 뿐, 반환값은 없다. const newArray = oldArray.map((element, index, array) => { return 변환된_값;});element - 현재 배열 요소index - 현재 요소의 인덱스 (선택사항..
1. flat / flatMapArray.prototype.flat(n): 중첩된 배열을 펼쳐서 1차원 배열로 만든다. - n이 빈값이면 기본적으로 1단계만 펼침- n단계까지 펼치고,- 특정 숫자를 지정하기 어려울 때 Intinity 를 넣으면 배열의 depth 와 관계없이 1차원 배열로 만든다.const array = [[1],[2],[3],[[[4]]],[[[5]]]]console.log(array.flat(2)) // [1,2,3,[4],[5]]const trapped = [[[[[[[[[[[[[[[[[[[[[[[[[[3]]]]]]]]]]]]]]]]]]]]]]]]]];console.log(trapped.flat(Infinity)) // [3] Array.prototype.flatMap(): map..
