이 상품은 구매 후 지원 기기에서 예스24 eBook앱 설치 후 바로 이용 가능한 상품입니다.
|
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 연결하기
|
|
실무 예제로 완성하는 웹 프로젝트!코딩을 배워본 적이 없는 IT 비전공자들도 이 책의 예제 200개를 그대로 따라 하다 보면 막힘 없이 웹 프로젝트를 구현할 수 있게 구성하였다. IT 지식이 부족해서 개발자와의 협업이 힘든 기획자, 디자이너, 마케터, 영업자들도 직접 클라우드 서버 배포까지 할 수 있게 되고, 다른 언어 개발자이지만 언어의 폭을 넓히고 싶다면 리액트 시작에 가장 적합하다. 리액트는 웹 페이지에서 눈에 보이는 프론트엔드에 특화된 언어이기 때문에 코드 이식성과 재활용성이 높고 출력 속도가 빠르다는 장점이 있다. 그리고 자바스크립트 기반의 언어이기 때문에 JS 경험이 있다면 더욱 쉽게 배울 수 있다. 이 책은 프론트엔드, 백엔드, 데이터베이스를 연결해 하나의 프레임워크를 만들고 원하는 웹 프로젝트로 구현할 수 있게 하므로 코드의 연결 고리를 익히며 익숙해지는데 흥미를 갖게 될 것이다. 특히 다양한 강의 경험이 있는 저자가 실무에서 필요로 하는 요소들을 넣었기 때문에 혼자 리액트를 시작하고자 하는 자들에게 적합한 도서이다.
|