웹의 동작방식 : 웹이 어떻게 보여지게 되느냐를 말하는 것!
- 웹은 클라이언트가 서버에게 요청을 보낸다
- 요청을 받은 서버는 js, css 같은 정적 자원이나 데이터를 보내준다.
그렇다면 클라이언트란 무엇인가?
클라이언트는 우리가 웹 화면을 볼 수 있게 도와주는 도구입니다.
서버는 우리가 보는 웹사이트에 뿌려줄 것(html)을 만들어서 전달해주는 도구
그렇다면 서버리스(Serverless)?
DB가 없다는 의미가 아니라....
서버를 '내가' 만들필요 없다는 의미입니다
DOM이란 무엇인가??
DOM은 트리구조입니다! 다른 말로 하면, html의 단위 하나하나, 예를들어 span 태그, p 태그등을 객체로 인식하는 모델입니다.
자바스크립트에서 유용한 기본문법들:
Class: 객체 지향 프로그래밍에서 클래스는 특정 객체를 생성하기 위해서 변수와 함수를 정의하는 일종의 틀. 객체 정의를 위한 상태와 함수로 구성.
객체를 계속해서 재사용하기위해 만든 틀이다.
class Cat{
constructor(name){
//여기서 this는 이 클래스 입니다.
this.name = name;
//함수
showName(){
return this.name = name
}
}
cat.showName();constructor() 생성자 함수는 클래스 인스턴스를 생성하고 초기화 해주는 역할을 합니다. 즉, 초반에 어떤 정보가 들어갈지 받고 데이터를 초기화해주는 역할을 합니다.
클래스를 상속할 경우:
class Mycat extends Cat{
//생성자 함수
super(name) //부모 클래스의 인스턴스를 초기화한다.
this.name = name
}
showName(){
//super를 키워드로 사용하기
// 부모클래스 안의 함수와 같은 이름을 쓰면 자식 클래스에서 오버라이딩이 됩니다.
return '내 고양이 이름은 '+super.showName()+'입니다.
showAge(){
스코프란? 변수에 접근해지는 범위
var a -> 함수 단위 (변수)
let -> 블록 단위 (변수)
const -> 블록 단위 (상수)
== 과 === 의차이:
==:
유형을 비교하지 않는 등차이다. 다른말로, 숫자형과 문자형 같은 자료구조를 신경쓰지 않는다는 것이다.
===:
그렇기 때문에 ===으로 자료구조까지 신경써줄 수 있다.
조건부 삼항연산자
사용법 조건?참일경우:거짓일경우
let is_me = info_name === "mean0"?true:false //조건부 삼항연산자 형태Array 굉장히 많이 쓰이는 내장함수(기본 4개)
map
filter
concat
from
map: 배열에 속한 항목을 변환할 때 많이 사용된다.
filter: map과 비슷한 구조. 다만 조건을 충족시킨 항목들만 반환을 해준다.
const num_array = [0,1,2,3,4,5]
const new_array = num_array.filter(array_items){
return array_items > 3
}concat: 배열과 배열을 합치거나 배열에 특정 값을 추가해주는 함수이다.
from:
1) 배열로 만들고자 하는 것이나 유사배열을 복사해서 새로운 배열로 만들 때
2) 새로운 배열을 만들 때 (초기화 된다고 말을 한다.)
const text_array = Array.from('hello', (item, idx) => {return idx});React 기본문법 (JSX)
React에는 Public폴더안에 있는 html파일이 딱 하나밖에 없음
React는 함수형 컴포넌트를 만들어서 html을 구성한다. - 이것을 SPA(single page Application)
- React에서는 자바스크립트에서 사용되든 마크업(태그들)들 모두 열고 닫고하는 pair로 써줘야한다
- 중괄호({}) 안에는 map, filter, concat과 같은 내장함수들을 사용할수 있지만 For문과 if문은 사용할 수 없다.
- javascript에서의 <div class =>같은 경우는 React에서는로 해줘야한다.
- p 태그를 사용할 때 스타일을 먹이고 싶은경우 객체로 인식하기때문에 변수를 return문 전에 선언하고 < p style = {}>형태로 쓸 수 있다.
** REACT 프로젝트 계획할 때 가장 먼저 고려해야 될 사항: 뷰를 먼저 즉, html 설계를 먼저하고, css를 짠다.
React Component
- Component에는 클래스형과 함수형이 있었지만, 시간이 흐름에 따라 React가 발전하면서 생김새만 거의 달라졌다.
- Component에서 html 설계 (뷰 먼저)를 하고 난 이후, 해당 뷰의 데이터 관리 고민을 해야한다.
- Component에서의 데이터관리
State and Props:
state는 컴포넌트가 가지고 있는 데이터입니다. (내 데이터)
props는 부모컴포넌트로부터 가져오는 데이터입니다. (남의 데이터 -> 마음대로 고칠 수 없다.)
