국비 지원 개발자 과정

<시험1-요구사항 확인평가자체크리스트>

액터의 정의와 제시된 요구사항 기술서에서 액터를 도출하여 기술

액터: 시스템 외부에 존재하며 시스템과 상호작용을 하는 모든 것

사용자, 다른 사용자, 관리자 액터

유스케이스의 정의와 제시된 요구사항 기술서에서 유스케이스를 도출하여 기술

유스케이스: 사용자의 입장에서 바라본 시스템의 추상적인 기능으로 시스템의 요구사항을 나태냄

글등록, 카테고리선택, 사진첨부, 게시글 목록 조회, 게시글 상세조회, 댓글, 글신고, 글수정, 글삭제

제시된 요구사항 기술서에서 유스케이스에 포함되지 않는 비기능적 요소들을 기술

다국어지원, 음성지원, 사진 첨부 용량과 개수

유스케이스 다이어그램

<시험2-요구사항 확인서술형(신)>

UML(Unified Modeling Language)의 정의와 UML의 필요성

UML: 소프트웨어 공학에서 사용되는 표준화된 범용 모델링 언어로 소프트웨어 개념을 다이어그램으로 그리기 위해 사용하는 시각적인 표기법이다.

필요성: 의사소통하기 좋고 대규모 프로젝트 구조의 로드맵을 만들 때 유용하다. 또한 개발할 시스템 구축에 대한 기초를 마련할 수 있기에 백엔드 문서용으로 좋다.

유스케이스 다이어그램의 구성 요소 2가지

액터, 유스케이스

유스케이스 다이어그램의 다음의 두 가지 관계에 대해 설명

연관 관계: 유스케이스와 액터간의 상호작용이 있음을 표현한다. 유스케이스와 액터를 실선으로 연결한다

포함 관계: 하나의 유스케이스가 다른 유스케이스의 실행을 전제로할 때 형성되는 관계이다. 포함되는 유스케이스는 포함하는 유스케이스를 실행하기 위해 반드시 실행되어야 하는 경우에 적용한다.

유스케이스 다이어그램의 다음의 두가지 관계에 대해 설명

확장 관계: 확장 기능 유스케이스와 확장 대상 유스케이스 사이에 형성되는 관계. 확장 대상 유스케이스를 수행할 때 특정 조건에 따라 확장 기능 유스케이스를 수행하는 경우에 적용한다.

일반화 관계: 유사한 유스케이스 또는 액터를 모아 추상화한 유스케이스 또는 액터와 연결시켜 그룹을 만들어 이해도를 높이기 위한 관계.

DB모델링 중 논리적 설계에서 사용하는 정규화의 종류 두 가지 이상 적으시오

제1 정규형(1NF): 테이블의 컬럼이 하나의 값을 갖도록 테이블을 분해하는 것

제2 정규형(2NF): 제1정규화를 진행한 테이블에 대해 완전 함수 종속을 만족하도록 테이블을 분해하는 것

제3 정규형(3NF): 제2정규화를 진행한 테이블에 대해 이행적 종속을 없애도록 테이블을 분해하는 것

아래의 두 설명을 보고 각각 무엇을 뜻하는지 쓰시오

1. 속성: 엔티티에서 관리해야할 최소 단위 정보 항목, 엔티티는 하나 이상의 이것 포함

2. 인스턴스: 엔티티의 속성으로 실제로 구현된 하나의 값

다음의 엔티티와 속성을 기반으로 ERD를 채워 넣으시오

점수

1-학생ID / 2-과목ID / 3-과목점수

학생

4-학생ID / 5-학생PWD / 6-학생명 / 7-학과 / 8-학년

과목

9-과목ID / 10-과목명

아래 설명을 보고 몇 정규화에 해당하는지 기술

1. 제3정규화: 주식별자가 아닌 속성들 중에서 종속 관계에 있는 속성을 찾아 제거하는 것

2. 제1정규화: 엔티티에서 하나의 속성이 복수의 값을 갖도록 설계되었을 때 하나의 속성이 단일 값을 갖도록 하는 것

3. 제2정규화: 주식별자가 아닌 속성 중에서 주식별자 전체가 아닌 일부 속성에 종속된 속성을 찾아 제거하는 것

Fragments

React에서 컴포넌트가 여러 엘리먼트를 반환하는 것은 흔한 패턴

Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있음

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

<element2.html - React.Fragment 표시>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>One</h1>
      <h1>Two</h1>
      <h1>Three</h1>
    </div>
    <script type="text/babel">
      const rootElement = document.querySelector("#root");
      const element = (
        // React.Fragment를 쓰면 div #root에 바로 아래요소 생성됨
        <React.Fragment
          className="box"
          children={[
            React.createElement("h1", null, "Zero"),
            React.createElement("h1", null, "Two"),
            React.createElement("h1", null, "Three"),
          ]}
        />
      );
      ReactDOM.createRoot(rootElement).render(element);
    </script>
  </body>
</html>

<element3.html - React.Fragment 생략 >

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>One</h1>
      <h1>Two</h1>
      <h1>Three</h1>
    </div>
    <script type="text/babel">
      const rootElement = document.querySelector("#root");
      const element = (
        // React.Fragment대신 <>같이 단축해서 사용 가능
        <>
          <h1>first</h1>
          <h1>second</h1>
          <h1>third</h1>
        </>
      );
      ReactDOM.createRoot(rootElement).render(element);
    </script>
  </body>
</html>

Element 찍기

Function -> 재사용이 가능한 element 생성

함수이지만 element이다

Element가 소문자로 시작하는 경우에는 <div> 나 <span> 같은 내장 컴포넌트라는 것을 뜻하며 'div' 나 'span' 같은 문자열 형태로 React.createElement에 전달됨

<Foo />와 같이 대문자로 시작하는 타입들은 React.createElement(Foo)의 형태로 컴파일되며 JavaScript 파일 내에 사용자가 정의했거나 import 한 컴포넌트를 가리킴

// 반드시 첫 문자를 대문자로 적을것(소문자로 작성하면 컴포넌트취급 못받음)
const Paint = ({props}) => {
  // 혹은
const Paint = ({title, description}) => {
  return(
    <>
      <h1>{title}</h1>
      <h2>{description}</h2>
    </>
  )
}

<elem1.html - JS 함수형으로 처리>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.querySelector("#root");

      const paint = (title, description) => (
        <>
          <h1>{title}</h1>
          <h2>{description}</h2>
        </>
      );

      const element = (
        <>
          {paint("JAVA", "객체지향 프로그래밍")}
          {paint("React", "프론트엔드 라이브러리")}
          {paint("Oracle", "관계지향형 데이터베이스")}
        </>
      );

      ReactDOM.createRoot(rootElement).render(element);
    </script>
  </body>
</html>

<elem2.html - React 문법으로 작성>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.querySelector("#root");

      // Paint를 소문자로하면 에러 발생!
      // 사용자 정의 컴포넌트는 반드시 대문자로 시작해야함!!
      const Paint = ({ title, description }) => (
        <>
          <h1>{title}</h1>
          <h2>{description}</h2>
        </>
      );

      const element = (
        <>
          <Paint title="Java" description="객체지향 프로그래밍" />
          <Paint title="React" description="프론트엔드 라이브러리" />
          <Paint title="Oracle" description="관계지향형 데이터베이스" />
        </>
      );

      ReactDOM.createRoot(rootElement).render(element);
    </script>
  </body>
</html>

<elem3.html - children 추가>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.querySelector("#root");

      // Paint를 소문자로하면 에러 발생!
      // 사용자 정의 컴포넌트는 반드시 대문자로 시작해야함!!
      const Paint = ({ title, description, children }) => (
        <>
          <h1>{title}</h1>
          <h2>{description}</h2>
          {children}
        </>
      );

      /*
      function Paint ({ title, description, children }) {
        return(
          <>
            <h1>{title}</h1>
            <h2>{description}</h2>
            {children}
          </>
        );
      }
      */

      const element = (
        <>
          <Paint title="Java" description="객체지향 프로그래밍">
            <span>오라클 서버와 연동도 가능하다.</span>
            <p>백엔드 구현</p>
            <p>프로시저 연동</p>
          </Paint>
          <Paint title="React" description="프론트엔드 라이브러리">
            리액트 설명입니다.
          </Paint>
          <Paint title="Oracle" description="관계지향형 데이터베이스">
            오라클 설명입니다.
          </Paint>
        </>
      );

      ReactDOM.createRoot(rootElement).render(element);
    </script>
  </body>
</html>

<elem4.html - 리렌더링>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.querySelector("#root");

      const Paint = ({ title, description, children }) => (
        <>
          <h1>{title}</h1>
          <h2>{description}</h2>
          {children}
        </>
      );

      const Nice = () => <h3>React Nice! ==> 리렌더링</h3>;

      const element = (
        <>
          <Paint title="React" description="가상돔 활용가능">
            <Nice />
            <Nice />
            <Nice />
          </Paint>
        </>
      );

      ReactDOM.createRoot(rootElement).render(element);
    </script>
  </body>
</html>

JSX란?

리액트 장점은 리렌더링에 있다 - 비교 알고리즘

엘리먼트 타입이 바뀌면 이전 엘리먼트를 버리고 새로 그린다

엘리먼트 타입이 같다면 key를 먼저 비교함

props(DataSet: [], {}, [{}])를 비교해서 변경사항만 새로 그린다 (변경사항을 비교하는데 key가 필요)

바닐라 JS - 변경이 발생하면 무조건 다시 그린다

React - 변경된 부분만 다시 그린다(효과적) 단점: 바뀐 걸 알려면 계속 비교해야함

React는 불변객체이다(immutable) - 변하지 않는 객체

우리는 그저 ReactDOM.render 함수로 element(JSX)를 전달할 뿐 변경에 대한 판단은 리액트가 알아서 함 -> 변경사항에 대한 반영은 리액트가 담당함

DataSet은 json형식 ← Gson으로 바꿈 ← List로 꺼냄 ← 오라클서버

기존 key와 오라클에서 select한 값 비교 → 바뀐 값만 변경

<intro.html - JS와 JSX 섞어 쓰기>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.querySelector("#root");

      function Paint({ title, description, children }) {
        return (
          <>
            <h1>{title}</h1>
            <h2>{description}</h2>
            {/* 주석은 이런 식으로 달아야 에러나지 않음! */}
            {/* children이 먹힌다는 건 JSX라는 의미임 */}
            {children}
          </>
        );
      }

      const element = (
        <>
          <Paint title="JS와JSX함께쓰기" description="나는 JSX이다">
            {Paint({
              title: "리액트",
              description: "가상DOM지원",
              children: "부분갱신처리 가능함",
            })}
          </Paint>
        </>
      );

      ReactDOM.createRoot(rootElement).render(element);
    </script>
  </body>
</html>

<mix1.html - 텍스트가 대문자로 시작하면 h1, 소문자로 시작하면 h3 적용>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.querySelector("#root");

      const Message = ({ text }) => {
        {
          /* 파라미터로 넘어온 문자열의 첫번째 문자가 대문자인가? */
        }
        if (text.charAt(0) === text.charAt(0).toUpperCase()) {
          // 여기는 JS영역
          return <h1>{text}</h1>; // 여기는 JSX영역
        } else {
          return <h3>{text}</h3>;
        }
      };

      const element = (
        <>
          <Message text="Oracle" />
          <Message text="oracle" />
        </>
      );

      ReactDOM.createRoot(rootElement).render(element);
    </script>
  </body>
</html>

<mix2.html - 홀수는 작게 짝수를 크게 출력>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.querySelector("#root");

      // 홀수는 작게 짝수를 크게 출력
      // 파라미터에 {}가 있으면 props이다
      const Number2 = ({ number }) => {
        // 2로나눈 나머지가 0(짝수)이면 h1, 0이 아니면(홀수) h2
        return number % 2 === 0 ? <h1>{number}</h1> : <h3>{number}</h3>;
      };

      const element = (
        <>
          <Number2 number={1} />
          <Number2 number={2} />
          <Number2 number={3} />
          <Number2 number={4} />
          <Number2 number={5} />
        </>
      );

      ReactDOM.createRoot(rootElement).render(element);
    </script>
  </body>
</html>

<mix3.html - 선택된 것만 h1으로 감싸고 나머지는 h3>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.querySelector("#root");

      // 선택된 것만 h1으로 감싸고 나머지는 h3
      const Number3 = ({ number, selected }) => {
        return selected ? <h1>{number}</h1> : <h3>{number}</h3>;
      };

      const element = (
        <>
          <Number3 number={1} />
          <Number3 number={2} />
          <Number3 number={3} selected={true} />
          <Number3 number={4} />
          <Number3 number={5} />
        </>
      );

      ReactDOM.createRoot(rootElement).render(element);
    </script>
  </body>
</html>

<mix4.html - 선택된 것만 h1으로 감싸고 나머지는 h3 + map사용>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.querySelector("#root");

      // 선택된 것만 h1으로 감싸고 나머지는 h3
      const Number4 = ({ number, selected }) => {
        return selected ? <h1>{number}</h1> : <h3>{number}</h3>;
      };

      const element = (
        <>
          {/* 여긴 JSX영역 - 주석주의! */}
          {/* javascript의 복잡한 연산을 element를 사용하는 곳에서 사용 가능 */}
          {/* 왜냐하면 JS와 JSX를 섞어쓰는 것이 가능하기에! */}
          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((number) => (
            // 여긴 JS영역 / key값은 반드시 unique해야함!
            <Number4 key={number} number={number} selected={number === 3} />
          ))}
        </>
      );

      ReactDOM.createRoot(rootElement).render(element);
    </script>
  </body>
</html>

<workout1.html - 운동목록 출력>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <style>
    .items {
      padding-left: 0;
    }
    .item {
      list-style: none;
      color: steelblue;
      font-size: 37px;
    }
  </style>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.querySelector("#root");

      const Workout = ({ props }) => {
        const [items, setItems] = React.useState([
          { id: 1, name: "벤치프레스", count: 0 },
          { id: 2, name: "랫풀다운", count: 0 },
          { id: 3, name: "스쿼트", count: 0 },
        ]);
        return (
          <>
            <ul className="items">
              {/* React에선 class가 아니라 className으로 해야함 */}
              {items.map((item) => (
                <li key={item.id} className="item">
                  {item.name}({item.count}회)
                </li>
              ))}
            </ul>
          </>
        );
      };

      const element = (
        <>
          <Workout />
        </>
      );

      ReactDOM.createRoot(rootElement).render(element);
    </script>
  </body>
</html>

<workout2.html - onClick 이벤트 추가>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <style>
    .items {
      padding-left: 0;
    }
    .item {
      list-style: none;
      color: darkolivegreen;
      font-size: 37px;
    }
  </style>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.querySelector("#root");

      const WorkoutList = ({ props }) => {
        const [items, setItems] = React.useState([
          { id: 1, name: "벤치프레스", count: 0 },
          { id: 2, name: "랫풀다운", count: 0 },
          { id: 3, name: "스쿼트", count: 0 },
        ]);
        return (
          <>
            <ul className="items">
              {items.map((item) => (
                <WorkoutItem key={item.id} item={item} />
              ))}
            </ul>
          </>
        );
      };

      const WorkoutItem = (props) => {
        console.log(props);
        const item = props.item;
        return (
          <>
            <li key={item.id} className="item" onClick={() => onClick(item)}>
              {item.name}({item.count}회)
            </li>
          </>
        );
      };

      const onClick = (item) => {
        console.log(`onClick 호출 ${item.name} ${item.count}`);
      };

      const element = (
        <>
          <WorkoutList />
        </>
      );

      ReactDOM.createRoot(rootElement).render(element);
    </script>
  </body>
</html>

저작자표시 비영리 변경금지 (새창열림)

'국비학원 > 수업기록' 카테고리의 다른 글

국비 지원 개발자 과정_Day62 (2)	2023.02.24
국비 지원 개발자 과정_Day61 (0)	2023.02.23
국비 지원 개발자 과정_Day59 (0)	2023.02.21
국비 지원 개발자 과정_Day58 (0)	2023.02.20
국비 지원 개발자 과정_Day57 (0)	2023.02.17

루팽구 일지

국비 지원 개발자 과정_Day60

'국비학원 > 수업기록' 카테고리의 다른 글

댓글

티스토리툴바

국비 지원 개발자 과정_Day60

'국비학원 > 수업기록' 카테고리의 다른 글

관련글

댓글

티스토리툴바