개발을 해보다/내맘대로스터디

#01 Do it! 리액트 프로그래밍 정석 스터디 1일차[16~52p]

윈터애플파이 2020. 11. 24. 21:18
SMALL

 

Do it! 리액트 앱 프로그래밍 정석
국내도서
저자 : 박호준
출판 : 이지스퍼블리싱 2020.02.07
상세보기

책을 보니 공부단이란걸 하길래 카페 가입해서 공부단 신청하고나서 이 글을 쓴다.

오늘(20/11/24)부터 13일간 (20/12/06까지) 공부를 해나가고자 한다.

 

구름IDE + 전자책 + 유튜브에 있는 저자 인강

 

공부한 내용

 

01. 리액트 시작하기

  • 현재 주목 받고 있는 프레임워크중에 가장 많이 사용하는 것은 리액트 이다.
  • 리액트는 화면출력 특화 프레임워크이다.
  • 설치 : NVM(노드버전매니저) 설치 -> Node.js 설치 -> Node.js 사용 설정-> yarn 설치 -> create-react-app 설치 ->프로젝트(리액트 앱) 생성.
  • 구동 구동하고자 하는 디렉토리로 이동한 뒤 'yarn start'
  • package.json 수정해서 라이브러리 다운받을 수 있음
  • VSCode를 사용한다면 Reactjs code snippets 플러그인과 Prettier플러그인 설치 권장
  • App.css에서 css수정, App.js의 내용을 수정하여 저장만하면 바로 핫 리로딩이되기 때문에 바로 화면이 바뀌어 있다.

 

02. 리액트 ES6문법 액기스

기존 자바스크립트와 ES6의 차이점(~02-4)

  • ES6에선 백틱(`)을 이용한 템플릿 문자열 사용
  • 전개 연산자 (...를 이용하여 만들 수 있다. 배열,객체에서 이용 가능)
  • 과거 var만 사용하던 것에서 가변 변수 let, 불변 변수const 나눠서 사용
  • 과거 클래스 표현식이 없어 prototype으로 클래스를 표현했으나 class 정의 가능해짐.

 

어려웠던 점

 

ES6 개념이 어려워서 이해가 잘 되지 않았다.

코드에 대해서 하나 하나 설명해주는 건 알기 쉬웠지만, 실제로 어떻게 동작하는지 잘 이해가 안 갔다.

console.log()로 찍어가면서 확인하고서야 이해했는데, 전자책에는 그런건 없었고 유튜브 영상과 github를 보고서야 깨달을 수 있었다.

 

책 보면서 따라한 내용

 


내돈내산 인증

11월 12일에 교보문고에서 타 출판사 리액트 네이티브 책과 같이 구매함

 

LIST