프론트엔드 WEB

Front

Javascript
React
OT-리액트

React

모바일 App처럼 새로고침없이 스무스하게 웹앱을 만들어줌 대표적으로 instagram

  • 장점:
    • 앱처럼 만들었기 때문에 모바일앱으로 발행이 쉬움
    • 앱처럼 뛰어난 UX
    • 일반적인 웹사이트보다 비즈니스적 강점을 가지고 있다.
  • 단점:
    • 문법이 조금 어렵다

선수지식

  • Javascript
  • html
  • css
1강 설치 및 셋팅
  1. Node.js를 설치(Mac) 
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew update
brew install node
node -v 
npm -v
brew install yarn --ignore-dependencies
yarn -v
  1. 폴더 생성 후 필요한 파일들을 전부 설치해주는 npx 명령어 사용 -> node js를 설치하면 사용가능핟. 
    npx create-react-app "Project_name"
  2. 만들어 놓은 프로젝트로 이동 후 미리보기 띄우기 (크롬 설치 필수) 
    npm start
  3. 추가 폴더 정보
    • node_modules :라이브러리 저장소
    • public : static 파일들 보관함
    • src : 소스코드 보관함 (실질적으로 여기파일들로 코딩함)
    • package.json : 설치한 라이브러리 목록
2강 JSX 사용법

리액트에서는 HTML 대신에 JSX를 사용하여야 한다.

  1. 블로그 navbar만들기 ```javascript import logo from ‘./logo.svg’; import ‘./App.css’;

function App() { return ( <div className="App">

</div>   ); } export default App;

### App.css파일에서 아래코드를 삽입

```javascript
body {
  font-family: 
  'nanumsquare';
}

.black-nav{
  background: black;
  width: 100%;
  display: flex;
  color: white;
  padding: 20px;
  font-weight: 600;
  font-size: 20px;
}
  1. 데이터 바운딩

서버에서 받은 데이터 -> 자바스크립트 -> HTML로 바꾸는 데이터 바운딩을 리액트에서는 쉽게 할 수 있다

바꾸고자 하는 곳에

{ "변수명,함수 등" }

이미지 넣는법

//원하는 이미지를 import 
import logo from './logo.svg';

<img src={ logo } />
// import한 이미지를 {}안에 삽입
  1. JSX에서 style 속성 삽입

style속성은 {} 안에 오브젝트 형식으로 넣어줘야 함

<div style= > </div>
3강 변수를 담는 새로운 방법 state
  1. 글 목록만들기

App.js파일에 코드 추가 삽입

<div className = "list">
        <h3>{ hello }</h3>
        <p>5월 11일 발행</p>
        <hr/>
      </div>

App.css파일에 코드 추가 사입

.list{
  margin-top: 30px;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
}

변수를 저장할 수 있는 또 하나의 방법 state

App.js파일에 제일 상단에 import 코드 추가삽입

import React, { useState } from 'react';
// useState 내장함수 사용

useState를 사용하여 변수저장

let [글제목, 글제목변경] = useState('Hello React');
// 위 함수를 실행하면 2개의 원소를 가진 리스트를 반환 Return [a,b] 
// a = 'Hello React'가 저장
// b =  Hello React state를 정정해주는 함수
// 여러개의 데이터를 리스트타입으로 전달도 가능하다

State를 쓰는 이유 ?

  • 웹을 app처럼 동작하게 하기 위해서
  • state는 변경되면 HTML이 자동으로 렌더링이 된다.
  • 일반변수는 새로고침이 되어야 렌더링이 된다.
  • 바뀌지않는 부분은 변수 수시로 바뀌는 부분은 state를 사용한다.

새로고침없이 스무스하게 재렌더링이 되려면 state를 사용해야한다

App.js 
import React, { useState } from 'react';
import logo from './logo.svg';
import poketmon from './test.jpg';
import './App.css';

function App() {
  let [글제목, 글제목변경] = useState(['새로고침 없이','스무스하게 렌더링하려면', 'state 사용하자' ]);

  return (
    <div className="App">
      <div className ='black-nav'>
        <div style= >Test Blog</div>
      </div>
      <img src={ poketmon } />
      <div className = "list">
        <h3>{ 글제목[0] }</h3>
        <p>5월 11일 발행</p>
        <hr/>
      </div>

      <div className = "list">
        <h3>{ 글제목[1] }</h3>
        <p>5월 12일 발행</p>
        <hr/>
      </div>

      <div className = "list">
        <h3>{ 글제목[2] }</h3>
        <p>5월 13일 발행</p>
        <hr/>
      </div>     
    </div>
  );
}
export default App;
4강 리액트 버튼 핸들러 장착

WARING 메시지가 보기싫다면 App.js파일 가장 윗 부분에 다음 주석 삽입

/* eslint-disable */
  1. 좋아요 버튼 만들기
<span>🥰</span> 0
//span 태그를 클릭했을 시 카운터를 증가시켜야 함

onClick을 이용

<span onClick = { 함수() }>🥰</span> 0
// 함수를 정의해야 함
<span onClick = { ()=>{} }>🥰</span> 0
// 함수를 정의하기 싫을 때

Click할 때마다 카운터를 증가

state를 이용하여 카운터를 증가
state변경함수 사용

let [카운트, 카운트변경] = useState(0);
<span onClick = { ()=>{카운트변경(카운트+1)} }>🥰</span> {카운트}
// state를 변경하려면 state변경 함수를 이용한다!
App.js 
/* eslint-disable */
import React, { useState } from 'react';
import logo from './logo.svg';
import poketmon from './test.jpg';
import './App.css';

function App() {
  let [글제목, 글제목변경] = useState(['새로고침 없이','스무스하게 렌더링하려면', 'state 사용하자' ]);
  let [카운트, 카운트변경] = useState(0);
  return (
    <div className="App">
      <div className ='black-nav'>
        <div style= >Test Blog</div>
      </div>
      <img src={ poketmon } />
      <div className = "list">
        <h3>{ 글제목[0] } <span onClick = { ()=>{카운트변경(카운트+1)} }>🥰</span> {카운트}</h3>
        <p>5월 11일 발행</p>
        <hr/>
      </div>

      <div className = "list">
        <h3>{ 글제목[1] }</h3>
        <p>5월 12일 발행</p>
        <hr/>
      </div>

      <div className = "list">
        <h3>{ 글제목[2] }</h3>
        <p>5월 13일 발행</p>
        <hr/>
      </div>   
    </div>
  );
}

export default App;

5강 원하는대로 State를 변경
  1. 버튼을 클릭해서 제목을 변경하는 법

함수정의

function 제목변경(){
  var newArr = [...글제목]; //deep copy
  newArr[0]= "변경해버리기"
  글제목변경(newArr)
  //직접수정이 아니라 딥카피를 이용하여 변경하면 손쉽게 변경이 가능하다. (call by reference)

  // 하드코딩 방법 - > 글제목변경(글제목 ['State를 변경해서 ','글 제목을 ', '변경해보자'] )
  // 사용시 초기 설정값 포멧을 그대로 넣어주는게 뽀인트입니당
}
// onClick 함수에 넣을 함수정의

App.js파일 수정

<button onClick={ 제목변경 }> 눌러주세용 </button>
//함수에 이름을 넣을때는 소괄호를 빼고 넣어줘야 함!!

순서

  1. state 카피본 생성 (깊은복사)
  2. 수정사항을 카피본에 저장
  3. 변경함수에 카피본 넣기
App.js 
/* eslint-disable */
import React, { useState } from 'react';
import logo from './logo.svg';
import poketmon from './test.jpg';
import './App.css';

function App() {
  let [글제목, 글제목변경] = useState(['새로고침 없이','스무스하게 렌더링하려면', 'state 사용하자' ]);
  let [카운트, 카운트변경] = useState(0);

  function 제목변경(){
    var newArr = [...글제목]; //deep copy
    newArr[0]= "변경해버리기"
    글제목변경(newArr)
  }
  
  
  return (
    <div className="App">
      <div className ='black-nav'>
        <div style= >Test Blog</div>
      </div>
      <img src={ poketmon } />
      <div className = "list">
      <button onClick={ 제목변경 }> 눌러주세용 </button>
        <h3>{ 글제목[0] } <span onClick = { ()=>{카운트변경(카운트+1)} }>🥰</span> {카운트}</h3>
        <p>5월 11일 발행</p>
        <hr/>
      </div>

      <div className = "list">
        <h3>{ 글제목[1] }</h3>
        <p>5월 12일 발행</p>
        <hr/>
      </div>

      <div className = "list">
        <h3>{ 글제목[2] }</h3>
        <p>5월 13일 발행</p>
        <hr/>
      </div> 
    </div>
  );
}
export default App;

6강 Componet를 이용하여 UI만들기

Typescript