내일 배움 캠프 23_08_23 TIL

오늘도 어제에 이어서 ImageTag를 찍고 저장하는 부분을 더 해보았는데

오늘은 더는 이 기능에 대한 공부에 매몰되면 안될 것 같아서 우선 지금 프로젝트 코드에 합쳐보았다

 

import React, { useState } from 'react';

import { uniqueId } from 'lodash';

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

import supabase from 'src/lib/supabaseClient';

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

const ImageTag: React.FC<ImageTagProps> = ({ onTagsAndResultsChange }) => {

  const [selectedImage, setSelectedImage] = useState<File | null>(null);

  const [tags, setTags] = useState<Tag[]>([]);

  const [images, setImages] = useState<ImageData[]>([]);

  const [addTagMode, setAddingTagMode] = useState(false);

  const [selectedTagIndex, setSelectedTagIndex] = useState<number | null>(null);

  const [searchFormHandler, setSearchFormHandler] = useState(false);

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

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

  const [selectedTagVisible, setselectedTagVisible] = useState(false);

  //이미지 클릭 시 태그를 찍는 함수 x,y 값과 text, img, price를 갖고있다

  const handleImageClick = (event: React.MouseEvent<HTMLImageElement>) => {

    if (addTagMode) {

      const image = event.currentTarget;

      const imageRect = image.getBoundingClientRect();

      const x = event.clientX - imageRect.left;

      const y = event.clientY - imageRect.top;

      // 이미 값을 가지고 있는 태그 중 마지막에 값을 가지지 않은 태그의 인덱스를 찾음

      const lastEmptyTagIndex = tags

        .slice()

        .reverse()

        .findIndex((tag) => !tag.text);

      const updatedTags = [...tags];

      // 값이 없는 태그가 있고, 그 태그가 마지막에 추가한 태그라면 삭제 처리

      if (lastEmptyTagIndex !== -1 && tags.length - lastEmptyTagIndex - 1 === selectedTagIndex) {

        updatedTags.splice(tags.length - 1 - lastEmptyTagIndex, 1);

      }

      const newTag = { x, y, text: '', img: '', price: '' };

      setTags([...updatedTags, newTag]);

      setSelectedTagIndex(updatedTags.length);

      setselectedTagVisible(true);

      setSearchFormHandler(true);

      setSearchKeyword('');

      setSearchResults([]);

    }

  };

  //태그를 클릭 시 실행되는 함수 보였다 안보였다

  const handleTagClick = (index: number) => {

    if (addTagMode) {

      setSelectedTagIndex(index);

      setselectedTagVisible(!selectedTagVisible);

      setSearchFormHandler(false);

    } else if (selectedTagIndex === index) {

      setselectedTagVisible(!selectedTagVisible);

    } else {

      setSelectedTagIndex(index);

      setselectedTagVisible(!selectedTagVisible);

      setSearchFormHandler(false);

    }

  };

  // 검색을 수행하는 함수

  const performSearch = async () => {

    if (!searchKeyword) return;

    const { data: filteredResults, error } = await supabase

      .from('products')

      .select('*')

      .filter('prodName', 'ilike', `%${searchKeyword}%`); // ilike는 대소문자 구분 없는 부분 일치 검색

    if (error) {

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

      return;

    }

    setSearchResults(filteredResults);

  };

  const handleSearchTextChange = (SearchKeyword: string) => {

    setSearchKeyword(SearchKeyword);

  };

  const handleSearchModalClose = () => {

    // 검색을 수행하지 않은 상태에서 닫는 경우에만 검색 결과를 초기화하고 선택한 태그를 삭제

    if (searchFormHandler) {

      setSearchResults([]);

      setSelectedTagIndex(null);

      setTags(tags.filter((_, index) => index !== selectedTagIndex));

    }

    setSearchFormHandler(false);

  };

  //supabase는 이미지가 한글명이거나 특수문자가 안되는 등 제약사항이 많아서 그냥 uuid로 파일명을 넣어주기 위한 함수

  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {

    if (event.target.files && event.target.files.length > 0) {

      const file = event.target.files[0];

      const originalFileName = file.name;

      const fileExtension = originalFileName.split('.').pop();

      const randomFileName = uniqueId() + '.' + fileExtension;

      setSelectedImage(new File([file], randomFileName));

    }

  };

  //검색결과를 반환하는 함수

  const handleSelectResult = (result: Data) => {

    if (selectedTagIndex !== null) {

      const updatedTags = [...tags];

      const selectedTag = updatedTags[selectedTagIndex];

      selectedTag.text = result.prodName;

      selectedTag.img = result.prodImg;

      selectedTag.price = result.price;

      setTags(updatedTags);

      setSearchResults([]);

      setSearchKeyword('');

      setSearchFormHandler(false);

      onTagsAndResultsChange(updatedTags, []);

    }

  };

  //저장 버튼 클릭 시 DB에 저장하는 함수

  const handleSaveImage = async () => {

    const imageUrls = [];

    if (selectedImage) {

      const { data, error } = await supabase.storage.from('photos').upload(`tags/${selectedImage.name}`, selectedImage);

      if (error) {

        console.error('Error uploading image to Supabase storage:', error);

        alert('이미지 업로드 중 에러가 발생했습니다!');

        return;

      }

      imageUrls.push(data.path);

      const newImage = {

        url: imageUrls,

        tags: [...tags]

      };

      const { error: insertError } = await supabase.from('posts').insert([

        {

          tagimage: imageUrls,

          tags: [...tags]

        }

      ]);

      if (insertError) {

        console.error('Error adding post:', insertError);

        alert('에러가 발생했습니다!');

        return;

      }

      setImages([...images, newImage]);

      setSelectedImage(null);

      setTags([]);

    }

  };

  const handleDeleteTag = (index: number) => {

    const updatedTags = tags.filter((_, idx) => idx !== index);

    setTags(updatedTags);

    setselectedTagVisible(false);

    setSelectedTagIndex(null);

  };

  return (

    <>

      <div>

        <input type="file" accept="image/*" onChange={handleImageUpload} />

        <button

          onClick={(e) => {

            e.preventDefault();

            setAddingTagMode(!addTagMode);

          }}

        >

          {addTagMode ? '태그 추가 완료' : '상품 태그 추가'}

        </button>

        {/* 이미지 선택 후 태그가 찍힐 부분 */}

        {selectedImage && (

          <div style={{ position: 'relative' }}>

            <img src={URL.createObjectURL(selectedImage)} alt="이미지" onClick={handleImageClick} />

            {tags.map((tag, index) => (

              <div

                key={index}

                onClick={() => handleTagClick(index)}

                style={{

                  position: 'absolute',

                  left: tag.x,

                  top: tag.y,

                  backgroundColor: 'red',

                  display: 'flex',

                  width: '40px',

                  height: '40px'

                }}

              >

                {selectedTagIndex === index && selectedTagVisible && (

                  <div>

                    {tag.text && <div> {tag.text}</div>}

                    {tag.price && <div> {tag.price}</div>}

                    {tag.img && <img src={`${tag.img}`} alt="이미지" />}

                    {tag.text || tag.price || tag.img ? (

                      <button onClick={() => handleDeleteTag(index)}>삭제</button>

                    ) : null}

                  </div>

                )}

              </div>

            ))}

          </div>

        )}

        {/* 검색창과 검색결과 부분 */}

        {selectedTagIndex !== null && searchFormHandler && (

          <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>

            <button onClick={handleSearchModalClose}>닫기</button>

          </div>

        )}

        {/* <button onClick={handleSaveImage}>저장하기</button> */}

      </div>

    </>

  );

};

export default ImageTag;

위 코드를 테스트 레파지토리에서 본 레파지토리에 적용하면서 제일 처음 만났던 문제는

테스트에서는 선택한 이미지가 제일 최상위에 존재했기에 그냥 tag를 찍어도 괜찮았지만 지금은 컴포넌트 내부에서

이미지가 렌더링되기에 타겟이미지를 지정해주고 거기에 태그를 찍는것으로 해결을 해보았고 또 하나의 문제는 

태그가 그전에는 찍을때마다 값이 안들어가더라도 계속 찍히는 문제가 있었기에 이는 

 // 이미 값을 가지고 있는 태그 중 마지막에 값을 가지지 않은 태그의 인덱스를 찾음

      const lastEmptyTagIndex = tags

        .slice()

        .reverse()

        .findIndex((tag) => !tag.text);

      const updatedTags = [...tags];

      // 값이 없는 태그가 있고, 그 태그가 마지막에 추가한 태그라면 삭제 처리

      if (lastEmptyTagIndex !== -1 && tags.length - lastEmptyTagIndex - 1 === selectedTagIndex) {

        updatedTags.splice(tags.length - 1 - lastEmptyTagIndex, 1);

      }

 

이 부분에서 만약 태그가 찍혔는데 값을 안넣고 다른 부분을 찍어버린다면 그 마커를 삭제하는 코드를 짜서

해결해보았다. 이 외에도 지금 고민중인게 현재는 상품 데이터를 검색을하면 DB에 요청해서 키워드와 같은 이름을 가진

상품들을 가져와서 보여주고 있는데 이 방식이 효율면에서 더 좋을지 아니면 모든 데이터를 이 Write 페이지에 들어올 때

패치해오고 그 데이터를 가지고 캐시를 하던 처리를해서 보여주는게 좋을지 고민을 해보아야 할 것 같다.

기필코 내일까지는 이 기능을 끝내야겠다 더는 지체하면 안될 것 같다.

 

 아래는 오늘도 공부한 CS에 관련해서 내용을 붙여놓겠다

 

2.프로세스 메모리

2-1. 프로세스의 메모리 구조 
****이미지 복사해가기 ****


1)Code 영역
-실행할 프로그램의 코드가 저장된다. CPU는 이 영역에서 명령어를 하나씩 가져와 처리하게 된다.

2)Data 영역
-전역변수와 정적변수가 저장된다.
-이 변수들은 프로그램이 시작될 때 할당되어 프로그램 종료 시 소멸된다.

3)Stack 영역
-호출된 함수의 수행을 마치고 복귀할 주소 및 데이터(지역변수, 매개변수, 리턴값 등)을 임시로 저장하는 공간
-이 영역은 함수 호출시 기록하고 함수의 수행이 완료되면 사라진다. 매커니즘은 자료구조(stack)에서
  배운 LIFO(Last In First Out) 방법으로 저장/출력 한다.
-컴파일 시 stack 영역의 크기가 결정되기 때문에 무한정 할당 할 수 없다. 
-따라서 재귀함수가 반복해서 호출되거나 함수가 지역변수를 메모리를 초과할 정도로 너무 많이 가지고 있다면
stack overflow가 발생한다.
위의 세 영역은 컴파일 할 때 data, stack 영역의 크기를 계산해 메모리 영역을 결정한다.

4)Heap 영역
-동적 데이터 영역이다.
-메모리 주소 값에 의해서만 참조되고 사용되는 영역이다. 따라서, 프로그램 동작 시(런타임)에 크기가 결정된다.
  ex) stack에서 pointer 변수를 할당하면 pointer가 가리키는 heap 영역의 임의의 공간부터 원하는 크기만큼 할당해 사용하게 된다.
-heap 영역은 런타임에 결정된다. 자바에서는 객체가 heap 영역에 생성되고 GC(Garbage Collector)에 의해 정리된다.
  

2-2. 커널 프로세스의 메모리

커널이란.
- 커널은 대부분의 운영 체제의 주요 구성 요소이며 컴퓨터 하드웨어와 프로세스를 잇는 핵심 인터페이스 입니다.
그리고 두 가지 관리 리소스에서 최대한 효과적으로 통신합니다.
  -> '커널 == 운영체제'가 아니라, 커널은 운영체제의 주요 구성 요소이다.

-커널은 메모리 관리, 프로세스 관리, 하드웨어와 프로세스 사이에서 명령을 즉시 실행할 수 있는(인터프리터) 역할을 수행하거나 시스템의
호출이나 보안등의 기능을 수행한다.

-즉, 대부분의 OS에서 커널은 하나의 프로세스가 아니라 컴퓨터 하드웨어와 프로세스를 잇는 인터페이스로 보아야 한다.

-OS에서 응용 프로그램 조회해서 강제 종료 할 수 있는 기능도 커널 프로세스의 역할이다.

Code 영역
-시스템 콜, 중단(인터럽트) 처리 코드
-CPU, 메모리 등 자원 관리를 위한 코드
-편리한 인터페이스 제공을 위한 코드

Data 영역
-CPU, Memory 등 하드웨어 자원을 관리하기 위한 자료구조가 저장
-PCB(Process Controll Block) 자료구조가 저장
  1.현재 수행 중인 프로세스의 상태, CPU 사용 정보 등을 유지하기 위한 자료구조
  2.프로세스 제어 블록이란, 특정한 프로세스를 관리할 필요가 있는 정보를 포함하는 운영체제 커널의 자료구조 이다.
   3.PCB는 각 프로세스에 대한 다양한 정보를 담고 있는 데이터로써 사람으로 따지면 주민등록증과 유사하다.
   4. 각 프로세스의 PCB는 OS내부의 Process Management 부서에서 관리되며, PC, Register, MMU 정보, Process의 상태, CPU Time,
   PID(Process ID)등 많은 정보들이 포함된다. 구조체와 같이 구성된다.
   5.간단히 말해서 운영체제가 프로세스에 대한 정보를 담고있는 구조체이다.
   6.PCB는 중요한 정보들이 담겨있기 때문에 운영체제 -> 커널 내부에 담겨진다.
PCB란 -> 해당 프로세스의 실행 정보와 상태 정보를 저장하는 자료구조로 커널 프로세스에 존재한다. 

Stack 영역
-각 Process의 커널 스택을 저장
  -프로세스는 함수 호출시 자신의 복귀 주소를 저장하지만, 커널은 커널 내의 주소가 된다.
  -각각의 프로세스마다 별도의 스택을 두어 관리한다.
=> 1.커널은 힙 메모리를 사용하지 않는다.
     2.커널은 운영체제에서 동적메모리 할당을 위해 필요한 기능들을 커널이 제공하는데,
        운영체제는 커널에서 제공하는 기능을 사용해서 메모리 풀(memory pool)을 관리한다.

정리하기

1) 프로세스 : 메모리에 올라온 프로그램**

2) 프로세스 생명주기 : 신규 - 준비 - 수행 - 대기 - 종료**

3) PCB : 프로세스의 실행 정보와 상태 정보를 저장하는 자료구조 (PID, PC, Register, MMU 등)**

4) 대기 큐 (Queue) : Job, Ready, Device Queue 등**

5) Scheduler : Job, CPU, Device Schduler 등**

6) Swapping : 안쓰는 프로세스 HDD로 내리고, 다시 쓰이면 메모리로 올리는 작업**

7) Context Switching : Running 프로세스를 Ready로 만들고 다른 프로세스로 전환**

8) Dispatcher : 컨텍스트 스위칭할 때 필요한 정보(PCB를 저장하고 꺼내는 프로그램)**

9) CPU 시간공유 시스템 : (대부분의)OS에서 프로세스(스레드)가 시간단위로 나누어서 CPU를 사용할 수 있도록 관리해주는 시스템**

10) 프로세스 메모리 공간 : 프로세스 주소 공간은 Code, Data, Stack, Heap 으로 구성됨**

11) 커널 : 커널은 대부분의 운영 체제(OS)의 주요 구성 요소이며 컴퓨터 하드웨어와 프로세스를 잇는 핵심 인터페이스**

12) PCB : 프로세스의 실행 정보와 상태 정보를 저장하는 자료구조로 커널 프로세스에 존재**