분류 전체보기 (95) Today I am VanillaJS → Redux | Redux 101 (1/2) Redux | NomardCoder - 기본적으로 javascript application들의 state를 관리하는 방법 - react와 redux는 별개임 (vue, angular, js 등 원하는 곳에서 다 사용가능) **수업진행방식** 1) redux와 vanilla javascript 2) redux와react (react-redux) 1. redux없이 vanillaJS + ) vanillaJS를 redux로 바꾸기 2. redux없이 react +) react를 redux로 바꾸기 (react-redux) - redux가 왜 만들어졌고, 왜 redux를 사용해야하는지 - application을 어떻게 향상시키는지 - redux가 필요한 이유를 알기위해, redux없이 application을 실.. HTML, CSS 정리 블로그 📌 티스토리 블로그 제작 전 네이버 블로그에서 HTML, CSS, JavaScript(개념) 공부 내용을 정리해왔습니다. 관련 내용은 아래 블로그에서 확인해주세요! 🙇♀️ 공부하고 기록하기 : 네이버 블로그 프론트엔드 개발 공부를 하고 있습니다. :) blog.naver.com React Hooks React Hooks | NomardCoder ✅Check useTitle = react document의 title을 몇개의 hooks와 함께 바꾸는 것 useInput = 그냥 input 역할을 한다 usePageLeave = 유저가 page를 벗어나는 시점을 발견하고 함수를 실행 useClick = 누군가 element를 클릭하는 시점을 발견 useFadeIn = 어떤 elemet든 상관없이 애니메이션을 elemet안으로 서서히 사라지게 만듦 useFullscreen = elemet든 풀스크린으로 만들거나 일반화면으로 돌아가게 useHover = 어떤 화면에 마우스를 올렸을 때 감지 useNetwork = online offline 상태 감지 useNotification = notification .. React Hooks 간단 예습 강의 듣기 전 / NomardCoder | YouTube hooks 예습 정리본 - hook은 결론적으로 functional component에서 state를 가질 수 있게 해줌 (class component, did mount, render 안해도 된다) - recompose + react = react hooks 1. react hooks 사용법 익히기 react hooks 사용한 count, input 만들어보기 (기본예제) useState //react hooks사용 import React, {Component, useState} from "react"; //선언 import "./styles.css"; const App = () => { //useState 2개를 준다. 하나는 value, 두번.. Lifecycle Methods to Class mounting - 처음으로 DOM에 rendering될 때 componentDidMount( ) unmounting - 생성된 DOM이 제거 될 때 componentWillUnmount( ) the component Lifecycle (자주 사용되는 Lifecycle위주로 작성됨) Mounting - 구성 요소의 instance를 만들고 DOM에 삽일 할 때 아래 순서로 호출 constructor( ) render( ) componentDidMount( ) Updating - props, state의 변경으로 인행 발생. 해당 메서드는 구성 요소가 다시 rendering될 때 아래 순서로 호출 render( ) componentDidUpdate( ) Unmounting - 구성 요소가 DOM에서 제거 .. react 추가 study ⭐ class 방식으로 react 코드 짤때, 실무에서 constructor,super 생략하고 state만 더 자주 사용한다 class GuGuDan extends React.Component{ contructor(props){ super(props); this.state = { first: ~ , second: ~ , } } } //실무에서는 생략 후 아래 방법을 더 많이 쓴다 class GuGuDan extends React.Component{ state = { first: ~ , second: ~ , } } ⭐ render함수 내부에서는 function을 사용해도 되지만, class 내부에서 메서드를 만들어서 사용할때는, arrow function을 사용해야한다. (render내에서 onsubmi.. setup / props / state / data fetch | NomardCorder react setup react app 만들기 react app 파일 열기, github 업로드 window+r 로 cmd창 열기 cd documents로 documents 이동 → code movie-app/ 명령어 작성으로 vscode폴더 열기 readme 간단히 작성 후, package.json에서 test, eject는 신경쓰지 않는다(삭제) + 등등 필요없는 파일 삭제 github에 업로드 +용어 ) pubilc의 favicon = 웹 탭의 상단에 보이는 아이콘 How does React work? 애플리케이션이 화면을 로드할 때, 빈 html을 로드하게 되고, react가 component에 작성해둔것을 html에 밀어넣게 된다. -> 소스코드가 보이지 않음 -> v.. Update, Delete 기능 구현 CRUD = Create Read Update Delete update는 read기능과 create기능이 결합되어있다고 볼 수 있다. - 기존 컨텐츠를 불러와서 form에 추가작업 할 것 - form기능이 이미 구현되어있는 컨텐츠에서 실행할 것 Update state값을 form과 동기화시켜서 state값을 계속 변화시키기 //Components/UpdateContent.js import React, { Component } from 'react'; class UpdateContent extends Component{ constructor(props){ //가변적 데이터로 동작할 수 있게 -> state화 시켜주기 super(props); this.state = { title:this.props.data.. 이전 1 ··· 6 7 8 9 10 11 12 다음
