A Developing Developer

1. 작업 표시줄 [확장] 탭에서 "Prettier - Code formatter" 설치 2. 설정 (Ctrl + ,) 에서 "format on save" 검색 3. Editor : Format On Save 체크 4. 설정 (Ctrl + ,) 에서 "default formatter" 검색 5. Editor : Default Formatter 에서 Prettier - Code formatter 로 설정

2. 첫번째 프로젝트: 가위바위보 게임 - 프로젝트 생성 npx create-react-app *** - onClick 사용 시 주의할 점 play("scissors")}>가위 ------------------------- 콜백함수 형태로 함수를 전달해 줘야 바로 실행시키지 않는다. - UI 를 바뀌가 하고 싶으면 state 에 만든다 - react 로 FE 개발 중 주의할 점 ------------ props.item이 있을 때만 props.item.img를 참조하도록 (가드) 위의 예시 처럼 props.item 이 있을 경우 그러니까 사용자가 선택을 했을 경우에 만 props.item.img 를 불러오도록 해서 선택하지 않았을 경우 발생하는 에러를 사전에 방지해야한다. (가드값!) - 랜덤한 값 뽑는..

1. 리액트 기초 - 프로젝트 생성 npx create-react-app first-react - 프로젝트 열기 code . - 프로젝트 후 설치! ES7 React-Native snippets - SPA : Single Page Application 웹사이트에 페이지 단 하나 - 리액트 컴포넌트 자동생성 rafce (React Arrow Functionexport ComponEnt) - component (컴포넌트) : 내가 필요한 태그를 만들어서 쓰는것 (원하는 태그들을 모아서 하나의 태그로) [재활용] 관련있는 HTML 과 JS 를 함께 둔다 - props : 함수의 매개변수와 같은 역할 - state : UI 에 보이는 값은 무조건 state 로 만들어야한다. 변수는 새로 랜더 될 때마다 초기화 ..

주로 배열에서 사용되며, 두 개 이상의 배열이나 값을 합쳐 새로운 배열을 만드는데 사용된다. 주어진 인수를 기존 배열에 연결하여 새 배열을 생성한다. 원래 배열은 변경되지 않는다. [Ex] const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, 8, 9]; // 배열 연결 const result = arr1.concat(arr2, arr3); // 결과 출력 console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8, 9] concat 메소드는 문자열에서도 사용할 수 있지만, 문자열에서는 '+' 연산자를 사용하여 문자열을 연결하는 것이 좀 더 일반적이다. [Ex] const string1 = 'Hello, '; con..

배열의 첫 번째 요소를 제거하고 그 값을 반환한다. 이 메소드는 기존 배열의 길이를 줄이며, 배열이 빈 경우 undefined를 반환한다. [Ex] let array = [1, 2, 3]; let firstElement = array.shift(); // firstElement는 1, array는 [2, 3]이 된다.

배열에서 중복 요소를 제거할 때 사용된다. Set 객체는 고유한 값을 보유하는 컬렉션으로, 이를 사용하여 고유한 요소만 포함하는 새 배열을 생성할 수 있다. [구문의 각 부분을 설명] new Set(): Set 객체를 생성. 이 컬렉션의 고유한 특징 때문에 중복된 값을 포함하지 않는다. new Set(array): 배열을 Set 객체의 인수로 전달하여 중복을 제거하고 고유한 요소들만 포함하는 Set 컬렉션을 생성 [...new Set(array)]: 스프레드 연산자(...)를 사용하여 Set 객체의 요소를 새로운 배열로 변환. 이렇게 하면 중복이 제거된 새로운 배열이 생성된다. [Ex] const uniqueArray = [...new Set([1, 2, 2, 3, 4, 4, 5])]; // 결과: [1..

- Map Map 객체는 키-값 쌍으로 이루어진 데이터를 저장하는 자료구조이다. 여기서 키는 중복되지 않으며 값은 중복이 가능하다. - set() set() 메소드는 Map 객체에 새로운 키-값 쌍을 추가하거나 이미 있을 경우 값을 업데이트하는데 사용된다. [사용법] map.set(key, value); key는 Map 객체에 추가될 키를 나타내며, value는 해당 키와 관련된 값을 나타낸다. 만약 key가 이미 존재하면, 기존의 값은 새로운 value로 대체된다. 이를 이용하여 원하는 키-값 쌍을 지정하거나 이미 있는 키-값 쌍을 수정할 수 있다. - get() get() 메소드는 Map 객체에서 지정된 키와 연관된 값을 가져온다. [사용법] map.get(key); key는 가져올 값과 연관된 키를..

펼침 연산자 (Spread Operator)를 사용하여 배열 arr의 모든 요소를 새로운 배열에 펼쳐 분리시킨 것을 의미한다. 펼침 연산자는 배열이나 객체의 모든 요소를 복사하여 새로운 컨테이너에 펼쳐 넣는 역할을 한다. 이를 통해 기존 배열의 요소를 새로운 배열에 얕은 복사(Shallow Copy)하여 생성할 수 있다. [Ex] arr이 [1, 2, 3]이라면 [...arr]의 결과는 [1, 2, 3]이 되며, 이 새로운 배열은 기존 arr 배열의 복사본이다. 이렇게 만든 새로운 배열은 원본 배열과 독립적이므로, 새로운 배열의 요소를 변경해도 원본 배열에 영향을 주지 않는다. 이를 주로 사용하여 배열을 병합하거나 내용을 수정할 때 원본 배열에 영향을 주지 않을 수 있다.