[TIL] React 배우기 전 알아야 할 기본 개념

Sarahsea 사라씨·2021년 6월 7일
1

TIL

목록 보기
17/128
post-thumbnail

오늘의 커리 - React 기초

  • SPA_singPageApplication 를 만들기 위해 react-route-DOM 패키지를 사용해서 실습
  • Router 사전적의미가 경로를 찾다, route는 길 , 그 자체인 것을 생각해보라, (+무선 공유기 이전, 선 이어 쓰던 옛날 라우터 생각해보면! -홍식님) 좀 더 수월하게 이해가 된다

React 배우기 전 알아야 할 기본 개념

  1. Node.js & npm - node, npm 이 뭔지 _ [TIL] node.js & npm

  2. npm & npx의 차이점 - npx: 모듈 중 하나, (npm 5.2부터 기본 모듈로 제공)

    • 왜 매번 npm install을 해줘야 할까? >> -g로 받으면 안돼? >> 리액트 처럼, 필요한 모듈 버젼이 자주 바뀌는 경우는 최신의 버젼을 쓰는게 좋은데, 전역으로 받으면 관리가 어렵고 다른 프로젝트에 영향을 줄수도! >> 그래서 npx가 이를 해결! 모듈을 로컬에 저장하지 않고, 매번 최신 버전의 파일만을 임시로 불러와 실행 시킨 후에, 다시 그 파일은 없어지는 방식
  3. Babel: 인터프리터 = 문법 통일! Babel은 ES6이상의 문법 코드들을 예전 브라우저에서도 돌아갈 수 있도록 바꿔주는 도구

  4. Bundler: 복잡한 자바스크립트 모듈 호환성 - import불가능, 그럼 window에서 불러오나? 매번 다른 변수 선언 가능할까? Nooo, 하지만 번들러가 대신 해주지!

  1. Class 자바스크립트의 '상속'에 대해, Property

  2. this 브라우저에서는 window, node.js에서는? undefined

    • this가 결정되는 시점은, this가 선언된 시점이 아닌 누가 실행하는 지에 따라서 결정된다는 것을 알아야 함
    • 바인딩 함수.bind() : this고정시킬 때
  3. import & export

    • import가 뭐지? 경로도 없는데 저거 어디서 오는거지?
    • 경로 지정하지 않았을 때: node_modules에서 온다
    • export default: import하지 않아도 저장한 변수 import 가능
  4. Arrow function ()=>{} 이제는 좀 익숙한:)
    -짧고, 직관적, 유용, 객체를 리턴할수도 있고()소괄호

  5. map

    • for문보다 직관적
    • 반드시 key값 있어야 함

출처: 이지훈님의 리액트 강의 깃북

TIF f**ked....아니구 feel 🙃

아리까리 어렵다, 어려운데 재밌다, - 반복으로 익숙해지게끔!
라이브러리니까, 편하게 쓸라고 있는건뎅?! 헿,
HTML, CSS, JS 문법 같은 요소를 한 눈 볼 수 있다는 점이 아주 고냥 신기방기한 녀석
뭐만 하면 빨간줄 뜨는데 요게 오히려 장점- </>닫는 태크 Closing Tag가 중요한 JSX문법이라서용~

리액트를 배우니까, 기본기가 탄탄해야 한다는 말이 더 와닿네요 선배님들!
뇌는 터질라하는데 배는 엄청 고프네,
개발 공부하면서 다이어트하는 나 실화입니까?!
체리가..ㅠ 체리가 먹고싶습니다
🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒
하지만 어드밴스드 챌린지 꼭 하고 자야지 흙흙

남은 Q...

  • 프로토타입 개념 정확히 : prototype object / prototype link, prototypal inheritance

  • webPack?

  • 반응형 프로그래밍?

profile
생각하는 사람

0개의 댓글