16일차

UseRef

useRef 특정 태그를 조작하기 위해 선택할 때 사용하는 도구.

• 네이버나 구글을 들어간다면 바로 검색창에 커서가 깜빡이게 되는데 useRef를 사용하여 태그를 선택하게 하는것이다.

// React Hook
export default class 함수명 extends Component{
  
}

클래스안에 함수가 내장되어있기 때문에 this 를입력하여 호출

• 클래스안의 this

  • 함수의 this

• 클래스 밖의 this

  • window의 this이다.

• 화살표함수의 this

  • Lexical this

함수.bind() = 함수의 this를 가리키고
화살표함수의 this = 자신과 가장 가까운 class의 스코프에서 this

bind

• 모든 함수는 this를 수정하게 해주는 내장 메서드 bind를 제공

<button onClick={this.onClickCounter.bind(this)}>카운트 올리기!!</button>

.bind()

component

실행순서

1. render()
2. componentDidMount
3. componentDidUpdate
4. componentWillUnmount
deprecated 그리고 난뒤 작업을 하지않겠다.

createRef는 클래스형 컴포넌트
useRef()는 함수형 컴포넌트

useEffect

컴포넌트가 렌더링 될 때마다 특정 작업을 실행 할 수 있도록 하는 Hook

// componentDidMout와 동일
  useEffect(() => {}, []);
//() => {} === 뭐 하나라도 바뀌면 다시실행
// [] 의존성배열(dependency array) : 배열에 의존하고 있다.

// componentDidUpdate와 비슷
  useEffect(() => {}); 

17일차

왼쪽에는 yarn dev 에서 스스로 작업했던 devloper의 구조

오른쪽은 배포시 사용하는 구조.

전체 서비스의 구조

배포를 안했을때의 서비스 구조.

1차요청은 내컴퓨터의 브라우저가 FE(front-end)의 yarn dev를 통해 받아오고있다.
2차요청은 브라우저가 useQuery에서 BE(back-end)의 api를 받아 DB로연결해서 받아오고 그걸 다시 브라우저로 넘겨준다.
1. 브라우저에서 로컬호스트3000 으로 HTML,CSS,JS로 받아온다(데이터를제외하고)
2. useQuery로 BE로 보내준다.
3. BE가 DB(database)를 받아온다

BE의 구조

1. 브라우저에서 apollo-client를 설치한다.
   BE에서는 브라우저의 내용을 apollo-server로 받아온다(브라우저가 apollo-client로 BE에게 전달해준다)
2. BE에서는 DB로 ORM/ODM을 전달해준다.

• DB에서는 2가지방법이 있다.
  • 표방식(관계형데이터베이스)과 서류봉투방식
  • 서류봉투방식에서는(collection)과 문서(document)방식이있다.(NoSQL)
  • 표방식은(table) 행(row)과열(column)방식이있다.(SQL,RDB)
    

ORM : Object-Relational Mapper

데이터베이스와 객체 지향 프로그래밍 언어 간의 호환되지 않는 데이터를 변환하는 프로그래밍 기법

• 객체(클래스)와 관계(RDBMS)와의 설정을 의미한다.
• RDBMS은 클래스를 사용하고 RDBMS는 테이블을 사용하는데 객체 모델과 관계형 모델간에 불일치가 존재하는는데 이 객체간의 관계를 바탕으로 SQL 을 자동 생성하여 불일치하는 것이 ORM이다.
• DB: MySQL
• ORM: MyBatis
• Program: Java Application

객체(class) <- ORM -> DB데이터

종류

• Sequelize
• Prisma
• MyBatis
• hibernate
• typeorm

ODM : Object-Document Mapper

NoSQL에서 Document Database를 지원하기 위해 데이터를 변환하는 프로그래밍 기법
NoSQL(Not Only SQL)

• 관계형 데이터베이스뿐만 아니라 여러분야의 데이터베이스를 명칭한다.
• 빅데이터를 다룰 때 RDBMS로만 트래픽을 감당하기 어려워져 이를 해결하기 위해 탄생한것입니다.

  MongoDB

  NoSQL DBMS의 가장 많이 사용되는 DBMS

특징

1. Join이 없으므로 Join이 필요없도록 데이터 구조화가 필요하다.
2. 다양한 종류의 쿼리문을 (필터링,수집,정렬,정규표현식...)지원합니다.
3. 편의성
4. 스키마 없는(Schemaless) 데이터베이스를 이용한 개발,필드를 추가하거나 제거하는게 매우 쉽습니다.
5. 쉬운 수평 확장성
6. 인덱싱 제공

mongoose

node.js 기반이고 MongoDB와 프로그램 사이 데이터를 반환해주는 ODM

BE

js가 데코레이터(@)를 만나게되면 import한 함수를 가르키게된다

mysql postgreSQL 차이 없다.
mysql기본port 3306

18일차

yarn init -y // package.json 다운로드
-y // 동의한다는 문구이다

접속공간을 만들어 주는일
yarn add apollo-server graphql

typeDefs = type definition

function add( age, writer, title, aaa,bbb) {  //매개변수(parameter)
  return add
}

add 8, "철수", "안녕하세요" // 인자 (argument)

fetchBoards2: [ABC]!
fetchBoards3: [ABC!]!

parent: 요청?.

BAAS: Backend As A Service
PAAS: Parst As A Service
SAAS: Software As a Service

FireBase

BAAS( Backend As A Service )

• 실시간 데이터베이스 = realtime database
  • 데이터를 빠르게 만들어 내는일
• cloud Firestore = firestroe

💾Realtime database(구버전 데이터베이스)

• 데이터를 하나의 큰 JSON트리로 저장하기 때문에 중복 데이터가 많이 발생, 관리하기 어려움

• 쿼리할떄 정렬 및 필터링 동시에 조건문을 걸수 없다.

  ✨Firesoter(신버전 데이터베이스)

• 데이터가 문서와 컬렉션으로 이루워져 관리가 편하다.

• Realtime database 보다 쿼리,보안,색인 기능이 강력해졌다.
  -쿼리할떄 정렬 및 필터링 조건문을 동시에 사용가능하다.

프로덕션모드 === 운영모드
테스트모드 === 개발환경

은밀한곳.zip

api 모음집
관리툴

SQL(RDB) 일때 연결
프로그램 => Oracle,MySQL,Postgres...
내가 주로쓰는건 PostgreSQL로 쓴다(주로 인스타그램에서 쓴다)
스타트업이나 기업에서는 MySQL로 많이 쓴다고 한다.


ODM(NoSQL) 일때 연결
프로그램 => MongoDB,FireBase... 



ts-node // 배포할때
ts-node-dev // 개발할때

Web Browser = HTML,CSS,Javascript

JAVA

PYTHON

JS -> Node.js=> NPM,MAVEN,PyPI => localhost