프론트엔드 정복하기

1. React에서 제공하는 Form 이벤트 1) onChange 2) onInput (textarea, input 요소값이 변경될 때 사용됨 > react팀에서는 이 이벤트 사용을 추천하지 않음) 3) onSubmit 2. Form 속성 1) action : submit된 후 수행되는 조치 (특정 엔드포인트, 웹페이지로 이동 가능) ex. 2) method : form 데이터를 제출할 때 사용할 HTTP 메소드 지정 ex. 3. 변경 가능한 속성 (interative properties) 1) value : input, textarea, select 태그에서 사용 2) checked : input태그의 checkbox, radio type 3) selected : select, option 4. pre..

import * as React from "react"; import * as ReactDOM from "react-dom"; import EasingAnimation from "../../../src"; // Bar component (wrapped component) interface IBarProps { currentValue: number; } class Bar extends React.Component { public static defaultProps: IBarProps = { currentValue: 0, }; public render() { const { currentValue } = this.props; const rounded = Math.round(currentValue); const..

1. react-slick 설치 : npm install react-slick --save 2. 홈페이지에서 Example을 참고한다. 3. hooks 형 예시 import React from "react"; import Slider from "react-slick"; function Visual() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( Single Item 1 2 3 ); } 참고사이트 : react-slick 홈페이지 https://react-slick.neostack.com/docs/get-started/

1. jquery 설치하기 : npm install jquery --save 2. jquery import 하기 1) import $ from 'jquery' 2) import jQuery from 'jquery' 3) import { $, jQuery } from 'jquery' : $ or jQuery 중 jquery문에 사용된 것이 있으면 해당 문자를 import 하면 된다. 3. $(window)를 사용할 경우 1) useEffect 문 안에 (class 컴포넌트의 경우 componentDidmount) 다음을 입력한다. window.$ = window.jQuery = jQuery; 2) jquery 문은 따로 js 파일을 만들어 import 시키도록 한다. (원래는 컴포넌트 안에 jquery 문..

1. import 하기 1) import imgA from 2) 2. require로 불러오기 1) : import 하지 않아도 됨. ** src 외부 파일에서는 require할 수 없다. 3. URL 작성 src = "http://localhost:3000/img/...." 4. public에서 손쉽게 불러오기 // public/img/ 이미지들... 1) (src에서 불러올 때는 ./로 시작, public에서 불러올 때는 '/' 슬래쉬 하나면 되는 듯 하다.) 참고 사이트 https://webisfree.com/2019-12-12/[react]-img-%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EC%B6%94%EA%B0%80%..

hooks가 등장한 이후로 class 컴포넌트는 잘 사용하지 않는다고 한다. class Component를 hook로 변경해야 할 때가 종종 있으므로 Class Component를 배워보자. 1. 클래스형 컴포넌트는 render( ) 메서드가 꼭 있어야 한다. 이 메서드에서 렌더링하고 싶은 JSX 를 반환한다. >> render( ) { return ( ) } 2. props 조회 props 를 조회 해야 할 때에는 this.props 를 조회한다. const { color, name, isSpecial } = this.props; 3. defaultProps 설정 class Hello extends Component { static defaultProps = { name: '이름없음' }; render..