본문 바로가기

React

 (24)
20210323 React Hooks03 (Nooks : useConfirm, usePreventLeave, useBeforeLeave, useFadeIn, useNetwork, useScroll, useFullscreen), nomadcoder React Hooks 노마드코더 : React Hooks 노마드코더의 React Hooks 강의를 듣고 작성 함 지난 시간 지난 시간에는 React의 hook중에서도 useEffect, useRef에 대해서 알아 보았고 그것을 통해 만든 nooks (nico's hooks) 중에서 useTabs, useTitle, useClick을 알아보았다. usePreventLeave & useConfirm (nico's hook) useConfirm 과 usePreventLeave는 사실 hooks가 아님 (useEffect, useState를 사용하지 않기 때문) 하지만 이를 통해서 좋은 함수형 프로그램이 어떤건지 알수 있음 useConfirm 사용자가 무언가 하기전에 확인 하는 것으로서 사용자가 버튼을 클릭하는..
20210322 React Hooks02 useEffect, useRef, (Nooks : useTabs, useTitle, useClick), nomadcoder React Hooks 노마드코더 : React Hooks 노마드코더의 React Hooks 강의를 듣고 작성 함 지난 시간 hook은 기본적으로 react에서 제공하는 hook이 있고 개인이 custom 하여 만들 수도 있다. 지난 시간에는 React hook인 useState와 nico's hook(Nooks)인 useInput을 공부하였다. 이번에는 useState를 사용하는 nooks useTabs를 알아볼 예정 그리고 기본 hook인 useEffect와 useRef와 이를 활용한 여러 nooks를 알아볼 예정 useTabs (nico's hook using useState) useState hook로 만들어진 useTabs 은 객체가 들은 배열 : [{},{},..]과 배열안의 객체..
20210319 React Hooks01, useState, useInput(nico's hooks + validator 커스텀 유효성 검증) nomadcoder React Hooks 노마드코더 : React Hooks 노마드코더의 React Hooks 강의를 듣고 작성 함 Hooks 앱을 리액트 훅으로 만들면 class component, did mount, render ...등이 필요 없어짐 모든것은 하나의 function이 됨 이제는 functional programming(함수형 프로그래밍)스타일이 됨 Hooks는 react의 state machine에 연결하는 기본적인 방법임 Hook의 시작 recompose라는 라이브러리에서 시작되어 리액트 팀이 인수함 그리고 react에서 hook으로 릴리스 함 useState (React hook) useState는 항상 2개의 value를 return함 첫번째value는 이름을 주고(useState의 값을 불러옴)..
20210308_React.js05 react-router-dom, Navigation, Movie detail, Movie App 배포(deploy) 및 최종 결과 Nomadcoder React.js and React project(영화 웹 서비스 만들기) with nomadcoder 저번에는 자바스크립트 기초강의의 todolist 크롬 앱을 구현했는데 이번에는 React를 배우고 입문하기 위해서 노마드 코더의 react js로 만드는 영화 웹서비스 만들기 강의를 수강하였다. 물론, 무료이다. 정말 좋은 강의 이고 저번 todolist 강의에서 처럼 어떤 형태로 쓰이는지 전체적인 감이 올것이라고 생각한다. 노마드 코더 사이트! 단지, 노마드 코더 강의를 듣고 공부 과정을 서술하듯 쓸 것이다. 본 자료를 무턱대고 믿지는 말았으면 좋겠다. 내가 이해하는 대로 쓴 것일뿐이니... Github 페이지를 통한 배포(Deploying) 설치 npm i gh-pages gh-pages : 웹사이트..
20210305_React.js04 Movie App 만들기, 본격적인 HTML, CSS 구현, JSX 주의사항 Nomadcoder React.js and React project(영화 웹 서비스 만들기) with nomadcoder 저번에는 자바스크립트 기초강의의 todolist 크롬 앱을 구현했는데 이번에는 React를 배우고 입문하기 위해서 노마드 코더의 react js로 만드는 영화 웹서비스 만들기 강의를 수강하였다. 물론, 무료이다. 정말 좋은 강의 이고 저번 todolist 강의에서 처럼 어떤 형태로 쓰이는지 전체적인 감이 올것이라고 생각한다. 노마드 코더 사이트! 단지, 노마드 코더 강의를 듣고 공부 과정을 서술하듯 쓸 것이다. 본 자료를 무턱대고 믿지는 말았으면 좋겠다. 내가 이해하는 대로 쓴 것일뿐이니... HTML 구현 main container 만들기 (section tag로 container) loading ht..
20210304_React.js03 state, Component Life Cycle, Movie App 만들기 Nomadcoder React.js and React project(영화 웹 서비스 만들기) with nomadcoder 저번에는 자바스크립트 기초강의의 todolist 크롬 앱을 구현했는데 이번에는 React를 배우고 입문하기 위해서 노마드 코더의 react js로 만드는 영화 웹서비스 만들기 강의를 수강하였다. 물론, 무료이다. 정말 좋은 강의 이고 저번 todolist 강의에서 처럼 어떤 형태로 쓰이는지 전체적인 감이 올것이라고 생각한다. 노마드 코더 사이트! 단지, 노마드 코더 강의를 듣고 공부 과정을 서술하듯 쓸 것이다. 본 자료를 무턱대고 믿지는 말았으면 좋겠다. 내가 이해하는 대로 쓴 것일뿐이니... 1. React- State Component Life Cycle 일단, 우리가 만드는 class compone..
20210303_React.js02 JSX, Prop, Prop-types, state , Nomadcoder React.js and React project(영화 웹 서비스 만들기) with nomadcoder 저번에는 자바스크립트 기초강의의 todolist 크롬 앱을 구현했는데 이번에는 React를 배우고 입문하기 위해서 노마드 코더의 react js로 만드는 영화 웹서비스 만들기 강의를 수강하였다. 물론, 무료이다. 정말 좋은 강의 이고 저번 todolist 강의에서 처럼 어떤 형태로 쓰이는지 전체적인 감이 올것이라고 생각한다. 노마드 코더 사이트! 단지, 노마드 코더 강의를 듣고 공부 과정을 서술하듯 쓸 것이다. 본 자료를 무턱대고 믿지는 말았으면 좋겠다. 내가 이해하는 대로 쓴 것일뿐이니... React- JSX & PROPS component에 정보 보내기 react는 재사용가능한 component를 ..
20210302_React.js01 React 환경설정, 작동원리, App 만들고 실행, component 만들고 사용, JSX, Nomadcoder React.js and React project(영화 웹 서비스 만들기) with nomadcoder 저번에는 자바스크립트 기초강의의 todolist 크롬 앱을 구현했는데 이번에는 React를 배우고 입문하기 위해서 노마드 코더의 react js로 만드는 영화 웹서비스 만들기 강의를 수강하였다. 물론, 무료이다. 정말 좋은 강의 이고 저번 todolist 강의에서 처럼 어떤 형태로 쓰이는지 전체적인 감이 올것이라고 생각한다. 노마드 코더 사이트! 단지, 노마드 코더 강의를 듣고 공부 과정을 서술하듯 쓸 것이다. 본 자료를 무턱대고 믿지는 말았으면 좋겠다. 내가 이해하는 대로 쓴 것일뿐이니... project를 위한 환경설정 node.js 설치 node.js 홈페이지에서 설치 가능(cmd에 node -v를..

티스토리툴바