안녕, 반가워 안녕, 반가워

자바스크립트 배열 메서드 [1편] 배열 요소 삭제 메서드 📋 원본 배열을 수정! 불변성 깨트림 💔 ⚪ pop() 배열에서 마지막 요소를 제거하고 그 요소를 반환한다. ⚪ shift() 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환한다. 이 메서드는 배열의 길이를 변하게 한다. ⚪ splice() 메서드 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. array.splice(startIndex, deleteCount, item1, item2, ...); ☑️ startIndex (배열의 변경을 시작할 인덱스) ☑️ deleteCount (배열에서 제거할 요소의 수 / 옵션 요소) ☑️ item1, item2, ... (배열에 추가할 요소 / 옵션 요소) 📋 원..

👀 얕은 복사와 깊은 복사 도대체 무슨 말인지 이해가 안가요!?!? 우리가 아는 복사라는 단어의 뜻은 원본을 copy한다. 예를 들어 종이를 복사하게 되면 원본 종이가 그대로 존재하고, 복사본 종이가 생기는 것이다. 바탕화면에 '안녕'이라는 폴더를 복사하면 '안녕_복사본' 폴더가 생기는 것이다. 이해를 돕기 위해 간단한 예를 들어 들어 보았다. 깊은 복사란 우리가 알고 있는 복사의 개념이고, 얕은 복사란 덮어쓰기 되었다 라고 생각하면 이해하기 수월 할 것 같다. 📋 얕은 복사 Shllow Copy 얕은 복사는 바로 아래 단계의 값만 복사는 방법 📋 깊은 복사 Deep Copy 깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법 📔 얕은 복사와 깊은 복사에 대해 왜 이해를 하고 넘어가야 할..

Set 객체 Set 객체는 ES6에서 등장한 중복을 제거한 값들의 집합이다. 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있다. Set 객체 선언 // 매개변수 있을 경우 const iterable = [ 1, 2, 3, 3, 3, 4, '4', '안녕', ('이호', '35'), { 'a' : 1 }, 2, ]; let mySet = new Set(iterable); // 매개변수 없을 경우 let mySet = new Set(); 매개변수에 반복 가능한 객체가 전달된 경우, 그 요소는 모두 새로운 Set에 추가가 된다. 만약 매개변수를 명시하지 않거나 null을 전달하면, 새로운 Set은 비어 있는 상태가 된다. Set 객체 사용 1️⃣ add (특정 요소 추가 메서드) ad..

자바스크립크의 선언에는 var, let, const 딱 3가지 방법만 있다. 📌 ES6 문법부터 let, const 추가 됨 📋 변수 변수란 프로그램을 실행하는 도중에 임의의 값을 저장해 두고 읽을 수 있는 가상 공간을 말한다. 즉, 변경 가능한 데이터가 담길 수 있는 공간 또는 그릇이라고 생각하면 된다. 📋 변수 선언 기본적인 변수 선언하는 방법이 아래와 같다. var a; "변할 수 있는 데이터를 만든다. 이 데이터의 식별자는 a로 한다." 📎 var var 는 변수를 선언하고, 선택적으로 초기화할 수 있다. ☑️ 변수 중복 선언 가능 ☑️ 변수 재할당 가능 ☑️ 함수 레벨 스코프 (function-level scope) ☑️ 변수 호이스팅 발생이 let과 const 와 다른 방식으로 작동 ☑️ va..

📋 클래스형 컴포넌트와 함수형 컴포넌트 리액트 컴포넌트는 클래스형 컴포넌트 또는 함수형 컴포넌트로 작성될 수 있다. 클래스형 컴포넌트는 상태값을 가질 수 있고, 리액트 컴포넌트의 생명 주기 함수를 작성할 수 있다. 그러나 함수형 컴포넌트는 이 모든 일을 할 수 없다. 이 둘의 차이점은 상태값과 LifeCycle를 가질 수 있느냐 없느냐이다. 리액트 버전 16.8부터 훅(Hook)이 등장하면서 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성 할 수 있게 되었다. 📕 함수형 컴포넌트 ☑️ JSX를 return문을 사용해서 반환 ☑️ state를 사용할 수 없다 ☑️ 생명 주기 함수를 작성할 수 없다 import React from 'react'; function Hello({ color, name..

npm과 yarn은 Node.js와 Javascript를 위한 훌륭한 패키지 관리자입니다. 이번 시간은 npm과 yarn에 대해 알아보도록 하겠습니다. npm이란? Node Package Manager 전세계적으로 가장 많은 이들이 사용하고 있는 자바스크립트 언어를 위한 Node.js의 기본 패키지 매니저입니다. yarn이란? yarn은 페이스북에서 만든 자바스크립트 패키지 매니저입니다. 페이스북이 yarn을 개발 한 이유 yarn이 개발된 이유는 npm 패키지가 가지고 있는 특징으로 보안시스템에 취약하고 성능 및 설치 속도 개선을 위해 Facebook에서 yarn을 구축했습니다. npm과 yarn 특징 비교 npm 패키지 설치 순차적 🆚 yarn 패키지 설치 병렬 npm에서 여러 패키지를 설치할 때 다..

🐜 Mine 애플리케이션 프로젝트 - 예산 페이지 📋 리액트, 리덕스를 이용해서 input값을 변경하는 과정과 테스트 코드 작성에 대한 간략한 소개 오늘은 예산 페이지를 만들어 보겠습니다. 우선 가장 기본적인 기능 먼저 만들어 보겠습니다. 우리가 저장해야 할 중요한 데이터가 있습니다. 바로 사용자가 입력하는 예산 금액이 되겠죠! 먼저 리액트로 input에 입력한 값이 변경되어 보이도록 코드를 작성해보았습니다. useState함수를 사용해서 중요한 변수를 저장하였습니다. 그리고 input value값을 budget으로 데이터 바인딩을 하였습니다. 이제 입력창에 이벤트가 발생하면 value값이 변경되는 이벤트 핸들러를 등록하면 됩니다. 리액트에서는 데이터를 변경할 때 setter함수를 사용하면 됩니다. 입력..

안녕하세요. 이번 시간은 React에 내장된 기본 Hook useState, useEffect, useContext 중 useState 에 대해 공부 한 내용을 정리해보겠습니다. Hook이란 특별한 함수이다. Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. (공식문서참조 : https://ko.reactjs.org/) useState Hook이란? useState는 리액트를 배우게 되면 가장 먼저 배우게 되는 함수입니다. useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. State란? state(상태)는 리액트에서 화면을 ..