Language/React.js
-
[공지사항] 푸샤 깃허브 블로그 업데이트 사항 checked & defaultChecked 기본 엘리먼트에서는 checked 속성으로 사용하지만 react 에서는 defaultChecked값이 추가되었습니다. 이 두 가지 속성은 역할은 같지만 작은 차이가 있습니다. // radio // checkbox checked checked값을 사용하면 onChange값과 함께 사용하여 컨트롤할 수 있습니다. 만약 onChange 값이 없으면 해당 컴포넌트는 readOnly로 바뀌어 체크를 변경할 수 없습니다. this.setState({ foo: !this.state.foo })} checked={this.state.foo}/> checked: {this.state.foo ? 'true' : 'false'} de..
checked & defaultChecked[공지사항] 푸샤 깃허브 블로그 업데이트 사항 checked & defaultChecked 기본 엘리먼트에서는 checked 속성으로 사용하지만 react 에서는 defaultChecked값이 추가되었습니다. 이 두 가지 속성은 역할은 같지만 작은 차이가 있습니다. // radio // checkbox checked checked값을 사용하면 onChange값과 함께 사용하여 컨트롤할 수 있습니다. 만약 onChange 값이 없으면 해당 컴포넌트는 readOnly로 바뀌어 체크를 변경할 수 없습니다. this.setState({ foo: !this.state.foo })} checked={this.state.foo}/> checked: {this.state.foo ? 'true' : 'false'} de..
2022.06.27 -
Youtube 동영상을 React로 불러올때 iframe으로 불러오는데, 이때 유용하게 사용할 수 있는 라이브러리가 React Player 이다. 다만 스타일링 하지 않으면, 반응형 디자인으로 할때 높이랑 넓이가 비율 대로 잘 맞지 않는다. 구글링 해보니 아래와 같이 작성하면 모바일도 비율에 맞게 잘 표기 된다. 리액트 플레이어 상단 div 를 하나 더 만들어 아래와 같이 스타일링해주니 해결되었다. (리액트 플레이어는 width, height 인라인으로 100% 지정해줘야 기기에 맞게 지정된다) 출처 github.com/CookPete/react-player/issues/145
React Player 반응형 디자인으로 스타일링하기Youtube 동영상을 React로 불러올때 iframe으로 불러오는데, 이때 유용하게 사용할 수 있는 라이브러리가 React Player 이다. 다만 스타일링 하지 않으면, 반응형 디자인으로 할때 높이랑 넓이가 비율 대로 잘 맞지 않는다. 구글링 해보니 아래와 같이 작성하면 모바일도 비율에 맞게 잘 표기 된다. 리액트 플레이어 상단 div 를 하나 더 만들어 아래와 같이 스타일링해주니 해결되었다. (리액트 플레이어는 width, height 인라인으로 100% 지정해줘야 기기에 맞게 지정된다) 출처 github.com/CookPete/react-player/issues/145
2021.04.19 -
Property '__REDUX_DEVTOOLS_EXTENSION__' does not exist on type 'Window & typeof globalThis'. 현재 프로젝트에서 리덕스를 쓰며, 구글 extension 으로 리덕스를 디버깅하고 싶다면 redux devtools 를 사용하게 될 것이다. 그러나 만약 프로젝트에서 js나 jsx가 아닌 tsx,ts(타입스크립트)를 쓰고 리덕스 디버깅 extension 사용한다면 위와 같은 에러가 발생할 것이다. 위의 에러는 번역하면 __REDUX_DEVTOOLS_EXTENSION_COMPOSE__가 윈도우라는 타입을 가지고 있지 않기 때문이다. 이럴 경우 Window 타입을 정의해주면 된다. import * as React from 'react' impo..
타입스크립트에서 리덕스 디버깅 툴 타입 에러.Property '__REDUX_DEVTOOLS_EXTENSION__' does not exist on type 'Window & typeof globalThis'. 현재 프로젝트에서 리덕스를 쓰며, 구글 extension 으로 리덕스를 디버깅하고 싶다면 redux devtools 를 사용하게 될 것이다. 그러나 만약 프로젝트에서 js나 jsx가 아닌 tsx,ts(타입스크립트)를 쓰고 리덕스 디버깅 extension 사용한다면 위와 같은 에러가 발생할 것이다. 위의 에러는 번역하면 __REDUX_DEVTOOLS_EXTENSION_COMPOSE__가 윈도우라는 타입을 가지고 있지 않기 때문이다. 이럴 경우 Window 타입을 정의해주면 된다. import * as React from 'react' impo..
2020.07.22