TIL0706

cd = 체인지 디렉토리(폴더)
ls -al 숨긴파일까지 다보기

mkdir day01 — day01 이라는 폴더 만들어줘
touch test01.js —test01이라는 파일 만들어줘

빨간색은 내컴퓨터에만 있는것
초록색으로 바뀌었다는건 git add를 해서 gistaged 환경으로 옮겨진것

git clone https://github.com/nwd0907/codecamp-02.git
이렇게하면 여러명이서 협업을 했을때 공유받을 수 있다.
최초한번 다운로드하는 것

git pull

추가분으로 받고 싶을때 사용

yarn install

굳이 깃헙에 다 올리지 않는다 용량문제가 있다
yarn dev에서
index.js의 이름을 만약에 다른것으로 바뀐다면 뒤의 파일이름까지 써주어야한다
ex) localhost:3000/boards/new/aaa
index—> aaa

왜 리엑트를 사용하는가
사용자가 많다 그러면 왜 많을까

리엑트(웹) 리엑트네이티브(앱) 리엑트일렉트론 (PC앱)

페이스북 인스타 트위터 넷플릭스 슬랙 등등에서 사용하고 있다.

리엑트의 핵심은 Component
즉 UI를 부품화 하여 개발가능하다.

하나의 컨포넌트를 만들어 놓으면 4개를 재활용하여 만들 수 있다.

그러면 이것은 복붙아닌가?????????

컴포넌트개념이 무엇일까? 다시 한번 확인해보자

컴포넌트로 만들어 놓은 것들을 조립하여 만드는 것이다.
그러면 컴포넌트를 포함하고 있는 컴포넌트 그 위의 컴포넌트 등등

그럼 컴포넌트는 어떻게 만들까?
클래스형과 함수형으로 나뉜다.

코드가 짧으면 고치기 쉽다
쉬울까? 문제가 없다 생각하는 것에서 문제를 확인하기 위해서는 세부적인 코드도 필요하지 않을까?
클래스형과 함수형이 공존이 가능하다.

우리는 화살표 함수를 많이 사용한다.

React-Hooks
use로 시작하는 함수들이 나오면서 부터 클래스형에서 함수형으로 바꾸는 것이 가능해졌다.

대표적인 React-Hooks
컴포넌트의 변수
state 변수를 바꾸고 그 바꾼변수를 화면에 바로 그려준다.
let + document.geteliment
state를 사용하므로서 document.getellimentid를 사용하지 않아도 된다.

변수명을 친절하게 써줘야 다른사람들이 내가 쓴코드를 알아먹기 좋다.

함수와 함수형 컴포넌트 분리해야함
리턴이 들어가면 함수형 컴포넌트
리턴이 없다면 함수

리엑트에서 화면에 문자를 자바스크립트로 바뀌게 하려면
처음에 변수가 바뀌려는 곳에 들어가야한다. ex

State를 사용하면 자동으로 숫자를 바꿔준다

react__useState

import { useState } from "react";

export default function StatePage() {
  const [state, setState] = useState("");

function aaa() {
  setState("안녕하세요");
}

return (
  <>
    <div>{state}</div>
    <button onClick={aaa}>클릭</button>
  </>
);

}

하드코딩이란 무엇을 의미하는 것일까?

작성자에 입력할때
비밀번호에 입력할때
제목에 입력할때
내용에 입력할때 state에 저장하고 등록버튼을 누르면!
백엔드로 전송

API는 백엔드 개발자 분들이 만드는 함수
데이터베이스와 검증의 역할을 한다.
ex)
-회원가입함수
-로그인 함수
-게시물등록 함수
-게시물조회 함수
-게시물수정 함수
-게시물삭제 함수(CRUD)

const [id, setId] = useState

클릭했을때는 onClick
변경됬을때는 onChange

html에서 on으로 시작하는 기능들이 많다
이들의 하는 역할은 html과 자바스크립트를 연결하는 역할을 한다.

.의 의미는 변수가 가지고 있는 속성

열심히하자!