React란?

React: 프론트앤드 프레임 워크 중 하나

<React 사용하는 이유>

1. 신기술 개발 시 누가 사용하고, 어디에 사용되고, 기술이 얼마나 중요한지 파악해야함 -> 상위 1만개의 사이트가 대부분 React사용함(인스타그램, 페이스북, 넷플 등) 

2. 페이스북이 React JS만들었음. 계속 React JS에 투자하고 있고 무료로 사용가능하게 끔 함

3. 큰 커뮤니티 존재 -> Javascript와 아주 가까움

● React Native: iOS나 안드로이드 어플을 React JS 코드로 만들 수 있게 해줌

4. React JS를 한 번 배우면 여러 곳에 사용가능

 

● 크로미움: 구글 크롬이 베이스로 삼는 프로젝트(각종 광고 차단)-> 네이버 웨일에서 사용

 

javascript가 인기 있는 이유

1. 모든곳에서 인기 폭발임 -> 걍 거의 다 사용함

2. 전문가가 되면 짱짱한 미래 보장(적용할 수 있는 곳이 많음)

3. 따로 설치할 필요 없음 -> 웹사이트에 내장되어 있음

4. 프론트엔드, 백엔드 둘 다 사용 가능

 

● 바닐라js: 프레임워크나 라이브러리를 사용하지 않는 순수한 자바스크립트

● three.js: 자바스크립트로 3D를 구현하게 해주는 라이브러리

● ml5.js: 머신러닝 모델을 생성하는 웹사이트 구축하여 그 모델 훈련시킴

 

replit.com

 

<react 배우기 전 자바스크립트 먼저 공부!>

● HTML이 CSS와 JS를 가져옴

 

- string: 처음부터 끝까지 모두 글자로 이루어져 있음을 뜻함

- 콘솔에게 메시지를 보내는 일: console.log

- 변수(variable): 값을 저장하거나 유지하는 역할 -> const사용(바뀌지 않은 값)

- camel case(낙타): veryLongVariableName -> js에서 사용

- snack case(뱀): very_long_variable_name  -> 파이썬에서 사용

 

** const VS let

const는 constant(상수)라는 것, 값이 바뀔 수 없음

let은 새로운 것을 생성할 때 사용 -> 변수를 업데이트 할 때 사용, 값을 바꿀 수 있음

var: 언제 어디서나 업데이트 가능(단, 규칙 존재: 값 보호 못함(바뀌는지 안바뀌는지 알 수 없음)) -> 이러한 문제 때문에 const와 let 추가됨

★ const 사용! let은 가끔! var는 사용X

 

- null과 false는 다름: null은 변수 안에 값이 없다는 의미, false는 하나의 값임

true: 켜져 있음

false: 꺼져있음

null: 변수 안에 아무것도 없음

undefined: 정의되어 있지 않음(변수만 생성하고, 값을 입력 안함)

 

objects (객체)

-중괄호로 묶기

 

function (함수)

- 어떤 코드를 캡슐화하여 실행을 여러번 함

- () 필요

- 함수에 들어갈 내용을 중괄호로 묶음

- argument는 여러개 있을 수 있음->argument로 외부로부터 값을 받아옴

*NaN = not a number

 

conditional (조건문)

*prompt(msg, default): 사용자에게 msg를 보여주고, 값을 넣으라고 말함 ->자바스크립트를 멈추게 함, 별로 안예쁨 ->즉 사용 X

- 변수의 타입 보는 방법: typeof 변수

- string -> number : parseInt(문자열)

- isNaN(argument): argument가 number인지 확인

- if(condition){

}else{

}

 

**document가 모든 웹페이지의 시작점!!!

자바스크립트로 html 변경 가능

 

자바스크립트에서 html 접근하는 방법

1) html element를 자바스크립트로 접근(document에 있는 요소들을 작성, 변경)

 

-querySelector: 단 하나의 element를 return해줌 ->css셀렉터를 이용하여 검색

 

Events

- 내가 클릭하는 것, h1위로 마우스가 올라가는 것, emdemd

- 자바스크립트에서는 event를 listen해야함!! ->addEventListener로 이벤트리스너 추가

- 이벤트가 발생하면 함수 호출!

* 리슨하고 싶은 이벤트 찾을 때 h1-web apis -mdn?

* console.dir()

 

**

1. element 찾기

2. event를 listen하기

3. 해당 event에 반응하기

 

toggle사용??

 

** string과 변수를 같이 출력하는 방법

1) + 기호 사용하기: "string"+변수명;

2) 백틱기호 (`)사용하기: `string ${변수명} string~~~~`;    -> 변수명의 value값으로 바뀌어 출력

 

localStorage: 정보를 저장하고 불러오고 삭제하는 브라우저가 가지고 있는 작은 db같은 api

 

interval: 매번 일어나야 하는 무언가(시간 지정) -> setInterval(호출하려는 function이름, 시간 간격)

> setInterval과 비슷한 함수: setTimeout

 

padStart: padding추가하기(앞부분에)  -> 문자열.padStart(문자열길이,채울 문자열)

padEnd: padding추가하기(뒷부분에) -> 문자열.padEnd(문자열길이, 채울 문자열)

 

Math이용

- round: 반올림

- ceil: 올림

- floor: 내림

- random: 무작위

 

JSON

- JSON.stringify([array]): array를 가지고 단순한 string으로 변환

- JSON.parse(string): string을 가지로 js가 이해할 수 있는 array로 변환

 

** 잘모르는 부분:

함수를 만드는 것과 비슷

forEach((item) => console.log("this is the turn of ",item));

}

 

filter: 지우고 싶은 item을 array에서 제외하여 보여줌