반응형 Front-end22 [React] Bind는 대체 무엇이며, 언제 사용하는가 React 문서를 읽다가 bind 메서드를 발견했다. class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다. this.handleClick = this.handleClick.bind(this);// ?????? } handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( {this.state.isToggleOn ? 'ON' : 'OFF'} ); } } bind 메.. 2022. 3. 17. [NextJS] NextJS 장점, React와 차이점 (노마드코더) 노마드코더에서는 Next.js 기본 강의를 무료로 볼 수 있다. 되게 짧고 간략하게 핵심을 잘 설명해놓은 것 같아서 정리해보았다. https://nomadcoders.co/nextjs-fundamentals NextJS 시작하기 – 노마드 코더 Nomad Coders The React Framework for Production nomadcoders.co NextJS VS ReactJS Framework vs Library Framework: 내 코드를 호출시키는 것. 적절한 위치에 잘 적기만 한다면 모든걸 동작하게 한다. Library: 남의 코드를 호출하는 것 React와 Next.js의 가장 큰 차이점 React는 Library고 Next JS는 Framework라는 것이다. Server-side .. 2022. 1. 12. [React] State 활용 방법 React에서는 데이터를 저장하는 방법이 2가지가 있다. 첫 번째는 변수에 넣는 것이고, 두 번째 방법은 state에 넣는 것이다. State를 사용하는 이유는 데이터가 수정될 때 새로고침을 하지 않아도 자동으로 재렌더링 되기 때문에 사용한다. 활용 방법 import React, { useState } from 'react'; function App() { let [a, b] = useState('banana');// ES6 destructuring---- (1) let [count, countUp] = useState(0);//---- (2) return ( {a} { countUp(count + 1)}}> count: {count} ) } (1) useState('banana')라고 선언하게 되면, .. 2021. 10. 24. [React] 유용한 사이트 모음 잘 활용하기도 장점 처음으로 react로 사이트를 만들려고 하니 욕심이 나서, 처음부터 끝까지 내가 다 직접 만들어봐야겠다란 생각을 했었다. 하지만 react는 커녕 홈페이지 만드는 것도 익숙하지 않은 내가 그렇게 도전을 한다면 꽤 긴 시간이 걸릴 것 같았다. 그래서 유용한 도구들을 활용해서 쓰고자 이렇게 정리했다. Framer Motion https://www.framer.com/motion/ Production-Ready Animation Library for React | Framer Motion Framer Motion is a production-ready React animation and gesture library. www.framer.com 각종 다양한 motion들을 쉽게 테스트 해보고.. 2021. 10. 7. [React&Node] React, Node 연동 및 동시에 실행하기 React와 Node 연동하기 React와 Node 연동하기 위해 다음 블로그 글을 참고했다. 여러 블로그글을 봤지만 해당 블로그가 제일 간단하고 쉽게 되어있기때문에 그대로 링크를 첨부했다. https://hello-bryan.tistory.com/121 React + express 연동설정. 처음부터 따라하기 React, Express 연동하여 사용하기 일단 react app 을 하나 생성합니다. 이름은 cs-test cmd 로 프로젝트를 생성할 폴더로 가서 npx create-react-app cs-test # 설치 다되면 # 폴더로 이동해서 cd cs-test #npm.. hello-bryan.tistory.com React와 Node 동시에 실행하기 위 블로그를 따라서 React와 Node를 쉽게.. 2021. 9. 9. [Javascript] 자바스크립트 class 기초 Class 생성 'use strict' // 1. Class declarations class Person() { // constructor constructor(name, age) { this.name = name; this.age = age; } // method speak() { console.log(`${this.name}: hello!`); } } const ellie = new Persion('ellie', 27); console.log(ellie.name); Getter and Setter class User { constructor(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.ag.. 2021. 8. 3. 이전 1 2 3 4 다음