목록개발/프론트엔드 (58)
JongDDA의 한걸음 한걸음씩
클래스 : 오브젝트를 생성하기 위한 설계도. 기존 자바스크립트의 프로토타입을 대체할 수 있으며, 클래스를 통해 정의한 오브젝트는 Array, Date 등 내장 객체와 동일하게 취급할 수 있다. -> 클래스 선언문 기본형 메소드 클래스 내부에 정의된 함수는, 객체의 멤버함수와 마찬가지로 메소드라 부른다. new 연산자에 의해 실제 사용 가능한 객체를 생성하며, 생성된 객체를 통해 메소드를 호출할 수 있다. -> 메소드 정의 시에는 function 키워드를 생략할 수 있다. 예제) // 클래스를 만들자 class Member{ numebr =3; // 속성 // 메소드 getName(){ console.log(this) return "이름" } } const date = new Date(); const me..
리액트 컴포넌트는 클래스형 컴포넌트(Class Component)와 함수형 컴포넌트(Functional Component)로 나뉜다. 기존의 개발방식은 일반적으로 함수형 컴포넌트를 주로 사용하되 state 나 Liffe Cycle method를 사용해야 할 때에만 클레스형 컴포넌트를 사용하는 방식 이었는데 (함수형 컴포넌트에선 state 관리(this 키워드를 통한 관리, setState를 통한 변경)가 불가하다 또한 생명주기 메소드 미제공) 이러한 이유에는 클래스형 컴포넌트가 가지는 아래의 단점 때문이다. (로직의 재사용 불편, 코드를 작성하기가 함수에 비해 비교적 불편하고 어렵다) 그러나 2019년 훅(Hook)의 등장으로 함수형 컴포넌트에서도 이러한 클래스형 컴포넌트의 작업들을 할 수 있게 되었다...
리엑트란? 리엑트는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다. 2013년에 페이스북에서 만들었다. 리엑트는 자바스크립트 코드를 HTML 처럼 작성하는 문법(JSX)을 제공한다 이러한 코드를 HTML 코드로 변환 및 랜더링하여 웹무서 인터페이스를 만든다 장점 : 빠르다, 한 페이지를 동적으로운용할 수 있다(가볍다) - SPA(single page application), 인지도 높다 단점 : 어렵다, 웹문서에 필요한 모든 것을 제공하지는 않는다. 리액트 동작 원리 트랜스파일러 : 최신 자바스크립트 문법 + JSX 등을 웹브라우저가 쓸 수 있도록 변환! JSX : 리액트 문법, 자바스크립트 HTML을 조합한 문법이다. 마치 태그와 같은 형태를 띈 코드를 사용하여 자바스크립트로 제어할..
구조 분해 할당 이란? 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 한다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기는데 이럴 때 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법을 구조 분해 할당(destructuring assignment)이라 한다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructuring)는 그 진가를 발휘하게 된다. 구조 분해 할당(destructuring assignment) : 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식 - 배열의 구조 분해 할당 // 배열의 구조 분해 할당 const pet = ["강아지","..