web

web

web - javascript +html + css

nodejs : 컴퓨터로 소통할수있는 컴퓨터 언어인데 javascript를 사용.

우리가 배운 모든 자바스크립트 백엔드(react,express) 기반은 nodejs

node_modules: 안에 있는 것들은 수많은 패키지(라이브러리)들임

라이브러리를 관리해주는 것은 npm (node pakage manager)

프레임워크: 폴더트리

개발자들은 작은단위로 쪼개는 것을 좋아함, 최소단위로 묶는것 좋아함.

React: 프론트앤드 프레임워크, 폴더트리존재(임의로 만들긴함)

babel: 최신문법을 사용하게되면 과거문법으로 바꿔줌. 모든 하위에 있는 브라우저를 실행시킬 수 있게 해줌.

scss, sass

webpack: 바벨을 도와줌.

express: 웹서버 쉽게 만들기위해서 존재.

데이터가 바뀌면 화면이 바뀐다.

상태값 setState component

render return

컴포넌트 -> class, function -> Hooks

->jsx

->babel

컴포넌트가 살아있는지 죽어있는지를 알고싶을때 생명주기 사용.

C componentDid(처음 실행될때) component Update(상태값이 바뀔때)

F 나의 상태를 나타내기 어려움, 생명주기 쓸수 없음, 화면 만 그릴 수 없음. 근데 React가 Hooks(useEffect)를 만듬.

hooks가 나오고부터 class가 점점 사라지고있음.

useEffect에 변수를 넣고 넣지않고(componentDid랑 같음)에 따라서 두가지방법 나타낼수 있음.

useState, useReducer 상태가 바뀔때... use가 있으면 hooks

useReducer: 상태로 사용하기위한 상태(상태값을 항상 객체로나타냄) 그래서 hooks 안에서 상태값을 객체로 사용할때 많이 씀., useState는 상태를 객체로 나타내기 어려움

useReducer에 딸려 나오는 건 다 상태다!

남자 남자(클럽죽돌이) 여자

Const [state, dispatch] = useReducer(reducer,initialState)

상태가 바뀌면 화면이바뀐다.

props : 데이터 전달이 하향식...아래방향으로만 전달됨. 그래서 나온게 Context..데이터를 전역에서 사용할 수 있게 해줌.

context: 반은 hooks(함수형), 반은 클래스

useReducer, useContext보다 먼저 나온게 Redux

Redux 모르면 React한다고 할 수 없음. (데이터가 바뀌면 화면이 바뀐다. =이해연습 counter, tictactok, 댓글)

react-dom: 이전엘리먼트와 바뀐 엘리먼트를 컴포넌트별로 비교. 틀린부분만 찾아서 바꿔줌.

spa로 가장 만들기 힘든것. list

from http://ig888.tistory.com/74 by ccl(A) rewrite - 2021-08-16 20:26:00