성빈

키보드 이벤트의 isComposing 키워드를 입력받을 때, 한글을 입력하면 검색어의 마지막 글자가 딸려오는 문제가 발생했다. 영어를 입력했을 때에는 문제가 되지 않지만, 한글을 입력했을 때에만 문제가 발생했다. 한글은 자음과 모음의 조합으로 한 음절이 만들어지기 때문에 조합문자이고, 영어는 조합문자가 아니다. 따라서 한글을 입력할 때 이 글자가 조합중인건지, 조합이 끝난 상태인지 파악하기 어렵기 때문에, Enter키를 입력하면 이벤트가 2번 발생하게 되며, 영어를 입력할 때에는 발생하지 않고, 한글을 입력할 때에만 발생하게 된다. 📌 또한 이 문제는 크롬 브라우저에서 한글을 사용하는 경우에만 문제가 발생한다. 키보드 이벤트에는 isComposing이라는 입력문자가 조합문자인지 아닌지를 boolean값으..

axois와 fetch 모두 HTTP 요청을 보내는 데 사용되는 도구이다. axios는 fetch보다 편리한 API와 기능을 제공하며, 프로미스 기반으로 비동기 작업을 처리하는 데 있어서 더 직관적이고 편리한 방법을 제공한다. ✅ axios Node.js, 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리 비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다. HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변환해준다. [장점] response timeout 처리 방법이 존재한다. 요청을 중도 취소, 응답시간 초과 설정 등의 기능 Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리하다. 크..

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에 관련된 영역만 처리 (다른..