Life Cycle (라이프 사이클)

라이프 사이클의 전체 흐름

라이프 사이클의 상세 흐름

라이프 사이클 주의점

그럼으로 useEffect() 사용함

직접 해보기

• 터미널에 다음과 같이 입력하여 리액트 환경을 생성해준다.

  npx create-react-app 04.lifecycle

• 이렇게 된거라면 완료

import "./App.css";
import { useEffect, useState, useRef } from "react";

/* 
  useEffect()
  : 리액트 컴포넌트가 랜더링될 때마다 특정 시점에 
  작업을 처리해주는 리액트 훅 함수

  [특정시점 - LifeCycle]
  1. Mount : 컴포넌트가 화면에 나타나는 시점 
      ex) 최초 1회 호출, 초기화 로직 or API호출
  2. Update : 컴포넌트 내 데이터가 업데이트되는 시점
      ex) props, state에 대한 변화 발생
  3. UnMount : 컴포넌트가 종료되는 시점
      ex) 자원해제, state 초기화 등

  [useEffect() 구조]
  1. useEffect( () => { 실행할 로직 } )
    : 랜더링될 때마다 호출
  2. useEffect( () => { 실행할 로직 }, [state] )
    : []안에 정의한 state를 감시하고 변화가 발생하면 실행
  3. useEffect( () => { 실행할 로직 }, [] )
    : 랜더링시 최초 1회 실행

*/
function App() {
  const [count, setCount] = useState(0);
  const [val, setVal] = useState("");
  const inputRef = useRef();

  const handleClick = () => {
    setCount(count + 1);
  };

  const handleChange = () => {
    setVal(inputRef.current.value);
  };

  // state가 변하면 컴포넌트가 리렌더링되서 아래 콘솔이 실행 된다.
  // 원하는 특정 시점에 로직처리하기에는 적합하지 않기 때문에
  // useEffect()로 처리해야 한다.

  // 랜더링 될때마다 실행
  useEffect(() => {
    console.log("컴포넌트 랜더링!");
  });

  // 처음 마운트 되었을때 한 번만 실행
  useEffect(() => {
    console.log("마운트!");
  }, []);

  // 'count' state가 변경될때마다 실행
  useEffect(() => {
    console.log("count update!");
  }, [count]);

  // 'val' state가 변경될때마다 실행
  useEffect(() => {
    console.log("val update!");
  }, [val]);

  // 하나 이상의 state가 변경될때마다 실행
  useEffect(() => {
    console.log("count : ", count);
    console.log("val : ", val);
  }, [count, val]);

  return (
    <div>
      <h1>useEffect</h1>
      <p>Count 변화 : {count}</p>
      <button onClick={handleClick}>클릭</button>

      <div>
        <input type="text" ref={inputRef} onChange={handleChange} />
        <p>{val}</p>
      </div>
    </div>
  );
}

export default App;

실습 참참참 게임 만들기!

• 실습) 참참참 게임
  • Rule
  1. 유저는 공격, 컴퓨터는 수비를 담당함
  2. 유저가 '좌', '정면', '우' 버튼을 클릭했을때, 유저와 컴퓨터의 선택이 같다면 유저의 승리!
  3. 방향이 다르면 컴퓨터 승리

• 제작시 반영사항
  • 유저와 컴퓨터의 선택, 게임 결과에 대한 state 생성
  • 유저가 '좌', '정면', '우' 중에 하나를 클릭 -> 유저의 state에 업데이트
  • 컴퓨터는 3가지의 방향을 랜덤으로 생성- > 컴퓨터의 state에 업데이트
  • 유저가 선택한 방향의 값으로 state가 변경되면 승패를 판단 -> 결과를 state에 업데이트
  • 게임결과를 화면에 출력

const Ex01 = () => {
  let data = ["좌", "정면", "우"];
  const [user, setUser] = useState("");
  const [com, setCom] = useState("");
  const [result, setResult] = useState("");
  const handleClick = (e) => {
    console.log(e.target.innerText);
    setUser(e.target.innerText);
    let pos = Math.floor(Math.random() * 3);
    setCom(data[pos]);
  };
  useEffect(() => {
    if (user === com) {
      setResult("유저의 승리!");
    } else {
      setResult("컴퓨터의 승리!");
    }
  }, [user, com]);
  return (
    <div>
      <h1>참참참 게임</h1>
      <h3>나의 선택: {user}</h3>
      <h3>컴퓨터의 선택: {com}</h3>
      {user && <h3>게임 결과: {result}</h3>}
      {data.map((item, index) => (
        <button key={index} onClick={handleClick}>
          {item}
        </button>
      ))}
    </div>
  );
};
export default Ex01;

리액트 공동 api 활용

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20240424

• axios 설치하기
  • 터미널 구동끄기
  • 다음과 같이 입력

    npm install axios

ENV

• 노출되면 안되는 정보들을 사용할때 쓸 수 있다.

• 폴더 아래 경로로 .env 파일 생성

• gitignore 파일 다음과 같이 설정

• .env 설정

  REACT_APP_MOVIE_API_KEY = "f5eef3421c602c6cb7ea224104795888"

• .env 서버 중단 > 재실행 > 완료

실습 axios 사용하기

• 날씨 데이터 받아올 수 있는 홈페이지 https://openweathermap.org/ api > api doc > 로그인 > 해당 버튼 클릭

import React, { useEffect, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Card } from "react-bootstrap";
import axios from "axios";

let myKey = "152a46ac954e10f647076cc090f9dac0";

const Weather = () => {
  // 각각의 도시 버튼을 클릭했을때
  // https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${myKey}
  // &units=metric&lang=kr
  // 통해서 도시의 날씨 정보를 가져와 주세요 !!
  // -> axios를 이용 !

  const [cityData, setCityData] = useState("Gwangju"); // 도시
  const [temData, setTemData] = useState(0); // 온도
  const [stateData, setStateData] = useState(0); // 날씨상태

  //useEffect : 맨처음(랜더링 되었을때 -> 사용자에게 보여줬을때), state가 바꿨을때(재랜더링)
  useEffect(() => {
    // Promise : 비동기 통신 정보를 가지고 있는 객체
    // 바로 데이터를 사용할 수 없다!!
    // -> 데이터 파싱(데이터를 전부 받아온뒤 -> 후속처리)
    let data = axios.get(
      `https://api.openweathermap.org/data/2.5/weather?q=${cityData}&appid=${myKey}&units=metric&lang=kr`
    );
    data.then((res) => {
      setCityData(res.data.name);
      setTemData(res.data.main.temp);
      setStateData(res.data.weather[0].description);
      console.log(res);
    });
  }, [cityData]);

  return (
    <div>
      <Card style={{ width: "18rem" }}>
        <Card.Body>
          <Card.Title>도시 : "{cityData}"</Card.Title>
          <Card.Subtitle>온도 : "{temData}"</Card.Subtitle>
          <Card.Subtitle>날씨상태 : "{stateData}"</Card.Subtitle>
        </Card.Body>
      </Card>

      <Button variant="danger" onClick={() => setCityData("Gwangju")}>
        광주
      </Button>
      <Button variant="warning" onClick={() => setCityData("Seoul")}>
        서울
      </Button>
      <Button variant="success" onClick={() => setCityData("London")}>
        런던
      </Button>
      <Button onClick={() => setCityData("Washington")}>워싱턴</Button>
    </div>
  );
};

export default Weather;

04 디테일파일 참조

• 배열 정보가 item에 담겨 진다. (여기서 index는 아무거나 적어도 된다.)

• 바로 실행하면 에러나기 때문에 key 속성을 추가함

Filter (select절 where)

import "./App.css";

function App() {
  let arr = [1, 2, 3, 4, 5];
  let copyArr = arr.map((item) => {
    return item + 1;
  });

  let copyArr2 = arr.map((item, index) => (
    <button key={index} onClick={() => SharedWorker()}>
      {item}번
    </button>
  ));

  const show = () => {
    console.log("클릭이벤트 발생!");
  };

  console.log("원본 배열 : ", arr);
  console.log("복사된 배열 : ", copyArr);

  let objArr = [
    { name: "임경남", agr: "25", job: "Front-end" },
    { name: "임승환", agr: "25", job: "Back-end" },
    { name: "임명진", agr: "27", job: "Date Modeling" },
  ];

  let copyObjArr = objArr.map((item) => {
    return { name: item.name, job: item.job };
  });

  return (
    <div>
      {/* 객체 혹은 객체 배열을 표현식으로 출력할 수 없음 */}
      <div>{copyArr[0].name}</div>

      {/* return문 안에 map() 사용할때
      () => {} (틀린방법)
      () => () (옮은 방법) 
      */}
      {copyObjArr.map((item, index) => (
        <div>
          <h3 key={index}>
            {item.name}/{item.job}
          </h3>
        </div>
      ))}
      {/* 
        copyArr의 모든 요소를 웹 페이지에 출력해보기
        * <p> 태그 안에 요소를 넣어서 출력되도록
      */}

      {copyArr.map((item) => (
        <p>{item}</p>
      ))}

      {copyArr2}
    </div>
  );
}

export default App;

실습 해보기

import React, { useState, useRef, useEffect } from "react";
// useEffect : 랜더링 시점에 맞춰서 실행하는 기능

const ToDoList = () => {
  const [array, setArray] = useState([]);
  const inp = useRef();

  // 랜더링 시점에 맞춰서 특정 로직을 실행하겠습니다.
  useEffect(() => {
    console.log("useEffect");

    if (array.length === 3) {
      alert("모두 입력하셨습니다.");
    }
  }, [array]);
  // dependence Array
  // [array] -> 맨 처음 과 arry 라는 state 값이 바뀌었을때만 실행하겠습니다.

  function putsh() {
    // concat : 데이터를 추가 새로운 배열 생성하는 기능
    // setArray : 클로저 함수 (함수 제일 마지막에 실행됨)
    setArray(array.concat(inp.current.value));
  }

  function del(num) {
    // 배열에서 조건에 부합하는 요소들만 뽑아서 새로운 배열을 만든다.
    setArray(array.filter((item, index) => index !== num));
    console.log(num);
  }

  return (
    <div>
      <h1>2024 올해는 꼭 해봅시다!!</h1>
      <input ref={inp}></input>
      <button onClick={putsh}>계획추가</button>
      <h1>ToDoList</h1>
      <ul>
        {array.map((item, index) => (
          <li key={index}>
            {item}
            <button key={index} onClick={() => del(index)}>
              삭제
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ToDoList;

• 불러오기 방법

  import React, { useState } from "react";

useState

스테이트 변수 와 일반 변수

• 리엑트는 변경되는 값 화면과 변경되는 값을 유동적으로 보여지는화면이 분리되어 있음.

• 일반 변수(값변화가 실시간 안보임)

• 스테이트 변수(변경된 값이 실시간으로 보임)

스테이트 변수 사용해보기

• { useState } 기능을 import 해주기

const [number, setNumber] = useState(0);

number : 실제 값을 가지고 있는 변수(state값) setNumber : state값을 바꿀 수 있는 기능

import React, { useState } from "react";

const Ex01 = () => {
  // 특별한 변수를 만드는 방법
  // -> 값이 변경될때 마다 화면에 적용되어질 변수를 만드는 방법
  // number : 실제 값을 가지고 있는 변수(state값)
  // setNumber : state값을 바꿀 수 있는 기능
  const [number, setNumber] = useState(0);

  let num = 0;

  function plus() {
    num++;
    console.log(num);

    setNumber(number + 1);
  }

  return (
    <div>
      <div>{number}</div>
      <button onClick={plus}>PLUS</button>
    </div>
  );
};

export default Ex01;

es6 문법의 문제

• 해당 코드에 원클릭 변수 호출시 ( ) => 가 없으면 무한 반복으로 함수가 호출 된다.

• ( ) => 는 에로펑션 이라 불린다.

• 주의 ! state 값이 바뀌어지면 -> 컴포넌트가 재랜더링(재실행) 된다!

import React, { useState } from "react";

let num1 = Number(prompt("첫번째 숫자 입력"));
let num2 = Number(prompt("두번째 숫자 입력"));

const Ex02 = () => {
  // result : state 값을 가지는 변수
  // setResult : state 변수를 바꿀 수 있는 함수
  // 주의 ! state 값이 바뀌어지면 -> 컴포넌트가 재랜더링(재실행) 된다!
  const [number, setNumber] = useState(0);

  function result(string) {
    if (string === "+") {
      setNumber(num1 + num2);
    } else if (string === "-") {
      setNumber(num1 - num2);
    } else if (string === "*") {
      setNumber(num1 * num2);
    } else if (string === "/") {
      setNumber(num1 / num2);
    }
  }

  return (
    <div>
      <button onClick={() => result("+")}>+</button>
      <button onClick={() => result("-")}>-</button>
      <button onClick={() => result("*")}>*</button>
      <button onClick={() => result("/")}>/</button>
      <p>{number}</p>
    </div>
  );
};

export default Ex02;

useRef

• React에서 태그를 가져올때 document를 통한 태그 선택은 절대 권장하지 않음

사용방법

• useRef : 태그를 참조할 수 있는 React Hook

  import React, { useRef } from "react";

입력하는 값에 따라 화면 출력 해보기

import React, { useRef, useState } from "react";
// React Hook 사용법 1. 사용하고자 하는 hook을 import 해줘야 한다.

const Ex03 = () => {
  // React Hook 사용법 2. 기능을 컴포넌트 안에 있는 변수에 담아주기
  const input = useRef();

  // input 태그에 적은 값을 가져와서 반양시킬 state
  const [inputText, setInputText] = useState("");

  return (
    <div>
      <h1>Input태그 다루기</h1>

      {/* 
        <input ref={input}></input>
        -> input 변수를 통해서 input 태그에 매칭 시켜주겠다.
    */}
      <input
        ref={input}
        onChange={() => setInputText(input.current.value)}
      ></input>
      {/* 
        input.current == document.querySelector('input')
      */}
      <h1>{inputText}</h1>
    </div>
  );
};

export default Ex03;

• 입력한데로 값이 들어 간다.

태그를 참조하는 기능

• input 태그에 값을 참조한다.

<input ref={num1} ./>

• num1 이라는 변수에 input 태그가(값 속성 모두) 들어간다.

const num1 = useRef();

• nm1 변수에 input에 담긴 값을 정수형으로 형변환 한다.

let nm1 = parseInt(num1.current.value);

리액트 부트 스크랩

• 주소창에 리액트 부트 스크랩 검색 > get stated

• 해당 내용 복사 > 터미널 종료 이후 입력 > 설치됨!

npm install react-bootstrap bootstrap

• 설치완료됬는지 확인 방법

• 리액트 부트 스크랩을 사용할때는 css 를 import 해줘야함

• 그외 필요한 샘플은 해당 위치에서 맞춰 찾아 볼 수 있다.

• 예로 버튼 종류

실습 주사위 굴리기

• 해당 구조로 만들 예정

• 폴더에 해당 파일 만들어주기

• index.js에서 연결하여 호출 > npm start

• DiceApp.jsx

  import "bootstrap/dist/css/bootstrap.min.css";
  import React, { useState } from "react";
  import ButtonArea from "./ButtonArea";
  import BoardArea from "./BoardArea";
  import "./dice.css";
  

const DiceApp = () => { // 나와 컴퓨터에 대한 정보를 가진 state 생성(값 형태 : 객체) const [user, setUser] = useState({ name: "나", diceNum: "1", score: "0", imgPath: "./img/dice1.png", });

const [com, setCom] = useState({ name: "컴퓨터", diceNum: "1", score: "0", imgPath: "./img/dice1.png", });

const throwDice = () => { console.log("주사위 던지기!");

// 랜덤 숫자 생성 -> 숫자 비교, 이미지 값 적용
// Math.random() : 실수를 생성하는 함수
// Math.floor() : 소수점을 버림
let userDiceNum = Math.floor(Math.random() * 6) + 1;
let comDiceNum = Math.floor(Math.random() * 6) + 1;
let userScore = parseInt(user.score);
let comScore = parseInt(com.score);

// 두 주사위 눈 비교
// 1) 동일한 숫자일 때 -> 무승부 출력 카운트 필요없음
// 2) 나의 숫자가 클 때 -> 나의 카운트 +1
// 3) 컴퓨터의 숫자가 클 때 -> 컴퓨터의 카운트 +1

if (userDiceNum > comDiceNum) {
  userScore += 1;
} else if (userDiceNum < comDiceNum) {
  comScore += 1;
}

// 결과 값을 state에 반영 -> 웹 페이지의 정보를 업데이트
// { ...user } -> {name:'', diceNum:1. score:0, imPath:''} 분할 -> spread 연산자
setUser({
  ...user,
  diceNum: userScore,
  score: userScore,
  imgPath: `./img/dice${userDiceNum}.png`,
});

setCom({
  ...com,
  diceNum: comScore,
  score: comScore,
  imgPath: `./img/dice${comDiceNum}.png`,
});

};

// 초기화 기능 구현하기 // 함수명 : initDice function initDice() { setUser({ ...user, diceNum: 0, score: 0, imgPath: ./img/dice1.png, });

setCom({
  ...com,
  diceNum: 0,
  score: 0,
  imgPath: `./img/dice1.png`,
});

}

return (

export default DiceApp;

- ButtonArea.jsx

import React from "react"; import Button from "react-bootstrap/Button";

const ButtonArea = ({ throwDice, initDice }) => { return (

export default ButtonArea;

- BoardArea.jsx

import React from "react"; import Board from "./Board";

const BoardArea = ({ user, com }) => { return (

export default BoardArea;

- Board.jsx

import React from "react";

const Board = ({ user }) => { console.log(user); return (

{user.name}

현재 점수는?

{user.score}

export default Board;

- dice.css

.container { display: flex; justify-content: center; flex-direction: column; text-align: center; height: 100vh; }

.button-area > button { margin-left: 10px; }

.board-area { display: flex; justify-content: center; }

.board-area > div { margin-left: 10px; margin-top: 20px; }

.score-area { margin-top: 20px; }

![](https://velog.velcdn.com/images/songmin_tech/post/073a0ce4-a343-487d-9bee-b36f52b96b4a/image.png)

실습2

알아두면 좋은 명령어

• 컴포넌트 구조 자동생성 명령어 : rafce

리엑트 흐름

Component

• 02.component 폴더 생성

• cd로 터미널 위치 변경

• npx create-react-app .

에러 발생시

• 노드 패키지를 수동으로 설치하여 해결

  npm install npm -g

• 두 파일 생성하기

컴포넌트

• top 태그에 불러서 사용가능 이를 컴포넌트라고 함

컴포넌트 생성 규칙

1. 반드시 시작 이름의 첫 문자는 대문자이어야 한다!!
2. 함수형 컴포넌트 또는 클래스 컴포넌트

사용자 정의 함수

• rafce --> 함수형 컴포넌트 생성 단축키
• props :
  • index.js에서 전달 받은 데이터(객체 형식)
  • 상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘길때 사용 되어 진다.

    import React from "react";
    

const MyTeam = (props) => { return (

// 내보내기 export default MyTeam;

<br>

### index.js 에서 설정
```js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import reportWebVitals from "./reportWebVitals";

// 컴포넌트 불러오기
// Menu 컴포넌트를 App이라는 이름으로 불러와서 사용하겠다 !
import Footer from "./component/Menu_header";
import App from "./component/Menu";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    {/* propos : 컴포넌트를 사용할때 데이터를 전달하는 방법 */}
    <Footer />
    <App menu={"아메리카노"} price={4100} />
    <App menu={"카페라떼"} price={4500} />
  </React.StrictMode>
);

props를 이용한 대략적인 흐름

실습

defaultProps

• 넘겨받은 데이터가 없을때 기본 값을 지정할 수 있다.

import React from "react";

const MyTeam = (props) => {
  return (
    <div>
      <p>{props.title}</p>
      <p>{props.name}</p>
      <br></br>
    </div>
  );
};

// default props : 넘겨받은 데이터가 없을때 기본 값을 지정할 수 있다.
MyTeam.defaultProps = {
  name: "아무도 없습니다.",
};

// 내보내기
export default MyTeam;

name의 값이 없어도 기본값이 아무도 없습니다로 적용된다.

React

개요

React 사용해야하는 이유

1. 자바스크립트 만으론 ui구성이 어렵다!>

   • HTML 과 JS 분리

   • JSX로 HTML와 JS의 필요한 부분을 합쳐준다 !

     

2. 직관적이지만 너무 긴 js

3. 기존 새 페이지를 들어갈 때 마다 새로고침의 문제점

React란?

라이브러리, 프레임워크

리엑트 역사와 선호도

React 개발환경 구축

• 바탕화면에 react-master 폴더명으로 생성

• node.js 다운

• 동의사항 외 모두 체크 없이 next 버튼 클릭후 설치 누르면됨!

• 파워셀 열기 > cd .\Desktop\ > cd .\react-master\ code .

  • vscode 실행됨
  • 실행된 vscode의 경로 지정한 곳인지 확인해보기(react-master)

• 컨트롤 + ~ 누르면 vscode에 터미널 켜짐(아래와 같이 입력해보기)

  • 에러뜨면 다시해야함..

• npx create-react-app 01.basic

• 이렇게 뜨면 성공

에러발생

• 해당 폴더에 npm 폴더를 생성해줘야함.
  • appData는 숨겨있음으로 보기에서 숨겨진 파일 보이기 하고 들어가야함

• cd로 경로 지정해주고 npm 실행해주기

vscode

설정을 완료하였다면 해당 파일이 있는 것을 확인해볼 수 있다.

vscode 환경설정

• 다음 3가지 다운로드

• 컨트롤 + , 으로 환경설정 체크하고 변경하기

리엑트 기본 디렉토리 구조

JSX 문법

JSX 문법 특징

1. 하나 이상의 HTMl문법을 사용하려면 반드시 부모 요소로 감싸야 한다!

2. 표현식 {} 을 통해서 HTML과 JS를 같이 사용할 수 있다.

   • {} 안에 JS의 변수나 데이터를 넣어주면 페이지에 출력된다.

   • 조건부 렌더링를 통해 데이터 출력

   • if문을 사용할때 return문 바깥쪽에서 정의하거나, if문 안에 return문을 넣는 방식

   • 삼항 연산자는 return문 안에 정의할 수 있다. 조건에 따라 결과 값은 HTML 문법과 같이 출력 할 수 있음 한 줄인 경우 : 소괄호 생략 한 줄 이상의 경우 : 소괄호 추가 + 부모요소 감싸주기

   • &&, || 연산자를 활용해서 true or false에 대한 결과 값 출력

3. 기존 HTML 문법과 다른점
   • class -> className으로 정의
   • HTML 문법은 소문자 | 컴포넌트는 대문자로 인식

4. 스타일 적용은 객체형태로 정의
   • 인라인 방식 ex) <p style = {{color:'red'}}

   • 변수 정의 ex) const styled={color:'red'} <.p style={styled}>

   • css파일 import

(1) ~ (6)은 출제도가 낮아 제외

▶ 23년 3회까지 출제 횟수 분석

(1) (최하)7 요구사항 확인
(2) (최하)5 데이터 입출력 구현 (3) (하)9 통합 구현 (4) (중하)17 서버 프로그램 구현 (5) (최하하)3 인터페이스 구현 (6) (최하)5 화면설계 (7) (중)23 애플리케이션 테스트 관리

(1) 애플리케이션 테스트

애플리케이션 테스트

• 애플리케이션에 잠재된 결함을 찾아내는 일련 행위/절차
• 소프트웨어가 요구사항을 만족하는지 확인(Validation)
• 소프트웨어가 기능을 정확시 수행하는지 검증(Verification)

애플리케이션 테스트 기본원리

• 완벽한 테스트 불가능 : 잠재적 결함은 줄일 수 있지만, 소프트웨어에 결함이 없다고 증명 불가능
• 파레토 법칙 : 20%에 해당하는 코드에서 전체 결함 80% 발견 법칙
• 살충제 패러독스 : 동일한 방법으로 테스트를 반복하면 더 이상 결함 발견되지 않는 현상
• 오류 부제의 궤변 : 결함을 모두 제거해도 요구사항에 만족시키지 못하면 품질에 문제가 있는 것

정적 테스트

• 프로그램을 실행하지 않고 명세서나 소스코드 대상 분석 테스트
• 코딩 표준. 스타일, 복잡도 , 남은 결함 발견 목적
• 종류 워크스루, 인스펙션, 코드검사

(2) 애플리케이션 테스트의 분류

연동방법 정리

• 윈도우10 운영체제
• EC2 인스턴스 생성시 주의해야할 사항에 대해 알아보자
• cml의 cmd로 EC2를 ubuntu로 연동하고 html 생성
• vscode로 EC2를 연동하여 EC2 내 html과 Flask로 연동 실행하여 실시간 업데이트 체험해보기

EC2 인스턴스 생성시 주의사항

• EC2의 인스턴스 먼저 생성함
• 환경은 우분투로 설정하고 인스턴스 유형은 t2스몰 ~ t3스몰 사이 성능으로 만들것! (이하 성능으로 인스턴스 생성시vscode 연결시 무한 로딩에 빠짐)

• t2스몰 ~ t3스몰 사이로 생성할 것.

• 키 생성 위치(경로) 복사해두기

• 인스턴스 생성 > 실행중 상태 > 보안 > 보안그룹 > 인바인드 규칙 HTTP/SSH 사용자 설정(주소 0.0.0.0)으로 만들기

• 퍼블릭 IPv4 주소 메모장에 복사해두기

EC2 unbuntu 연결

• 윈도우 환경에 cmd로 CLI로 접속
• 리눅스 권한주고 확인해보기
• HTML 파일 생성해보기

cmd 에서 unbuntu 접속

• key.pem에 대한 경로로 설정하기 cd C:\Users\smhrd4\Downloads

• ssh -i key.pem ubuntu@퍼블릭 IPv4 주소입력 > yes > 초록색 문구로 unbuntu@ ... ~$ 문구 뜨면 성공

• 우분투 나가는 키는 exit

리눅스로 기본 상태보기

• htop : cpu 성능 보는것 (나가기 : q)

• hello.txt 파일생성

  touch hello.txt

• hello.txt에 내용 저장 " "

  echo "hello" > hello.txt

  • 내용 보기 : cat hello.txt
  • 파일 삭제 : rm hello.txt

• 권한보기 : ls -l

웹서버 연동 해보기

• 주요 내용
  • 우분투에서 웹서버를 설치한다.
  • 웹서버에 접속하여 페이지 내용을 불러와 본다.
  • 퍼블릭 IPv4 주소입력하여 웹 페이지에 접속해 본다.

• 웹서버 설치(nginx 설치)

  apt install nginx -y

통상적인 방법으로 입력할시 에러 발생 (sudo로 관리자 권한 명령하자!)

sudo apt install nginx -y

• 웹서버레 접속해서 페이지 내용을 불러온것

  curl localhost

• 이와 같은 문구를 출력하면 웹서버 접속 성공적!

• 브라우저에 퍼블릭 IPv4 주소입력하여 다음과 같이 뜨면 성공!

만약 안된다면 재 확인 해볼 것!

1. 인바인드 규칙 설정(HTTP/SSH)
2. sudo apt install nginx -y 설치 재확인

우분투로 기본적인 html 생성

• 우분투 입력

  cd /var/www/html

• 현재 디렉토리(.)의 소유자를 root 사용자로, 그룹 소유자를 ubuntu 그룹으로 변경합니다.

  sudo chown root:ubuntu .

• 현재 디렉토리(.)에 대해 그룹(g)에게 쓰기 권한(+w)을 추가합니다.

  sudo chmod g+w .

• index.html에 태그를 추가합니다.

  echo "<H1>Hello </H1>" > index.html

• index.html내용을 확인합니다.

  cat index.html

VScode로 EC2접속해보기

• remote-ssh를 설치하여 EC2 우분투와 연결

• ssh -i key.pem ubuntu@퍼블릭 IPv4 주소입력
  • 1번째 항목 선택

• F1 키 눌러서 아래 이미지같이 입력

Host : 별칭(아무렇게나 해도됨) HostName : 서버의 IP 혹은 도메인 User : 서버의 사용자 계정명 IdentityFile : 방금 위에서 export 한 key파일 (내껀 이름이 ssalbot 이다)

• 새창으로 열기 > 리눅스 선택 > 초록색 터미널 창뜸 이후 작업은 클라우드에서 되는 작업이다.

• 오픈폴더 > /var/www/html > yes > 파일 열고 html 수정하면됨(이미지는 태그 추가한 내용임)

python 언어로 flask 환경 만들어보기

• 상위탭 > 폴더열기 > /home/ubuntu 경로 선택
• 윈도우에서 아나콘다 좋은점

1. 가상환경 만든다
2. 기능이 편리해서
3. 라이브러리가 많아서

• 파이선 환경 구축

  sudo apt update sudo apt install python3-venv

• 가상환경을 만들기 위한 폴더 셋업한것

  python3 -mvenv ~/.venv/flask

• 가상환경 불러온것(로딩)

  source ~/.venv/flask/bin/activate

• 플라스크 라이브러리 설치

  pip install flask

java 설치

• 자바 설치

  sudo apt install default-jdk

flask 구동

• app.py

  from flask import Flask, render_template
  

app = Flask(name)

@app.route('/') def home(): return render_template('index.html')

@app.route('/user') def user(): return render_template('user.html')

@app.route('/admin') def admin(): return render_template('admin.html')

if name == "main": app.run(host = "0.0.0.0", debug=True)

- / admin / user.html

간략한 태그에 간략한 내용... 각 구분만 할 수 있게 구성

- 설명
    - bash : python app.py
    - python :    curl localhost:5000 # 해당 cmd를 사용할 수 없어서 cmd하나 더 생성함.
![](https://velog.velcdn.com/images/songmin_tech/post/662ec8f6-8feb-45a8-91f0-0cbe96a3b451/image.png)

트랜스포머

셀프 어텐션

실습

transformers기반 혐오표현 분류기

• Part3에서는 프로젝트 관련하여 배울 예정이다.

AI 관련 홈페이지

• paperswithcode
  • https://paperswithcode.com/
• huggingface
  • https://huggingface.co/

실습 1

※ 허깅페이스 사전학습모델사용하기

• https://huggingface.co/ 접속
• 로그인하기

필요한 모델 복사 > 입력하여 다운받고 사용하기

1. 텍스트 마이닝, 자연어처리 -> 토큰화 / 수치화

   • 예시) 나는 / 오늘 / 밥을 / 먹었다.

     • 유니그램 : 나는/오늘/밥을/먹었다.
     • 바이그램 : 나는오늘/오늘밥을/밥을먹었다.
     • 트라이그램 : 나는오늘밥을/오늘밥을먹었다.

2. 빈도 기반 vs 임베딩 방식

• 빈도 기반

  • 단어를 구분만
  • 부피가 커진다.

• 임베딩 방식

  • 컬럼이 추가됨(친밀도, 크기, 등등)
  • 빈도 기반보다 더 디테일 있다.

실습2

※ 워드 임베딩 실습

- 딥러닝이란 뭘까?

1) 인공지능

• 인간이 가지는 지적 능력들을 컴퓨터를 통해 구현하는 기술들의 집합
• 기술 자체를 총칭하는 개념 -> 형태 자체가 없는 포괄적 개념이다.

2) 머신러닝

• 데이터를 기반으로 컴퓨터 스스로 규칙을 찾아 학습하는 기술
• 인공지능을 구현하기 위한 핵심 기술이 머신러닝이다.

3) 딥러닝

• 인간의 신경망을 모방하여 학습하는 기술
• 머신러닝에 포함된 세부적 기술 -> 머신러닝이 할 수 없는 것들을 해결해주는 기술

가) 머신러닝이 학습을 할때 사용하는 데이터를 살펴보자!

• 정형데이터 : 표의 형태를 가지고 있음

• DataFrame / ndarray

나) 딥러닝이 학습을 할때 사용하는 데이터를 살펴보자!

• 유방암 데이터(ndarray), 폐암 데이터(ndarray) 보스턴 집값(CSV파일), 개고양이 분류(img), 네이버 감성분석(텍스트 데이터), 로이터 뉴스(텍스트 데이터), 패션데이터(img), 아기울음소리/섬집아기/자장가(음성데이터)

• 딥러닝의 구조

  • 딥러닝은 어떤 요소들로 구성이 되어 있을까?

  • 딥러닝 모델은 사람의 신경망을 모방해서 만들었다

    1) 뉴런 : 신경계를 구성하는 세포, 전기 신호를 전달

  • 생각/반응/행동 사람의 뉴런은 신경세포, 인공신경망에서 뉴런은 선형회귀(y=wx+b)

    2) 퍼셉트론 : 기존 뉴런은 모든 신호를 다음 뉴런으로 전달해주는 구조 사람의 신경망은 역치라는 문턱 값을 가지고 있음.

    신호 강도 > 역치(문턱값) : 다음 뉴런으로 신호 전달 신호 강도 < 역치(문턱값) : 신호 전달 X 인공신경망도 사람의 신경망과 최대한 유사하게 역치를 구현 역치를 구현하기 위해 뉴런에 활성화 함수를 연결시켜 역치 구현 뉴런 + 활성화 함수 = 퍼셈트론

    3) 다중 퍼셉트론 :

    기존 퍼셉트론

  • 인간의 신경망을 모방 -> 문제 해결능력 뛰어남

  • 논리게이트 XOR문제 해결 x

  • 인공지능의 첫번째 겨울(연구 동결)

  • 문제 해결을 위해 퍼셉트론(하나의 직선)을 여러 층으로 쌓아서 다층 퍼셉트론으로 구성(연산을 여러번 하도록)

- 출력층의 구조

1) 회귀

• 출력층 뉴런의 갯수 : 1개
• 손실함수 (loss) : MSE(평균 제곱 오차)
• 출력층 활성화 함수 : 생략 가능(Linear)
  • 뉴런의 구조(형태) -> 선형 회귀 함수 선형회귀 함수에서 나온 예측값을 활성화 함수를 통과시키지 않고 그대로 출력하면 회귀 예측값이 나온다.

2) 분류

2-1) 이진 분류 - 출력층 뉴런의 갯수 : 1개 - 손실함수 (loss) : Binary_crossentropy - 출력층 활성화 함수 : Sigmoid

• Sigmoid : 0~1 사이의 확률 정보를 예측해서 예측값이 0.5보다 크거나 같으면 1로 예측, 작으면 0으로 예측

2-2) 다중 분류 - 출력층 뉴런의 갯수 : 원핫 인코딩한 정답 데이터의 컬럼 갯수 - 손실함수 (loss) : categorical_crossentropy - 출력층 활성화 함수 : Softmax

• Softmax : 다중 분류에서 각 퍼셉트론의 예측 확률합을 1로 설정 기존 Sigmoid 함수 -> 이진 분류에 특화가 되어 있다.(0/1) 실제 정답의 범위(0~1)와 예측 확률이 같아야 비교가 가능하다. 시그모이드 함수의 다중분류에서 오차 파악이 제대로 되지 않는다. 다중 분류에서 오차파악 / 예측확률을 정확하게 알아보기 위해 Softmax 사용

- 오차 역전파(중요)

• 신경망이 학습되는 원리는 무엇일까?

• 역으로 가중치를 수정하면서 신경망의 성능 개선

  • 순전파 : 입력 데이터를 입력층에서부터 출력층까지 정 방향으로 이동시키면서 출력 값을 예측해나가는 과정(예측)

  • 역전파 : 출력층에서 예측값이 예측됨과 동시에 에러값(오차) 발생. 에러 값을 중간층을 통해 입력층 쪽으로 전파시키면서 가중치를 업데이트 하는 과정 - 경사 하강법을 이용해서 오차 값을 낮춰준다.(학습)

1 epochs 에서 일어나는 프로세스 : 데이터 입력 -> 순전파(예측) > 역전파(학습)

• 신경망의 학습을 위해서는 경사하강법(손실함수(loss의 미분))을 사용

• 오차 역전파에서 문제점 발생

  • 초기 활성화 함수의 종류 : 계단함수 -> Sigmoid 함수
  • Sigmoid 함수를 사용한 신경망에서 경사하강법을 적용/성능개선
  • 기울기 소실 문제가 발생 : 오차 역전파를 통해 경사 하강법으로 성능을 개선 시킬때 Sigmoid 함수의 미분 최대값이 0.25

  • 컴퓨터가 기울기를 인식하기 못하는 문제가 생겼다!

  • 컴퓨터가 학습하는 방법 : 순간적인 기울기를 구해서 기울기가 0이 되는 지점의 가중치를 찾아가는 방법으로 학습

  • 기울기를 감지하지 못한다면? : 학습을 진행하지 못하는 문제가 발생(성능개선 X)

• 기울기 소실문제를 해결하기 위해 Sigmoid 함수의 대체 함수를 찾아보자.

1. tanh : 하이퍼볼릭 탄젠트(tanh)

-> 위 아래로 범위를 늘려줘보자/ (Sigmoid 함수의 범위 0~1) -> 함수의 범위를 늘려서 기울기 소실문제에서 잘 버티지만 결국 형태는 Sigmoid함수와 동일 - 결국 기울기 소실 문제에서 자유로울 수는 없다.

2. relu

• 0보다 작을 때는 값을 0으로 / 0보다 크면 그값을 그대로 사용
• 기울기 소실 문제를 해결
• 가장 기초적으로 많이 사용하는 활성화 함수

3. Leaky ReLU / ELU

• ReLU 함수의 파생 함수

- 최적화 함수

• 신경망을 좀 더 효과적으로 학습 시키는 경사하강법을 찾아봅시다.

1) 경사하강법

• 비용함수(손실함수, loss)의 기울기를 구해서 기울기가 낮아지는 방향으로 가중치를 이동시키면서 파라미터 값을 최적화 시키는 방법

2) 확률적 경사하강법

• 모든 데이터를 연산하는 경사하강법은 컴퓨팅 자원 소모가 높고, 속도가 느리다 -> 단점
• 일부 데이터만 가지고 경사하강법을 진행해서 자원과 속도를 확보

3) 미니배치 확률적 경사하강법

• 일반적으로 PC 메모리의 한계 및 속도 저하 때문에 대부분의 경우에는 한 epochs에 모든 데이터를 집어 넣기 힘들다.
• 일반 경사하강법과 확률적 경사하강법의 절충안
• 데이터를 미니배치로 나눠서 배치별로 경사하강법을 진행

4) Momentrm(모멘텀)

• 경사하강법에 관성의 법칙을 적용해서 현재 batch뿐만 아니라 이전 batch에 데이터까지 업데이트에 반영합시다!
• 가중치를 수정하기 전 이전 학습 데이터 방향까지 참고해서 업데이트를 진행!
• 경사하강법이 진행되면서 가중치가 잘 업데이트 되었다면 해당 방향으로 더 많이 업데이트
• 아니라면 방향을 틀어 최적 값에 맞게 유연하게 수정하는 방식

5) 네스테로프 모멘텀(NAG) -> 스탭 방향

• 모멘텀을 개선한 방식 -> 모멘텀 : 여러가지 방향으로 최적 가중치 거리를 계산한 후 최적 값으로 이동 -> 미리 해당방향으로 이동한다(가정) -> 값을 계산하고 -> 실제 업데이트에 반영 -> 불필요한 이동을 더 줄일 수 있다.

6) Adagrad(아다그라드) -> 스탭 사이즈

• 가중치를 업데이트 하면서 학습률을 점차 감소시키는 방식
• 처음에는 크게 학습하다가 점차 조금씩 학습 시키는 방식
• 학습을 빠르고 정확하게 할 수 있음.

7) RMSProp -> 스탭 사이즈

• Adagrad 단점을 해결하기 위해 등장한 최적화 함수
• Adagrad : 최적해를 찾기 전에 스탭 사이즈가 줄어서 더이상 최적해를 못 찾는 문제발생
• 지수 이동 평균을 도입해서 최적해를 끝까지 찾아가도록 만들어준 최적화 함수
• 지수 이동 평균 : 과거에 모든 기간을 계산 대상으로 놓고 최근 데이터에 더 놓은 가중치를 두는 가중 이동 평균법

8) Adam

• RMSProp + Momentum
• 스탭의 사이즈와 방향 둘다 고려해서 최적해를 찾아가자.
• 최적해를 찾아가기 위해 스텝 사이즈도 적절하게 조절하고 방향도 알맞게 잡아줍시다.
• 현재 가장 많이 사용하는 최적화 함수다 !

지금까지 살펴본 신경망은 MLP

- CNN(Convolutional Neuran Network, 합성 곱 신경망)

• 왜? 합성 곱 신경망을 도입하게 되었을까?

  • 신경망은 여러 정형/비정형 데이터 모두 사용 가능하다.
  • MLP(다층퍼셉트론) -> 이미지를 처리할때 픽셀 단위로 학습과 예측을 진행, MLP의 경우 이미지 픽셀의 위치에 민감하게 동작. 같은 이미지라도 사이즈가 위치가 달라지면 예측을 정확하게 못함

• MLP의 픽셀 위치에 민감하게 동작하는 부분을 개선 시켜서 이미지에서 특징을 추출해서 비교(CNN 작동 방식)

• CNN의 구조 특징 추출부(Feature Extractor) + 분류기(Classifier) 특징 추출부 = Conv Layer + Pooling Layer

  • Conv Layer : 돋보기 - 이미지에서 중요한 특성을 더 확대시키고 도드라지게 만들어 주는 층
  • Pooling Layer : 중요한 특성은 남기고 나머지 특성들을 제외시키는 층

• 어떻게 특징을 추출할까?
  • 입력된 이미지에서 특징을 추출할 수 있는 가중치들이 들어 있는 필터 개념 도입
  • 이미지 전체 영역에 대해 일괄적으로 필터를 사용하는 것 보다 특정 범위에 한정해서 필터를 적용한다면 훨씬 효과적으로 특징을 추출할 수 있을 것이다. 아이디어에서 착안
  • 부분적으로 적용된 필터를 이동시키면서 필터가 적용된 이미지의 일부를 합성 곱 연산을 통해 특징을 추출하는 방식을 사용
  • 필터 내부에 들어 있는 값(파라미터)들은 w(가중치)에 해당 한다.

• 컬러 이미지 합성 곱 연산
  • 이미지의 구조 1) 흑백 이미지 (X, Y, 1(0~255)) -> 합성 곱 연산 2) 컬러 이미지 (X, Y, 3(RGB 채널))

• 패딩(Padding)

  • 필터를 적용할때 마다 이미지의 크기가 줄어드는 효과
  • 필터의 크길 인해 가장자리의 데이터가 부족하기 때문에 입력과 출력 이미지의 크기가 바뀌고 가장자리 데이터가 충분한게 학습되지 않느다.
  • 이를 보완하기 위해 테두리에 0값을 둘러 채워주는 것을 패딩 1) Same : 테두리에 0값을 자동으로 채워준다. - 이미지 입출력이 동일하게 유지된다. 2) Valid : 테두리 사용 안한다.

• 축소 샘플링

  • 스트라이드(Stride)
    • 합성공 연산을 수행할때 필터를 얼마나 이동시킬 것인가?
    • 기본 값은 1픽셀씩 건너 뛰면서 합성곱 연산을 수행하는 방법
    • 스트라이드를 지정해서 2픽셀 / 3픽셀씩 건너 뛰면서 합성곱 연산을 수행하는 방법

• 풀링(Pooling)
  • CNN에서 합성곱 수행 결과를 모두 넘기지 않는다.
  • 일정 범위 내에서 가장 큰 값 / 평균을 넘기는 방법
  • Max Poolong : 설정된 지역내에 가장 큰 값만 넘겨주는 것 - 상대적으로 많이 사용
  • Average Pooling : 설정된 지역 내에 평균 값을 구해서 넘겨주는 것
  • 주의할 점
  • 특정 추출부와 분류기를 연결할때 사이에 Flatten층을 추가
  • 분류로 사용되는 MLP는 1차원 데이터를 받아서 학습

  • 특성이 추출된 이미지를 1차원으로 퍼주는 작업이 필요함 -> Flatten 층이 1차원 변환

• 전이학습

  • 다른 데이터 셋으로 이미 학습한 모델을 이용해서 유사한 다른 데이터를 인식하는데 사용하는 기법

  • 잘 학습된 사람의 지식을 그대로 받아와서 문제 해결을 하는 방식

  • 특성 추출 방식

    • CNN의 구조에서 특성 추출부를 이미 학습된 모델로 대체하는 방식
    • 특성추출부만 사용하는 이유는 분류기(MLP)는 우리가 해결하고자 하는 문제에 맞춰서 설정
    • 단 새롭게 분류할 클래스가 사전 학습에 사용된 데이터와 매우 특징이 다르면 특성 추출부의 일부분만 재 사용한다.(미세조정방식)

  • 미세 조정 방식

    • 사전 학습된 모델의 가중치를 목적에 맞게 전체 또는 일부를 재학습 시키는 방식
    • 특성 추출부의 층들 중 하단부의 층들 몇개는 분류기(MLP)와 함께 새로 학습을 시키는 방식
    • 처음에는 분류기의 파라미터가 랜덤하게 초기화 되어 있는으므로 특성 추출부의 앞 단계를 학습되지 않도록 동결시키고 뒷 간의 일부 계층만 학습이 가능하게 설정한 후 분류기(MLP)와 함께 학습시켜 파라미터를 적당하게 조절해주는 방식

- RNN

(Recurrent Neural Network, 순간 신경망)

• 등장 배경
  • 순서 있는 데이터 / 시간적 개념이 들어간 시계열 데이터를 해결하기 위해 RNN이 고안
  • 문장을 보고 이해한다.(텍스트 데이터) - 각 단어가 정해진 순서대로 입력이 되어야한다는 것
  • 과거에 입력된 데이터와 나중에 입력된 데이터 사이의 관계를 고려

• 일반 신경망과의 차이점
  • RNN은 여러개의 데이터가 순서대로 입력되었을때 앞서 입력 받은 데이터의 연산 결과를 잠시 기억해놓는 방식
  • 다음 데이터가 들어오면서 기억된 연산 결과와 함께 연산을 진행하는 방식
  • 앞에서 나온 입력에 대한 결과가 뒤에서 나오는 입력 값에 영향을 주는 구조
  • 비슷한 두 문장이 입력되어도 앞에서 나온 입력 값을 구별해서 출력 값에 반영을 함.

• 활용사례(순차기반 데이터를 처리할때 RNN이 효과적이다) 1) 시계열 데이터 2) 음악 데이터 - 음악(재생시간) 3) 문장(텍스트 데이터) 분석 4) 번역

• RNN의 단점
  • RNN의 기본 활성화 함수 : tanh -> 기울기 소실문제에서 자유롭지 못하다.

  • 순환 횟수가 늘어날 수록 역전파 진행시 기울기가 점차 줄어들어서 학습을 제대로 못한다.

  • 시간이 지날수록 이전 과거 데이터를 연산했던 결과값을 잊어버린다.

• RNN의 단점을 해결하기 위해 LSTM 등장!

• 순환 횟수가 많아져도 과거의 데이터를 기억할 수 있는 방안이 필요

• 데이터를 기억해주는 메모리 셀 -> 기억 공간 추가

• 메모리셀 : 시간 t, 메모리셀 c

• 과거에 연산된 데이터부터 현재 시각 t까지 연산된 대부분의 정보 -> c에 저장

• 별도로 저장 : 오차 역전파를 진행할때 c 메모리 셀은 활성화 함수를 통과하지 않음.

  • 미분 했을때 값이 줄어드는 영향을 받지 않는다. -> 기울기 소실 일어나지 않는다.

• 데이터를 LSTM 계층 내에서만 주고 받고 다른 층으로는 전달하지 않는다.

  • 기울기 소실 문제와 과거 데이터를 잊어버리는 문제를 해결하기 위해 LSTM이 대안으로 등장

- 워드 임베딩

자연어

• 컴퓨터가 효율적으로 자연어 처리를 하기 위한 방법론 자연어 : 무한대의 가짓수가 나온다 -> 어순/단어조합/맞춤법/유사어

  -> 무한대의 조합식이 나오는 자연어를 컴퓨터가 잘 이해할 수 있도록 단순화 토큰화나 인코딩이 아닌 컴퓨터가 쉽게 이해할 수 있도록 변환 시켜주는 것 -> 임베딩은 희소표현(원핫 인코딩) -> 밀집표현(실수형태)로 변환 시켜주는 것을 의미 -> 워드 임베딩은 한 단어의 의미를 풍부하게 만들어주는 역활을 한다. -> 밀집 표현을 사용했을때 단어들의 유사도(cosine 유사도)까지 판단해서 예측에 반영 가능

코사인 유사도

• 단어와 단어간의 유사한 정도를 표현하는 방법
• 범위 : -1 ~ 1
• 코사인 유사도가 1이다 : 단어가 완전 일치하다.
• 코사인 유사도가 0이다 : 두 단어가 관계가 없다(독립관계)
• 코사인 유사도가 -1이다 : 단어가 반대되는 의미를 가지고 있다.

• 코사인 함수 사잇 각 0도 ~ 180도 사잇 각이 0도인 경우 : 단어가 일치하다(코사인 유사도 : 1) 사잇 각이 90도인 경우 : 두 단어가 관계가 없다(독립적인 관계) 사잇 각이 180도인 경우 : 두 단어가 반대되는 의미를 가지고 있다(코사인 유사도 : -1)

실습

• 파이토치를 이용한 딥러닝

YoloV

개요.

• Yolo버전에 대해 알아보자
• 객체 탐지 : 컴퓨터 비전과 이미지 처리와 관련된 컴퓨터 기술로서, 디지털 이미지와 비디오에서 관심 객체(예:인간, 건물, 자동차 등)의 위치를 감지하는 작업
  • 활용 분야 : 얼굴 검출, 보행자 검출, 영상 복구, 비디오 감시, 자율주행 등

• YoloV2

• YoloV3

• YoloV4

• YoloV5

• YoloV7

• YoloV6
  • YoloV5를 기반으로 만들어짐
  • YoloV7 보다 나중에 나옴

• YoloV8

Data annotation 기법

Roboflow

• Roboflow 홈페이지 방문
• 로그인
• 무료버전 > workspace 이후 > 스킵 버튼 클릭

• select folder

• 업로드 된것을 확인

• save and 컨티뉴

• 사진 갯수 조정

• 팀원간 협력 가능

• 첫 사진부터 눌러서 고양이와 강아지 분류

실습

YoloV7기반 Custom 데이터로 객체 탐지

실습

• 로이터 뉴스 분류하기

키위 라이브러리

!pip install kiwipiepy

---

실습

• 네이버 영화리뷰 감성분석(konlpy)

실습

• CNN 소리데이터 학습

최종 프로젝트

개요

프로젝트 프로세스

과제

• 3개, 4월 1일 16:00까지 작성하여 제출
• 약식 기획서 제출 양식 아래 빨간글씨 참조

자료조사 및 약식 기획서 작성

주의사항

• 멘토링 일지 시트를 매일 쓰기.

기획 멘토링

자기소개는 개인으로 간략하게(무슨 기능을 하였는지 파트가 무엇인지)

서비스 멘토링

멘토링 이후 완성된 기획서 작성해야함

기술 멘토링

• 빅데이터 기획서 추가됨

기획 발표

산출물

UI / UX

• 프로젝트 진행 및 최종 발표

주제 공개!

• 실전 프로젝트 게시판(교육기간 끝나면 사라짐)