내일 배움 캠프 23_08_24 TIL

오늘은 어제에 이어서 이미지 태그하는 기능을 컴포넌트로 나눠서 버튼을 하나 만들어서 그 버튼을 클릭할 때마다

이미지 태그 컴포넌트가 실행이 되어서 여러개의 사진에 각각 독립적인 태그를 넣어서 저장할 수 있도록 구현하는 코드를 연구해보았다

 

좀 더 재사용성을 높이기 위해서

import React, { useState } from 'react';

import supabase from 'src/lib/supabaseClient';

import { Data } from 'src/types/types';

import { SearchProps } from 'src/types/types';

const Search: React.FC<SearchProps> = ({ onSearchResultSelect }) => {

  const [searchKeyword, setSearchKeyword] = useState<string>('');

  const [searchResults, setSearchResults] = useState<Data[]>([]);

  const performSearch = async () => {

    if (!searchKeyword) return;

    const { data: filteredResults, error } = await supabase

      .from('products')

      .select('*')

      .filter('prodName', 'ilike', `%${searchKeyword}%`);

    if (error) {

      console.error('Error fetching search results:', error);

      return;

    }

    setSearchResults(filteredResults);

  };

  const handleSearchTextChange = (SearchKeyword: string) => {

    setSearchKeyword(SearchKeyword);

  };

  const handleSelectResult = (result: Data) => {

    onSearchResultSelect(result);

    setSearchKeyword('');

    setSearchResults([]);

  };

  return (

    <div className="tag-search-modal">

      <input

        type="text"

        value={searchKeyword}

        onChange={(event) => handleSearchTextChange(event.target.value)}

        placeholder="검색어를 입력하세요"

      />

      <button onClick={performSearch}>검색하기</button>

      <div>

        {searchResults.map((result, index) => (

          <div

            key={index}

            onClick={() => handleSelectResult(result)}

            style={{ cursor: 'pointer', marginBottom: '10px' }}

          >

            <div> {result.prodName}</div>

            <div> {result.prodBrand}</div>

            <div> {result.price}</div>

            <div>

              <img src={result.prodImg} alt="이미지" />

            </div>

          </div>

        ))}

      </div>

    </div>

  );

};

export default Search;

서치해서 결과값을 보여주는 부분도 컴포넌트로 나누고

 

이미지 핸들링 하는 부분도 나누고 태그하는 부분도 나눠서

 

import React, { useState } from 'react';

import ImageTag from '../post/ImageTag';

import ImageUploader from './ImageUploader';

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

interface AddImageTagComponentProps {

  onTagsAndResultsChange: (tags: Tag[], searchResults: Data[]) => void;

  onImageSelect: (image: File) => void;

}

const AddImageTagComponent: React.FC<AddImageTagComponentProps> = ({ onTagsAndResultsChange, onImageSelect }) => {

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

  const addImageTagComponent = () => {

    const newImageTagComponent = (

      <ImageTag key={Date.now()} onTagsAndResultsChange={onTagsAndResultsChange} onImageSelect={onImageSelect} />

    );

    setImageTagComponents([...imageTagComponents, newImageTagComponent]);

  };

  return (

    <div>

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

      <ImageUploader onImageSelect={onImageSelect} />

      {imageTagComponents.map((imageTagComponent, index) => (

        <div key={index}>{imageTagComponent}</div>

      ))}

    </div>

  );

};

export default AddImageTagComponent;

여기서 이미지 추가 버튼을 클릭하면 컴포넌트가 하나 새로 생겨서 렌더링 되도록 코드를 짜 보았다

이제 겨우 여러개를 만들어서 태그를 찍는 기능까지 왔을 뿐 앞으로 내용 입력하는 에디터도 컴포넌트로 만들어놔서

이미지가 추가됐을 때 같이 옆에 디스플레이 되도록 구현을 해야하고 또한 값을 프롭스로 넘겨서 한번에 업로드를 하고있는데 이 부분에 타이틀은 하나로 가고 내용과 태그 부분들을 json 형식으로 db에 같이 저장을해서 가져와서 뿌려주어야 할 것 같다 갈길이 아직 멀지만 차근차근 해나가면 그래도 곧 끝날 것 같다고 생각이 든다.

 

아래는 오늘 공부한 CS 내용들을 붙여놓는다.

 

쓰레드와 쓰레드 풀

0.프로세스와 쓰레드

0-1 프로그램을 실행해주는 주체 = 프로세스
-상가건물을 컴퓨터라고 한다면 치킨을 만드는 치킨집을 프로세스라고 볼 수 있습니다.
  -상가안의 식당들은 배정된 자신의 공간과 돈이 있습니다.(필요한 만큼 배정된 고유 공간)

프로세스와 쓰레드 요약
-프로세스 : 자신만의 고유 공간과 자원을 할당받아 사용
-쓰레드 : 다른 쓰레드와 공간과 자원을 공유하면서 사용

1.쓰레드

1-1.프로세스와 쓰레드의 차이점
  프로세스 : 자신만의 고유 공간과 자원을 할당받아 사용
  -프로세스는 메모리 상에서 실행중인 프로그램을 말하며, 쓰레드는 이 프로세스 안에서 실행되는 흐름 단위를 말한다.
  -프로세스는 최소 하나의 쓰레드를 보유하고 있으며, 각각 별도의 주소공간을 독립적으로 할당 받는다.

프로세스 만으로 작업을 처리할때의 문제점
  -프로세스 생성에 큰 오버헤드가 있다.
     [프로세스를 생성할때 많은 시간이 소요된다.]
 -프로세스 컨텍스트 스위칭의 비효율성, 오버헤드가 크다.
 -프로세스 사이에 통신이 어렵다
    [비용이 비싼 IPC를 사용해서 통신을 한다]
   [IPC란 : Inter-Process Communication은 프로세스간 통신을 위한 메커니즘이다.
   프로세스 간 데이터를 주고받기 위한 방법으로, Message Queue, Shared Memory, Semaphore, Socket 등의 방법이 있습니다.
------------------------------------------------------------------------------------------------------
쓰레드 : 다른 쓰레드와 공간과 자원을 공유하며 사용
   -쓰레드는 프로세스안에서 작업을 처리하는 주체이다.
   -쓰레드는 자원 중에 stack만 따로 할당받고 나머지 영역은 쓰레드끼리 서로 공유한다.
  
쓰레드가 해결한 문제들
    -프로세스 보다 크기가 작은 실행 단위 구현
    -프로세스의 생성 및 소멸에 따른 오버헤드 감소
    -쓰레드간 자원을 공유 함으로써 빠른 컨텍스트 스위칭
    -프로세스 들의 통신 시간, 방법 어려움 해소
------------------------------------------------------------------------------------------------------
프로세스와 쓰레드 비교
  -운영체제는 프로세스마다 독립된 메모리 영역을 Code/Data/Stack/Heap의 형식으로 할당한다.
     [각각 독립된 메모리 영역을 할당해주기 때문에 프로세스는 다른 프로세스의 변수나 자료에 접근 할 수 없다.]
  -이와 다르게, 쓰레드는 메모리를 서로 공유할 수 있다.

     [프로세스가 할당받은 메모리 영역 내에서 Stack 형식으로 할당된 메모리 영역은 따로 할당받고, 나머지
         Code/Data/Heap 형식으로 할당된 메모리 영역을 공유한다]
     [따라서, 각각의 스레드는 별도의 스택을 가지고 있지만 힙 메모리는 서로 읽고 쓸 수 있게 된다.]
     [즉, 치킨집에서 각자 일하는 공간이 있지만, 같이 보는 업무 가이드(Code)가 있고, 주문도 같이 받고(Data), 손님이
      오고가는 홀 공간도 같이 쓴다(Heap)는 점과 비슷하다]

  -즉 프로세스는 운영체제로부터 별도의 메모리 영역을 할당 받고
  -스레드는 Stack을 제외한 Code/Data/Heap 부분은 공유해서 서로 읽고 쓸 수 있게 된다(공유자원)

------------------------------------------------------------------------------------------------------
1-2 프로세스와 쓰레드의 주소공간
프로세스의 주소공간
프로세스를 알기 전에 프로그램을 알아야 한다. 프로그램(Program)은 어떤 작업을 위해 실행할 수 있는 파일을 말한다.

프로세스의 사전적 정의는 다음과 같다
-컴퓨터에서 연속적으로 실행하고 있는 컴퓨터 프로그램
-메모리에 올라와 실행되고 있는 프로그램의 인스턴스(독립적인 개체)
-운영체제로부터 시스템 자원을 할당받는 자원의 단위
-정리하자면 프로그램의 실행된 부분을 의미한다

**이미지 가져오기 **
프로세스는 다음의 특징을 갖는다
 
1.각각 독립된 메모리 영역 (Code,Data,Stack,Heap)을 할당받는다.
  -코드 영역(code area):프로그래머가 작성한 프로그램이 저장되는 영역
  -데이터 영역:코드가 실행되면서 사용한 환경이나 파일들의 각종 데이터들이 모여있는다.
  -스택 영역(stack area):호출한 함수가 종료되면 되돌아올 메모리의 주소나 지역 변수 등이 저장된다.
  -힙 영역(heap area): 동적으로 할당되는 데이터를 위해 존재한다.

2.최소 1개 이상의 스레드(메인 스레드)를 가지고 있다.
3.각 프로세스는 별도의 주소 공간에서 실행되며 기본적으로 다른 프로세스의 자원에 접근할 수 없다.
4.한 프로세스가 다른 프로세스의 자원에 접근하려면 프로세스 간 통신(IPC)를 사용해야 한다.
  -ex. 파이프, 파일, 소켓 등을 이용한 통신 방법
5.그림에서 여러 프로세스가 동시에 실행되고 관리 되는 것처럼 보인다. 하지만 CPU는 한 번에 한 가지 명령밖에
처리할 수 없다. 즉 동시가 아니라 빠르게 프로세스들을 번갈아가면서 실행하고 관리하고 있는 것이다.

------------------------------------------------------------------------------------------------------
스레드의 주소공간
스레드의 사전적 정의는 다음과 같다.

-프로세스 내에서 실행되는 여러 흐름의 단위
-프로세스의 특정한 수행 경로
-프로세스가 할당받은 자원을 이용하는 최소 실행 단위

스레드는 다음의 특징을 갖는다.
-프로세스 내에서 각 필요한 Stack만 할당받고, Code,Data,Heap 영역은 공유해서 각 스레드가 공유한다.
-같은 프로세스 내 스레드끼리 자원(Heap)을 공유하며 실행된다.
   [즉, 스레드는 공유하는 자원인 Heap 영역에 있는 변수를 수정할 수 있다.]
-프로세스 하나만을 사용해서 프로그램을 실행하기에는 메모리의 낭비가 발생한다.
  [스레드는 프로세스와 다르게 스레드 간 메모리를 공유하며 작동한다]
 [즉, 프로세스가 할당받은 자원을 이용하는 처리 작업(실행의 흐름)의 단위이다]
------------------------------------------------------------------------------------------------------
스레드가 독립적으로 가지고 있는 부분 = 작업의 흐름과 관련됨
-program counter (실행할 명령어)
-register set
-stack space

스레드가 동료 스레드와 공유하는 부분 = 작업 데이터와 관련됨
-code section
-data section
-OS resources

전통적인 개념의 heavy weight process는 하나의 thread를 가지고 있는 작업(task)으로 볼 수 있습니다.
------------------------------------------------------------------------------------------------------
1-3 멀티 프로세스 와 멀티 쓰레드

멀티 프로세스 : 하나의 운영체제 안에서 여러 프로세스가 실행되는 것이다.
멀티 쓰레드 : 하나의 프로세스가 여러 작업을 여러 쓰레드를 사용해 동시에 처리하는 것

멀티 프로세스 
장점
-하나의 프로세스가 죽어도 다른 프로세스에는 영향을 끼치지 않음
단점
-각각 독립된 메모리 영역을 갖고 있어 작업량이 많을수록 오버헤드가 발생하고 문맥 교환(Context Switching)으로 인한 성능 저하를 유발
-프로세스 사이의 통신이 복잡(IPC)

멀티 쓰레드
장점
-프로세스를 생성하여 자원을 할당하는 시스템 콜이 줄어들어 자원을 효율적으로 관리 가능
-Code, Data, Heap 영역을 공유하기 때문에 데이터를 주고 받는 것이 간단해지고 자원 소모가 적음
-쓰레드 사이 작업량이 작아 문맥교환이 빠르며 시스템 처리량 증가

단점
-프로그램 디버깅이 까다로움 (에러 추적)
-하나의 쓰레드에 문제가 생기면 전체적인 프로세스에 영향을 끼침
-동기화 문제 발생(전역 변수를 이용하기 때문)
-단일 프로세스 시스템에서 효과를 기대하기 어려움
-다른 프로세스에서 쓰레드 제어 불가
------------------------------------------------------------------------------------------------------
멀티 프로세스

멀티 프로세싱이란 하나의 프로그램을 여러 개의 프로세스가 구성하여 각 프로세스가 작업(Task)를 처리하도록 하는 기법이다(=멀티 태스킹과 비슷한 의미)

특징
-여러개의 자식 프로세스 중 하나에 문제가 발생해도 다른 자식 프로세스는 영향을 받지 않는다.
-Context Switching 과정에서 캐쉬 메모리 초기화 등 무거운 작업이 진행되면서 오버헤드가 발생한다.
-프로세스 간 통신을 하기 위해서는 IPC를 통해야 한다.
-프로세스 간 공유하는 메모리가 없어서 Context Switching이 발생하면 데이터를 처음부터 불러와야 한다.

참고사항 (문맥교환은 CPU 코어를 여러 프로세스가 돌아가면서 사용해서 작업을 처리하는 방식을 말한다)
(해당 프로세스의 상태(Context)를 자신의 PCB에 저장하고 대기하고 있던 다음 순서의 프로세스가 이전의 프로세스 상태를 복구하는 작업이다.

------------------------------------------------------------------------------------------------------

멀티 스레딩

멀티 스레딩이란 하나의 응용프로그램을 여러 개의 쓰레드로 구성하고 각 쓰레드가 하나의 작업을 처리하도록 하는 것이다.
윈도우나 리눅스 등 많은 OS에서 멀티 프로세싱도 지원하지만 멀티 쓰레딩을 기본으로 하고 있다.

특징
-시스템 자원 소모 감소(자원의 효율성)
  [프로세스를 생성하여 자원을 할당하는 시스템 콜이 줄어서 자원을 효율적으로 관리할 수 있다.]

-시스템 처리량 감소 (처리 비용)
  [쓰레드 간 데이터를 주고 받는 것이 간단해지면서 시스템 자원 소모가 줄어든다]
 [쓰레드 사이의 작업량이 작아 쓰레드 간 Context Switching이 활발하게 일어난다]

단점
-Thread-Safety에 문제가 없는지 확실한 설계가 필요하다
-디버깅이 까다롭다
-동기화나 교착 상태가 발생할 수 있다.
   -교착 상태란 둘 이상의 쓰레드가 서로의 작업이 끝나기만을 기다리며 작업을 더 이상 진행하지 못하는 상태를 의미한다.
-프로세스 밖에서는 해당 쓰레드를 제어할 수 없다.
-하나의 쓰레드가 문제가 발생하면 프로세스 전체가 영향을 받는다.