내일 배움 캠프 23_08_28 TIL

오늘은 지난주에 이어서 각 태그들의 코드들을 적중시키고 잔 버그들을 잡는 작업을 진행하고 CSS 위주로 진행을 하였다

// AddImageTagComponent.tsx

import React, { useState } from 'react';

import { v4 as uuidv4 } from 'uuid';

import ImageTag from './ImageTag';

import { atom, useAtom } from 'jotai';

import { ImageTagPropsToAddImageComponent, Tag } from 'src/types/types';

export const contentsAtom = atom<Record<string, string>>({});

export const tagsDataAtom = atom<Record<string, Tag[]>>({});

const AddImageTagComponent: React.FC<ImageTagPropsToAddImageComponent> = ({ onImageSelect, onRemovedImage }) => {

  const [imageTagComponents, setImageTagComponents] = useState<JSX.Element[]>([]);

  const [inputData, setInputData] = useAtom(contentsAtom);

  const [, setTagsData] = useAtom(tagsDataAtom);

  const [selectedImages, setSelectedImages] = useState<File[]>([]);

  const addImageTagComponent = () => {

    const componentUuid = uuidv4();

    const newImageTagComponent = (

      <div key={componentUuid}>

        <ImageTag

          onTagsAndResultsChange={(tags) => handleTagsChange(componentUuid, tags)}

          onImageSelect={(selectedImage) => {

            setSelectedImages((prevImages) => [...prevImages, selectedImage]);

            onImageSelect(selectedImage);

          }}

          onContentsChange={(newContents) => handleContentsChange(componentUuid, newContents)}

        />

      </div>

    );

    setImageTagComponents((prevComponents) => [...prevComponents, newImageTagComponent]);

    setInputData((prevInputData) => ({ ...prevInputData, [componentUuid]: '' }));

    setTagsData((prevTagsData) => ({ ...prevTagsData, [componentUuid]: [] }));

  };

  const handleTagsChange = (uuid: string, tags: Tag[]) => {

    setTagsData((prevTagsData) => ({ ...prevTagsData, [uuid]: tags }));

  };

  const handleContentsChange = (uuid: string, newContents: string) => {

    setInputData((prevInputData) => ({ ...prevInputData, [uuid]: newContents }));

  };

  const removeImageTagComponent = (uuid: string) => {

    const index = Object.keys(inputData).indexOf(uuid);

    if (index !== -1) {

      const removedImage = selectedImages[index];

      onRemovedImage(removedImage);

      setSelectedImages((prevImages) => prevImages.filter((_, i) => i !== index));

      setImageTagComponents((prevComponents) => {

        const updatedComponents = prevComponents.filter((_, i) => i !== index);

        return updatedComponents;

      });

      setInputData((prevInputData) => {

        const updatedInputData = { ...prevInputData };

        delete updatedInputData[uuid];

        return updatedInputData;

      });

      setTagsData((prevTagsData) => {

        const updatedTagsData = { ...prevTagsData };

        delete updatedTagsData[uuid];

        return updatedTagsData;

      });

    }

  };

  return (

    <div>

      <button onClick={addImageTagComponent}>이미지 추가</button>

      {imageTagComponents.map((component) => {

        const componentUuid = (component.key as string) || '';

        return (

          <div key={componentUuid}>

            {component}

            <button onClick={() => removeImageTagComponent(componentUuid)}>삭제</button>

          </div>

        );

      })}

    </div>

  );

};

export default AddImageTagComponent;

간단하게 버튼으로 생성된 컴포넌트들을 삭제 버튼을 만들어서 삭제 시 콜백함수를 통해 해당하는 uuid값을 가진 컴포넌트를 삭제시켰고 이 때 원래는 index를 기반으로 각 컴포넌트와 인덱스들을 식별했었는데 인덱스로 하다보니

5개의 컴포넌트가 있었다면 3번쨰 컴포넌트를 삭제 시 4,5번 인덱스가 땅겨지면서 값은 스테이트에 존재하지만

재렌더링 되는 효과가 나타나면서 유저에게서 데이터가 안보이는 현상이 발생했다 그래서 값을 uuid를 통해서 해당 uuid를 가진 녀석만 타겟으로 삭제시켜서 재렌더링이 일어나는것을 방지시켰다 아직 할게 정말 많다 빠르게 해야겠다...

 

CS 공부한 것을 아래에 남겨두겠다

 

컴퓨터와 데이터베이스

0-1 컴퓨터의 구성

보조기억장치는 영구 저장소로써 파일뿐만 아니라 데이터도 저장할 수 있다.
파일은 파일 시스템에, 데이터는 데이터베이스 라는곳에 저장된다.

0-2 데이터베이스 이해
파일 시스템 VS 데이터베이스
-파일 시스템이란
  1.개별적인 파일들을 보관하고 정리하는 데 사용되는 큰 창고와 같다
  2.파일들은 여러 폴더에 저장되고, 사용자는 파일을 직접 관리해야 한다.
  3.이 비유에서는 사람들이 파일들을 개별적으로 처리하고 정리하는 데 많은 시간과 노력을 투자해야한다.

-데이터베이스란
  1.체계적으로 구성된 도서관으로 비유할 수 있겠고
  2.데이터베이스는 파일 시스템과는 다르게 데이터를 구조화하고 연결시키는 기능을 제공한다.
  3.데이터베이스는 테이블, 레코드, 필드 등의 개념을 사용하여 데이터를 구성하고, 데이터를 효율적으로 관리하고
     검색할 수 있다.
  4.데이터베이스 시스템은 도서관리 시스템과 비슷한 역할을 한다.
  5.데이터베이스 시스템을 사용하면 데이터의 일관성, 무결성, 안정성을 유지하며 복잡한 데이터 조작 작업을 간편하게 수행할 수 있다.


1.데이터베이스
1-0, 데이터베이스의 개요
(들어가기 전 정보와 데이터는 서로 다르다
 정보 - 여러 종류의 문서로 흩어져있어 조합하기 어려운 단위
  
 데이터 - 정보를 처계적으로 분류하여 조합할 수 있는 단위

-데이터베이스(db)의 정의 : 
 1.데이터베이스는 조직체의 응용 시스템들이 공유해서 사용하는 운영 데이터들이 구조적으로 통합됨
  2.데이터베이스의 구조는 사용되는 데이터 모델에 의해 결정된다.

-데이터베이스의 특징
  1.데이터의 대규모 저장소로서, 여러 사용자에 의해 동시에 사용됨.
  2.모든 데이터가 중복을 최소화하면서 통합됨.
   3.데이터베이스는 운영 데이터뿐만 아니라 그 데이터에 관한 설명까지 포함
       -설명 : 데이터베이스 스키마 또는 메타데이터
   4.프로그램과 데이터 간의 독립성이 제공됨
       -프로그램 메모리가 아닌 개별적인 저장공간에 저장되기 때문에
   5.효율적으로 접근이 가능하고 질의를 할 수 있음.
      (질의란 SQL 문으로 어떠어떠한 값을 조회한다는 식)

 -데이터베이스 관리 시스템(DBMS: Database Management System)
  1.데이터베이스를 정의하고, 질의어를 지원하고, 리포트를 생성하는 등 작업을 수행하는 소프트웨어

1-1.데이터베이스 시스템 개요
 -데이터베이스 스키마
  1.전체적인 데이터베이스 구조를 뜻하며 자주 변경이 되지않음
  2.데이터베이스의 모든 가능한 상태를 미리 정의
  3.Ex)사람 이라는 데이터는 이름, 키, 몸무게, MBTI 필드등을 가진다
  4.Ex)DEPARTMENT 데이터는 DEPTNO, DEPTNAME, FLOOR 필드를 가진다
  5.EX)EMPLOYEE 데이터는 EMPNO, EMPNAME, TITLE, DNO,SALARY 필드를 가진다

 -데이터베이스 상태
  1.특정 시점의 데이터베이스의 내용을 의미하며, 시간이 지남에 따라 계속해서 바뀜
  2.데이터베이스에 수정이 일어날때마다 상태는 바뀐다.

  -데이터베이스
   1.조직체의 응용 시스템들이 공유해서 사용하는 운영 데이터들이 구조적으로 통합된 모임. 
   2.시스템 카탈로그와 저장된 데이터베이스로 구분할 수 있음.
   3.시스템 카탈로그는 저장된 데이터베이스의 스키마 정보를 유지

   - DBMS
   DBMS의 기능
   1.사용자가 새로운 DB를 생성
   2.DB의 구조를 명시
   3.사용자가 데이터를 효율적으로 질의하고 수정할 수 있도록 함
   4.시스템의 고장이나 권한이 없는 사용자로부터 데이터를 안전하게 보호
   5.동시에 여러 사용자가 데이터베이스를 접근하는 것을 제어

   -사용자
    1.데이터베이스 사용자는 여러 부류로 나눌 수 있다.
    
  -하드웨어
    1.데이터베이스는 디스크와 같은 보조 기억 장치에 저장되며, DBMS에서 원하는 정보를 찾기 위해서는 디스크의 블록들을 주기억 장치로 읽어들여야 한다.
    2.계산이나 조합 및 비교 연산들을 수행하기 위해 중앙 처리 장치가 사용됨.
    3.DBMS 자체도 주기억 장치에 적재되어 실행되어야 함.
   
   -DB 시스템의 요구사항
   1.데이터 독립성
   2.효율적인 데이터 접근
   3.데이터에 대한 동시 접근
   4.백업과 회복
   5.중복을 줄이거나 제어하며 일관성 유지
   6.데이터 무결성
   7.데이터 보완
   8.쉬운 질의어
   9.다양한 사용자 인터페이스

1-2. 파일 시스템 vs DBMS
-파일 시스템을 위한 기존의 데이터 관리
1.파일 시스템은 DBMS가 등장하지 않았던 1960년대부터 사용됐음.
2.파일을 접근하는 방식이 응용 프로그램 내에 상세하게 표현되므로 데이터에 대한 응용 프로그램의 의존도가 높음

파일 시스템의 단점
1.데이터가 많은 파일에 중복해서 저장됨
2.다수의 사용자들을 위한 동시성 제어가 제공되지 않음
3.보안 조치가 미흡
4.회복 기능이 없음
5.프로그램-데이터 독립성이 없으므로 유지보수 비용이 많이 듬
6.파일을 검색하거나 갱신하는 절차가 상대적으로 복잡하기 때문에 프로그래머의 생산성이 낮다.

DBMS의 장점
-스키마 정의를 통해
1.중복성과 불일치가 감소됨
2.표준화를 시행하기가 용이
3.조직체의 요구사항을 식별할 수 있다.

-관리도구를 통해
1.시스템을 개발하고 유지하는 비용이 감소됨.
2.보안이 향상됨
3.무결성이 향상됨
4.다양한 유형의 고장으로부터 데이터베이스를 회복할 수 있다.
5.데이터베이스의 공유와 동시 접근이 가능하다.

DBMS의 단점
1.추가적인 하드웨어 구입 비용이 들고, DBMS 자체도 비싸다.
2.직원들의 관리도구 사용법 교육 비용이 많이든다.
3.비밀과 프라이버시 노출 등의 단점이 존재할 수 있다.

DBMS를 적용하면 안되는 경우
-초기의 투자 비용이 너무 클 때
-오버헤드가 너무 클 때
-응용이 단순하고 잘 정의되었으며 변경되지 않을 것으로 예상될 때
-엄격한 실시간 처리 요구사항이 있을 때
-데이터에 대한 다수 사용자의 접근이 필요하지 않을 때

1-3 DBMS의 발전 과정

특징
1.1960년대 후반에 최초의 계층 DBMS가 등장
2.트리 구조를 기반으로 하는 계층 데이터 모델을 사용한 DBMS
3.계층 데이터 모델은 네트워크 데이터 모델의 특별한 사례

장점
1.어떤 유형의 응용에 대해서는 빠른 속도와 높은 효율성을 제공

단점
1.어떻게 데이터를 접근하는가를 미리 응용 프로그램에 정의해야 함
2.DB가 생성될 때 각각의 관계를 명시적으로 정의해야 함
3.레코드들이 링크로 연결되어 있으므로 레코드 구조를 변경하기 어려움.


2)네트워크 DBMS 구조
특징
1.레코드들이 노드로, 레코드들 사이의 관계가 간선으로 표현되는 그래프를 기반으로 하는 네티워크 데이터 모델을 사용
2.네트워크 DBMS에서도 레코드들이 링크로 연결되어 있으므로 레코드 구조를 변경하기 어려움.

3)관계 DBMS
장점
1.모델이 간단하여 이해하기 쉽다
2.사용자는 자신이 원하는것만 명시하고, 데이터가 어디있는지, 어떻게 접근해야 하는지는 DBMS가 결정

4)객체 지향 DBMS
특징
1.객체 지향 프로그래밍 패러다임을 기반으로 하는 데이터 모델

장점
1.데이터와 프로그램을 그룹화하고, 복잡한 객체들을 이해하기 쉬우며, 유지와 변경이 용이하다.

5)객체 관계 DBMS
특징
1.DBMS에 객체 지향 개념을 통합한 객체 관계 데이터 모델이 제안됨.

1-4.DBMS 언어
1)데이터 정의어 (DDL: Data Definition Language)
1.사용자는 데이터 정의어를 사용하여 데이터베이스 스키마를 정의
2.데이터 정의어로 명시된 문장이 입력되면 DBMS는 사용자가 정의한 스키마에 대한 명세를 시스템 카탈로그 또는 데이터 사전에 저장

2)데이터 조작어 (DML:Data Manipulation Language)
1.사용자는 데이터 조작어를 사용하여 데이터베이스 내의 원하는 데이터를 검색하고, 수정하고, 삽입하고, 삭제한다
2.절차적 언어와 비절차적 언어가 존재한다
3.관계 DBMS에서 사용되는 SQL은 대표적인 비절차적 언어
4.대부분의 데이터 조작어는 SUM,COUNT,AVG와 같은 내장 함수들을 갖고 있다.
5.데이터 조작어는 단말기에서 대화식으로 입력되어 수행되거나 C,코볼 등의 고급 프로그래밍 언어로 작성된 프로그램에 내포되어 사용된다.

3)데이터 제어어 DCL
-사용자는 데이터 제어어를 사용하여 데이터베이스 트랜잭션을 명시하고 권한을 부여하거나 취소

1-5)DBMS 사용자
응용 프로그래머
1.데이터베이스 위에서 특정 응용이나 인터페이스를 구현하는 사람
2.프로그래밍 언어로 응용 프로그램을 개발하면서 데이터베이스를 접근하는 부분은 내포된 데이터 조작어를 사용
3.이들이 작성한 프로그램은 최종 사용자들이 반복해서 수행하므로 기작성 트랜잭션 또는 프로그램이라고 부릅니다

데이터베이스 관리자(DBA)
1.데이터베이스 관리자는 조직의 여러 부분의 상이한 요구를 만족시키기 위해서 일관성 있는 데이터베이스 스키마를 생성하고 유지하는 사람
2.데이터베이스 관리자의 역할
  -리얼 DB 변경이 필요할 떄 DBA에게 요청
3.데이터베이스 스키마의 생성과 변경
-무결성 제약 조건을 명시
-사용자의 권한을 허용하거나 취소하고, 사용자의 역할을 관리
-저장 구조와 접근 방법(물리적 스키마) 정의
-백업과 회복
-표준화 시행

오퍼레이터(인프라팀
1.DBMS가 운영되고 있는 컴퓨터 시스템과 전산실을 관리하는 사람

최종 사용자(유저)
-질의하거나 갱신하거나 보고서를 생성하기 위해 DB를 사용하는 사람
-최종 사용자는 다시 데이터베이스 질의어를 사용하여 매번 다른 정보를 찾는 캐주얼 사요자와 기작성 트랜잭션을 주로 반복해서 수행하는 초보 사용자로 구분