프론트엔드 정복하기

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%..

참고사이트 https://riptutorial.com/ko/css/example/10001/javascript%EB%A1%9C-css-%EB%B0%94%EA%BE%B8%EA%B8%B0

1. 현재 클릭한 요소의 부모를 찾는다. function getParentNode(element) { return element.parentNode; } 2. Array 객체의 메서드인 indexOf( )로 this가 몇번째 자식인지 찾는다. function getElementIndex(element) { return [].indexOf.call(element.parentNode.children, element); } 참고 자료 https://velog.io/@awesomelon/jquery-this.index%EB%A5%BC-javascript%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0 https://www.it-swarm.dev/ko/javascript/javascript-%E..

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..

https://velopert.com/1148