- 패키지
: 하나의 작은 단위를 설치할 수 있는 폴더/ 작은 단위의 개발 모음집
-> 다른 사람이 만든 개발기능을 사용가능하게 해줌
ex) express / mysql / body-parser / morgan / multer / nunjucks
-- node.js -> NPM
-- Linux -> apt - 프레임워크
: 다른 사람이 만든 여러 패키지들을 모아 하나의 프로그램을 만들수 있도록한 모음집
ex) react는 프론트엔드 프레임워크
react -> react / react-dom / babel / webpack
--- babel -> 옛날 버전의 자바스크립트도 사용할 수 있도록
--- webpack -> 실시간 running이 가능하도록
-> 프레임워크에는 폴더 트리가 존재
- web개발(html / css / javascript ...)
--- html -> hyper text markup language, 내용을 화면에 구분해서 보여주는 역할
--- css -> 화면을 꾸며주는 역할(넓이 조절, 폰트, 배경색 등등)
--- javascript -> 화면을 동적으로 만들어주는 역할
==> 브라우저가 위의 언어를 해석해서 사람이 인식할 수 있는 화면으로 보여줌 / 브라우저(ex- chrome,safari, fox ...)
***cross browsing -> 모든 브라우저에서 호환이 가능하도록 하는 것.
- 프론트엔드
- 백엔드(서버)
-- 브라우저는 주소창에 url을 입력함으로서 web서버에 요청.
**브라우저는 http프로토콜을 통해 서버에 요청 가능
-- web서버는 html,css,javascript를 응답함(브라우저가 응답된 것을 해석하여 화면으로 구현)
- get : 데이터를 도메인 주소, 쿼리를 통해 전달
- post : 데이터를 body,form을 통해 전달
- put :데이터 수정
***웹통신?
-- cookie : 브라우저의 header부분에 토큰을 통해 데이터를 계속적으로 담고 있을 수 있도록 하는 것.
-- session :
- 비동기통신
**동기:주소창에 url을 적고 요청, 한 번의 요청에 한 번의 응답.
// 자바스크립트에 요청을 보내는 두가지 방법
1. fetch
2. axios
// javascript
-- 싱글스레드(single thread) -> 언어를 해석하는 공간이 하나 / 브라우저에서 html css와 함께 해석되어야 하므로, javascript 하나를 위해 브라우저에 화면 구현하는 것을 멈추는 것은 비효율적이므로. (참고-유튜브-코딩사전)
**callback->promise->async/await
**프로미스객체 -> Promist.then()
-- 멀티스레드(mult thread) -> 언어를 해석하는 공간이 여러개
React(프론트앤드) //브라우저에 표현할 코드를 만드는 것
-- 프레임워크 : 폴더트리 / 다른 여러개의 패키지는 넣어서 만든 것
//SPA (single page application)
-- react는 SPA를 더욱 쉽게 만들 수 있도록 도와준다.
-- react는 데이터가 바뀌면 화면이 바뀐다.**
**///////////(상태)/////////(컴포넌트)
--- 컴포넌트 -> 함수형컴포넌트 / 클래스형컴포넌트
- 함수형컴포넌트
// 과거 함수형 컴포넌트는 상태를 만들수가 없었고, 생명주기를 사용할 수 없없다.(hooks를 통해 현재는 가능)
// hooks ( 상태 - 전역으로 관리 / redux)
-> useState
-> useReducer
-> useContext
// hooks ( 컴포넌트 )
-> useCallback
-> useMemo
-> useEffect - 클래스형컴포넌트
?? nodejs환경에서 react를 실행할 수 밖에 없는 이유??
-> jsx(javascript + XML)
-> 즉 자바스크립트 문법 해석을 위한 것 (이는 패키지 babel을 통해 가능-> webpack에 babel을 넣어줌으로써 자동 빌드가 되도록, webpack안에 DevServer를 통해, 실시간로드)
// Ngnix는 배포를 위한 것
