책소개
따라하면서 이해하는 React A to Z리액트를 시작하기 전에 개발 환경을 준비하는 과정부터 시작하여 예제 파일을 실행하는 방법을 안내한다. 입문부터 초급, 중급, 활용, 실무까지 5개의 파트로 나누어 단계별로 실력을 향상시킬 수 있게 구성하였다. 리액트에서 사용하는 함수와 문법, 웹 브라우저에 화면을 띄워보기로 시작되는 이 책은 변수를 관리하고 컴포넌트 유형별로 장단점을 비교하고, 태그 사용 및 이벤트 처리 구현도 할 수 있다. 또한 외부 api를 활용하는 부분도 집중적으로 다루고, node.js를 사용하여 DB 서버에서 작업을 수행할 수 있는 실무 능력까지 실습할 수 있다. 예제를 200개로 나누어 간단하게 학습할 수 있기 때문에 짧은 주기로 성취감을 얻을 수 있으며, 기능 위주의 설명으로 필요한 개발 스킬에 집중할 수 있는 장점이 있다. 이 책을 따라 하기 위한 예제 파일은 정보문화사 홈페이지(infopub.co.kr) 자료실에서 다운로드 가능하고, 학습 중 궁금한 사항의 저자 홈페이지(leejungyeoul.tistory.com)에서 피드백 가능하다.
저자소개
Fruit Punch 대표이며, 인하대학교 사학사/소프트웨어 융합 공학사이다. 멋쟁이 사자처럼 4기, [비전공자도 가능한 웹 프로젝트] 탈인 튜터, 풀스택 개발자이다. 아모레퍼시픽, 홈플러스, LG전사 쇼핑몰 개발하였으며 아주대 의료원 연구 프로젝트 개발하였다.
목차
PART 1(입문) React.js 시작하기001 .jsx에 html 적용하기002 .jsx에 css 적용하기003 Component 사용하기 004 생명주기 함수 render() 사용하기005 생명주기 함수 constructor(props) 사용하기006 생명주기 함수 static getDerivedStateFormProps(props, state) 사용하기007 생명주기 함수 componentDidMount() 사용하기008 생명주기 함수 shouldComponentUpdate() 사용하기009 템플릿 문자열 사용하기010 var, let, const 사용하기011 전개 연산자 사용하기012 class 사용하기013 화살표 함수 사용하기014 forEach() 함수 사용하기015 map() 함수 사용하기016 jquery 사용하기PART 2(초급) React.js 기초 다지기017 props 사용하기018 props 자료형 선언하기019 props Boolean으로 사용하기020 props 객체형으로 사용하기021 props를 필수 값으로 사용하기022 props를 기본값으로 정의하기023 props의 자식 Component에 node 전달하기024 state 사용하기025 setState() 함수 사용하기026 state를 직접 변경한 후 forceUpdate() 함수 사용하기027 Component 사용하기(class형 컴포넌트)028 PureComponent 사용하기(class형 컴포넌트)029 shallow-equal 사용하기(class형 컴포넌트)030 함수형 컴포넌트 사용하기031 hook 사용하기032 Fragments 사용하기033 map()으로 element 반환하기034 reactstrap Alerts 사용하기035 reactstrap Badge 사용하기036 reactstrap Breadcrumbs 사용하기037 reactstrap Button Dropdown 사용하기038 reactstrap Button Group 사용하기039 reactstrap Bottons 사용하기040 reactstrap Card 사용하기041 reactstrap Carousel 사용하기042 reactstrap Collapse 사용하기043 reactstrap Fade 사용하기044 reactstrap Form 사용하기045 reactstrap Input Group 사용하기046 reactstrap Jumbotron 사용하기047 reactstrap List Group 사용하기048 reactstrap Modal 사용하기049 reactstrap Navbar 사용하기050 reactstrap Pagination 사용하기051 reactstrap Popovers 사용하기052 reactstrap Progress 사용하기053 reactstrap Spinner 사용하기054 reactstrap Table 사용하기055 reactstrap Tab 사용하기056 sweetalert2 Basic 사용하기057 sweetalert2 position 사용하기058 sweetalert2 confirm 사용하기059 fetch get 호출하기060 fetch post 호출하기061 axios get 사용하기062 axios post 사용하기063 콜백 함수 사용하기064 Promise then 사용하기065 Promise catch 사용하기PART 3(중급) React.js 주요 개념 이해하기066 click 이벤트 사용하기(onClick)067 change 이벤트 사용하기(onChange)068 mousemove 이벤트 사용하기(onMouseMove)069 mouseover 이벤트 사용하기(onMouseOver)070 mouseout 이벤트 사용하기(onMouseOut)071 key 이벤트 사용하기(onKeyDown, onKeyPress, onKeyUp)072 submit 이벤트 사용하기(onSubmit)073 Ref 사용하기074 커링 함수 구현하기075 하이오더 컴포넌트 구현하기076 컨텍스트 api 사용하기077 컨텍스트로 부모 데이터 변경하기078 redux 리듀서로 스토어 생성하기079 redux 스토어 상속과 디스패치 함수 실행하기080 redux 리듀서에서 스토어 데이터 변경하기081 react-redux로 스토어 상속하기082 react-redux로 스토어 데이터 사용하기083 react-redux로 스토어 데이터 변경하기084 redux 미들웨어 사용하기085 react-cookies save 사용하기086 react-cookies load 사용하기087 react-cookies remove 사용하기088 react-router-dom BrowserRouter 사용하기089 react-router-dom Route 사용하기090 react-router-dom Link 사용하기091 header, footer 구현하기092 home 페이지 만들기093 〈react img〉 태그 사용하기094 lodash 디바운스 사용하기095 lodash 스로틀 사용하기PART 4(활용) React.js 외부 api 활용하기096 서울시 유동 인구 데이터 사용하기 ① - 리스트 페이지 만들기097 서울시 유동 인구 데이터 사용하기 ② - Open api Key 발급받기098 서울시 유동 인구 데이터 사용하기 ③ - JSON Viewer로 데이터 확인하기099 서울시 유동 인구 데이터 사용하기 ④ - axios로 api 호출하기100 recharts로 LineChart 구현하기 ①(서울시 유동 인구 데이터)101 recharts로 LineChart 구현하기 ②(서울시 유동 인구 데이터)102 recharts로 AreaChart 구현하기(서울시 유동 인구 데이터) 103 recharts로 BarChart 구현하기(서울시 유동 인구 데이터) 104 recharts로 ComposedChart 구현하기(서울시 유동 인구 데이터) 105 recharts로 ScatterChart 구현하기(서울시 유동 인구 데이터) PART 5(실무) 개발부터 배포까지 실무 응용106 node.js express 프레임워크 설치하기107 node 서버 구동하기108 node 서버 api 호출하기109 react 서버와 node 서버를 프록시로 연결하기110 node 서버 api를 get로 json 데이터 호출하기111 node 서버 api를 post로 json 데이터 호출하기112 concurrently로 react, node 서버 한 번에 구동하기113 MYSQL 서버 구축하기 ① - AWS 가입하기114 MYSQL 서버 구축하기 ② - RDS 인스턴스 생성하기115 MYSQL 서버 구축하기 ③ - RDS 인스턴스 포트 설정하기116 MYSQL client 설치하기117 workbench로 rds 서버 접속하기118 MYSQL 스키마 생성 및 table 생성하기119 MYSQL 한국 시간 설정하기120 MYSQL 한글 설정 및 Safe 모드 해제하기121 MYSQL 더미 데이터 삽입하기122 NODE 조회 api 만들기 ① - body-parser 패키지 사용하기123 NODE 조회 api 만들기 ② - mysql 서버 연결하기124 NODE 조회 api 만들기 ③ - mybatis 패키지 사용하기125 NODE 조회 api 만들기 ④ - api 호출로 데이터 확인하기126 REACT 조회 페이지 만들기127 DB 연결 풀 구현하기128 NODE 등록 api 만들기 ① - insert 라우터 분기하기129 NODE 등록 api 만들기 ② - insert 쿼리 추가, response 처리하기130 REACT 등록 페이지 만들기131 REACT 상세 조회 페이지 만들기132 NODE 상세 조회 페이지 만들기- select 쿼리 where절 추가하기133 NODE 수정 api 만들기 ① - update 라우터 분기하기134 NODE 수정 api 만들기 ② - update 쿼리 추가, response 처리하기135 REACT 수정 페이지 만들기136 NODE 삭제 api 만들기 ① - delete 라우터 분기하기137 NODE 삭제 api 만들기 ② - delete 쿼리 추가, response 처리하기138 REACT 리스트 페이지 삭제 기능 구현하기139 파일, 이미지 업로드 api 만들기 - multer 패키지 사용하기140 REACT 등록 페이지 만들기 - 파일, 이미지 업로드 api 호출하기141 REACT 등록 페이지 만들기 - 업로드 경로를 DB에 insert하기142 REACT 상세 조회 페이지 만들기 - 파일, 이미지명 표시하기143 REACT 수정 페이지 만들기 - 파일, 이미지 업로드 api 호출하기144 REACT 수정 페이지 만들기 - 업로드 경로 DB에 업데이트하기145 회원 정보 table 생성하기146 NODE 회원 가입 api 만들기 ① - bcrypt로 암호화하기147 NODE 회원 가입 api 만들기 ② - insert 쿼리 추가하기148 REACT 회원 가입 페이지 만들기 ① - 입력 form 만들기149 REACT 회원 가입 페이지 만들기 ② - 유효성 체크하기150 REACT 회원 가입 페이지 만들기 ③ - 아이디 중복 체크하기151 REACT 회원 가입 페이지 만들기 ④ - 회원 가입 api 호출하기152 NODE 로그인 api 만들기 ① - 라우터 분기, 쿼리 추가하기153 NODE 로그인 api 만들기 ② - bcrypt로 비밀번호 비교하기154 REACT 로그인 페이지 만들기 - 로그인 api 호출하기155 회원 정보 암호화 api 만들기 - jwt로 회원 정보 암호화하기156 REACT 쿠키로 로그인 유지하기 - 쿠키에 회원 정보 저장하기157 회원 정보 복호화 api 만들기 - jwt로 회원 정보 복호화하기158 로그인 회원에게 권한 허용하기 - 쿠키에서 회원 정보 불러오기159 로그인 세션 시간 관리하기 - 쿠키 유효 시간 연장하기160 로그인 상태에서만 header 표시하기, 로그아웃 구현하기161 비밀번호 재설정 메일 템플릿 만들기162 메일 발송 api 만들기 - nodemailer 패키지 사용하기163 비밀번호 조회 api 만들기 - 라우터 분기, 쿼리 추가하기164 아이디와 회원명으로 비밀번호 조회 api 호출하기165 비밀번호 재설정하기 - 이메일 발송 api 호출하기166 GMAIL 계정 접근 권한 허용하기167 수신된 이메일과 버튼 링크 확인하기168 이메일 토큰으로 사용자 인증하기169 비밀번호 수정 api 만들기 - 라우터 분기, 쿼리 추가하기170 비밀번호 수정 api 호출하기171 스케줄러 만들기 ① - 배치 테이블 생성하기172 스케줄러 만들기 ② - node-cron 패키지 사용하기173 스케줄러 만들기 ③ - 특정 시간에 insert 쿼리 실행하기174 웹 서버 구축하기 ① - AWS EC2 인스턴스 생성하기175 웹 서버 구축하기 ② - 포트 설정, 키 페어 다운로드하기176 웹 서버 구축하기 ③ - 탄력적 IP 설정하기177 MobaXterm - SFTP로 EC2 서버 접속하기178 MobaXterm - SSH로 EC2 서버 접속하기179 SFTP로 EC2 서버에 로컬 소스 옮기기180 SSH로 EC2 서버에 소스 압축 풀기, nodejs 설치하기181 react, node 서버에 필요한 패키지 설치하기182 react, node 서버 구동해 외부에서 접속하기183 EC2 서버 시간 한국으로 변경하기184 vi 에디터로 EC2 서버 소스 직접 수정하기185 chown, chmod 명령어로 서버 접근 권한 허용하기186 nohup으로 서버 상시 구동하기, 포트로 서버 종료하기187 kakao 지도 aPI appkey 발급하기, 웹 사이트 도메인 등록하기188 react 서버 포트 80으로 설정하기189 react에서 kakao 지도 생성하기190 코로나 확진자 정보 excel 파일을 json 파일로 변환하기191 확진자 위치에 마커 추가하기192 확진자 위치에 이미지 마커 추가하기193 마커에 클러스터러 사용하기194 확진자 정보 커스텀 오버레이로 표시하기195 EC2 서버에 로컬 react 소스 옮기기196 EC2 서버에 react 패키지 설치하기197 EC2 서버에 80포트 설정하기198 카카오 웹 사이트 도메인에 EC2 IP 추가하기199 screen으로 서버 상시 구동하기, 포트로 서버 종료하기200 도메인 구매 후 ip 연결하기
