-

문자열 길이이모지와 특수문자는 4바이트로 인식하여 문자열의 결과가 2로 나타남4바이트로 표현되는 문자를 하나의 문자로 인식하기 위해서 Array.from().length 이용메서드설명결과문자열.length문자열의 길이정수Array.from(문자열).length문자열의 길이정수 '😋'.lengthArray.from('😀').length // ⇒ 1문자열 길이형식문자열이 지정한 길이가 될 때까지 작업을 반복지정한 길이가 실제 문자열 길이보다 짧은 경우 변한없이 기존 문자 반환추가문자열 생략하면 공백으로 입력메서드설명결과문자열.padStart(전체길이, [추가문자열])해당 문자열의 시작부터 전체길이가 될때까지 추가 문자열을 반복문자문자열.padEnd(전체길이, [추가문자열])해당 문자열의 끝부터 전체길이가..

숫자 표현 자바스크립트의 기본 데이터 타입 중 하나로 정수와 소수를 사용하며, 타입은 Number 16진수, 10진수, 8진수, 2진수의 표현이 가능 최대 표현 범위가 정해져 있다 MIN_SAFE_INTEGER ~ MAX_SAFE_INTEGER를 벗어난 값은 계산 결과에 오차가 발생' 정수 결과 설명 Number.MAX_VALUE 1.7976931348623157e+308 최대 정수 값 Number.MIN_VALUE 5e-324 최소 정수 값 Number.MAX_SAFE_INTEGER 9007199254740991 다룰 수 있는 최대 정수값 Number.MIN_SAFE_INTEGER -9007199254740991 다룰 수 있는 최소 정수값 부정확한 결과로 반환 되는 수 계산 시 부적절한 결과로 반환되는..

LifeCycle (수명주기) 리액트 컴포넌트에는 라이프 사이클(생명 주기)이 존재 컴포넌트의 수명 : 페이지에 렌더링 되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 끝남 클래스형 컴포넌트에서만 사용 가능 함수형 컴포넌트의 경우 Hooks를 사용하여 제어 라이프 사이클 메서드 라이프 사이클 메서드는 9개의 종류를 가지며, 컴포넌트 클래스에서 덮어써 사용 가능 Will- : 작업을 작동하기 전 실행되는 메서드 Did- : 작업을 작동한 후 실행되는 메서드 componentDidCatch v16이후부터 도입된 메서드로, 렌더링 도중 오류 발생 시 오류 UI를 보여주도록 처리 자신에게 발생된 에러는 잡을 수 없으며 this.props.children으로 전달되는 컴포넌트에서 발새한 에러만 추출 가능 c..

React ref DOM을직접 제어해야 할 경우 ref를 활용하여 이름을 부여하여 컴포넌트 내부에서만 활용하도록 하는 기능 state로 제어 불가능한 경우 ref를 활용해야 하는 경우 특정 input에 focus 스크롤 박스 제어 Canvas 요소 사용 다른 컴포넌트 간에 데이터 교류에 ref 사용 x ref 사용방법 1. callback 함수 활용 기본적으로 사용되는 방식 ref 콜백함수를 props로 전달하며, 콜백함수는 ref값을 파라미터로 전달받고, 함수내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정 // this.input이 input 요소의 DOM을 가리킴 {this.input=ref}}/> 2. createRef 활용 리액트 v16.3이상 지원 내장함수 createRef 사용 ..

React Event 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하여 사용방법이 유사함 이벤트 사용시 유의사항 이벤트 이름 : CamelCase 표기법 사용 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌, 함수 형태의 값을 전달해줌 // 1. 외부에서 함수 생성 후 호출 const Func=()=> {} // 2. 태그 내에서 함수를 만들어 사용 {console.log(1); }}> DOM요소에만 이벤트를 설정할 수 있고, 직접 만든 컴포넌트 요소에는 이벤트를 자체적으로 설정할 수 없음 // 직접 사용 불가 // 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정 가능 Sources 클래스 컴포넌트 활용 input 입력 출력 import { Component } from 'react..

state 컴포넌트 내부에서 바뀔수 있는 값 클래스형 컴포넌트의 경우 state / 함수형 컴포넌트인경우 useState로 사용 클래스 컴포넌트의 state state 초깃값 설정 // [기본문법] // state 초깃값 설정 state = { 속성: 값, 속성: 값 }; // [constructor 메서드 사용한 문법] constructor(props) { super(props); // state 초깃값 설정 this.state = { 속성: 값, 속성: 값 }; } constructor 메서드를 활용한 state constructor 메서드를 작성하여 state 설정 - 객체 형식으로 작성 반드시 super(props) 메서드를 호출하여 클래스 컴포넌트가 상속하고 있는 리액트 컴포넌트 클래스가 지닌 ..

기본 코드 이해 react 기본 사용 리액트를 불러와서 사용할 수 있게 해주 create-react-app 으로 프로젝트 생성 시 node_modules 디렉토리에 react 모듈이 설치 됨 이를 import 구문을 통해 사용 모듈을 불러와서 브라우저에서 사용하기 위해 번들러(웹팩, Parcel, broswerify)를 사용하며 번들러 도구 사용 시 import 로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해줌 import React from 'react';

작업 환경 Setting 절차 Node.js, npm 또는 yarn 설치 git creative-react-app create-react-app 리액트 프로젝트 생성 시 필요한 웹팩, 바벨의 설치 및 설정을 생략하고 바로 프로젝트 작업 환경을 구축해주는 도구 자유로운 설정 변경 가능 프로젝트 생성 1. 프로젝트 생성 // yarn yarn create react-app // npm npm init react-app 2. 서버 구동 해당 디렉토리 이동 후 서버 구동하여 브라우저 창이 열림 cd // yarn yarn start // npm npm start

React Library React 기본 셋팅 react.development.js react-dom.development.js babel.js CDN 링크 // [기본 코드]

클래스 객체 지향 프로그래밍언어에서 객체를 효율적으로 사용가능하게 하는 문법 추상화 : 프로그램에서 필요한 요소만을 사용하여 객체를 표현하는 것 객체 지향 프로그래밍 : 객체들을 정의하고 객체를 활용하여 프로그램을 만드는 것 인스턴스(객체) : 클래스를 기반으로 생성한 객체 클래스 생성 클래스를 기반으로 만든 객체를 기본적으로 인스턴스(객체)라고 부름 // [형식] 클래스 생성 class 클래스명 { // 클래스명은 대문자로 시작 } // 클래스 생성 [형식] const temp = new 클래스명 생성자 (Constructor) 객첼를 초기화하고 클래스의 속성을 설정 객체가 클래스로 부터 생성될 때 자동으로 호출 생성자 이름은 항상 constructor로 정의 생성자의 주요역할 1. 객체 초기화 : 클..