성빈

npm/yarn 과 같은 패키지 매니저를 통해 라이브러리들을 설치했을 때 package.json 파일이 생성된다. 이때 package.json 파일에는 dependencies와 devDependencies가 따로 작성되는 것을 확인할 수 있는데 이 둘의 차이는 무엇일까? ✅ dependencies 애플리케이션 동작과 관련된 라이브러리를 설치 dependencies 에 설치된 라이브버리는 배포할 때 포함된다. 설치 방법 : npm install 라이브러리명 ✅ devDependencies 애플리케이션 동작과 직접적인 연관은 없지만, 이름 그대로 개발할 때 필요한 라이브버리를 설치하면 된다. 개발할 때 필요한 라이브러리이기 때문에 배포할 때 포함되지 않는다. 설치 방법 : npm install 라이브러리명 ..

목차 리액트 상태 예제 (별점 프로젝트: StarRating, Star 컴포넌트 구성) 컴포넌트 상태와 상태 변경을 위한 useState() 컴포넌트 트리 예제 (색상 관리 앱) 폼 만들기 (참조 : ref) 리액트 상태 상태 (state) 리액트 컴포넌트의 데이터를 표현하는 객체 컴포넌트 내부에서 변경될 수 있는 값 ※ state와 props와의 차이점 리액트 컴포넌트에서 속성 (property)을 나타내는 데이터 컴포넌트의 매개변수로 전달받은 데이터 구조를 분해하면서, 데이터를 활용했었다. 읽기 전용 (변경 불가능) → 값을 전달하는 부모 컴포넌트에서 설정하고, 컴포넌트 자신은 읽기 전용으로만 사용된다. → 컴포넌트는 컴포넌트 외부의 데이터인 props를 수정하지 않는다. (순수함수의 개념 : sid..

목차 JSX Babel JSX 활용 예제 : Recipe React Fragments 웹팩 프로젝트 구성하기 JSX를 사용하는 리액트 JSX 자바스크립트 코드 안에서 바로 태그 기반의 구문을 써서 리액트 엘리먼트를 정의할 수 있게 해주는 JavaScript의 확장 문법 (JavaScript XML) HTML 코드를 작성하는 방법과 유사 JSX는 자바스크립트이므로 자바스크립트 함수 안에서 JSX를 직접 사용할 수 있다. 직관적이고 가독성이 좋음 element를 객체로 다루며, 표현식 포함 가능 변수 할당, 매개변수 전달, 함수 반환 등 일반 JavaScript 표현식으로 활용 가능 ○ 리액트 엘리먼트 표기 React.createElement(IngredientsList, {id:"1", ...}, chil..

목차 React element 생성 ReactDOM 렌더링 React 컴포넌트 1) 함수형 컴포넌트 2) 클래스 컴포넌트 페이지 설정 리액트를 브라우저에서 다루려면 React와 ReactDOM 라이브러리를 불러와야 한다. React : 사용자 인터페이스 뷰를 만들기 위한 라이브러리 ReactDOM : UI를 브라우저에 렌더링할 때 사용하는 라이브러리 아래 설정은 브라우저에서 리액트를 사용하기 위한 최소한의 요구 사항이다. React element와 ReactDOM React element HTML 문서를 이루는 엘리먼트는 브라우저가 HTML 문서를 읽어들이면 DOM 엘리먼트가 되고, 이 DOM이 사용자 인터페이스를 화면에 출력한다. React.createElement(type, [props], [...c..

목차 함수형 프로그래밍 함수 : 1급 객체와 고차 함수 함수형 프로그래밍 특징 명령형 프로그래밍과 선언적 프로그래밍 비교 불변성 순수함수 데이터 변환 고차 함수 함수 함수 연산자를 적용하여 평가할 수 있는 모든 호출 가능한 표현식을 의미 함수의 역할 1. 작업/ 연산 결과의 반환 2. 내/외부 데이터 변경 1급 객체 고차 함수(high order function) 매개변수로 전달 가능 반환 값으로 전달 가능 → 함수를 매개변수로 받거나, 함수를 결과로 반환하는 함수 1급 객체 (first class object) 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체 일반적인 데이터와 마찬가지로 취급한다. 1급 객체(first class citizen)의 요건 변수 또는 데이터 구조에 할당 가능..

목차 객체와 배열 구조분해 할당 객체 리터럴 스프레드 연산자 비동기 자바스크립트 클래스 객체와 배열 ES2016부터 객체와 배열을 다루는 방법과 객체와 배열 안에서 변수의 영역을 제한하는 방법을 다양하게 제공하기 시작했다. 이런 기능으로는 구조 분해, 객체 리터럴 개선, 스프레드 연산자 등이 있다. 구조분해 할당 구조 분해(destructuring ) 객체 안의 필드, 배열을 구성하는 원소를 변수에 쉽게 대입할 수 있도록 활용 객체의 속성과 변수의 이름이 같다면, 구조분해 할당이 가능하다. 두 변수를 변경해도 원래의 필드 값이 비뀌지는 않는다. sandwich.bread, sandwich.meat 와 같이 나타내도 기존 객체를 참조하게 되지만, 매법 객체를 써서 나타내기 힘들다. ● 객체의 구조분해 할당..

목차 변수 선언 const let 템플릿 문자열 함수 만들기 함수 선언과 함수 표현식 (호이스팅) 디폴트 파라미터 화살표 함수 화살표 함수와 this 1. 변수 선언 ES2015 전에는 var를 사용하는 것이 변수를 선언하는 유일한 방법이었다. 이제는 더 나은 기능을 제공하는 몇 가지 변수 선언 방법이 추가됐다. const 키워드 상수를 정의할 때 사용한다. 상수의 특징 1. 선언과 동시에 초기화를 해야한다. 2. 값을 변경할 수 없다. ● 변수 선언 : var 값을 변경해도, 문제 없이 그대로 출력 ● 상수 선언: const 상수에 값을 재설정하는 것은 불가능하다. 상수 값을 변경하게 되면 오류가 발생한다. let 키워드 변수의 영역을 코드 블록 안으로 한정시킬 수 있다. 중괄호 ({ }) 로 나타내는..

React ● 사용자 인터페이스 UI를 만들기 위한 JavaScript 라이브러리 ● Facebook (Meta) 에서 만든 오픈소스 프로젝트 ● MVC 애플리케이션의 View에 관련된 영역만 담당 ● 컴포넌트 기반 라이브러리 (재사용성) ● Virtual DOM 사용 참고. MVC 구조와 리액트 ● 소프트웨어 디자인 패턴 중 하나 ● Model + View + Controller 로 구성 - Model : 데이터를 관리하는 영역 - View : 사용자에게 보이는 부분 (사용자 인터페이스 영역) Model로 부터 데이터를 가져와 의미있는 데이터 모델을 표현하는 영역 - Controller : 모델 데이터를 조회, 수정 / 변경된 사항을 View에 반영 ● React는 View에 관련된 영역만 처리 (다른..