Front-end
-
클래스와 생성자 함수Front-end/Javascript 2022. 4. 28. 00:07
생성자 함수와 this 생성자 함수를 정의하고 new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작한다. 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다. new 연산자와 함께 생성자 함수를 호출하지 않으면 일반 함수로 동작한다. 일반 함수로 호출된 함수의 내부의 this는 전역 객체를 가리킨다. 클래스 클래스와 생성자함수는 프로토타입 기반의 인스턴스를 생성하지만 차이점이 존재한다. 클래스는 new 연산자 없이 호출하면 에러가 발생한다. 클래스는 extends와 super 키워드를 사용할수 있다. 클래스는 호이스팅이 발생하지 않는것처럼 동작하는 반면에 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생헝자 함수는 변수 호이스팅이 발생한다. 클..
-
React ReduxFront-end/React 2022. 3. 3. 23:19
스토어 생성 후 컴포넌트에서 리덕스 스토어를 사용할수 있도록 Provider 컴포넌트로 감싸준다. The component makes the Redux store available to any nested components that need to access the Redux store. Since any React component in a React Redux app can be connected to the store, most applications will render a at the top level, with the entire app’s component tree inside of it. 컴포넌트를 리덕스와 연동하려면 react-redux에서 제공하는 connet()를 사용해야한다. Th..
-
인덱스 시그니처Front-end/TypeScript 2021. 12. 28. 07:54
인덱스 시그니처 [property: string] : string 1. 키의 이름은 타입 체커에서는 사용하지 않는다 2. 키의 타입은 string / number / symbol 의 조합이여야하지만 보통은 string 을 사용 3. 값의 타입은 어떤 것이든 될 수 있다. 타입에 인덱스 시그니처를 사용하여 유연하게 데이터를 표현할 수 있다. type Contract = {[property: string]: string} const contract: Contract = { name: '20211228-contract', price: '3400000', partner: 'madison' } 하지만 이렇게 타입 체크가 수행되면 몇가지 단점이 나타난다. 1. 잘못된 키를 허용하여 name대신 Name으로 작성해도..
-
타입 연산과 제네릭 사용으로 반복 줄이기Front-end/TypeScript 2021. 12. 25. 08:47
DRY : 중복된 패턴과 코드의 반복을 줄이고 지양하는 원리 * 개발자가 타입스크립트 사용시 타입 중복 등 중복되는 코드를 간과하고 사용할 수 있다. 1. 반복을 줄이는 가장 간단한 방법 : 타입에 이름을 붙이기 2. 인터페이스가 다른 인터페이스를 확장하게 해서 반복을 방지 3. 인터페이스를 확장하는것보다 부분 집합으로 정의하는 것이 더 나은 방법일 때 매핑된타입을 사용하면 여전히 반복되는 코드를 개선할수 있다. 매핑된 타입은 배열의 필드를 반복하여 도는것과 같은 방식이며 표준 라이브러리에서도 'Pick' 이라는 이름으로 찾을 수 있다. 출처 : 이펙티브 타입스크립트, 타입스크립트 공식문서
-
type vs interfaceFront-end/TypeScript 2021. 12. 21. 23:42
named type을 지정할때 타입을 사용해도 되고 인터페이스를 사용해도된다. 타입과 인터페이스의 유사한 특징 1. 타입과 인터페이스에 정의되지 않은 속성을 추가하여 할당하면 오류가 발생한다. 2.인덱스 시그니처 사용 가능 type Option = { [key: string]: string } interface Option { [key: string]: string | number | boolean } 3. 함수타입 정의 가능 type Func = (x: number) => string interface Func { (x: number) : string } const toStr = Func = x => '' + x 4. 제네릭 가능 5. 인터페이스는 타입을 확장할수 있고 타입도 인터페이스를 확장할 수 있..
-
[ React ] 라이프사이클Front-end/React 2021. 5. 30. 12:31
라이프사이클 생명주기 메소드는 컴포넌트가 어떤 단계에 진입할때 자동으로 호출되는 메소드이다. - defaultProps : 컴포넌트 클래스 자체 내에서 프로퍼티로서 정의. this.props의 기본값을 지정할 수 있게 된다. 이는 컴포넌트가 생성되기 전이나 부모로부터 속성이 전달될 때 실행된다. 1) Mounting 단계 : DOM이 생성되고 브라우저에 나타나는 단계 constructor() : 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드 . 메서드를 바인딩하거나 state를 초기화 하는 작업이 없다면, 생성자를 구현하지 않아도 된다. React 컴포넌트의 생성자는 해당 컴포넌트가 마운트되기 전에 회출된다. React.Component를 상속한 컴포넌트의 생성자를 구현할때는 super(pro..
-
리액트 소개Front-end/React 2021. 5. 28. 14:02
리액트 : Vue.js처럼 SPA 웹앱을 만들수 있는 자바스크립트 라이브러리이다. 컴포넌트 기반이며 가상돔을 이용하여 DOM의 변화를 최 소화시켜 속도가 빠르다는것은 동일하지만, 리액트는 하나의 템플릿으로 구성된것이 아니라 JSX 문법을 사용하여 자바스크립트를 작성하는것처럼 리액트를 사용할 수 있다. JSX : JSX( JavaScriptXml) 을 사용하면 자바스크립트와 HTML태그를 합쳐서 React element와 기능을 작성할수있다. 리액트를 사용하면서 필수로 사용해야하는 문법은 아니지만, 같이 사용되는걸 권장한다. 리액트 웹앱을 만들때는 브라우저가 JSX를 인식할수있도록 자바스크립트로 변환시켜야한다. 두가지 방법을 살펴보자. 1) Node.js를 이용해 개발환경을 구축한다. 빌드가 수행될때마다 ..
-
객체지향 프로그래밍(OOP)Front-end/TypeScript 2021. 5. 21. 19:40
절차지향적 프로그래밍 : 정의된 순서대로 절차적으로 함수를 하나씩 호출하는 프로그래밍 함수가 얽혀있고 데이터가 업데이트 될수있기때문에 전체적인 어플리케이션의 구조를 잘 파악해야하며, 수정시 사이드이펙트가 발생할 확률이 높다. 객체지향적 프로그래밍 : 관련있는 데이터와 함수를 객체로 정해서 프로그래밍해나가는것 사람과 가까운 생각을 하면서 객체를 구성해나감. 한 곳에서 문제가 생기면 관련있는 객체만 수정하면 된다. 또한 관련된 기능일때는 재사용도 가능하며 확장성이 높아진다. 객체지향 프로그래밍은 생산성과 높은품질을 보장한다. 객체지향적 프로그래밍의 특징 1. Encapsulation (캡슐화) : 서로 관련있는 데이터와 함수를 객체로 묶어내고 데이터와 함수를 감추거나 보여지게 하는 것. 타입스크립트는 캡슐화..