내일 배움 캠프 23_08_22 TIL

오늘은 데이터 테이블이 수정이 되면서 기존에 짯었던 코드를 조금 수정했는데

import React, { useEffect, useState } from 'react';

import { useAtom } from 'jotai';

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

import {

  RealTimeContainer,

  PostContainer,

  PostCard,

  Title,

  Body,

  Image,

  ImageWrapper,

  HeadTitle,

  Rank

} from '../StyledSideBar';

import { likesAtom, postsAtom } from '../FetchPosts';

const RealTimeCombo = () => {

  // Jotai의 useAtom을 사용해서 전역선언한 Posts 데이터와 Likes 데이터를 가져오기

  const [posts] = useAtom(postsAtom);

  const [likes] = useAtom(likesAtom);

  const [filteredPosts, setFilteredPosts] = useState<Post[]>([]);

  // 가져온 포스트 목록에서 likes의 길이 순으로 정렬해서 좋아요 순 5개까지 디스플레이

  useEffect(() => {

    const postsWithLikesCount = posts.map((post) => {

      const postLikes = likes.find((like) => like.id.toString() === post.id.toString());

      const likesCount = postLikes ? Object.keys(postLikes.likes).length : 0;

      console.log('likesCount', likesCount);

      return { ...post, likesCount };

    });

    const sortedPosts = [...postsWithLikesCount].sort((a, b) => b.likesCount - a.likesCount).slice(0, 5);

    setFilteredPosts(sortedPosts);

  }, [posts, likes]);

  return (

    <RealTimeContainer>

      <HeadTitle>지금 인기있는 편식 조합</HeadTitle>

      <PostContainer>

        {filteredPosts.map((post, index) => (

          <PostCard key={post.id}>

            <Rank isFirst={index === 0}>{index + 1}</Rank>

            <ImageWrapper>{post.img && <Image src={post.img} alt={'1'} />}</ImageWrapper>

            <Title>{post.title}</Title>

            {/* {post.likesCount} */}

          </PostCard>

        ))}

      </PostContainer>

    </RealTimeContainer>

  );

};

export default RealTimeCombo;

좋아요의 테이블이 변경이 되면서 해당 값들을 불러와서 find 메소드를 사용해서 해당 postid를 찾고
그 id값을 가지고 있는 likes 데이터의 length를 구해서 좋아요 수를 알아냈고 그 데이터를 바탕으로 정렬해서

상위 5개의 게시글을 필터링해서 보여주는 코드로 변경을 했다 근데 이 방법은 데이터 패치를 포스트 데이터를 패치하고

또 좋아요 데이터를 패치해야하기에 팀원들과 회의를 통해서 외부키로 likes를 받아서 처리를 하던지 해야할 것 같다

 

그리고 또 어제에 이어서 이미지를 넣었을 때 태그 추가 모드일 경우에만 이미지를 클릭했을 때 해당 위치에
태그가 들어가게 만들고 태그가 추가됐을 때 검색창이 디스플레이되며 해당 인풋창에 키워드를 입력하고 검색을 하면
가져온 데이터들 중에서 검색을 해서 나온 리스트를 클릭하게 되면 해당 데이터가 태그에 들어가는 코드를 작성해보았다

import React, { useState } from "react";

import { v4 as uuidv4 } from "uuid";

import { Tag, ImageData, Test } from "./types/Types";

import { supabase } from "./supabase";

import { useAtom } from "jotai";

import { postsAtom } from "./TestData";

function ImageTaggerWithDB() {

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

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

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

  const [data] = useAtom(postsAtom);

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

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

  const [searchModalVisible, setSearchModalVisible] = useState(false);

  const [searchText, setSearchText] = useState("");

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

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

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

    if (addingTagMode) {

      const rect = event.currentTarget.getBoundingClientRect();

      const x = event.clientX - rect.left;

      const y = event.clientY - rect.top;

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

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

      setSelectedTagIndex(tags.length);

      setselectedTagVisible(true);

      setSearchModalVisible(true);

      setSearchText("");

      setSearchResults([]);

    }

  };

  const handleTagClick = (index: number) => {

    if (addingTagMode) {

      setSelectedTagIndex(index);

      setselectedTagVisible(!selectedTagVisible);

      setSearchModalVisible(false);

    } else if (selectedTagIndex === index) {

      setselectedTagVisible(!selectedTagVisible);

    }

  };

  const performSearch = () => {

    if (!searchText) return;

    const filteredResults = data.filter((item) =>

      item.title.includes(searchText)

    );

    setSearchResults(filteredResults);

  };

  const handleSearchTextChange = (newSearchText: string) => {

    setSearchText(newSearchText);

  };

  const handleSearchModalClose = () => {

    setSelectedTagIndex(null);

    setSearchModalVisible(false);

  };

  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 = uuidv4() + "." + fileExtension;

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

    }

  };

  const handleSelectResult = (result: any) => {

    if (selectedTagIndex !== null) {

      const updatedTags = [...tags];

      const selectedTag = updatedTags[selectedTagIndex];

      selectedTag.text = result.title;

      selectedTag.img = result.img;

      selectedTag.price = result.price;

      setTags(updatedTags);

      setSearchResults([]);

      setSearchText("");

      setSearchModalVisible(false);

    }

  };

  const handleSaveImage = async () => {

    const imageUrls = [];

    if (selectedImage) {

      const { data, error } = await supabase.storage

        .from("1st")

        .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("tag").insert([

        {

          url: imageUrls,

          tags: [...tags],

        },

      ]);

      if (insertError) {

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

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

        return;

      }

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

      setSelectedImage(null);

      setTags([]);

    }

  };

  return (

    <div>

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

      <button onClick={() => setAddingTagMode(!addingTagMode)}>

        {addingTagMode ? "태그 추가 완료" : "상품 태그 추가"}

      </button>

      {selectedImage && (

        <div>

          <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: "white",

                display: "flex",

                width: "40px",

                height: "40px",

              }}

            >

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

                <div>

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

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

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

                </div>

              )}

            </div>

          ))}

        </div>

      )}

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

      {selectedTagIndex !== null && searchModalVisible && (

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

          <input

            type="text"

            value={searchText}

            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.title}</div>

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

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

                <div>

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

                </div>

              </div>

            ))}

          </div>

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

        </div>

      )}

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

    </div>

  );

}

export default ImageTaggerWithDB;

테스트용 코드라 다 들어있어서 너무 난잡해보이기도 하고 팀원들에게 공유하기에는 너무 난잡한 코드같아서 이거를 

팀원분이 만들어 주신 게시글 포스트 부분을 받을 수 있게 된다면 잘 컴포넌트화 해서 나눠놓고 주석도 열심히 달아놓아서

이해할 수 있을만한 코드로 바꿔놓아야 겠다고 생각했다 그보다 이 코드도 내가 원하는 기능에서 한 90% 정도 완성된거라 더 수정을 해야할 것 같다 이것도 근데 지금은 상품의 데이터를 다 가져온 상태에서 그 모든 데이터를 뒤져가면서

찾는건데 아마 본 DB에는 데이터가 9000개정도 되는데 지금 그거를 다 불러와서 그 상태에서 지금처럼 검색을 한다면

아마 어떻게 될 지 모르겠지만 트래픽이 엄청 날 수도 있을거라고 생각이 되어서 한 번 테스트 해보고 렉이 너무 심하면

DB쪽에서 검색을 해서 해당하는 데이터만 fetch 해오는 식으로 바꿔야 할 것 같다.

 

import React, { useEffect, useState } from "react";

import { supabase } from "./supabase";

import { Post } from "./types/Types";

import { Tag } from "./types/Types";

const Fetch = () => {

  const [posts, setPosts] = useState<Post[]>([]);

  const [selectedTag, setSelectedTag] = useState<Tag | null>(null);

  useEffect(() => {

    const fetchPosts = async () => {

      const { data, error } = await supabase.from("tag").select("*");

      if (error) {

        console.error("Error fetching posts:", error);

      } else {

        setPosts(data);

      }

    };

    fetchPosts();

  }, []);

  const handleTagClick = (tag: Tag) => {

    setSelectedTag(selectedTag === tag ? null : tag);

  };

  return (

    <div>

      {posts.map((post) => (

        <div key={post.id}>

          {post.url && (

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

              <img

                src={`${process.env.REACT_APP_SUPABASE_STORAGE_URL}${post.url}`}

                alt={`${post.id}`}

              />

              {post.tags.map((tag, tagIndex) => (

                <div

                  key={tagIndex}

                  style={{

                    position: "absolute",

                    left: tag.x + "px",

                    top: tag.y + "px",

                    backgroundColor: "white",

                    width: "20px",

                    height: "20px",

                  }}

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

                >

                  {selectedTag === tag && (

                    <div

                      className="details"

                      style={{

                        backgroundColor: "skyblue",

                        width: "300px",

                        height: "300px",

                      }}

                    >

                      {tag.text}

                      <br />

                      {tag.price}

                      <img src={tag.img} alt="상품 이미지" />

                    </div>

                  )}

                </div>

              ))}

            </div>

          )}

        </div>

      ))}

    </div>

  );

};

export default Fetch;

이 코드는 업로드한 이미지랑 태그를 불러와서 태그 클릭시 안에 내용이 보이고 클릭을 안할 시 
내용이 안보이고 작은 태그표시만 있는 코드이다 

 

아직은 기능만 있고 css 적으로도 되어있지 않아서 보기 안이쁘지만 이정도 기본 기능까지는 성공을 하였다

 

저장후에 가져와도 태그가 제 위치에 잘 존재를 하고 있고 클릭시에만 안에 데이터가 이렇게 보이게 구현해놓았다.

이제 본 프로젝트에 적용시켜서 데이터를 어떻게 다뤄줄지 테스트해보고 CSS랑 기능을 좀 더 가다듬어야겠다

 

아래는 오늘 공부한 CS 를 적어놓는다

 

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

프로그램과 프로세스

0-1 프로그램이 저장되어 있는 곳 = 보조 기억장치
0-2 프로그램이 로딩되는 곳 = 주 기억장치
     -운영체제 에서 켜져있는 프로그램
0-3 프로그램을 실행해주는 주체 = 프로세스
     -ex. 프로그램을 실행하는 프로세스
0-4 작업을 처리해주는 주체 = 쓰레드
     -ex.메세지 발송을 처리하는 쓰레드, 메세지 수신을 확인하는 쓰레드 등
     -맥북 > 활성 상태 보기 > CPU > 프로세스 상세 > 통계
0-5 프로세스 상태변화 복습

      프로세스의 상태변화와 스케쥴링
-스케쥴링 알고리즘에 따라 프로세스들은 상태변화가 일어나며 준비/수행 상태일때 CPU를 사용하게 된다.

1.수행 -> 대기 : I/O 요청이 발생하거나, 자식 프로세스가 종료 대기를 할 때
2.수행 -> 종료 : 프로세스를 종료시켰을 때
3.수행 -> 준비 : 인터럽트가 발생했을 때
4.대기 -> 준비 : I/O가 완료되었을 때

-이 곳에서 1,2는 프로세스가 스스로 CPU를 반환하기에 비선점 스케쥴링이다.

-3,4는 프로세스에서 CPU를 강제로 할당(회수) 하므로 선점 스케쥴링이 발생한다.

1. 프로세스 생명주기

1-1. 프로세스 상태 (Status)
신규 : 
-프로세스가 이제 막 메인메모리에 올라옴
-아직은 실행하는것이 불가능
-이 때 수용 동작을 거쳐야 준비단계로 넘어간다

준비 :
-변수 초기화 등 기초 준비작업을 모두 끝나고 실행을 할 수 있는 상태
-스케쥴러를 통해 발송 되어야 수행상태가 된다.
-아래 케이스에서 준비상태로 된다.
1.신규 프로세스가 수용됨
2.대기 프로레스의 입출력/이벤트가 완료됨
3.수행 프로세스가 중단됨

수행상태에서 해제되는 경우
1.수행 -> 준비
    -CPU의 과부하가 판단되는 경우
2.수행 -> 대기
   - I/O나 event wait가 있을 경우
     - 이 후 I/O나 event가 끝나면 ready 상태로 복구

대기 : 
-프로세스 도중에 I/O 작업이 필요하여 I/O 작업을 수행하는 상태
-이 때 CPU는 I/O를 기다리며, 다른 프로세스를 수행한다.
-대기 상태가 끝나면 프로세스는 다시 준비 상태가 되고, 잠시 후 다시 수행 상태로 변한다.
****여기도 이미지 가져가기 ****

이미지 출처 : https://gusdnd852.tistory.com/82

종료 : 
-최종적으로 프로세스가 종료된 상태
-사용하던 메모리 영역이 해제된다.
-시공유 시스템에서는 수행 상태에서 할당된 시간이 만료되면, 대기 상태를 거치지 않고 바로 준비 상태로도 변할 수 있다.
  중단과 같이 동작


1-2 대기 큐
큐는 크게 Job Queue와 Ready Queue 그리고 Device Queue로 나뉜다

1) Job Queue : HDD에 있던 프로그램들이 메모리에 올라올 때, 만약 메인 메모리가 가득 찼더나 CPU가 다른 작업을 수행 중이라면
메모리에 올라오기 전에 어느정도 기다려야하는데 HDD의 프로그램들이 잠시 기다리는 곳을 Job Queue라고 한다.

2)Ready Queue:
-메인메모리에 프로그램이 올라왔다고 하더라도 바로 CPU의 서비스를 받을 순 없음.
-다른 프로그램이 수행 중이면 기다렸다가, 해당 프로그램이 I/O를 시작하거나, 시공유시스템의 경우 기존 프로세스가 시간초과되면 실행된다.
-이렇게 이미 메모리에 올라온 프로세스들이 실행을 위해 대기하는 곳을 Ready/Queue 라고 한다.
3)Device Queue:
-I/O장치 (e.g. 프린터, 키보드, 마우스 등)을 이용하려면 기존 I/O 작업이 끝나기를 기다렸다가 밀려있던 모든 작업이 끝나면
비로소 I/O 장치를 사용할 수 있다.
-프린터는 프린터큐, 마우스는 마우스큐, 키보드는 키보드큐와 같이 각각 I/O 장치들은 각자의 대기 큐를 가지고 있는데, 이러한 장치들의
큐들을 통틀어서 Device Queue라고 부른다.

1-3 스케쥴링

1)Job Scheduler : 
-Job Queue의 프로그램들을 어떤 순서로 메모리에 올릴 것인지 결정한다.
-이러한 과정은 프로그램이 새로 시작될 때, 메인메모리가 가득찬 경우 등의 상황에만 발생하므로 자주
 일어나지 않고 어쩌다 한번 일어난다.
Long Term Scheduler : 자주 일어나지 않고 어쩌다 한 번 일어나기에 롱 텀 스케쥴러 라고도 불림

2)CPU Scheduler : 
-Ready Queue의 프로세스들을 어떤 순서로 서비스 할 것인지에 대한 스케줄러입니다.
-모든 스케줄링 중에서 CPU 스케줄링이 가장 중요하다.

Short Term Scheduler : 시공유 시스템의 경우 이러한 과정이 1초에도 수십번에서 많게는 수백번도 일어나기에
이러한 스케줄러를 Short Term Scheduler 라고 한다.

3)Device Scheduler :
-Device Queue의 프로세스들을 어떤 순서로 I/O 장치를 이용하게 할 것인지에 대한 스케줄러이다.
-이는 Disk Scheduler, Printer Scheduler, Mouse Scheduler 등 I/O, 보조기억 장치 스케줄러를 통틀어 가르키는 말이다.

I/O Bound Process VS CPU Bound Process
- I/O Bound Process 
  -대부분의 시간을 I/O 하는데 쓰는 프로세스들을 의미한다
- CPU Bound Process
   -대부분의 시간을 CPU로 연산하는데 쓰는 프로세스를 의미한다.

1-4 주-보조 교환
1)Swapping :
-서버와 같이 여러 사용자가 하나의 메모리를 공유하는 경우에 만약 한 사용자가 자리를 비우면 그 사용자가 돌아올 때 까지 해당 프로세스에 메모리를
할당할 이유가 없다!
-때문에 PCB(Process Control Block)의 CPU Time등을 확인해서 오랫동안 동작이 없는 프로세스는 잠시 HDD로 내려놓고,
다른 프로세스를 실행하거나 기존 프로세스에 메모리를 더 할당하는 등 메모리를 더 효율적으로 활용한다.

-그러다가 동작없던 프로세스 사용자가 돌아와서 작업을 수행하면 다시 HDD에서 메모리로 프로세스를 올린다.

-Swap Out(메모리에서 HDD로 내리는 작업)
-Swap In(HDD에서 다시 메모리로 올리는 작업)

-Midum Term Scheduler
  -Swapping 역시 여러 프로세스들이 HDD로 내려가고 다시 메모리로 올라오고 하기 때문에 어떤 순서로 프로세스를 먼저 내리고 올릴지 결정해야 한다.
   -이러한 스케줄링 작업은 Shor Term Scheduling 보다는 적게 일어나지만 Long Term Scheduling 보다는 자주 일어난다.
   -때문에 이러한 스케줄링 작업(Swapping Scheduling)을 Midium Term Scheduling이라고 한다

1-5 문맥 교환 (Context Switching)
1)Context Switching :
-CPU 시간공유 시스템의 경우 일정 시간이 지나면 기존 프로세스를 준비 상태로 만들고 다른 프로세스를 수행 상태로 만들어서 실행한다.
-이렇게 실행하는 프로세스를 Switch 하는 것을 통틀어서 Context Switcing 이라고 한다.

2)Scheduler : 
-Context Switching을 전문적으로 담당하는 스케줄러는 위에서 배운 CPU 스케줄러이다.
-CPU 스케줄러는 Ready Queue에 대기 중인 프로세스를 어떤 순서로 실행시킬 것인지에 대한 스케줄러이다.

3)Dispatcher : 
-만일 프로세스 A의 코드 중 100번 라인까지 실행했고 작업 중에 10개의 데이터를 레지스터에 저장했었다면, 스위치할 때 이 정보들을
보존해야 A의 차례가 돌아왔을 때 이전에 수행하던 작업이 끊기지 않고 수행될 수 있다.
-때문에 프로세스 A를 수행하다가 B로 넘어가면 그러한 정보를 저장하고, 다시 A의 차례가 왔을 때, 정보를 다시 꺼내서 PC, SP, Register 등에 할당한다.
-이러한 작업을 수행하는 프로그램을 Dispatcher 라고 한다.


대부분의 OS는 CPU 스케쥴링 방법 중 시간공유 시스템을 사용할까?

- 그렇다, 대부분의 운영체제는 CPU 시간을 여러 프로세스나 스레드에 공평하게 분배하는 CPU 시간 공유 시스템을 사용한다.
- CPU 시간을 효율적으로 사용하기 위해서, 운영체제는 CPU를 사용하지 않는 프로세스나 스레드가 있다면 다른 프로세스나 스레드에게 CPU 시간을 할당한다.
- CPU 시간 공유 시스템을 사용함으로써, 여러 프로세스나 스레드가 동시에 실행되는 것처럼 보일 수 있다.
- 그러나 실제로는 CPU가 매우 빠르기 때문에 매우 짧은 시간에 여러 프로세스나 스레드를 번갈아가며 실행할 수 있다.
- 이를 통해 CPU가 최대한 효율적으로 사용될 수 있으며, 운영체제는 더 많은 프로세스나 스레드를 동시에 실행할 수 있다.