Project/MUNGCHI

#10 알고리즘적 접근: times 값을 최신순으로 재배치 + 알고리즘 문제로 만들기

developerBeluga 2024. 8. 17. 22:00
728x90
반응형

 

 

 

times 값을 최신순으로 재배치하고 이를 시각화하는 문제

사용자가 새로운 데이터를 작성하면 그 즉시 UI에 반영되도록 구현하는 것은 흔한 요구 사항입니다. 하지만 데이터를 단순히 나열하는 것보다 더 중요한 것은 이를 직관적으로 파악할 수 있도록 시각적으로 배치하는 것입니다. 이러한 요구에 따라 최신 데이터를 기준으로 재배치하고, 이를 시각적으로 표현하는 UI를 구현하게 되었습니다.

 

이 UI는 사용자가 데이터의 최신 상태를 한눈에 파악할 수 있도록 돕기 위해 설계되었습니다. 기본적으로 times 값을 기반으로 그리드가 생성됩니다. 예를 들어, 최신 회차(회차 수를 나타내는 times 값)가 12인 경우, 12개의 정사각형이 그리드를 구성하며, 각 데이터의 times 값에 따라 정사각형의 색상이 결정됩니다.

 

times 값이 클수록 최신의 데이터를 나타내며, 이를 바탕으로 그리드를 형성해야 합니다. 이 과정은 데이터를 재배치하고 시각화하는 데 있어 효율적인 정렬 및 매핑을 요구합니다.

 

 

 

알고리즘 설계 및 구현

정렬 (Sorting)

데이터를 times 값에 따라 내림차순으로 정렬합니다. 이 단계의 목적은 times 값이 큰 데이터부터 작은 데이터 순으로 배열하여 최신순으로 재배치하는 것입니다. 이 과정은 일반적인 정렬 알고리즘을 사용하며, 데이터의 크기가 클수록 효율적인 정렬 알고리즘이 필요합니다. 여기서는 JavaScript의 Array.prototype.sort()를 사용했으며, 시간 복잡도는 O(N log N)입니다.

const sortedData = data.slice().sort((a, b) => parseInt(b.times, 10) - parseInt(a.times, 10));​

 

 

매핑 (Mapping)

정렬된 데이터를 기반으로 그리드 배열을 생성하고, 각 times 값을 새로운 위치에 매핑합니다. times 값이 큰 데이터는 그리드의 처음에 배치되며, 빈 자리는 회색으로 표시됩니다. 이 단계에서는 정렬된 데이터를 순차적으로 처리하며, 각 데이터의 times 값을 그리드 배열의 올바른 위치에 배치합니다. 시간 복잡도는 O(N)입니다.

const gridArray = Array(maxTimes).fill('#F5F5F5'); // 초기화: 모두 회색 
sortedData.forEach((item) => { 
	const originalTimes = parseInt(item.times, 10); 
	gridArray[maxTimes - originalTimes] = '#76ABFF'; // 파란색으로 매핑 
});
 

 

그리드 생성 및 시각화 (Visualization)

최종적으로, 그리드 배열을 순차적으로 출력합니다. 이 과정에서 데이터가 있는 위치는 파란색('#76ABFF')으로, 데이터가 없는 위치는 회색('#F5F5F5')으로 시각화됩니다. 이 단계는 단순한 배열 순회를 포함하며, 시간 복잡도는 O(N)입니다. 시각화는 그리드 배열을 HTML/CSS 구조로 변환하는 작업입니다.

return (
    <div style={{ 
        display: 'grid', 
        gridTemplateColumns: 'repeat(10, 30px)', 
        gap: '5px' 
    }}>
        {gridArray.map((color, index) => (
            <div
                key={index}
                style={{
                    width: '30px',
                    height: '30px',
                    backgroundColor: color,
                }}
            />
        ))}
    </div>
);
 

 

 

 

 

시간, 공간 복잡도 분석

  • 정렬 단계: O(N log N) - 이는 배열을 정렬하는 데 걸리는 시간입니다.
  • 매핑 단계: O(N) - 정렬된 데이터를 그리드 배열에 매핑하는 데 걸리는 시간입니다.
  • 시각화 단계: O(N) - 그리드 배열을 출력하는 데 걸리는 시간입니다.
  • 공간 복잡도: O(N) - 그리드 배열과 정렬된 데이터 배열을 저장하는 데 필요한 공간입니다. 이 문제에서는 데이터 크기와 그리드의 크기에 비례하는 공간이 필요합니다.

 

최종적으로 이 알고리즘의 시간 복잡도는 O(N log N)으로, 주어진 데이터의 크기에 따라 효율적으로 동작합니다.

 

 

 

 

결론

이 알고리즘은 효율적인 정렬과 매핑을 통해 times 값을 최신순으로 재배치하고, 이를 시각적으로 그리드에 배치하는 과정을 다루고 있습니다. 시간 복잡도와 공간 복잡도 측면에서 최적화된 이 알고리즘은 데이터를 직관적으로 표현하고, 사용자가 쉽게 최신 데이터를 파악할 수 있도록 도와줍니다. 이 알고리즘은 실시간 데이터 처리나 복잡한 시각화 요구사항에도 확장하여 적용할 수 있는 잠재력을 가지고 있습니다.

 

 

 

 

알고리즘 문제로 만들기

[문제설명]
주어진 데이터는 각각 times 값을 가지며, 이는 데이터의 회차를 나타냅니다. 당신의 목표는 이 데이터를 times 값을 기준으로 최신순으로 재배치하고, 그 결과를 그리드로 시각화하는 것입니다. 그리드는 times 값의 최대치만큼의 크기를 가지며, 각 데이터는 해당하는 times 값의 위치에 배치되어야 합니다.

[입력]
- N: 데이터의 개숫 (1 ≤ N ≤ 10^5)
- data: 길의 'N'의 배열로, 각. ㅛ소로 times와 createdAt 값을 포함합니다.
   - times: 정수로 된 고유의 값 (1 ≤ times ≤ 10^5)
   - createdAt: 해당 데이터가 생성된 시간 (ISO 8601 형식의 문자열)

[출력]
길이 maxTimes 인 배열로, 각 요소는 해당 위치에 표시될 색상('#76ABFF' 또는 '#F5F5F5')을 나타냅니다.

[예시]
입력: 
N = 4
data = [
  {times: 1, createdAt: "2024-08-11T08:46:19.648Z"},
  {times: 8, createdAt: "2024-08-12T08:46:19.648Z"},
  {times: 12, createdAt: "2024-08-13T08:46:19.648Z"},
  {times: 2, createdAt: "2024-08-14T08:46:19.648Z"} ].
출력:
["#F5F5F5", "#76ABFF", "#F5F5F5", "#F5F5F5", "#F5F5F5", "#F5F5F5", "#F5F5F5", "#76ABFF", "#F5F5F5", "#F5F5F5", "#F5F5F5", "#76ABFF"]

이렇게 알고리즘 문제라도 만들 수 있습니다.

 

 

 

 

 

 

 

 

fin.

 

728x90
반응형