westzero.log

[알고리즘] 프로그래머스 #42746 정렬 - 가장 큰 수

Thu, 13 Mar 2025 12:14:23 GMT

✏️ 문제

https://school.programmers.co.kr/learn/courses/30/lessons/42746#

function solution(numbers) {
    var answer = '';
    numbers.sort((a, b) => b - a);
    numbers.sort((a, b) => String(a)[b.length-1] - String(b)[a.length-1]);
    return answer;
}

// [9, 5, 34, 30, 3]

여기서 3이 30보다 앞에 오게 해야하는 알고리즘이 아무리 생각해도 생각나지 않았다.

📍 다른 사람의 풀이

다른 풀이를 읽어보니 수를 직접 비교하면서 풀었다. 예를 들어, '3'+'30' 과 '30+3' 이 어느 쪽이 더 큰지 비교해서 정렬한 것이다.

function solution(numbers) {
    var answer = '';
    numbers_ = numbers.map(String);
    numbers_.sort((a, b) => (b+a) - (a+b))

    answer = numbers_.join('');

    return answer;
}

이 풀이를 보고 코드를 작성했고, 테스트 케이스 1개를 통과하지 못했다. 만약 모든 수가 0으로 구성되어 있다면 '000' 이 아닌 '0'으로 출력되어야 한다.

📍 최종 코드

function solution(numbers) {
    var answer = '';
    numbers_ = numbers.map(String);
    numbers_.sort((a, b) => (b+a) - (a+b))

    if (numbers_[0] === '0') {
        return '0';
    }

    answer = numbers_.join('');

    return answer;
}

❓ 알게 된 것

join 메서드는 javascript에도 적용된다. 반복문보단 join을 사용해보자 answer = numbers_.join('');
직접 구현하는 것을 먼저 생각하기

TailwindCSS Dynamic class names

Sat, 07 Dec 2024 05:05:37 GMT

개발하다 발견한 CSS 오류!

이 코드의 tailwindCSS 중복이 많아 동적으로 숫자를 넘겨주기 위해 리팩터링 하였다.

    const positions = [
      { top: "38%", left: "36%" },
      { top: "40%", left: "38%" },
      { top: "42%", left: "40%" },
      { top: "50%", left: "50%" }
    ];

    return (
      
    );

마지막 컴포넌트가 화면의 정중앙에 와야하는데 오지 않게 되었다. 이렇게 전체의 절반이 잘리게 된다. 퍼센트를 조절해봤는데 42%까지는 작동이 되다가 42를 넘는순간 위로 잘려버린다. ㅋㅋ

리팩터링 전이랑 뭐가 다를까 고민하다가 전에는 1/2라고 써서 1/2를 살리기 위해 꼼수를 사용했다. 동적 클래스 이름이 작동하지 않는다고 판단하였기 때문이다..

top-[${positions[index].top}] left-[${positions[index].left}]

여기서 대괄호를 제외하고,

const positions = [
      { top: "38%", left: "36%" },
      { top: "40%", left: "38%" },
      { top: "42%", left: "40%" },
      { top: "50%", left: "50%" }
    ];

이 값에 직접 대괄호를 넣어주면 절반에 50%가 아닌 1/2를 쓸 수 있다.. ㅋ

결과

const positions = [
      { top: "[38%]", left: "[36%]" },
      { top: "[40%]", left: "[38%]" },
      { top: "[42%]", left: "[40%]" },
      { top: "1/2", left: "1/2" },
    ];

    const PopUpComponent = index === 3 ? PopUp : LoadingPopUp;
    return (
      
    );
  };

해결했지만 해결했다고 할 수 없는 이 찜찜함.... 도대체 뭐니..

😇 왜냐하면 해결이 안됐기 때문이다. 프로젝트를 재실행 해보니 동적 클래스가 전부 작동하지 않았다.

tailwindcss에는 top-[24%] 이런식으로 사용자 정의를 할 수 있다. 그리고 위에서 되던 꼼수인 1/2 동적 클래스도 작동이 안되고 있기 때문에 top과 left를 나누어 숫자를 넣지 말고 top-[24%] 자체를 넘겨주기로 했다.

const positions = [
      "top-[38%] left-[36%]",
      "top-[40%] left-[38%]",
      "top-[42%] left-[40%]",
      "top-1/2 left-1/2",
    ];

    return (
      
    );

이렇게 전체 속성을 넘겨주니 잘 동작한다.

TailwindCSS Dynamic class names

동적 클래스에 대한 규칙이 있는건가 해서 공식문서를 찾아봤다. 완전 당연하게도 규칙이 있었다.

❌ 1. Don’t construct class names dynamically

내가 한 것처럼 class name의 구조를 동적으로 사용하면 안 된다.

⭕️ 2. Always use complete class names

동적으로 사용하고 싶은 경우에는 항상 전체 class name을 사용해야 한다.

❌ 3. Don’t use props to build class names dynamically

function Button({ color, children }) {
  return (
    
  )
}

props 로 넘겨줄 때도 마찬가지로 일부 숫자나 색상코드만 넘겨주는 것은 안 된다.

⭕️ 4. Always map props to static class names

function Button({ color, children }) {
  const colorVariants = {
    blue: 'bg-blue-600 hover:bg-blue-500',
    red: 'bg-red-600 hover:bg-red-500',
  }

  return (
    
  )
}

전체 속성의 이름을 넘겨주어야 한다.

내가 한 실수가 전부 명세서에 나와있었다. 안 될 이유가 없다고 생각했는데 ... 생각해보면 tailwind는 잘못 한 게 없다 👍

Next.js와 firebase 연동하기

Thu, 05 Dec 2024 17:17:08 GMT

매우 소규모의 백엔드 기능이 필요해서 firebase를 사용해보기로 했다. 서버를 직접 만들 필요 없이 여러 서비스를 이용할 수 있다. (데이터베이스, 인증, 스토리지, 함수 및 호스팅 등)

1. firebase 시작하기

1.1 firebase 프로젝트 시작하기 ** 1.2 앱 추가하기** 웹 개발을 선택하였다. 앱을 등록하면 Firebase의 SDK가 제공된다. 이를 저장해두고 콘솔로 이동한다.

2. Next.js 프로젝트에 firebase 세팅하기

2.1 firesbase.ts 파일 생성 firebase.ts와 firestore.ts 파일을 생성한다. (firebase.ts의 파일명은 firebasedb.ts로도 많이 쓰이는 듯 하다.) 이 때, 파일 키들은 노출되면 안되므로, 환경변수로 보호해준다.

2.1.1 환경변수로 지정하기 최상단에 .env.local 파일을 생성한 뒤 NEXT_PUBLIC_key = vlaue 로 SDK의 정보를 저장한다. 사용할 때는 process.env.NEXT_PUBLIC_key 로 부르면 된다.

// firebase.ts
import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTHDOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECTID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGEBUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APPID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASURMENTID
};

// Initialize Firebase
const firebasedb = initializeApp(firebaseConfig)
export default firebasedb

2.2 firestore.ts 파일 생성

// firestore.ts
import firebase from './firebase';
import {  getFirestore  } from 'firebase/firestore';

const fireStore = getFirestore(firebase);
export default fireStore

3. Firestore 콘솔에서 Cloud Firestore를 생성

3.1 데이터베이스 만들기 프로덕션 모드에서 시작한다. 데이터베이스가 만들어진 것을 확인할 수 있다. 데이터를 직접 수정하고 읽으려면 규칙을 수정해야 한다.

3.2 규칙 수정하기

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true; -> false를 true로
    }
  }
}

4. Firestore 연동하기

4.1 데이터 읽기 데이터를 직접 추가해준다. getDoc으로 데이터를 읽어보자!

 setLogLevel("debug")
// bug 내용을 더 자세하게 알 수 있다.

  const db = getFirestore(firebasedb)
  const test = async () => {
    const query = await getDoc(
      doc(fireStore, "auth", "QhK2EkBMjzmIpSNbrwKZ")
    );
    console.log('이것 뭐에요~~?', query.data())
  }

메인화면에 버튼으로 작동시켰다.

console 창에서 데이터 값을 확인할 수 있다.

4.2 데이터 넣기 addDoc을 사용하여 데이터를 추가할 수 있다.

const testPost = async (e) => {
    e.preventDefault();
    await addDoc(collection(fireStore, "information"), {
      age: 17,
      name: 'kk'
    });
  }

연동에 성공했다. 👻

[알고리즘] 그리디 | 백준 | #2839 #11399 #1715

Thu, 05 Dec 2024 16:05:10 GMT

그리디 알고리즘

탐욕법으로 소개되는 이 알고리즘은 어떠한 문제가 있을 때 단순하게 탐욕적으로 문제를 푸는 알고리즘이다. 현재 상황에서 지금 당장 좋은 것만 고르는 방법을 의미한다. 매 순간 가장 좋아 보이는 것을 선택하며 현재의 선택이 나중에 미칠 영향은 고려하지 않는다.

기준에 따라 좋은 것을 선택하는 알고리즘이므로 문제에서 가장 큰 순서대로, 가장 작은 순서대로와 같은 기준을 제시해준다. 이 기준은 정렬 알고리즘을 사용하면 만족시킬 수 있다.

✏️ 예제

백준 2839

5가 최대일 경우 전체 횟수가 최적의 해를 갖게 되므로 5를 기준으로 나눴다.

# 나의 풀이
N = int(input())
lst = []
r = N // 5

for i in range(r, -1, -1):
    a = N - i * 5
    b = a % 3
    if b == 0:
      print(i + a//3)
      break
    if i == 0:
      print(-1)

# gpt 풀이
N = int(input())

# 5kg 봉지를 최대한 사용
bags = 0
while N >= 0:
    # N이 5의 배수라면 (최대한 5kg 봉지를 사용)
    if N % 5 == 0:
        bags += N // 5
        print(bags)
        break
    # 그렇지 않다면 3kg 봉지 하나 사용
    N -= 3
    bags += 1
else:
    # 정확히 N kg을 만들 수 없는 경우
    print(-1)

N이 5의 배수인지 아닌지를 한 번 더 나눠주고 while을 사용한 풀이이다.

정리

이 문제는 국소 최적해가 전체 최적해를 보장하는 문제의 특성 때문에 그리디 알고리즘으로 해결 가능하다. "큰 봉지(5kg)를 가능한 많이 사용" 하는 것이 최선의 선택임을 보장하고 있기 때문이다.

백준 11399

무조건 시간이 적게 걸리는 사람부터 돈을 인출하면 된다. 자신이 인출하는데 걸린 시간 * (뒷사람 수 +1) 해주면 된다. 반복문을 돌리는데 리스트의 인덱스 번호와 사람수가 반대로 가서 정렬을 걸리는 시간이 큰 순서대로 해주었다.

# 나의 풀이
N = int(input())
time = sorted(list(map(int, input().split())), reverse=True)
sum = 0

for i in range(N):
  sum += time[i] * (i+1)

print(sum)

정리

이 문제는 그리디 알고리즘과 정렬 알고리즘을 사용한 문제이다. 최적의 해를 구하기 위해선 각 사람이 돈을 인출하는 시간을 오름차순으로 정렬하는 것이 핵심이다.

백준 1715

크기 순서대로 정렬해서 하나씩 더해주면 된다고 생각했다. 만약 2개의 합이 다음 카드보다 크다면 큰 카드가 작은 카드보다 한 번 더 더해지는 것이므로 재정렬해줘야 한다. pop, deque 2가지를 사용해서 코드를 짜봤지만 N이 매우 커서 시간초과가 생겼다.

📌 우선순위 heapq

heapq.heappush(heap, item) : item을 heap 에 추가 원소가 작은 순서대로 정렬된다

import heapq

heap_list = []
heapq.heappush(heap_list, 2)
heapq.heappush(heap_list, 1)
heapq.heappush(heap_list, 5)
heapq.heappush(heap_list, 3)

print(heap_list) # [1, 2, 3, 5]

heapq.heappop(heap) : heap에서 가장 작은 원소를 pop & 리턴 비어있는 경우 IndexError 호출

print(heapq.heappop(heap_list))  # 1
print(heap_list)  # [2, 3, 5] 
a = heapq.heappop(heap_list)
print(a)  # 2

풀이

heapq를 사용하여 카드 중에서 가장 작은 묶음 2개를 뽑는다.
두 원소를 더하고, 새로 만들어진 묶음을 다시 카드에 넣는다.
카드에서 또 다시 제일 작은 묶음을 구하고 더한다.

import heapq

n = int(input())
cards = []

for _ in range(n):
  heapq.heappush(cards, int(input()))

result = 0
while len(cards) > 1:
  # 가장 작은 카드 뽑기
  a = heapq.heappop(cards)
  b = heapq.heappop(cards)
  sum_value = a + b

  result += sum_value
  heapq.heappush(cards, sum_value)


print(result)

정리

우선순위 큐를 활용하여 최적의 해를 구하는 그리디 알고리즘이다.

SSR 과 CSR

Tue, 04 Jun 2024 13:18:38 GMT

SSR이란?

SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. (render가 준비된 html을 보내준다/2단계에서 이미 보여줄 준비가 끝난 것을 의미한다.)

Browser rendering과 Server Side rendering

Browser rendering에서의 rendering 단어와 의미 브라우저라는 프로그램이 서버로부터 html파일, css파일, 자바스크립트 파일을 받아온 다음, 그것을 해석하고 파싱해서 그 결과물로 화면을 그리는 과정을 렌더링이라고 한다.
Server Side Rendering에서의 rendering 단어와 의미 html 파일을 누가 어디서 주고 있는지. html 파일 안에 이미 내용들이 있는 채로 주고 있느냐에 대한 의미이다. SSR의 렌더링은 html 파일 안에 내용이 있느냐 없느냐이다. 있으면 렌더링이 된 것이다.

서버사이드 렌더링의 과정

1단계 렌더 될 준비가 되어 있는 html 파일을 서버에서 준다. html파일을 서버에서 주는데 이 html 파일은 내용이 있다. (렌더될 준비가 완벽히 되어있는 것) 2단계 렌더 될 준비가 완벽히 끝난 html파일이기 때문에 유저는 바로 볼 수 있다. 그리고 나서 브라우저는 자바스크립트 파일을 다운로드 받는다. 보여지는 것은 2단계부터 가능하고, 이것이 CSR과 가장 큰 차이점이다. preivew에서 확인이 가능하다. 3단계 다운로드 받은 js 파일을 브라우저가 실행을 시킨다. 4단계 상호작용이 가능해진다.

CSR

클라이언트사이드 렌더링의 과정

서버사이드렌더링과 다르게 4단계에서 볼 수 있고, 상호작용가능하다.

📍 왜 그럴까?

서버가 브라우저에게 html 파일을 주긴 주는데 html 파일이 아무내용이 없는 render가 준비된 파일이 아니다. 자바스크립트 파일을 받아서 자바스크립트 파일에서 create element function으로 document.createElement() tag를 만들어 태그가 렌더링 되면 자바스크립트 파일이 실행시켜야 최종단계에서 보여질 수 있는 것이다.

(main.chunk.js 을 다운로드 받고 있음 → App 이라는 함수를 실행시킨다.)

SSR VS CSR

SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다.

검색엔진 최적화 SEO

검색엔진 최적화: 검색을 하면 그 해당 내용을 노출을 시켜주는데 검색엔진 봇이 그 내용을 확인 할 수 있어야 한다. CSR은 브라우저가 자바스크립트를 실행시켜야 내용을 확인할 수 있기 때문에 노출시킬 수 없으나 SSR은 이미 서버에서 내용을 주고 있기 때문에 서버사이드 렌더링을 통해 검색엔진 봇에 노출시켜 최적화를 하며 SEO 문제를 해결시킬 수 있다.

참고 https://d2.naver.com/helloworld/7804182 https://www.youtube.com/watch?v=D71ByEIBWEs&t=295s

Next.js 14에서 Styled-Component 사용하기

Wed, 13 Mar 2024 04:42:40 GMT

새로고침 할 때 마다 잠깐의 깜빡임과 함께 CSS가 풀리는 오류가 있었다.

무슨 문제인지 검색해보니 Styled-Component의 동작방식이 SSR(Server Side Rendering), SSG(Static Site Generation) 환경과 서버 컴포넌트에서 스타일링이 어렵다는 점이었다.

⚒️ Styled-Component의 동작 방식

styled-component는 클라이언트가 런타임일 때, 스타일시트를 생성하고