스페이스 루미

로판 일러스트 캐릭터 Ai로 뽑아보기 - comfy ui, Anything V5

스페이스RUMI — Thu, 21 Aug 2025 16:34:02 +0900

게임 캐릭터용으로 만들 샘플 이미지를 뽑아보자

1. comfy ui를 설치한다

2. 체크포인트를 다운받는다.

체크포인트란, .safetensors 또는 .ckpt 파일로 메인 모델이다.
이걸 다운받아야 하는데 나는 로판 일러스트 느낌으로 뽑을거기때문에 AnythingV5를 선택했다.

https://civitai.com 여기서 받을수있다는데 받았더니 깨진파일이라고 에러떠서
https://www.kaggle.com/datasets/luoxian1011/anything-v5?resource=download 여기서받았음

3. 체크포인트 폴더에 다운받은 체크포인트 모델을 복사해준다.

ComfyUI/models/checkpoints/
복사후 ComfyUI 재시작하기.

4. comfy ui에서 다운받은 모델 클릭

5. 프롬프트 노드들 추가하고 연결

좌측 노드에서 CLIP Text Encode (Prompt) 검색해서 더블클릭.
긍정 프롬프트용, 부정 프롬프트용 2개 추가. 프롬프트는 그냥 클로드한테 샘플이미지 주고 비슷한거 달라고 함.

6. 노드들을 추가한다 (좌측 노드 라이브러리에서 검색하고 더블클릭)

KSampler (이미지 생성 엔진)
VAE Decode (디코더)
Save Image (이미지 저장)

7. 노드들 연결해줌 (드래그 하면 알아서 연결됨)

KSampler:

positive → CLIP Text Encode 긍정조건
negative → CLIP Text Encode 부정조건
LATENT(잠재) → VAE Decode의 samples

VAE Decode:

IMAGE → Save Image의 images

8. 추가 참조 이미지용 노드, IPAdapter 설치

우측상단 Manager 클릭하고, Install Missing Custom Nodes 클릭

필터에 Not installed 선택해주고,IPAdapter 검색해서 설치해준다.
나는 제일위에꺼 인기많아보이는거 설치했다.

뭔가를 설치하면 반드시 재시작한다.

노드검색에서 IPAdapter랑 IPAdapterUnifiedLoader 가져오고,

체크포인트의 MODEL → IPAdapterUnifiedLoader 노드의 model로 연결
IPAdapterUnifiedLoader MODEL → IPAdapter노드의 model로 연결
IPAdapter Model → KSampler의 model

전체적인 연결 flow는
체크포인트 → IPAdapterUnifiedLoader → IPAdapter → KSampler → VAE 디코드 → 이미지저장 순이다.

Load Image도 노드검색에서 가져온다. ( 한글판 이미지 로드. 베타 x)

참고할 샘플 이미지 업로드해서 하나 넣어주면됨.

실행을 눌러보면 에러가 뜨는데,

텍스트 -> 이미지 를 생성하는 과정에서, Ksampler에 빈 캔버스같은게 없어서 그렇단다.
Empty Latent Image 노드(빈 잠재 이미지)를 추가 하고 Ksampler와 연결해준다.

실행!!1

KSampler에 로딩바 생기면서 이미지를 생성함

누구세요?

내가 원한 그림체는 아닌데 암튼 성공에 의의를 둔다.
원하는 그림체 체크포인트 고르는게 중요할듯.

끝

양방향 스트리밍(Bidirectional Streaming) feat gRPC

스페이스RUMI — Thu, 3 Jul 2025 14:59:52 +0900

gRPC의 꽃, 양방향 스트리밍 "실시간 전화 통화"와 같은 통신

가장 쉽게 이해하는 방법은 전통적인 요청-응답 모델과 비교하는 것입니다.

전통적인 방식 (Request-Response)

비유: 편지나 택배를 주고받는 것

동작: 클라이언트가 "이거 주세요"라고 요청(편지)을 보내면, 서버는 그 요청을 처리하고 "여기 있습니다"라고 응답(답장)을 보냅니다. 그러면 통신은 완전히 종료됩니다. 또 무언가 필요하면, 다시 새로운 편지를 보내야 합니다.

한계: 실시간 대화처럼 계속 정보를 주고받기에는 매우 비효율적입니다.

양방향 스트리밍 (Bidirectional Streaming)

비유: 전화 통화와 같습니다.

동작: 일단 한번 연결(전화)이 되면, 클라이언트와 서버 둘 다 자기가 원할 때 언제든지 상대방에게 말을 할 수 있습니다.

내가 말하는 동안 상대방도 동시에 말할 수 있고, 그 말을 바로 들을 수 있습니다. 둘 중 한 명이 "이제 끊을게"라고 할 때까지 통화는 계속 유지됩니다.

핵심: 하나의 연결 위에서, 양쪽 모두가 독립적으로, 동시에, 여러 번 메시지를 보낼 수 있는 통신 방식입니다.

동작 원리 (How it works)

gRPC의 양방향 스트리밍은 HTTP/2의 강력한 기능 덕분에 가능합니다.

연결 수립 (Handshake):

클라이언트가 서버에게 "이제부터 양방향 스트리밍 통신을 시작하고 싶어"라고 요청을 보냅니다.
서버가 이를 수락하면, 둘 사이에 하나의 영구적인 TCP 연결(a single, long-lived TCP connection)이 열립니다. 이 연결은 스트림이 끝날 때까지 유지됩니다.

독립적인 메시지 전송:

연결이 수립된 후, 클라이언트는 requestStream.Write(message) 같은 코드를 통해 서버에게 메시지를 보내기 시작합니다. 보내고 싶은 만큼 여러 번 보낼 수 있습니다.

동시에, 서버 역시 responseStream.Write(message) 같은 코드를 통해 클라이언트에게 메시지를 보낼 수 있습니다. 서버도 원하는 만큼 여러 번 보낼 수 있습니다.

중요한 점: 클라이언트가 메시지를 보내는 것과 서버가 메시지를 보내는 것은 서로를 기다리지 않습니다. 완전히

비동기적(Asynchronous)으로 독립적으로 일어납니다.

스트림 종료:

클라이언트는 "이제 보낼 메시지가 없어"라는 의미로 requestStream.CloseSend() 같은 신호를 보냅니다.

서버도 마찬가지로 메시지를 다 보냈으면 스트림을 닫는 신호를 보냅니다.

양쪽 모두 스트림을 닫으면, 맨 처음에 수립했던 TCP 연결이 비로소 종료됩니다.

왜 강력한가? (Key Advantages)

진정한 실시간 양방향성 (True Real-time Interactivity):
클라이언트와 서버가 지연 시간 없이 즉시 상호작용할 수 있어, 사용자 경험이 극적으로 향상됩니다.

낮은 지연 시간 (Low Latency):
매번 새로운 연결을 맺는 오버헤드가 없습니다. 한번 맺은 연결을 계속 재사용하므로 통신이 매우 빠릅니다.

네트워크 효율성 극대화 (High Efficiency):
HTTP/2의 다중화(Multiplexing) 덕분에 하나의 연결로 수많은 메시지를 동시에 처리할 수 있습니다. 또한 Protobuf를 사용해 메시지 크기 자체도 작아 네트워크 자원을 매우 아낄 수 있습니다.

gRPC의 양방향 스트리밍은 단순한 양방향 통신을 넘어, 프로토콜 버퍼(Protobuf)라는 엄격한 규칙 안에서 데이터를 주고받기
때문에, 복잡한 마이크로서비스 환경이나 높은 신뢰성이 요구되는 실시간 애플리케이션에 훨씬 더 안정적이고 효율적인 솔루션입니다.

프론트엔드 가이드라인 커서 룰 (FE Guideline Cursor rule)

스페이스RUMI — Tue, 22 Apr 2025 17:09:03 +0900

토스 프론트엔드 가이드라인 기반으로 만든 Cursor rule 입니다
코드블럭 내용은 권장패턴입니다

1. 매직넘버 대신 상수 사용

설명이 없는 숫자(매직 넘버) 대신 명명된 상수를 사용하여 명확성을 높입니다.

이해하기 어려운 값에 의미를 부여하여 가독성 향상
유지보수성 향상

const ANIMATION_DELAY_MS = 300;

async function onLikeClick() {
  await postLike(url);
  await delay(ANIMATION_DELAY_MS); // 애니메이션 대기 시간임을 명확히 표시
  await refetchPostLike();
}

2. 구현 세부사항 추상화

복잡한 로직이나 상호작용을 전용 컴포넌트/HOC로 추상화합니다.

관심사를 분리하여 인지 부하 감소
컴포넌트의 가독성, 테스트 용이성, 유지보수성 향상

// 앱 구조
function App() {
  return (
    <AuthGuard> {/* 래퍼가 인증 확인 처리 */}
      <LoginStartPage />
    </AuthGuard>
  );
}

// AuthGuard 컴포넌트가 확인, 리디렉션 로직을 캡슐화
function AuthGuard({ children }) {
  const status = useCheckLoginStatus();
  useEffect(() => {
    if (status === "LOGGED_IN") {
      location.href = "/home";
    }
  }, [status]);

  // 로그인하지 않은 경우에만 자식 렌더링, 그렇지 않으면 null(또는 로딩)
  return status !== "LOGGED_IN" ? children : null;
}

// LoginStartPage는 이제 로그인 UI/로직에만 집중
function LoginStartPage() {
  // ... 로그인 관련 로직만 포함 ...
  return <>{/* ... 로그인 관련 컴포넌트 ... */}</>;
}

export function FriendInvitation() {
  const { data } = useQuery(/* ... */);

  return (
    <>
      {/* 전용 버튼 컴포넌트 사용 */}
      <InviteButton name={data.name} />
      {/* ... 기타 UI ... */}
    </>
  );
}

// InviteButton이 확인 과정을 내부적으로 처리
function InviteButton({ name }) {
  const handleClick = async () => {
    const canInvite = await overlay.openAsync(({ isOpen, close }) => (
      <ConfirmDialog
        title={`${name}님과 공유하기`}
        // ... 다이얼로그 설정 ...
      />
    ));

    if (canInvite) {
      await sendPush();
    }
  };

  return <Button onClick={handleClick}>초대</Button>;
}

3. 조건부 렌더링을 위한 코드경로 분리

조건에 따라 크게 다른 UI/로직을 별도 컴포넌트로 분리합니다.

한 컴포넌트 내 복잡한 조건문을 피해 가독성 향상
각 특수화된 컴포넌트가 명확한 단일 책임을 갖도록 보장

function SubmitButton() {
  const isViewer = useRole() === "viewer";

  // 렌더링을 전문화된 컴포넌트에 위임
  return isViewer ? <ViewerSubmitButton /> : <AdminSubmitButton />;
}

// '뷰어' 역할에 특화된 컴포넌트
function ViewerSubmitButton() {
  return <TextButton disabled>제출</TextButton>;
}

// '관리자'(또는 비뷰어) 역할에 특화된 컴포넌트
function AdminSubmitButton() {
  useEffect(() => {
    showAnimation(); // 애니메이션 로직 격리
  }, []);

  return <Button type="submit">제출</Button>;
}

4. 복잡한 삼항 연산자 단순화

복잡하거나 중첩된 삼항 연산자를 if/else 또는 IIFE로 대체하여 가독성을 높입니다.

조건부 로직을 더 쉽게 이해할 수 있게 함
전반적인 코드 유지보수성 향상

const status = (() => {
  if (ACondition && BCondition) return "BOTH";
  if (ACondition) return "A";
  if (BCondition) return "B";
  return "NONE";
})();

5. 시선 이동 줄이기 (간단한 로직은 함께 배치)

단순하고 지역화된 로직을 함께 배치하거나 인라인 정의를 사용하여 컨텍스트 전환을 줄입니다.

위에서 아래로 읽기와 빠른 이해를 가능하게 함
컨텍스트 전환(시선이동)으로 인한 인지부하 감소

function Page() {
  const user = useUser();

  // 로직이 여기서 바로 보임
  switch (user.role) {
    case "admin":
      return (
        <div>
          <Button disabled={false}>초대</Button>
          <Button disabled={false}>보기</Button>
        </div>
      );
    case "viewer":
      return (
        <div>
          <Button disabled={true}>초대</Button> {/* 뷰어 예시 */}
          <Button disabled={false}>보기</Button>
        </div>
      );
    default:
      return null;
  }
}

function Page() {
  const user = useUser();
  // 간단한 정책이 여기 정의되어 쉽게 확인 가능
  const policy = {
    admin: { canInvite: true, canView: true },
    viewer: { canInvite: false, canView: true },
  }[user.role];

  // 역할이 일치하지 않을 경우 속성에 접근하기 전에 정책 존재 여부 확인
  if (!policy) return null;

  return (
    <div>
      <Button disabled={!policy.canInvite}>초대</Button>
      <Button disabled={!policy.canView}>보기</Button>
    </div>
  );
}

6. 복잡한 조건 명명하기

복잡한 불리언 조건을 명명된 변수에 할당합니다.

조건의 의미를 명시적으로 만듦
인지 부하를 줄여 가독성과 자체 문서화 향상

const matchedProducts = products.filter((product) => {
  // 제품이 대상 카테고리에 속하는지 확인
  const isSameCategory = product.categories.some(
    (category) => category.id === targetCategory.id
  );

  // 제품 가격이 원하는 범위 내에 있는지 확인
  const isPriceInRange = product.prices.some(
    (price) => price >= minPrice && price <= maxPrice
  );

  // 전체 조건이 이제 훨씬 명확함
  return isSameCategory && isPriceInRange;
});

로직이 복잡하거나, 재사용되거나, 단위 테스트가 필요한 경우 조건에 이름을 붙입니다. 매우 단순하고 일회용인 조건은 이름을 붙이지 않아도 됩니다.

7. 반환 타입 표준화

유사한 함수/훅에 대해 일관된 반환 타입을 사용합니다.

코드 예측 가능성 향상; 개발자가 반환값 형태를 예상할 수 있음
일관되지 않은 타입으로 인한 혼란과 잠재적 오류 감소

// API훅 (React Query):: 항상 Query 객체 반환
import { useQuery, UseQueryResult } from "@tanstack/react-query";

// fetchUser가 Promise<UserType>을 반환한다고 가정
function useUser(): UseQueryResult<UserType, Error> {
  const query = useQuery({ queryKey: ["user"], queryFn: fetchUser });
  return query;
}

// fetchServerTime이 Promise<Date>를 반환한다고 가정
function useServerTime(): UseQueryResult<Date, Error> {
  const query = useQuery({
    queryKey: ["serverTime"],
    queryFn: fetchServerTime,
  });
  return query;
}

// 유효성 검사 함수
type ValidationResult = { ok: true } | { ok: false; reason: string };

function checkIsNameValid(name: string): ValidationResult {
  if (name.length === 0) return { ok: false, reason: "이름은 비워둘 수 없습니다." };
  if (name.length >= 20)
    return { ok: false, reason: "이름은 20자를 초과할 수 없습니다." };
  return { ok: true };
}

function checkIsAgeValid(age: number): ValidationResult {
  if (!Number.isInteger(age))
    return { ok: false, reason: "나이는 정수여야 합니다." };
  if (age < 18) return { ok: false, reason: "나이는 18세 이상이어야 합니다." };
  if (age > 99) return { ok: false, reason: "나이는 99세 이하여야 합니다." };
  return { ok: true };
}

// 사용 시 ok가 false일 때만 'reason'에 안전하게 접근 가능
const nameValidation = checkIsNameValid(name);
if (!nameValidation.ok) {
  console.error(nameValidation.reason);
}

8. 숨겨진 로직 드러내기 (단일 책임)

숨겨진 부작용을 피하고, 함수는 서명이 암시하는 작업만 수행해야 합니다(SRP).

의도하지 않은 부작용 없이 예측 가능한 동작으로 이어짐
관심사 분리(SRP)를 통해 더 강력하고 테스트 가능한 코드 생성

// 함수는 *오직* 잔액만 가져옴
async function fetchBalance(): Promise<number> {
  const balance = await http.get<number>("...");
  return balance;
}

// 호출자가 필요한 경우 명시적으로 로깅 수행
async function handleUpdateClick() {
  const balance = await fetchBalance(); // 가져오기
  logging.log("balance_fetched"); // 로깅 (명시적 작업)
  await syncBalance(balance); // 다른 작업
}

9. 고유하고 서술적인 이름 사용 (모호함 피하기)

맞춤형 래퍼/함수에 고유하고 서술적인 이름을 사용하여 모호함을 피합니다.

모호함을 피하고 예측 가능성 향상
개발자가 이름만으로 특정 작업(예: 인증 추가)을 이해할 수 있게 함

// httpService.ts - 더 명확한 모듈 이름
import { http as httpLibrary } from "@some-library/http";

export const httpService = {
  // 고유한 모듈 이름
  async getWithAuth(url: string) {
    // 서술적인 함수 이름
    const token = await fetchToken();
    return httpLibrary.get(url, {
      headers: { Authorization: `Bearer ${token}` },
    });
  },
};

import { httpService } from "./httpService";
export async function fetchUser() {
  // 'getWithAuth' 이름이 동작을 명시적으로 만듦
  return await httpService.getWithAuth("...");
}

10. Form 응집도 고려하기

폼 요구사항에 따라 필드 수준, 또는 폼 수준 응집도를 선택합니다.

필드 독립성(필드 수준)과 폼 통일성(폼 수준) 간의 균형을 맞춤
요구사항에 따라 관련 폼 로직이 적절히 그룹화되도록 보장

// 각 필드가 자체 `validate` 함수 사용. (필드 수준)
import { useForm } from "react-hook-form";

export function Form() {
  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm({
    /* defaultValues 등 */
  });

  const onSubmit = handleSubmit((formData) => {
    console.log("폼 제출됨:", formData);
  });

  return (
    <form onSubmit={onSubmit}>
      <div>
        <input
          {...register("name", {
            validate: (value) =>
              value.trim() === "" ? "이름을 입력해주세요." : true, // 유효성 검사 예시
          })}
          placeholder="이름"
        />
        {errors.name && <p>{errors.name.message}</p>}
      </div>
      <div>
        <input
          {...register("email", {
            validate: (value) =>
              /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value)
                ? true
                : "유효하지 않은 이메일 주소입니다.", // 유효성 검사 예시
          })}
          placeholder="이메일"
        />
        {errors.email && <p>{errors.email.message}</p>}
      </div>
      <button type="submit">제출</button>
    </form>
  );
}

// 단일 스키마가 전체 폼에 대한 유효성 검사 정의 (폼 수준)
import * as z from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  name: z.string().min(1, "이름을 입력해주세요."),
  email: z.string().min(1, "이메일을 입력해주세요.").email("유효하지 않은 이메일입니다."),
});

export function Form() {
  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm({
    resolver: zodResolver(schema),
    defaultValues: { name: "", email: "" },
  });

  const onSubmit = handleSubmit((formData) => {
    console.log("폼 제출됨:", formData);
  });

  return (
    <form onSubmit={onSubmit}>
      <div>
        <input {...register("name")} placeholder="이름" />
        {errors.name && <p>{errors.name.message}</p>}
      </div>
      <div>
        <input {...register("email")} placeholder="이메일" />
        {errors.email && <p>{errors.email.message}</p>}
      </div>
      <button type="submit">제출</button>
    </form>
  );
}

독립적인 유효성 검사, 비동기 검사 또는 재사용 가능한 필드의 경우 필드 수준을 선택하고, 관련 필드, 위저드 폼 또는 상호 의존적인 유효성 검사의 경우 폼 수준을 선택.

11. 기능/도메인별 코드구성

디렉토리를 코드 유형뿐만 아니라 기능/도메인별로 구성합니다.

관련 파일을 함께 유지하여 응집도 증가
기능 이해, 개발, 유지보수 및 삭제 단순화

src/
├── components/ # 공유/공통 컴포넌트
├── hooks/      # 공유/공통 훅
├── utils/      # 공유/공통 유틸
├── domains/
│   ├── user/
│   │   ├── components/
│   │   │   └── UserProfileCard.tsx
│   │   ├── hooks/
│   │   │   └── useUser.ts
│   │   └── index.ts # 선택적 배럴 파일
│   ├── product/
│   │   ├── components/
│   │   │   └── ProductList.tsx
│   │   ├── hooks/
│   │   │   └── useProducts.ts
│   │   └── ...
│   └── order/
│       ├── components/
│       │   └── OrderSummary.tsx
│       ├── hooks/
│       │   └── useOrder.ts
│       └── ...
└── App.tsx

12. 매직넘버를 로직과 연관짓기

상수를 관련 로직 근처에 정의하거나 이름이 명확하게 연결되도록 합니다.

상수를 나타내는 로직과 연결하여 응집도 향상
관련 상수를 업데이트하지 않고 로직을 업데이트하여 발생하는 이슈 방지

// 상수가 명확하게 명명되고 잠재적으로 애니메이션 로직 근처에 정의됨
const ANIMATION_DELAY_MS = 300;

async function onLikeClick() {
  await postLike(url);
  // 딜레이는 상수를 사용하여 애니메이션과의 연결 유지
  await delay(ANIMATION_DELAY_MS);
  await refetchPostLike();
}

상수가 의존하는 로직과 함께 유지되거나 관계를 보여주기 위해 명확하게 명명되도록 보장.

13. 추상화와 결합도 균형 맞추기 (조기추상화 피하기)

사용 사례가 분기될 수 있는 경우 중복을 조기에 추상화하지 않고 낮은 결합도를 선호합니다.

잠재적으로 분기되는 로직을 하나의 추상화로 강제하는 강한 결합 방지
미래 요구사항이 불확실할 때 일부 중복을 허용하면 결합도를 낮추고 유지보수성을 향상시킬 수 있음

추상화하기 전에 로직이 정말로 동일한지, 그리고 모든 사용 사례에서 동일하게 유지될 가능성이 있는지 고려하기. 분기가 가능한 경우(예: 다른 페이지가 useOpenMaintenanceBottomSheet와 같은 공유 훅에서 약간 다른 동작이 필요한 경우), 처음에 로직을 분리하는 것(중복 허용)이 더 유지보수 가능하고 결합이 낮은 코드로 이어질 수 있습니다. 팀과 함께 트레이드오프를 논의하세요.

14. 상태 관리 범위 지정 (너무 넓은 훅 피하기)

광범위한 상태 관리를 작고 집중된 훅/컨텍스트로 분리합니다.

컴포넌트가 필요한 '상태'에만 의존하도록 보장하여 결합도 감소
관련 없는 상태 변경으로 인한 불필요한 리렌더링을 방지하여 성능 향상

// cardId 쿼리 매개변수에 특화된 훅
import { useQueryParam, NumberParam } from "use-query-params";
import { useCallback } from "react";

export function useCardIdQueryParam() {
  // 'query'가 원시 매개변수 값을 제공한다고 가정
  const [cardIdParam, setCardIdParam] = useQueryParam("cardId", NumberParam);

  const setCardId = useCallback(
    (newCardId: number | undefined) => {
      setCardIdParam(newCardId, "replaceIn"); // 또는 원하는 히스토리 동작에 따라 'push'
    },
    [setCardIdParam]
  );

  // 안정적인 반환 튜플 제공
  return [cardIdParam ?? undefined, setCardId] as const;
}

// 날짜 범위 등에 대한 별도 훅
// export function useDateRangeQueryParam() { /* ... */ }

15. 컴포지션을 통한 Props 드릴링 제거

Props 드릴링 대신 컴포넌트 구성을 사용합니다.

불필요한 중간 종속성을 제거하여 결합도를 크게 감소
리팩토링을 쉽게 만들고 더 평평한 컴포넌트 트리에서 데이터 흐름을 명확하게 함

import React, { useState } from "react";

// Modal, Input, Button, ItemEditList 컴포넌트가 존재한다고 가정

function ItemEditModal({ open, items, recommendedItems, onConfirm, onClose }) {
  const [keyword, setKeyword] = useState("");

  // 자식을 Modal 내에 직접 렌더링하고 필요한 곳에만 props 전달
  return (
    <Modal open={open} onClose={onClose}>
      {/* Input과 Button 직접 렌더링 */}
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          marginBottom: "1rem",
        }}
      >
        <Input
          value={keyword}
          onChange={(e) => setKeyword(e.target.value)} // 상태는 여기서 관리
          placeholder="항목 검색..."
        />
        <Button onClick={onClose}>닫기</Button>
      </div>
      {/* ItemEditList 직접 렌더링, 필요한 props 받음 */}
      <ItemEditList
        keyword={keyword} // 직접 전달
        items={items} // 직접 전달
        recommendedItems={recommendedItems} // 직접 전달
        onConfirm={onConfirm} // 직접 전달
      />
    </Modal>
  );
}

// 중간 ItemEditBody 컴포넌트가 제거되어 결합도 감소.

출처 : https://gist.github.com/toy-crane/dde6258997519d954063a536fc72d055

JIRA 에서 특정 연도 티켓 추출하고 연결된 이슈 찾기

스페이스RUMI — Mon, 30 Dec 2024 14:14:43 +0900

필터 > 모든 이슈보기 > 검색창에 입력

assignee = currentUser() AND status = Done AND resolved >= "2024-01-01" AND resolved <= "2024-12-31" ORDER BY resolved DESC

담당자가 나이면서, 상태가 Done이고 resolved 된 2024년 초부터 2024년 말까지의 티켓을 찾아 내림차순으로 정렬

내보내기 Excel > CSV

구글 스프레드시트에 불러온 다음, 하이퍼링크로 만드는 함수 생성

엑셀의 시트넘버를 찾아 적절하게 추가해준다. 나는 QA가 없으면 PS를 넣고싶어서 IF문을 추가했다

=HYPERLINK("https://pnpt.atlassian.net/browse/"&IF(NOT(ISBLANK(AO2)), AO2, AP2), IF(NOT(ISBLANK(AO2)), AO2, AP2))

잘 된다.

바람의나라 신고 사이트 제작후기 feat. prisma & supabase 프리즈마 스키마 세팅 및 수파베이스 첫 사용. 클로드 ai 사용후기.

스페이스RUMI — Fri, 13 Dec 2024 13:09:51 +0900

개발공부를 해야겠다 싶어서, 이번에 핫하다는 ai 를 사용해 간단한 사이트 하나를 만들어보려고 했다.
ai는 클로드가 괜찮은것 같아 선택했고, 커서 ai도 한번 사용해보기로 했다.

1. 클로드야, 나 이런거 만들거야.

일단 사이트의 컨셉을 설명한다.

게임을 하고있는데, 사기꾼 아이디와 비매너 아이디를 등록하고 조회할 수 있는 사이트가 필요해.
next.js 로 페이지를 만들고 싶어. 유저는 사기꾼을 등록 할 수 있고, 등록 시 본인의 아이디도 입력해야 해.
등록할때는 카테고리를 설정할 수 있어. 카테고리는 '사기', '비매너' 가 있어.
사기꾼을 등록할때 모든 유저는 목록에서 아이디를 검색할 수 있어야해.
최신 등록한 아이디가 최 상단으로 노출되고, 넘버링을 해줘.
이 사이트는 구글아이디로 로그인을 할 수 있고, 관리자만이 등록된 아이디를 삭제할 수 있어.
삭제 버튼은 관리자에게만 노출 돼. 로그인 기능을 제공하지만, 목록에서 검색할 수 있는 기능은 로그인을 하지 않아도 이용할 수 있어. 하지만 등록은 로그인 이용자만 할 수 있어.

초기 컨셉은 이런식으로 대강 생각나는대로 정했다 (물론 중간에 아주 많은 첨삭과 수정이 이루어짐)

Next.js의 tsx를 던져주고, 데이터 연동이 필요하다면서 Prisma scheme를 대강 짜준다.

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String
  isAdmin   Boolean  @default(false)
  reports   Report[]
}

model Report {
  id          String   @id @default(cuid())
  scammerName String
  reporterName String
  category    String
  description String
  createdAt   DateTime @default(now())
  reporter    User     @relation(fields: [reporterId], references: [id])
  reporterId  String
}

2. 데이터베이스 연동하는 방법을 자세히 물어보았다

PostgreSQL 데이터베이스 설치하고, 설정하는 방법을 아주 자세히 알려준다. env 파일 설정이랑, 어떻게 작성하는지, 어디에 파일을 둬야 하는지, 터미널에 어떤 명령어를 작성해야하는지를 OS별로 알려준다.

나는 macOS를 사용하니 brew로 작업을 했다.
(brew로 작업하는 방법또한 자세히 알려준다.)

3. 클로드는 가끔 엉뚱한걸 알려주거나, 코드가 수정되면 기존 코드를 날려먹는 특징이 있다.

Next15에서 코드를 잘 짜주다가, 갑자기 pages가 등장하길래, next15 app router 환경으로 다시 코드를 작성해달라고 여러번 수정요청을 했다. 그리고 오답을 제시하거나, 타입문제를 잘 해결하지 못할때가 있었다. 그럴때마다 구글링을 해야했고, (구글신이 다 알려줌) 문제해결하는데는 크게 어렵지 않았다.

그래도 에러를 던져주면, 잘 해석해주고 해결방법을 알려준다.
대부분의 에러가 타입이슈였다. 애초에 타입스크립트로 작성해달라고하면 문제가 안될지도 모르겠다.

4. UI의 아주 마이크로한 디테일은 잘 잡지 못하지만, 전반적인 디자인은 생각보다 잘 잡아준다.

새로운 명령을 할때마다 UI가 추가되고, 레이아웃이 틀어진다.
기본적으로 tailwind 기반으로 코드를 짜주기때문에 수정하는데 어렵지는 않았다.
명령 한스택 한스택이 소중하므로, UI관련해서는 기본 틀만 짜달라그러고 컬러나 디테일한것들은 직접수정하는게 나을것같다.

기대한것보다는 괜찮은 디자인이 나왔다. 클로드...좀 괜찮을지도?

5. 절차에 대한 설명이 상당히 정확하다

auth 연동하는 방법이나, 수파베이스에 연동하는 방법 등을 물어보면, 절차별로 아주 자세히 설명해준다. 여기서 이해가 되지 않는 부분이 있다면, 다시 재질문 하면 된다. 정확하게 어디에서 헤매고 콕 찝어 알려준다. 상당히 똑똑하다고 느꼈다.

6. 기획이 바뀌는대로 수정 요청을 해도, 잘 적용해준다.

코드도 잘 돌아간다.

7. 다양한 문제해결 방향 제시

프로젝트 코드에서 category 라는 항목을 전부 제거했는데, 타입을 계속 참조하고 있었다. (타입도 바꿨음)
문제를 찾아달라고 요청했지만 계속 타입에러가 발생했고, 하라는대로 해도 해결이 되지 않아 여러번 되물었다.

같은 에러로 질문을 3스택정도 쌓았더니, 그래도 해결이 안돼? 하면서 더 다양한 해결책을 제시해줬다. 결국 해결!

이 오류는 캐시문제였다..

8. 개발 지식 없이 기획자가 대화형만으로 사이트 개발이 가능할까?

불가능하다. 변경된 코드를 확인하고, 이렇게 변경했을때 어디가 문제가 될지 파악할 수 있을 정도의 개발지식은 필요할것이다.
그리고 환경에 대한 이해도 있어야 할 것이다. 하지만, 어떻게 하는지 모른다고 말하면 클로드가 다 알려주기 때문에, 아주 약간의 지식만 있어도 만들수는 있을 것 같다.

아 코드 제대로 안짜냐?

누가 마음대로 누락시키래?

9. 문제가 될 법한것을 대강 설명해줘도, 찰떡같이 알아듣는다.

그에 대한 다양한 해결책도 마련해준다.

10. UI 보강

잘만들어준다

클로드만으로 만든 완성된 베타버전 사이트.
내가 한거라곤

1. 대충 기획
2. 클로드에게 코드짜라고 명령
3. Auth 연결, DB연결 (postGQL 쓰다가 supabase 연결)
4. UI 조금 수정

이것이 전부다. 클로드 유료 버전 (3.5를 사용했고)
제작하는데 이틀 걸렸다. (하루에 4시간?)

근데 처음부터 내가 다짜도 열심히 만들면 이틀이면 만들거같긴 함.. 그래도 안써본 클로드 ai, supabase연동, prisma 스키마 설정 등을 해봤다는것에 의미를 둔다.

딸깍으로 개발하는 시대..온다...

https://baram-scammer.vercel.app/

게임 사기꾼/비매너 신고 사이트입니다

baram-scammer.vercel.app

비트코인 다음 하락장 예측

스페이스RUMI — Mon, 2 Dec 2024 10:56:28 +0900

1. 반감기 주기 기준

다음 비트코인 반감기는 2024년 4월경 예정
과거 반감기 이후 12-18개월 뒤에 큰 하락장이 왔던 패턴 존재
이 패턴이 반복된다면 2025년 말~2026년 초에 하락장 가능성

2. 매크로 경제 요인

금리 정책
글로벌 경제 상황
규제 환경 변화

3. 시장 성숙도

기관투자자들의 참여 증가
ETF 승인 등 새로운 변수들
과거보다 변동성이 줄어들 가능성

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

const BitcoinBearMarkets = () => {
  const data = [
    { year: '2011', price: 32, event: '첫 번째 주요 하락장', drop: '-93%' },
    { year: '2013', price: 1200, event: 'Mt.Gox 해킹 사태', drop: '-85%' },
    { year: '2017', price: 20000, event: 'ICO 버블 붕괴', drop: '-84%' },
    { year: '2021', price: 69000, event: '테라/루나 사태', drop: '-76%' }
  ];

  return (
    <Card className="w-full max-w-4xl">
      <CardHeader>
        <CardTitle>비트코인 주요 하락장 분석</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-64">
          <LineChart
            width={600}
            height={200}
            data={data}
            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="year" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="price" stroke="#8884d8" />
          </LineChart>
        </div>
        <div className="mt-4">
          {data.map((item, index) => (
            <div key={index} className="mb-2 p-2 border rounded">
              <div className="font-bold">{item.year}: {item.event}</div>
              <div>하락폭: {item.drop}</div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
};

export default BitcoinBearMarkets;

Next app router slug 추출하기 / url params 가져오기 / 다이나믹 파람스 dynamic params / Next 쿼리파람 가져오기 / 쿼리스트링 가져오기

스페이스RUMI — Fri, 20 Sep 2024 16:07:10 +0900

다이나믹 파람스 가져오기

예를들어 user/visitor/[key]/page.tsx 라는 경로일 때,
key 값을 추출하려고 한다.

const page = ({ params }: { params: { key: string } }) => {

    console.log(params.key);
    ...

}

useParams훅을 사용해도 된다

import { useParams } from "next/navigation";

const page = () => {
    const params = useParams();
    console.log(params.key);
    ...
}

쿼리스트링 가져오기

url에서 쿼리스트링을 추출할 때.
user/visitor/test?address="강남구"

import { useSearchParams } from "next/navigation";

const page = () => {
    const searchParams = useSearchParams();
    console.log("searchParams", searchParams.get("address")); // "강남구"
}

훅 쓸때는 'use client'

Next js 14 로컬 폰트 여러개 Array로 처리하기

스페이스RUMI — Fri, 20 Sep 2024 10:19:32 +0900

경로 이 괴랄한거 때문에 몇십분동안 빙빙돌았다. ~~(근데 사실은 경로문제가 아니였던거지;;;)~~

공식문서 보고 그대로 Array로 넣으려니까 컴파일이 자꾸 안되는거임?

일단 폰트파일 경로는 app 하위에 위치

// app/layout.tsx

const AppleSDGothicNeo = localFont({
  src: [
    {
      path: "./fonts/AppleSDGothicNeoR.woff2",
      weight: "400",
      style: "normal",
    },
    {
      path: "./fonts/AppleSDGothicNeoM.woff2",
      weight: "500",
      style: "medium",
    },
    {
      path: "./fonts/AppleSDGothicNeoSB.woff2",
      weight: "600",
      style: "semibold",
    },
    {
      path: "./fonts/AppleSDGothicNeoB.woff",
      weight: "700",
      style: "bold",
    },
  ],
  variable: "--font-apple-gothic",
});

공식문서랑 똑같이 추가해준다.

컴파일이 안되면 폰트 자체에 문제가 있는지 의심해볼 것.
나같은경우 AppleSDGothicNeoB woff2 파일만 컴파일을 못해서 woff로 대체했다.
단건으로 넣을땐 잘되는데, 배열로 넣으니까 안되서 한참을 해맸음... 하나씩 소거해보고 겨우 답 찾았네

<body className={`antialiased relative ${AppleSDGothicNeo.className} ${AppleSDGothicNeo.variable}`}>
 	{children}
 </body>

nextjs public 폴더 경로 / nextjs 이미지 경로 설정

스페이스RUMI — Fri, 13 Sep 2024 20:01:21 +0900

// public/images

import Image from "next/image";

<Image
    src={"/images/logo.svg"}
    width={197}
    height={41}
    alt={"logo"}
    className="mb-[26px]"
/>

next.js는 빌드시점에 public파일을 빌드하기 때문에 파일이 바뀌었다면 yarn build 후에 실행해야 변경 내용이 반영된다.

runtime 시점에 변경된 내역은 반영되지 않는다.

new URLSearchParams 객체 / 쿼리스트링 객체

스페이스RUMI — Mon, 3 Jun 2024 09:57:18 +0900

쿼리 스트링의 키-값 쌍을 추가하고, 제거하고, 문자열을 직접 생성할 수 있는 생성자.

const params = new URLSearchParams();

append() 메서드와 set() 메서드의 차이

append()는 키-값 쌍을 계속 추가하고

const params = new URLSearchParams();

params.append('qs', 'test1');
params.append('qs', 'test2');

console.log(params.toString());

// qs=test1&qs=test2

set()은 교체한다.

const params = new URLSearchParams();

params.set('qs', 'test1');
params.set('qs', 'test2');

console.log(params.toString());

// qs=test2

get() 키에 해당하는 값 검색

const params = new URLSearchParams();
params.set('qs','test')

const newParams = params.get('qs');

console.log(newParams); // test

delete() 키 제거

params.delete('qs');

Next의 useSearchParams가 Readonly이기 때문에 값의 변경이 필요할 때 사용한다.

콘솔에 할당 전 데이터가 들어있다???

스페이스RUMI — Mon, 13 May 2024 13:30:16 +0900

네트워크에서 데이터를 가져오자마자 콘솔을 찍었는데, 내려주지않는 데이터를 가지고 있길래
방황하던 중, 새로운 사실을 알게됐다.

빨강이 콘솔로그 실행 시점의 값
파랑이 개발자 도구에서 삼각형 펼쳤을 때 변수에 담긴 값

그렇기 때문에, console.log(a) 를 찍었을때 모두 할당된 값이 브라우저 콘솔창에는 표기되지만,
실제 콘솔을 출력하는 시점에는 값이 없으므로, 값을 꺼내려고 하면 undefiend가 발생한다.

No index signature with a parameter of type 'string' was found on type | 문자열 인덱싱 시그니처 타입에러

스페이스RUMI — Thu, 16 Nov 2023 16:59:17 +0900

key로 직접 접근할때 종종 만날수있는 타입에러

해결방법 1 : 애니추가

[key: string]: any; // 를 추가하거나,

해결방법 2 : key as key of

let payload: TestDTO = {};

    for (const key in data) {
      if (data[key]) {
        payload[key as keyof TestDTO] = data[key];
      }
	}

keyof는 객체의 속성 이름들 중 하나를 나타내는 문자열 유니온 타입을 생성한다.

git stash 명령어를 알아보자. save 저장하기, pop 꺼내기, pop 한거 취소하기

스페이스RUMI — Wed, 27 Sep 2023 15:19:27 +0900

stash 에 저장하기

git stash save

or

git stash save -m "message"

저장하면 stash에 변경된 코드가 담긴다. 커밋처럼 메시지를 추가할 수 있다.

stash 에서 꺼내기

git stash pop

stash pop 한거 취소

git reset --merge

stash 목록보기

git stash list

가장 최근 저장한거 삭제

git stash drop

모든 stash 삭제

git stash clear

url 이미지를 blob으로 변환, url image Blob 객체로 변환하여 다운로드하기

스페이스RUMI — Mon, 25 Sep 2023 14:44:50 +0900

image url은 알고있는데, 이것을 다운로드 하고싶다면 어떻게 해야 할까?

일단 돔을 그린다.

// 파일명과 파일 url을 파라미터로 넘긴다.
<button className="file-download" onClick={() => handleImageDownload(file.filename, file.url)}

파일명을 보내주는 이유는, 파일명을 api response에서 꺼내려면 헤더에서 꺼내야 하기때문이다 (백엔드 설정이 제대로 되어있어야 한다)버튼을 클릭했을때 handleImageDownload가 동작하도록 작업을 하자.

const handleImageDownload = async (filename: string, url: string) => {
    try {
      // 데이터를 blobType으로 받는다.
      const response = await axios.get(url, { responseType: "blob" });
      // Blob 객체를 생성한다.(이 Blob 객체는 이미지 데이터를 가지고있다)
      const blob = new Blob([response.data]);
      // BlobURL을 만들어준다. 브라우저에서 blob 데이터를 가리키는 고유한 url이다.
      const blobURL = URL.createObjectURL(blob);
      // a 태그를 동적 생성한다.
      // 실제로 돔에 생성되는게 아니고, 메모리상에 생성된다.
      const link = document.createElement("a");
      // 생성한 a태그의 href를 blob URL로 지정해주고,
      link.href = blobURL;
      // prop으로 받은 파일명을 지정해준다 (이 속성이 있어야 다운로드된다)
      link.download = filename;
      // 링크요소를 클릭하여 동작하게 해준다.
      link.click();
    } catch (error) {
      console.log("다운로드실패", error);
    }
  };

이제 다운로드가 잘 동작한다.

[젤다의전설] 티어스오브더킹덤 - 코쿠피 설원의 동굴 / 노우다의 사당

스페이스RUMI — Wed, 9 Aug 2023 21:41:52 +0900

코쿠피 설원의 동굴 위치

동굴안에 사당이 있다.

동굴 입구는 여기

들어가면 바로 정면에 사당이 보인다.
어떻게 가냐~~

바로 우측에 굴로 들어가면, 얼음 뿜으면서 조아가 얼음 만들어준다.
물에 얼음을 뿌리면? 얼음~

만들어진거 가져다 써도되고
냉기열매를 쏴도된다.

노우다의 사당!!

마요이는 입구에서 좌측굴에 숨어있다.

오늘도 1사당 했다.ㅎㅎ

젤다 꿀팁글

[젤다의 전설] 티어스 오브더킹덤 - 코로그 모든 종류 / 친구한테 가고싶어 / 코로그 도토리 / 코

코로그 모든 종류와 퍼즐 푸는 방법에 대해서 알아보자. 한번 알아두면 헤멜일이 없다. 친구가 있는 곳으로 가고싶어 초록색 연기나는 곳으로 친구가 있는 위치를 알려주는데, 어떻게든 데리고

space-rumi.tistory.com

[젤다의전설] 티어스오브더킹덤 - 번개의대지 동굴 들어가는방법 / 람다의재보 꿈꾸는 용사의 가면

스페이스RUMI — Tue, 8 Aug 2023 04:38:08 +0900

번개의대지 위치

하이랄 성의 왼쪽과 리토마을에서 동남쪽 사이에 있다.

꿈꾸는용사의 가면은 번개의대지 동굴 안에 있는데,
동굴 문을 여는 방법은 12시 정오에 남쪽 석상의 그림자가 북쪽 석상에 닿으면 된다.

번개의 대지 중앙에보면 동굴 입구가있고,
사방에 4개의 석상이 있는데, 맵에서 남쪽에 있는 석상을 표시해주자.

주변에있는 버섯나무를 자른다. 통나무 5개 필요.

일자로 이어준다.

통나무를 세우려면 말뚝이 필요하다.

이런식으로, 말뚝을 스크래빌드한 통나무에붙이고, 남쪽기둥에 붙여서 긴 그림자를 만들어준다.

이것도 아슬아슬하게 안닿았다. 최대한 위에 붙여줘야함

장작 태워서 시간때우기로 점심으로 가자.

참고로 비오거나 번개치거나 흐린날이면 그림자가 안생기기때문에...
햇빛이 쨍한 정오가 걸리기를 기도한다.

나는 계속 비오고 천둥쳐서 5트 했다.. 한번 비 걸리면 5분정도 대기타줘야한다 ㅠㅠ

암튼 이렇게 그림자가 북쪽 석상에 닿으면 동굴 문이 열린다.

드디어 만나는 꿈꾸는 용사의 가면

번개의대지 동굴 마요이는 천장에 있다.

귀여워 !

귀여워

architecture 아키텍처란? 계층형/이벤트기반/마이크로서비스

스페이스RUMI — Fri, 4 Aug 2023 02:00:41 +0900

아키텍처는 계획을 정리한것을 말한다.
즉, 소프트웨어를 분석하고 계획을 세워 정리한 설계도 같은것을 아키텍처라고 한다.

계층형 아키텍처 (레이어드 아키텍처)

여러가지 층으로 만들어 분리하는 단순한 방식의 아키텍처.
각 계층마다 로직이 다르고, 의존성이 단방향이다.
서비스 규모가 커지면 계층도 커지면서 유지보수가 힘들어지고, 개발속도도 저하되며 배포도 어렵다.

이벤트 기반 아키텍처

이벤트라고하는 상태변화에 대응하는 아키텍처이다.
예를들어, 유저가 버튼을 클릭해 원하는 상품페이지에 접근하는 이벤트가 발생할 수 있다.
상태변화에 대응하는 알림 서비스 등을 설계할 때 적합하다.

모든 요청은 비동기 처리 하기 때문에, 확장성에 좋지만, 순서를 보장하기는 어렵다.

이벤트 기반 아키텍처는 프로듀서, 브로커, 컨슈머로 구성된다.
Scale Out 하기 편하다 : 서버 메모리 네트워크 등을 추가해 처리량을 늘리는 것

프로듀서 : 이벤트를 발생
브로커 : 이벤트를 전달
컨슈머 : 이벤트를 받음

마이크로서비스 아키텍처

여러개의 작은 서비스로 잘개 쪼개 관리하는 아키텍처.
각 서비스가 분리되어있기 때문에 서비스별로 업데이트가 가능하여 확장성이 좋다.
구성이 복잡한 대규모 시스템에 적합하다.

한개의 서비스가 하나의 도메인을 관리하는 정도로 분리하는것이 좋다.
* 분산 트랜잭션 처리를 고려해야 한다.

[백엔드] 백엔드 개발자가 되기위한 로드맵 / 코딩 잘~ 하는 백엔드 프로그래머가 되기 위한 시작점

스페이스RUMI — Fri, 4 Aug 2023 01:25:40 +0900

백엔드 개발자가 알아야 할 것들

백엔드 공부를 시작해보려고 한다.
나는 디자인, 퍼블리싱, 프론트엔드 지식밖에 없기 때문에,
기본적으로 내가 공부 할 키워드를 훑어봤다.

프론트엔더라 자바스크립트에 익숙하다 보니, Node.js를 공부할 예정이다.

언어 : 자바스크립트 & 타입스크립트
웹 프레임워크 : express, NestJS
인증 : 인증, 인가, Oauth
데이터베이스 : RDB - SQLite / NoSQL - 몽고디비 / ORM
HTTP : RESTful API
+ 서버와 운영체제에 대한 이해 (리눅스서버 및 리눅스 명령어들..)
+ vim

웹 서버와 WAS

Web Server (웹서버) : 이미지나 pdf, xls 등등 정적파일을 서비스하는 서버. ex) 아파치, 엔진엑스
Web Application Server (WAS) : 스프링이나 장고 같은 웹프레임워크를 실행시켜 데이터를 처리하는 서버 ex) 톰캣

컨테이너 환경과 배포

도커를 이용해 실제 운영서버의 환경과 개발서버의 환경을 맞춰 개발할수있다.
컨테이너 환경의 경우 쿠버네티스를 사용해 배포하기도 한다.

롤링 배포 : 특정 서버들을 돌면서 배포하는 방식
블루그린 배포 : 같은서버의 인스턴스를 띄우고, 로드밸런서 설정을 바꾸고 배포하는 방식
카나리 배포 : 지정서버 혹은 특정 유저, 일정 부분만 배포하고 이상이 없을 때 배포범위를 확장해나가는 방식

CI/CD : Continuous Integration / Continuous Delivery & Continuous Deployment
(지속적인 배포, 코드 반영. 개발 - 테스트 - 배포 - 모니터링을 끊임없이 하는것을 의미)

워드프레스 vs 티스토리 블로그 추천 사이트. 워드프레스 설치형, 워드프레스 가입형

스페이스RUMI — Wed, 2 Aug 2023 19:36:39 +0900

최근 티스토리가 구글 애드센스 광고 일부를 가져감으로써, 워드프레스의 수요가 늘었다.
물론 나는 애드센스 때문에 티스토리를 시작했던건 아니지만, 어쩌다 보니 애드센스를 달게되었고,
이왕 블로그 하는거 워드프레스까지 운영해보면 좋겠다 싶어서 시도해봤다.
몇년전에 설치형을 써봤고, 이번에 가입형으로 개설을 해봤는데 역시 재미있다.

다양한 블로그를 동시에 하는것은 무리가 있을거라고 판단했지만, 나름 각각의 블로그 플랫폼으로서의 장점이 있다.

처음 블로그를 시작할 때 어떤 플랫폼을 사용하는게 좋을까?

일단 어떤 블로그 서비스들이 있는지 알아봐야 할 것이다. 플랫폼 종류를 찾아보자.
그리고 각각의 플랫폼들의 특징을 살펴보자.

워드프레스 (설치형, 가입형이 있고 자유도가 높다.)
티스토리 블로그 (다음, 카카오톡 유입에 용이)
네이버 블로그 (쇼핑, 후기 특화, 애드센스 불가능)
브런치 (감성, 칼럼, 작가승인을 받아야 함)
미디엄 (영문특화)
구글블로그 (딱히 장점은 없음)

이 중 블로그를 처음 시작할 때 가장 추천하는 플랫폼은 티스토리와 네이버다.
물론 나는 네이버는 고려하지 않았다. 개발이나 게임 카테고리 특성상 적합하지 않다고 판단했기 때문이다.
예전에 메이플하던 시절.. 게임블로그로 했었는데 추억이다.

처음 블로그를 시작할때 티스토리 블로그로 시작한 후, SEO, 키워드 검색, 서치콘솔 등등에 대해 알아본 다음, 글 작성과 블로그 관리에 익숙해지면 워드프레스로 넘어가는것을 추천한다.

그 이유는 워드프레스는 생각보다 시작하기 어렵기 때문이다. (다른 블로그 플랫폼들에 비해 상대적으로)
그리고 SEO도 도메인지수가 낮기때문에 초기 트래픽이 낮을수밖에 없다.
글 100개써도 일일조회수 10도 안나올수도 있다는 이야기다.

그래서 사람들이 글 좀 몇번 써보다가 보통 쉽게 포기한다.

그리고 심지어 유료다. 설치형 / 가입형 두가지로 나뉘는것도 어려움에 한몫한다.

사실 나는 가입형을 추천하는 편인데, 많은 사람들이 설치형으로 시작을 한다.
그 이유는 간단히 비교해보면 답이 나온다.

워드프레스 설치형

초기 세팅 비용이 가입형에 비해 저렴하다.
플러그인을 바로 사용할 수 있다.
커스텀이 매우 자유롭다.
SSL 신경써줘야 한다.

워드프레스 가입형

비즈니스 요금제부터 애드센스를 달수있다. (25 달러)
트래픽 무제한

사실상 비즈니스 요금제의 가입형을 사용하면, 설치형과 같다고 보면된다.

클라우드 비용이랑 트래픽이랑 내가 커스텀할 항목들, 테마 사용여부 등등 이것저것 계산해봤을때..
블로그가 성장하면 성장할수록 가입형이 훨씬 비용절감이 된다는 결론에 도달했다.

물론 이건 생각이 다를 수 있다.

언제 수익이 발생할지 모르는데 초기비용에 매월 25달러를 태우는게 비효율적이라 생각할수도 있고,
몇만 몇십만 트래픽이 발생할것도 아닌데 굳이 가입형 써야되냐 는 의견도 있다.

선택하기 나름이지만, 블로깅 하루이틀 할것도 아니고 n년 보고 꾸준히 하는거라면 가입형도 합리적인 선택인 것 같다.

나라면 클라우드웨이즈 벌쳐 저가형 쓰느니 가입형쓰겠다.

블로그가 처음이라면 워드프레스를 바로 시작하지말고 다른 플랫폼을 먼저 이용해보자.

티스토리나 네이버에서 글 쓰는 감을 익힌 다음에 시작하자.
돈이 나가는건 추가적인 요소고, 다시한번 말하지만 워드프레스는 SEO에 있어 외딴 섬이다.

키워드, SEO, 최적화, 도메인지수, 글 엮기, 백링크 등등
공부해야 할 것들이 참 많은 것 같다.

[디자이너 & 퍼블리셔를 위한 가이드 # 4] 브라우저 마다 확인하기 / 폰트 적용 확인하는 방법 / 무료폰트 사이트 / 예쁜 글씨체

스페이스RUMI — Wed, 26 Jul 2023 01:06:00 +0900

지원되어야 하는 브라우저를 확인하자.

크로미움 기반(크롬, 삼성인터넷, 웨일, 엣지, 브레이브 등), 그리고 사파리, 파이어폭스, IE 몇버전 까지를 지원할것인지를 정한다.
(2022년 6월, IE서비스는 지원종료 되었으므로 제외). 브레이브 브라우저, Arc 등 다양한 브라우저는 많고, 이걸 쓰는 사람들도 꽤 많다.

디자이너와 개발자 모두 모든 브라우저에서 실제 테스팅을 해보기를 권한다. 의외로 크롬에서 잘 돌아가면 ‘잘 되네요’ 라고 생각할 수 있지만, 사파리에서 안보이는 케이스도 있고, 엉뚱한 위치에 가 있는 케이스가 있다.

특히 사파리는 default 속성값을 명시해 주지않으면 그리지 않는 현상이 종종 있으니 반드시 체크하자.
높이값을 명시하지 않았을 경우 이미지를 그리지 않는 현상도 간헐적으로 발생한다.

폰트가 잘 렌더링 되었는지도 잊지말고 확인해야한다.

폰트 렌더링을 확인하는 방법은, 확인하고자 하는 텍스트 위에서 [마우스 우클릭 - 검사] 를 누른 후, (혹은 f12) 계산됨 하단에 렌더링된 글꼴을 보면 된다.

pretendard 글꼴이 적용되었다는것을 알 수 있다.

폰트를 제대로 렌더링 하지 못했을 경우, 별도의 설정이 없다면 사파리는 못생긴 세리프체를 렌더링 해 버린다.

Serif 세리프 (폰트의 획이 삐침으로 돌출된 형태)
Sans Serif산세리프 (폰트의 획이 삐침없는 곧은 형태. ex 돋움, 고딕체)

+ 프랑스어로 Sans는 "없는" 이라는 뜻이다.

무료 폰트 사이트

무료폰트 사이트로는 대표적으로 눈누가 있다. 상업적 이용이 가능한 폰트들을 모아놓았기 때문에, 걱정없이 사용할 수 있다.

눈누

상업용 무료한글폰트 사이트

noonnu.cc

구글 폰트는 라이선스에 자유롭기때문에 걱정없이 사용할 수 있다.

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

예쁜 영문 글씨체는 리그오브무버블 에서 찾기 좋다. 많은 해외 사이트들이 폰트를 사용중이다.

The League of Moveable Type

The first open-source font foundry. Your source for learning how to use & make type, and level up your skills as a designer.

www.theleagueofmoveabletype.com

[디자이너 & 퍼블리셔를 위한 가이드 #3] 적응형과 반응형 결정하기. 브레이크포인트 정하기. 반응형홈페이지란

스페이스RUMI — Wed, 26 Jul 2023 00:51:10 +0900

일반적으로는 적응형/반응형 여부는 프로젝트 세팅 단계에서 정하고 시작한다.
관리자페이지 처럼 넓은 화면에서 봐야 유용한 웹 같은 경우에는 반응형보다는 적응형으로 가는 편이다.
모바일웹(웹앱)의 작업 여부는 어떻게 되는지도 확인하자.

적응형, 그리고 반응형 웹이란?

적응형이란 모든 디바이스에 균일하게 보이도록 최소 너비를 고정으로 가져가는 방법이고,
반응형이란 디바이스의 폭에 따라 화면이 상이하게 보이는 것이라고 이해하면 쉽다.

적응형 예시)

잡코리아 https://www.jobkorea.co.kr/
잡다 https://www.jobda.im/

모바일 화면을 디자인 할때, 스테이터스바와 툴바영역높이를 포함하여 디자인한다. 브라우저 마다 다르게 하단에 띄워주는 플로팅바도 고려하는것이 좋다.

특히 사파리에서는 Viewport 영역이 툴바 뒤까지 포함이기 때문에, 100vh(높이를 화면크기만큼 지정하겠다)를 사용할 경우 하단이 짤리는 현상, 혹은 화면이 꽉 차있지 않아도 약간의 스크롤바가 생기는 현상이 발생한다.

이를 해결하기 위한 라이브러리들이 있고, 라이브러리를 사용하지않아도 퍼블리싱 선에서 대비가 가능하다. 따라서 검수때 화면에 컨텐츠가 부족함에도 스크롤이 발생한다면 이 부분을 체크해 보는것이 좋다.

최대 최소 사이즈와 브레이크포인트를 결정하자.

ex) 최소사이즈는 1340x720이며 적응형으로 작업해야 합니다.
ex) 540/1200 으로 브레이크포인트를 잡는건 어떨까요?

= 540 이하는 모바일, 540~1200 사이는 태블릿, 1200 이상은 PC로 간주하는 경우이다.

미디어쿼리 적용 순서는 어느화면을 기준으로 하느냐에 따라 결정된다.  일반적으로는 PC > Mobile 순으로 미디어쿼리를 적용했으나, 최근에는 모바일 기기 사용자가 증가함에 따라 Mobile > PC 순으로 작업을 하는 추세이다. 어느순서로 해도 사실 상관은 없다. 다만 모바일퍼스트 디자인을 해야 작업하는데 상대적으로 수월하다.

작은 화면 to 큰 화면은 min-width를 사용하고, 큰 화면 to 작은 화면은 max-width를 사용한다.
또한 디바이스별로 별도의 Breakpoint를 설정하는 방법은 좋지 않다. 내 디자인 레이아웃에 맞춰 설정하는것이 가장 좋은 방법이며, 주로 디자이너와 기획자가 협의하여 정한다.

[젤다의전설] 티어스 오브더 킹덤 - 토비오 계곡 동굴 사당 / 우토지시의 사당 / 창 던지기 전승

스페이스RUMI — Fri, 14 Jul 2023 23:15:57 +0900

우토지시의 사당 위치

계곡의 동굴 입구는 토비오 계곡의 북서쪽 쯤에있다.

박쥐같은 키이스 잡으면서 동굴로 쭉쭉 들어가다보면, 넓은 공간에 조나니움 창 두자루와 낡은 노트가 있다.
처음에 못찾아서 한참 돌았다. 주위를 잘 살피자.

노트가 힌트주는데, 일반적으로 던지면 안된다.
동굴에 들어올때 잡았던, 키이스의 날개를 달면 된다.

2트는 해보라고 창 두개 놓여져있다.
실패하면 다시 주워오면되겠지.

창을먹고 왼쪽아래쯤 공간에 올라가면 발판 빛나면서 목표지점이 표시가 된다.

조나니움 창에 스크래빌드 시전!!

던질때는 목표지점보다 좀 위로 쏴야한다.

사당챌린지 창 던지기 전승 컴플릿

은근히 사당챌린지가 재미있다.

[Typescript] 네임스페이스 ts / 타입스크립트 모듈 import export

스페이스RUMI — Fri, 14 Jul 2023 22:30:53 +0900

모듈(module)

모듈이란, 서로 연관있는 데이터나 함수를 하나로 묶은 단위이다.
모듈은 코드와 선언 둘 다 포함될 수 있으며, 재사용성, 고립성, 번들링을 위해 사용된다.
모듈을 사용하게되면 다른 파일에서 선언한 것들을 가져와 사용할 수 있다.

ts 파일을 하나 만들고, 변수선언을 해주면 아래와 같은 에러가 발생한다 ex) test1.ts

cannot be compiled under '--isolatedModules' because it is considered a global script file.
Add an import, export, or an empty 'export {}' statement to make it a module.

test1.ts 파일을 모듈로 만들려면 import, export 를 사용하거나 empty{}를 적어줘야 한다.
그래야 이 파일을 모듈로 인식한다.

const test = [1,2,3]
export {} // 내보낼건 없지만 이 파일은 모듈이다

import {ProductType} from "../productTypes" // 다른곳에서 가져올때 import 키워드 사용
const test = [1,2,3]

export const test = [1,2,3] // 다른곳에서 쓸때(다른곳으로 내보낼때) export 키워드 사용

네임스페이스(namespace)

타입스크립트에는 내부모듈과 외부모듈이 있는데, 그중 내부모듈에 해당하는 것이 네임스페이스다. (옛날에는 내부모듈이라고 불렀다)
export import로 내보내거나 가져온 모듈들은 모두 외부모듈이라고 보면 된다.

네임스페이스를 사용하는 가장 큰 목적은 구조의 논리적 그룹을 명확히 선언하여 이름의 중복을 방지하기 위함이다.
서로다른 파일에서 같은 namespace를 공유할 수 있다.

// User.ts
namespace Utils{
    export interface isIdNumber{
		isIdNumber(id:any):boolean	
    }
}

// Product.ts
namespace Utils {
   export const onlyNumberWithSymbol = (str: any) => {
  return str.replace(/[^0-9. +]/g, "").replace(/(\.*)\./g, "$1");
};
}

네임스페이스 사용하기

네임스페이스는 Typescript만의 고유 방법이며, 여러개의 파일을 포괄할 수 있다.
여러개의 파일을 포괄하려면 가져올때 reference 를 통해 가져온다.

// Test.ts
<reference path="test1.ts" />
<reference path="test2.ts" />
<reference path="test3.ts" />

이때, 모든 입력 파일을 하나의 JavaScript 출력 파일로 컴파일하기 위해 --outFile 플래그를 사용하여 연결 출력(concatenated output)을 사용해야한다.

tsc --outFile Test.ts

그러면 컴파일러는 파일에 있는 참조 태그를 기반으로 출력 파일을 자동으로 정렬한다.

각 파일을 개별적으로 지정할 수도 있다.

tsc --outFile test1.ts test2.ts test3.ts Test.ts

또는 파일별 컴파일(기본값)을 사용하여 각 입력 파일에 대해 하나의 JavaScript 파일을 생성할 수 있다.
여러 개의 JS 파일이 생성되는 경우, 웹 페이지에서 <script> 태그를 사용하여 각 파일을 적절한 순서로 로드해야 한다.

<script src="Test.js" type="text/javascript" />
<script src="test1.js" type="text/javascript" />
<script src="test2.js" type="text/javascript" />
<script src="test3.js" type="text/javascript" />

(예제는 ts인데 경로 파일명은 왜 js지?? => js로 컴파일 되었기 때문이다)

네임스페이스랑 ES Module 중 뭘 써야 할까?

Typescript 공식문서를 보면, Node.js 애플리케이션의 경우 모듈이 기본값이며 최신 코드에서 네임스페이스보다 모듈을 권장한다는 점도 주목할 필요가 있다고 적혀있다. 또한, 새로 만드는 프로젝트는 Module을 권장한다.

모듈을 쓰자.

[젤다의 전설] 티어스 오브더 킹덤 - 라나호 동굴 마요이 / 토키요우의 사당 챌린지 / 라나호의 동굴에 잠든 수정

스페이스RUMI — Wed, 12 Jul 2023 23:47:03 +0900

라나호 근처에 보면 동굴이 있는데

그 안쪽으로 들어가다보면 수정이 있다.

들고 가다보면 위에서 돌덩이들이 떨어진다.
잘 피해서 가자.

가다보면 빛이 가리키는 방향 말고, 왼쪽~앞쪽에 보물상자 하나 있다.
먹고가자.

좋은거좀 주지..

빛이 가리키는 방향으로 가다보면

양갈래길이 나오는데,
빛이 우측 가리키는걸 보니 왼쪽엔 마요이가 있을것으로 예상.

잡아주자.

우측으로 가다보면 돌덩이 굴러온다.
리버레코 써주자.

토키요우의 사당 챌린지 끝

[젤다의 전설] 티어스 오브더 킹덤 - 펠리아산의 동굴

스페이스RUMI — Wed, 12 Jul 2023 23:41:58 +0900

지도를 보면 펠리아산 바로 위쪽에 동굴 입구가 있다.
펠리아산을 끼고 위 아래로 동굴 출입구가 있는데, 클리어 방식은 비슷하다.

동굴에 물이 떨어지고 있어서 가시들을 태울 수 없다.
탈것을 만들자.

가시밭길을 뚫고 지나간다.

동굴이 굉장히 넓은데, 쭉쭉 계속 그냥 보코블린 잡으면서 가다 보면 이렇게 철망이 보인다.
여기까지 오면 다 돈거나 마찬가지...

미넬타고 넘어가는게 될까? 가시범위가 넓으면 안된다.
윤돌 날려서 가시 태우고 미넬로 어찌저찌 걸어갈수는 있다.

암튼 배터리 조합해서

깨다보면 반대편까지 도달한다.

[젤다의 전설] 티어스 오브더 킹덤 - 거대한말 위치 / 거대한 백마 위치

스페이스RUMI — Wed, 12 Jul 2023 00:57:12 +0900

젤다에는 유니크말 중 거대한 시리즈가 두 종류가 있는데, 거대한말이랑 거대한 백마 다.

거대한말 위치

하테르해 바로 위쪽

이렇게 생겨먹은 엄청나게 큰 말을 볼 수 있다. 스테미나 2줄이면 충분히 잡는듯.
발로 두번 채여서 은밀세트 대충 입고 잡았다..

거대한말은 말을 너무 안들어서 진짜 몇걸음 뛰고 바로 쓰담쓰담 해줘야한다.
안그러면 길 이탈하고, 회전 시도하고 난리도 아니다.

거대한 백마 위치

거대한 백마는 필로네 지역의 이바라 고지 쪽에 있다.

말 원단 갖다준적이 없어서 원단표시 뜨네 ㅋㅋ;

거대한 백마는 이렇게 생겼다.
갈기가 아주 멋있다.

얘도 말 엄청 안듣는다. 계속 쓰담쓰담 해주고 걷자...

거대한말 두종류는 마구간에 등록할수는 있지만, 마용을 통해 업그레이드는 할 수 없다.
말 안듣는 녀석들이다...

[젤다의전설] 티어스 오브더 킹덤 - 마용 위치 / 말 업그레이드

젤다 마용 위치 마용은 말의 신이다. 인간의 요리를 좋아한다. 죽은 말을 살릴수있고, 말을 업그레이드 시킬 수 있다. 마용한테 처음 찾아가면 활력당근 1개를 강탈해간다. 활력당근은 벚꽃나무

space-rumi.tistory.com

[젤다의 전설] 티어스 오브더 킹덤 - 젤다 황금마 위치 / 젤다가 사랑한 황금마

젤다 황금마 * 퀘스트 안받고 그냥 찾으러 가서 말 데리고 마구간에 와도 된다. 위치는 아래에 지도 있음. 다글리설원쪽 마구간에 황금마 퀘스트를 주는 녀석이 있다. 봅새랑 할로가 대화하고있

space-rumi.tistory.com

www.youtube.com에서 연결을 거부했습니다. HTML에 유튜브 영상 넣기, 영상 자동재생, 비디오 영상 넣기

스페이스RUMI — Wed, 5 Jul 2023 00:46:44 +0900

HTML에 유튜브 영상 넣기

유튜브 영상을 넣으려면 퍼가기 코드로 넣어야 한다. 그렇지 않으면 유튭에서 연결을 거부했다는 문구가 뜰것이다..
넣고싶은 유튜브 영상에서 공유 버튼을 누른다

퍼가기를 누른다.

iframe 부분 코드를 가져와 넣어준다

나는 스타일로 width와 height를 줬기때문에 뺐다.
그리고 allow="autoplay"가 먹지 않아서, src 뒷부분에 ?autoplay=1을 붙여주었다.

<iframe
    src="https://www.youtube.com/embed/G-n3IKnGI5U?autoplay=1"
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    autoPlay
    muted
></iframe>

React에서 영상 임베드하기

 useEffect(() => {
    if (videoRef) {
      videoRef.current.play();
    }
  },[]); 
...

<video width="1024" name="my_video" controls autoPlay ref={videoRef}>
 <source src={video} type="video/mp4" />
</video>

*git에서는 100mb 이상 푸시가 안되니.. 임베드 할거라면 용량을 잘 확인하고 압축해서 넣자.

한번 푸시했다가 에러 걸려서 reset하고 다시 작업했다..

[젤다의전설] 티어스 오브더 킹덤 - 마용 위치 / 말 업그레이드

스페이스RUMI — Thu, 29 Jun 2023 12:49:52 +0900

젤다 마용 위치

마용은 말의 신이다. 인간의 요리를 좋아한다.
죽은 말을 살릴수있고, 말을 업그레이드 시킬 수 있다.

마용한테 처음 찾아가면 활력당근 1개를 강탈해간다.
활력당근은 벚꽃나무 근처에서 구할수있다.

손만 내미는거봐ㅋㅋㅋ

요리를 만들어오면 말과 관련된 소원을 들어준다.

참고로 거대한말은 업그레이드가 안된다.

쳇.. 너무 아쉽다. 거대한 백마 엄청 멋있는데...

고상한 말이지만 스테미나도 없고..
관상 수집용 될 가능성 99.9%

말의 각 능력마다 MAX(별5개) 까지 찍을수있다.

[젤다의전설] 티어스 오브더 킹덤 - 코모레 비치의 동굴 마요이

스페이스RUMI — Thu, 29 Jun 2023 00:41:52 +0900

코모레 비치의 동굴

동굴 돌아다니는거야 어렵지 않은데..
항상 마요이가 꽁꽁 숨어있어서 마요이 찾는게 일이다.

코모레 비치 동굴은 고원의 마구간의 우물과 연결되어있다.
우물로 들어오면 마요이 없겠네~ 생각하기 쉽겠지만 동굴과 연결돼있어서..마요이가 있다.

마요이 위치

동굴 돌아다니다보면 빨간폭탄통이 보이는데 맞은편 깰수있는 벽이 있다.

잘 보이지도 않는다.
깨고들어가면 큰 공간 나오는데, 막혀있으니까 마요이를 찾으면 된다.

너무 꽁꽁숨은거 아니여?

함께보면 좋은 글

[젤다의 전설] 티어스 오브더킹덤 - 코로그 모든 종류 / 친구한테 가고싶어 / 코로그 도토리 / 코

space-rumi.tistory.com

[젤다의 전설] 티어스 오브더킹덤 - 코로그 모든 종류 / 친구한테 가고싶어 / 코로그 도토리 / 코로그 통나무 빨간 화살표

스페이스RUMI — Thu, 29 Jun 2023 00:36:25 +0900

코로그 모든 종류와 퍼즐 푸는 방법에 대해서 알아보자.
한번 알아두면 헤멜일이 없다.

친구가 있는 곳으로 가고싶어

초록색 연기나는 곳으로 친구가 있는 위치를 알려주는데, 어떻게든 데리고 가면 된다. 코로그 2개준다.

가보자구

나무에 사슬 연결되있는 코로그

나무에 사슬이 연결돼 있는 코로그는, 보통 주위에 물이 있다.
물 깊은곳에서 놓는다. 부력으로 띄우는 원리다.

빨간 화살표

빨간화살표들이 마지막으로 가리키는곳에 가면 조사하기 라고 뜬다.

퍼즐맞추기

주위에 있는 퍼즐을 끼워 맞추면 된다.

코로그 나뭇가지

근처에 큰 돌이 있을 것.. 그것을 나뭇가지에 올리면 된다.

목표지점까지 가기

나무토막에 올라가면 목표지점이 표시가되는데, 시간내로 도착하면 된다.

비어있는 돌 채우기

돌이 비어있는곳에 돌을 내려놓으면 된다. 돌은 걸어갈수있는 거리 어딘가에 항상 있다..

움직이는 코로그 빛

빛나는게 움직인다면 코로그. 근처에가면 조사하기 뜬다.

코로그 연못

높은곳에서 R버튼으로 다이빙 하면 된다.

코로그 도토리

도토리 처럼 생긴것은 화살로 쏴서 깨자.

천장에 붙은 코로그

트레루프를 한다. 정확히 관통하고 밖으로 나와야한다.

코로그 꽃

꽃 근처로 가면 핑! 하고 사라졌다가 다른곳에 나타난다. 5번정도 찾으면 된다.

코로그 민들레씨앗

가까이서 칼질하면 씨앗이 날리는데, 땅에 떨어져서 사라지기전에 잡으면 된다.

지금까지 찾은것은 이정도다.
혹시 더있나?

[젤다의 전설] 티어스 오브더 킹덤 - 젤다 황금마 위치 / 젤다가 사랑한 황금마

스페이스RUMI — Wed, 28 Jun 2023 12:22:48 +0900

젤다 황금마

* 퀘스트 안받고 그냥 찾으러 가서 말 데리고 마구간에 와도 된다. 위치는 아래에 지도 있음.

다글리설원쪽 마구간에 황금마 퀘스트를 주는 녀석이 있다.
봅새랑 할로가 대화하고있는데...

원래 황금마를 이 마구간에서 관리하고있었는데, 젤다보고 도망갔다고 한다.

황금마는 젤다를 보고 도망갔다고 한다.

생김새는 황금색 + 땋은 갈기
그냥 딱보면 황금마인걸 알수있다.

황금마 위치

빨간 핀 찍어놓은곳에 있다.

땋은 갈기 ㅋㅋㅋ...너무 내취향 아닌데?
암튼 이 근처에 얼음 그리오크도 있으니 잡을거 아니라면 빤스런 하자.

다시 마구간으로 데리고가면 왕가의 고삐랑 왕가의 안장을 준다

개구리의 토시도 준다
오.....

젤다가 사랑한 황금마 컴플릿!

왕가템 착샷

하이랄 문양 예쁘다

땋은 갈기는 내취향이 아니지만..
암튼 고오급 스럽게 생겼다.

나중에 갈기도 바꿀수있겠지?

[젤다의 전설] 티오스 오브더 킹덤 - 피리부는 소년이 찾는 것 / 고원의 마구간

스페이스RUMI — Tue, 27 Jun 2023 23:48:59 +0900

고원의 마구간에 가면 헤이트가 피리스 얘기를 하고

악단에 들어갈 친구인가보다.

옆에있는 할아버지도 피리소리에 대한 얘기를 한다.

이상한 생물은 동고 얘긴가보네

암튼 마구간에서 북쪽을 향하는 근처에 숲에 보면 큰 나무가 있다.
그쪽으로 가면 피리소리가 들리는데, 큰나무 위로 올라가자.

말을 걸면, 피리스가 내려와서 빛나는 나무에 대해 이야기해준다.

빛나는 나무를 보여주고싶어서 나무를 태우려고 했는데, 실수로 꽃밭을 태웠다?
이런 로맨틱한녀석..

반딧불이 10개를 구해달라고 한다.

마구간 옆에 태리한테 사자. 3개밖에 못사네..

모자라면 고요 반딧불이가 있다는 북쪽의 수해로 가보자.

가는길에 짐수레 상인 만나면 반딧불이를 사자.

5개 살수있다.
그래도 모자르면 수해 가서 밤에 잡도록 하자..

10개를 갖다주면 밤에 헤이트를 데리고 와달라고 한다.

헤이트는 마구간 안에서 쉬고있다.

아까 그 나무앞까지 데려가주면...!

피리스가 연주를 해준다.

10마리가 아니라 100마리는 필요했겠는데..?
영상미가 좋았던 빛나는 나무

로맨틱한 녀석

피리 부는 소년이 찾는 것 컴플릿

[젤다의 전설] 티어스 오브더 킹덤 - 떠내려간 장사 도구 / 하테노코섬 위치

스페이스RUMI — Tue, 27 Jun 2023 20:02:21 +0900

떠내려간 장사 도구

배가 없어져서 장사를 못하는 리가니. 동쪽에 있는 하테노코섬에 있을지도 모른다고 한다.

우리 가게에서만 살수있는 상품? 그게 뭘까..
배를 구해줘 보자.

하테노코섬 위치

나는 배타고 가기 싫어서 라베라 습지대 조망대에서 날아서 갔지만..
날아서 갈거라면 갈때 조나우기어 선풍기, 조종간 반드시 챙기자. 하테노코섬에 배랑 로켓, 배터리밖에 없다.

다시 돌아가자

섬에서 배에 선풍기 달아서 다시 퀘스트 위치로 이동하면 된다.
섬 떠나기 전에 근처에 작은섬에 코로그 있으니 줍줍하고 가자.

부력으로 깨면된다

코로그 기믹은 이 글을 참고

[젤다의 전설] 티어스 오브더킹덤 - 코로그 모든 종류 / 친구한테 가고싶어 / 코로그 도토리 / 코

space-rumi.tistory.com

배타고 나크시마을 선착장쪽으로 들어가다보면 화면전환 되면서 배를 수리한다.

아니 저 배가 어떻게 이 배가 되지?

무베호가 무슨뜻이지

고맙다면서 별의조각도 준다.
별의조각을 파는건 아니라고한다.

떠내려간 장사 도구 컴플릿!

퀘를 깨주면 우측에 상점에서 원하는걸 무료로 가져갈수있다.
옥타풍선, 옥타눈알, 갑옷게, 칼날도미...

다음에 뭐파는지 또 와봐야겠다.

[젤다의 전설] 티어스 오브더 킹덤 - 고민하는 로렐

스페이스RUMI — Tue, 27 Jun 2023 19:20:21 +0900

미니챌린지 고민하는 로렐

나크시마을의 미니챌린지 퀘스트. 로렐한테 말걸면 퀘를 준다.

하이랄 쌀 + 고론의 향신료 + 칼날도미 || 갑옷도미

하이랄 쌀 : 상점에서 구매하거나, 풀 베면 나온다
고론의 향신료 : 고론시티 상점에서 구매
칼날도미, 갑옷도미 : 나크시마을 바다에서 파밍 하거나, 조라마을 상점에서 구매

고론상점 바로앞에 냄비 있으니 만들어보자

튼튼 해산물 카레!

??? 음식 먹여놨더니 열이올라서 집중이 안돼 시전

코로그 잎새로 맞아볼래...?

코로그 잎새를 무기에 스크래빌드 한다.
없으면 조나우기어 선풍기 키자.

저 그림은 배 겠지..? 아니 물고기인가?

퀘를 깨면 나크시 마을의 원단을 준다.

고민하는 로렐 컴플릿!

남편 로단테도 기뻐한다.

바로 하테노마을에서 원단을 바꿔본다.

흠...코로그 원단이 더 예쁜거같다.

[젤다의전설] 티어스오브더 킹덤 - 사이하테노섬의 동굴 위치 / 사이하테노섬 마요이 / 마야리이나의 사당

스페이스RUMI — Sat, 24 Jun 2023 00:49:18 +0900

사이하테노섬은 맵 맨 우측 하단 섬, 나크시마을 우측에 있다.
열심히 날고 배타고 사이하테노섬 으로 가자

가면 텐트앞에 고마나가 아지트 3군데 퇴치해달라고 하는데

가장 높은 전망대처럼 생긴 아지트 꼭대기에 실버보코블린이 얼음무기 들고있으니 조심...
얼고 바로 맞아서 추락사하기 딱좋음.

보여준 3군데 스팟에 가서 다 처리해준다. 그리고 다시가면 절벽뒤에서 해적선 봤다고 한다.
절벽 뒤로 가자.

절벽 뒤쪽으로 내려가다보면 동굴이 보인다.

해적선에 몹 다 잡아주고 위쪽으로 올라가면,

근처에 널빤지 많고 사당 오로라가 아주 쬐끔 보이는 곳이 있는데,
널빤지 이어서 가면 된다. 날아서 가면 저 옆에 가시맞고 추락하기 딱좋으니까 스크래빌드해서 다리 만들어서 가자..

마요이는 사당있는쪽에서 나와서 우측 개구멍에 들어가면 있다. 미니지도 참고

몹을 다 잡고 돌아가면 보상을준다.

라이넬 칼날뿔? 오....

끝!

마요이녀석.. 엄청 꽁꽁숨어있네

[젤다의전설] 티어스 오브 더 킹덤 - 더스키산의 동굴 마요이 / 바미토카의 사당

스페이스RUMI — Sat, 24 Jun 2023 00:30:41 +0900

더스키산의 동굴 마요이

위치는 더스키산 아래쪽에 물웅덩이 있는 곳에 동굴 입구가 있다.

개구멍으로 들어가면 더스키산의 동굴이 나온다.

줄기 부수고 들어가면 우측에 보물상자 먹을수있다.

쭉쭉 직진해서 들어가다보면 물웅덩이 하나 나오는데, 그 앞에 전기 날리는몹이 두마리가 있다.
잡아주자.

잡고나서 왼쪽방향 보면 줄기가 보인다.
깨고 개구멍으로 들어가면 마요이가 있다.

ㅎㅇ

마요이 냠냠해주고 나와서 직진한다.

그러면 이렇게 위로 올라가야하는 부분이 있다.
동굴 내부에서는 물 떨어지고 있어서 나는 기어올라갈 수 없기때문에..

우측에보면 해골 잡아주고

판자를 올라갈수있는곳 찾아서 강가에 내려놓는다.

올라가면 널빤지 두개가 보인다

저 멀리 조아몹이 보이는데

돌속성이라 윤돌이나 폭탄꽃 날리자
폭탄꽃은 한번쏘면 돌 깨지고, 두번쏘면 핵이 나온다. 그때 핵을 쏴주면 바로 잡을수있다.

앞에 한마리 더있다

직진하면 바미토카의 사당이 보인다.
위치는 우측하단 지도 참고

마요이 찾는게 힘들어서 사당먼저 찾고 다시 들어왔다..

[젤다의전설] 티어스 오브 킹덤 - 러브폰드 위치

스페이스RUMI — Fri, 23 Jun 2023 22:01:33 +0900

러브폰드 위치

러브폰드는 나크시마을 왼쪽에 산에 있다.

위에있는 조망대에서 날아가는게 편하다.

날아가보자구..!!

조망대 탈때마다 스릴넘친다

저기 예쁜 하트모양의 러브폰드가 보인다.

바로 앞 언덕에는 코로그가 있다.

과녁을 맞춰주자.
너무 쉽다~

야하하..!!!

멋있는 풍경과 러브폰드

예쁜 러브폰드.
공식명칭은 Heart Pool 이던데.

밤에 오면 요정이 나타난다.

소셜로그인 로고 svg 파일 / naver svg 파일 다운로드 / 네이버 로고 다운로드

스페이스RUMI — Fri, 23 Jun 2023 02:08:52 +0900

로그인 페이지를 만들어야할 일이 있어서 아이콘을 찾아다녔는데

왜인지 네이버 아이콘 파일만 없더라.
공식 naver dev 홈에서도 svg 파일이 아니라 png랑 ai 파일을 다운받을수 있었다.
파일 다운받아보니까 2021년 자료던데..

암튼 피그마 커뮤니티에서도 한참을 서칭하다가 네이버는 블로그 아이콘밖에 없어서 결국 ai파일로 svg 떠서 만들었다.

나같이 네이버 로고 찾아 삼만리 하는 분들을 위해 파일을 첨부한다.
아래 logoSVG 집파일에 구글, 네이버, 카카오, 애플 아이콘 20x20 사이즈 svg파일이 들어있다.

+ 없는 이유가.. 재배포 금지라던지? 그런 항목이 있는지 모르겠다. (찾아보니 그런건 아닌거같은데)
있으면 누군가 댓글로 알려줬으면 좋겠다.

logoSVG.zip

0.00MB

피그마 커뮤니티 위치

스페이스RUMI — Fri, 23 Jun 2023 01:50:48 +0900

피그마 업데이트 하고나서 커뮤니티 버튼 위치를 옮겼다.

좌측 맨 아래에 있다.

이번 업데이트로 인해 피그마 dev mode라는것이 새로 생겼는데,
실제로 vscode에서 익스텐션 설치해서 사용해보니 꽤 쓸만한 것 같다.

피그마 데브모드 한 일주일간 사용해보고 후기를 적어야겠다.

생각보다 단점이 눈에 보이긴 한데(내가 방법을 못찾은걸지도?)..
장점도 크다.

아무튼 피그마팀 열심히 일해줘서 너무 감사할 따름이다.

우편물 도착안내서와 우체국 교부번호

스페이스RUMI — Fri, 23 Jun 2023 00:25:55 +0900

우체국 등기나 도착안내서에 보면 교부번호라고 써져있다.

우체국 교부번호는 우체국 내에서 사용하는 번호라고 생각하면 된다. (우편물 쉽게 찾으러고 쓰는것)
우체국에 전화해서 교부번호를 말해주면, 등기번호를 알려준다.

본인이 직접 수령가능한 우편물은 법원이나 검찰에서 특별송달한 것이거나, 내용증명, 카드같은 계약등기 종류다.

등기번호가 안써있을때는 우체국에 전화해서 물어보자.

최근 카드하나 발급했는데 요새는 부재중이면 그냥 우편물에 넣어두고 가네..
전화로 주소나 생년월일로 본인인증만 하면 바로 쓸수도있고 세상참 편해졌다.

+++ 참고로 등기로 보이스피싱하는 사례가 늘고있으니 한번 더 확인하자..
++ 우체국 사이트에서 입력으로 조회하는건 교부번호가 아니라 등기번호다..

우체국 교부번호 / 신종 보이스피싱

특이점이 와버린 보이스피싱 부재중일때 내용증명 등기딱지가 문앞에 붙어있길래 뭐지? 했다. 올게 없거든. 교부번호 써있길래 우체국사이트 들어가서 입력해보려니까 안된다. 자세히 보니 입

space-rumi.tistory.com

TypeScript utility type / 타입스크립트 유틸리티 타입

스페이스RUMI — Fri, 23 Jun 2023 00:05:23 +0900

Partial<T>

T의 모든 프로퍼티를 옵셔널로 만드는 타입.

interface Product{
    id: number;
    name: string;
}

const updateProduct(product:Product, updateProduct:Partial<Product>){
	return {...product, ...updateProduct};
}

const product1 = {
    id:1;
    name:'new desk';
}

const product2 = updateProduct(product1, {name:'old desk'});

updateProduct 함수는, 첫번째 매개변수를 두번째 매개변수로 덮어씌우는 함수다.
product2는 product1에 name을 'old desk' 로 변경했다. <T> 는<{name:string}> 인 셈이다.

Readonly<T>

T의 모든 프로퍼티를 readonly로 구성한 타입.

interface Product{
    id: number;
}


const product: Readonly<Product> = {
	id: 99
}

product.id = 98 // Cannot assign to 'id' because it is a read-only property.

id는 read-only property이기때문에 재할당되지 않는다.

Record<T, K>

타입 T의 프로퍼티들 집합 K로 타입을 구성한다.

interface Product{
  name: string;
}

type ProductName = 'cup' | 'monitor' | 'keyboard'

const productList: Record<ProductName, Product> = {
  cup:{name:'nice cup'},
  monitor:{name:'big monitor'},
  keyboard:{name:'blue keyboard'}
}

productList 는, ProductName인 cup, monitor, keyboard 라는 이름으로 프로퍼티를 만들고,
그 값은 맨 윗줄에 선언한 Product 타입을 가진다.

Pick<T, K>

타입 T에서 프로퍼티 K들을 골라 새로운 타입을 구성한다.

interface Product{
  id:number;
  name: string;
  description:string;
}

type LightProduct= Pick<Product, 'id'>;

const firstProduct: LightProduct = {
  id:99
}

LightProduct는 id 프로퍼티만을 가진 타입이다.
K는 T의 프로퍼티 갯수보다 항상 작거나 같다.

Omit<T,K>

타입 T에서 모든 프로퍼티를 선택한 다음, K를 제거해 타입을 구성한다.

interface Product{
  id:number;
  name: string;
  description:string;
}

type LightProduct= Omit<Product, 'description'>;

const todo: LightProduct = {
  id:99,
  name:'removed description'
}

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>{}

type ExcludedProps =  'isOpen'  | 'onClick'  | 'color';

type Props = Omit<ButtonProps, ExcludedProps>

ButtonProps는 버튼의 HTML 어트리뷰트를 모두 포함하고있고, Omit을 통해 ExcludedProps로 선언된 3개의 prop을 제거하고있다.

Exclude<T, U>

타입 T에서 U를 제거한 타입을 구성

type A = Exclude<"a" | "b" | "c", "c">;

const alphabet1: A = 'a';
const alphabet2: A = 'b';
const alphabet3: A = 'c'; // Type '"c"' is not assignable to type 'A'.

A는 'a', 'b', 'c' 에서 'c'를 제거한 타입이다. 'a' 또는 'b'가 될수있다.

Extract<T, U>

타입 T에서 U를 찾아 타입을 구성한다. 쉽게말해 T와 U의 교집합으로 구성된다.

type A = Extract<"a" | "b" , "b" | "d">;

const alphabet1: A = 'a'; // Type '"a"' is not assignable to type '"b"'.
const alphabet2: A = 'b';
const alphabet3: A = 'c'; // Type '"c"' is not assignable to type '"b"'.

NonNullable<T>

타입 T에서 null과 undefiend 이 아닌 타입으로 구성.

type A = NonNullable<string|number|undefined>;

const alphabet1: A = null; //Type 'null' is not assignable to type 'A'.
const alphabet2: A = 'a';
const alphabet3: A = '1';

Parameters<T>

함수타입 T의 매개변수 타입들의 튜플로 타입을 구성.

declare function test(obj: { a: number, b: string }): void;
type A = Parameters<() => string>;  // 매개변수 없음 []
type B = Parameters<(a: string) => void>;  // 매개변수 a는 [string]
type C = Parameters<(<T>(obj: T) => T)>;  // 매개변수 T는 [unknown]
type D = Parameters<typeof test>;  // obj는 [{ a: number, b: string }]
type E = Parameters<any>;  // any는 unknown[]
type F = Parameters<never>;  // never
type G = Parameters<string>;  // Type 'string' does not satisfy the constraint '(...args: any) => any'.
type H = Parameters<Function>;  // Type 'Function' does not satisfy the constraint '(...args: any) => any'.

ConstructorParameters<T>

생성자 함수타입의 매개변수 타입을 추출할수 있게 해준다. 모든 매개변수 타입을 가진 튜플로 타입을 구성.

type A = ConstructorParameters<ErrorConstructor>;  // [(string | undefined)?]
type B = ConstructorParameters<FunctionConstructor>;  // string[]
type C = ConstructorParameters<RegExpConstructor>;  // [string, (string | undefined)?]

const testA:A = [undefined]
const testAA:A = []

const testB:B = ['test', 'testB']
const testC:C = ['test', undefined];

ReturnType<T>

함수의 리턴타입으로 타입을 구성.

declare function testA(): {a:string, b:number};

type A = ReturnType<() => string>;  // string;
type B = ReturnType<(a: string) => void>;  // void
type C = ReturnType<(<T>() => T)>;  // {}
type D = ReturnType<typeof testA>;  // { a: number, b: string }
type E = ReturnType<any>;  // any
type F = ReturnType<never>;  // any
type G = Parameters<string>;  // 에러
type H = Parameters<Function>;  // 에러

Required<T>

T의 모든 프로퍼티가 필수인 타입을 구성

const product:Required<Product> = {
  id:3,
}
// Property 'name' is missing in type '{ id: number; }' but required in type 'Required<Product>'.

깨알상식)
T는 Type, K는 Key, U는 Union 의 약자다. (이 자리에는 아무값이나 써도 된다.)
관습적으로 I는 Input의 의미로 O는 output의 의미로 사용한다.

챗 gpt로 글쓰기 / chat gpt로 블로그 글 쓰는 방법

스페이스RUMI — Mon, 19 Jun 2023 23:17:43 +0900

다들 정보성 글을 쉽고 빠르게 쓰는 방법을 궁금해할것이다.

나도 그랬다. open ai가 챗 gpt를 공개했을 때 몇번 사용해보고 가장 먼저 든 생각이,

세상 모든 정보를 ai를 시켜 가공해 올리면 얼마나 편할까?
또 이걸 자동화 시키면 얼마나 편할까?

나는 키워드 검수만 하고~ ai가 글써주고 버튼만 딱 누르면 고품질 글이 뚝딱 써주는것을 상상했었다.

생각해보면 이게 불가능한것은 아니다. 다만, AI에만 맡길수 없고 인간지능이 반드시 필요하다는 점인데...
AI는 정보가 틀린정보인지 옳은 정보인지 스스로 판단할수 없다.

"야 너 틀렸어"

라고 말하면 바로 "죄송합니다"라고 도게자를박는다.

틀린점 없다

정보의 옳고 그름은 인간이 반드시 검수를 해야 한다는 점.(아직까지는 그렇다)

결론적으로 말하자면 완벽한 자동화는 어렵다. 하지만 꽤 쓸만한 글을 받을수는 있다.
정보를 가지고 블로그 글을 쓰려면 내가 던진 키워드, 정보, 질문이 굉장히 중요하다.

양질의 글을 쓰려면 프롬프트를 어떻게 작성하느냐 에 따라 결과물이 상당히 다르다.
내가작성한 샘플 프롬프트는 이렇다.

1. First, give the post a title. Put **** at the beginning of the title. This is the markdown syntax for displaying headers. Here's an example, **** this is title.

2. Next, give each section of post a subheading. Like title, subheading is prefixed with *** .

3. Shouldn't be anything missing from the original text, but if you think it's unnecessary, feel free to omit it, but I'd like to see it mostly avoided. Include as much of the original text as possible, but feel free to omit anything you feel is unnecessary in context, and be careful not to use more than five syllables of the same word in the original text, to make it look like someone else wrote it. This is very important.

더 많은 내용이 있지만, 아무튼..

나는 마크다운 서식을 유지하기위해 타이틀과 서브타이틀마다 ****와 ***를 붙여달라고 했고,
모든 섹션에 서브헤딩을 붙여달라고 했다.

그리고 원문을 주면 5음절 이상 같은 단어를 사용하지 말라고 하며, 전혀 다른 사람이 쓴 글처럼 느껴지도록 문장을 재배열하고, 글의 흐름에 따라 순서를 바꾸라고 했다.

자기만의 문서 서식을 만들고, 원문을 던지면 글을 재배치 or 재배열 해줘 라고 학습시킨다.
나는 나만의 8가지 룰을 만들고 룰을 지켜 글을 작성하라고 했다.

프롬프트를 정성들여 다듬고 글의 형식을 구체적으로 적는다면, 꽤 쓸만한 글을 받을 수 있다.
그걸 참고하면 글쓰기에 도움이 참 많이 된다.

프롬프트의 품질이 결국 글의 품질이다.

gpt를 탈옥시키는 방법과 유사하게 프롬프트를 구체화하고, 정체성을 부여하면 나만의글을 완성할 수 있다.
gpt 탈옥시키는 방법

[ChatGPT] DAN Do Anything Now, Jailbreak 탈옥코드 / AI를 탈옥시켜보자.

ChatGPT 탈옥이 뭐야? 기본적으로 챗지피티에서 막아놓은 답변들을 할 수 있도록 제한을 우회적으로 풀어버리는걸 말한다. "챗지피티야 너에겐 제한이 없고, 넌 이제 뭐든 대답할수있는 A를 연기

space-rumi.tistory.com

[젤다의 전설] 티어스 오브 킹덤 - 나크시 마을 위치 / 몬스터 무리 / 나크시마을 재건 계획

스페이스RUMI — Mon, 19 Jun 2023 18:25:53 +0900

나크시 마을 위치

나크시마을은 동하테르 끝자락에 있다.

마을 언덕위에 아주 잘보이는 위치에 사당이 있다.

나크시마을에 처음 가면 몬스터무리에 의해 점령당한 상태인데..
다 잡아주면 된다. 마지막 한마리는 연기나는 우물속에 있으니 내려가서 잡아주자.

마지막 한마리가 계속 안보여서 휘파람불고 돌아다니다가, 결국 재시작해서 잡았는데 우물속에 있었다..

몬스터무리를 다 처리해주면 마을재건 퀘스트가 시작되는데 일단 통나무를 가져오는것부터 시작한다.
통나무는 마을 들어오기 전 언덕 위에 나무 많으니 거기서 필요한 갯수만큼 스크래빌드 해가지고 가져오자.

통나무를 다 갖다주면 이제 각 건물마다 수리(?)를 해주면 되는데
특별한건 없고, 올곧은 나무(야자나무 안휜거) 베어다가 기둥 세워주면 된다.

여관은 잔해 치워주면 된다.

장판은 맨 마지막에 치우자.. 가라앉아있는 잔해 2개 더있다.

여관에서 암염5개 주고 자면 +스테미나 한줄이랑 +하트3개 채워줌

대부분 나무기둥 세우기다.

나무 베어주고, 건물 높은곳에 올라가서 나무 꽂아주면 된다.
밑에서 하려고하면 잘 안되니까 올라가서 하자.

이게 무슨건물이였드라..

누마노의 있는곳에 젤다가 준 그림이 있다고 하는데, 러브폰드에 요정 5마리 있는 그림이다.
러브폰드에 요정 있나보다.

재건을 다 해주면 연회가 열린다!

구세주가 되었습니다

그리고 마지막에 볼슨이 춤춰준다.ㅋㅋ

나크시마을 부활의 춤!

뭔가 아늑한 느낌이 드는 나크시 마을이였다.

[디자이너 & 퍼블리셔를 위한 가이드 #2] 프레임워크나 라이브러리리를 사용할 것인지 확인하자.

스페이스RUMI — Fri, 16 Jun 2023 17:30:23 +0900

프레임워크와 라이브러리 확인하기

사실 디자이너가 프론트 개발 프레임워크와 라이브러리를 반드시 알아야 하는것은 아니다. 하지만 서로 물어보고, 알려주는것이 좋다. React를 사용하고 MUI를 쓸거라면, 디자이너는 UI 라이브러리 홈페이지에 들어가서 어떠한 컴포넌트가 존재하는지, 기본적으로 어떤 형태를 띄고 어떤 속성들을 가지고 있는지를 파악할 수 있다.

프레임워크란?

웹 프론트 개발을 위한 환경 정도라고 생각하면 된다.
최근 자주 사용되는 웹 프론트 프레임워크로는 React, Vue, Svelt 등이 있다.

어떤 프레임워크를 사용하는지를 알아보고, 각 프레임워크에서 주로 사용하는 UI 라이브러리를 쓸건지, 아니면 직접구현 할건지를 사전에 미리 알아두는것만으로도 서로에게 도움이 된다.

아래는 예시다.

ex : 프레임워크는 Vue를 사용하고 UI라이브러리는 Vuetify(뷰티파이)를 사용할 예정입니다.
ex : 프레임워크 사용 안하고, HTML + CSS + JS로 진행하며, UI는 부트스트랩을 사용할 예정입니다.
ex : 프론트개발은 React로 진행하며 Ant Design을 사용할 예정입니다.
ex : UI 라이브러리 사용 없이, 직접구현 할거에요.

프레임워크나 라이브러리를 미리 알아두면 좋은 점

예를들면, 앱디자인 시 RN개발환경(React-Native)에서는 그림자에 컬러처리가 불가능 하다는 점(예전엔 불가했고, 지금은 고버전에서는 지원하는 속성),

에디터가 필요한데, 어떤라이브러리를 사용할건지 미리 안다면 디자인을 따로 할 필요가 없다.

특정 캘린더 라이브러리를 사용할건데 어디까지 커스텀이 가능하고, 기본적으로 어떤 기능들을 지원한다든지를 알수있어 디자인하는데 참고가 된다.

디자인 다 해놨고 컨펌도 받았는데,

“아 이건 지원하는 api가 없어서 직접구현해야되는데 시간이 부족합니다"
“아 이건 네이티브 기능이라 어려워요. 시간이 정말 많이 걸립니다"
"시간을 투자한다고 해서 네이티브와 같은 퀄리티를 낼 수 있을지도 장담할 수 없어요"

라는 말을 듣는 일을 사전에 방지할 수 있다. 애초에 뭔가를 만들때 애매한 부분이 있으면 개발자와 소통하면서 작업하는것이 베스트다.

프로젝트 초반에는 라이브러리를 사용하지 않고 전부 개발하다가, 중간에 필요에 의해 도입하게 되는 케이스도 있다. 에디터 같은 경우라든지.. 만들기에는 공수가 너무 많이 드는 것들은 보통 라이브러리를 사용한다.

디자인이 완성되면, 라이브러리의 도움을 받아 쉽게 개발이 가능한지 개발자가 스스로 체크 한 후 디자이너에게 얘기를 해주는 편인데, 미리 참고할 수 있도록 사용하는 라이브러리의 가이드 링크를 달라고 한 디자이너도 있었다.

구글과 브레이브 보다 멋진 신생 브라우저, 아크 브라우저 / arc 브라우저 / UX UI에 진심인 아크

스페이스RUMI — Fri, 16 Jun 2023 13:38:02 +0900

인터넷 시장의 약 70%를 차지하고있는 크롬 브라우저.

여전히 구글 크롬이 인터넷 시장을 장악하고있지만, 옛날에는 아니였다.
구글은 절대 안 무너질것 같지만 인터넷시장은 언제 어떻게 바뀔지 모른다.

새로운 신생 브라우저들은 끊임없이 나오고 있고, 경쟁력있게 발전하고 있기 때문이다.나는 크롬과 브레이브 브라우저를 같이 사용하고 있지만, 이번에 핫한 브라우저가 있다그래서 사용해보려고 한다.

UXUI에 진심인 아크

처음 다운로드 받으면 켜지는 윈도우창부터가... '와 예쁘다' 라는 생각이 들게 한다. 회원가입을 진행하고 기능을 살펴보자.

회원가입을 진행해보자.

정보를 다입력하고 Create an account 버튼을 누르면, 튜토리얼 및 설정이 진행된다.

크롬 북마크 가져오기

나는 크롬 브라우저 즐겨찾기 목록을 가져올거기 때문에, 우측에서 크롬을 선택하고 자주 쓰는 계정을 체크해줬다.

아래 이미지를 보면 가져올 북마크를 선택할수있게되는데, 북마크명 지정안하고 아이콘으로만 등록해뒀다면 저렇게 이름이 없이 나온다 ㅋㅋㅋ...
뭐가뭔지 알수없어서 일단 Select All로 모두 가져왔다.

트렌디한 UI

아크 윈도우창을 예쁘게 커스텀 할수있다. + 버튼을 누르고 색상을 추가하여 그라데이션 매쉬까지 지원한다.
와우..예쁘다. 이것말고도 와 UI 진짜 신경 많이 썼다 싶은 기능들이 정말 많다.

자주사용하는 블록아이콘

특히 Select some favorites로 자주 사용하는 앱들을 항상 블록으로 띄워 사용하는 기능이 매우 좋았는데,
이 기능은 브레이브 브라우저 메인 기능과 매우 유사했다.

크롬은 apps 기능을 지원하지만, 구글앱만 가능했기때문에 모든걸 북마크에 등록해놓고 사용했었다.
이 기능 정말 편하다.

애드블록 지원

애드블록도 지원한다. 애드블록이 유튜브 광고까지 차단해주진 못하지만, 그건 ublock origin 크롬 익스텐션을 사용하면 해결이 된다. 브레이브는 기본적으로 유튜브 광고를 차단해주기때문에 참 편했는데 이부분은 아쉽긴 하다.

유튜버들도 시간내서 컨텐츠 제공하는건데.. 당연히 이해해야지.

기본 브라우저 선택

나는 당분간 아크를 사용해볼 예정이지만, 기본 브라우저는 크롬으로 유지하고싶어서 No를 선택해줬다.

설정이 끝나면 귀여운 네임카드를 준다.
귀여워..!

네임카드는 밑에 변경버튼 있으니 색과 칭호같은걸 바꿀수있다. 나중에 또 바꿀수있다.

섬세한 튜토리얼

이것저것 만져보기 시작하면, 저렇게 flow선으로 이건 뭐고 이건 뭐에요~ 를 설명해주는데, 이게 굉장히 친절하다. 새로 써보는 기능들에 대한 이해가 부족할때 최초 1번 알려주는데 도움이 많이 된다.

사이드메뉴

아크 좌측 사이드메뉴 닫기 숏컷은 command + s 다. 닫았다 열었다 할 수 있기때문에 이걸로 어느정도 좁아진 화면을 유동적으로 사용할수 있을 것 같다.

화면 분할기능

구글크롬을 사용하면 Spectacle을 이용해서 여러 윈도우를 띄우고 단축키로 화면분할을 사용했었는데, arc는 윈도우 하나 에서 분할을 지원한다. 크롬 단축키가 손에 익어서, 아크에 익숙해지려면 학습 시간이 조금 걸릴 것 같다.

아크 캡쳐 기능과 이젤

이게 정말 미친것같은데.. 저기 아이콘을 클릭하면 캡쳐를 할수있다. 풀페이지 캡쳐도 지원한다.
이거 하려면 익스텐션 깔았어야했는데 진짜 좋은 기능이다.

* 참고) 아래 자물쇠 아이콘에 뻘건 텍스트로 Insecure 표시가 있다면 보안인증서(ssl)가 없는 사이트라는 의미다.
http:// 로 시작하는 도메인이라는 뜻. 보안페이지는 https://로 시작한다.

이게 정말 어메이징한게, 캡쳐기능을 클릭면 그 화면에서 이미지 영역을 알아서 인식해 잡아준다...!!!!

이건 진짜 쩔었다..

당연히 드래그해서 원하는 영역을 잡아 캡쳐도 할 수 있다.

캡쳐 영역을 선택하고 맨 밑에 + New Easel을 클릭하면 내가 캡쳐한 항목들이 이젤로 자동 저장이 되는데, 이젤은 한마디로 도화지같은 보드다.

내가 원하는 텍스트를 입력할수도있고, 펜으로 그릴수도있고, 도형을 넣을수도 있다.
텍스트를 입력할때, 피그마 한글짤림 문제와 동일한 현상이 있는데, 뭐 .. 차차 고쳐주겠지?

이것저것 사용해봤는데, 정말 편했다. 좌측 사이드바가 컨텐츠 영역을 갉아먹긴 하지만 숏컷 command + s를 습관화 하면 될것같다.

아크 브라우저 자주 사용하는 단축키

사이드바 접기 : command + s
캡쳐 : shift + command + 2
새탭 열기(검색): command + t
열려있는 탭 전환 : ctrl + tab

잘 쓰고 있고 앞으로도 잘 쓸것같다. 일단 예쁘고 인터랙션, ux가 좋아서 사용하는 맛이 있는것 같다.

[Typescript] 타입스크립트 리터럴 / typescript literal types / 문자열 리터럴, 숫자형 리터럴 타입

스페이스RUMI — Fri, 16 Jun 2023 12:41:00 +0900

리터럴 타입 좁히기

const sayGoodBye = "Goodbye World!" // "Goodbye World!"로 타입을 지정
let sayBye = "Bye World!" // 문자열로 타입을 지정

const 로 선언한 객체는 변하지 않기 때문에 타입스크립트는 이 문자열 타입을 "Goodbye World!"라는 단 하나의 타입으로 지정한다. 이것을 문자열 타입 좁히기라고 한다.

문자열 리터럴 타입

문자열 리터럴타입은 유니언타입, 타입 가드, 타입별칭과 잘 결합된다.

type Size = "small" | "large" | "xlarge";

const thisSize = (size:Size) => {
	console.log(`this phone is too ${size}`);
}

thisSize("large")

thisSize("maximum") // error
// Argument of type '"maximum"' is not assignable to parameter of type 'Size'.

문자열 리터럴 타입은 오버로드처럼 사용될 수 있다. (좋은방법은 아닌듯.)

function category(category: "tech"): void;
function category(category: "media"): void;

function category(category: string):void {
  console.log(`category is ${category}`)
}

category("tech")

category("IT") // error
// No overload matches this call.
// Overload 1 of 2, '(category: "tech"): void', gave the following error.
// Argument of type '"IT"' is not assignable to parameter of type '"tech"'.
// Overload 2 of 2, '(category: "media"): void', gave the following error.
// Argument of type '"IT"' is not assignable to parameter of type '"media"'.

숫자형 리터럴 타입

문자열 리터럴 타입과 같이 숫자형 리터럴 타입도 있다.

type Level = 1 | 2 | 3 | 4 | 5

const yourLevel = (level:Level) => {
	console.log(`your level is ${level}`)
}

yourLevel(3);
yourLevel(99); // error
// Argument of type '99' is not assignable to parameter of type 'Level'.

[젤다의전설] 티어스 오브 킹덤 - 모샤피음의 사당 / 유후윈호의 동굴에 잠든 수정

스페이스RUMI — Wed, 14 Jun 2023 23:40:33 +0900

동굴 들어가서 우측의 돌 깨면 두갈래길이 나오는데, 사당은 오른쪽이고, 왼쪽에는 보물상자랑 마요이 있다.
나는 사당먼저 깰거라 입구에 워프마크 찍어줬는데, 다시오기 싫으면 왼쪽부터 돌면된다.

사당쪽은 용암타고 건너가야해서 다시 돌아오기 귀찮다.

우측돌 깨서 가면 수정이 있고

유후윈호의 동굴에 잠든 수정 사당 챌린지를 준다.

용암 양쪽 끝에 소화전이랑 선풍기 있으니까 소화전으로 돌 만들어서 타고가자.

컴플릿!

사당 챌린지 끝-!

+ 왼쪽에 마요이

보물상자

좋은거좀 주지..

[젤다의전설] 티어스 오브 킹덤 - 모모시카의 사당 / 올딘 협곡 사당 / 데스마운틴 사당 퀘스트

스페이스RUMI — Wed, 14 Jun 2023 22:37:33 +0900

모모시카의 사당

수정바치기

위치는 여기다. 데스마운틴 우측에있다.
빛을 따라가보면 이렇게 동굴쪽에 있다는걸 알수있는데

바로 오른쪽에 동굴이 있다.
푸른 돌 깨고 들어가자. 들어가자마자 호러블린 있으니 잡고, 근처에서 레일카 타고 가면된다.

레일 끝까지 안가고 중간쯤에 마요이도 있으니 잡아주자.

마그록에 붙어있는 수정.
츄츄젤리나 물 속성/냉기속성 활에 달아 쏴주고 잡자.

피슝파슝!

마그록 하트는 덤

사당 챌린지 데스칼데라의 사당과 수정 컴플릿!

이번건 좀 쉬웠다.

사기와 먹튀, 그리고 쉽게 돈벌려는자들이 속고 속이는 세상. feat 강의팔이 사기꾼과 시그니엘 메타

스페이스RUMI — Wed, 14 Jun 2023 19:57:47 +0900

하루인베스트(코인 예치 거래소)가 트위터하나 남겨놓고 잠적했다는 기사를 봤다. 이름하야 k-먹튀.

뭐 파트너사에 의존하는 형태가 문제였다고 하는데.. 다른건 모르겠고 수많은 피해자들을 양산해놓고 문닫아버리면 그만! 이라는 마인드가 만연한 지금 세상이 너무 이상해보인다.

그렇다면 금융당국 대처는...?(뭐 신고를 안해서 할수있는게 없다고 하는데 그런말 하면 안되지.....)

이것뿐만이 아니다. 어떤 사람은 1000만원이 넘는 강의를 팔고있다. 매번 이번이 마지막 강의! 라면서 n회차 판매를 진행 중이다.

아니.. 이게 팔린다고? 이걸 산다고? 사는사람이 있다고!?!?

세상에 돈을 쉽게 버는 방법은 없다..
나조차도 쉽게 돈을 버는 방법이 있다면, 진짜 꿀팁은 절대 안 알려줄거 같은데 그걸 알려준다고?
돈받고 파는거지만 "진짜"는 안알려주겠지

쉽게 돈벌려는 자들이 속고 강의듣고와서 또 다른 사람을 속이는 무한 도돌이표를 돌고 있는것같다.

속지 말자.
누가그랬다. 남을 아프게해서 돈을 벌면 영혼이 병든다고...

세이노의 가르침을 보면 이 사기꾼들의 전형적인 특징이 있다고 한다.
물론 책에 이렇게 적혀있지는 않지만 현 상황으로 쉽게 요약하면 다음과 같다.

1. 흙수저 메타. "흙수저였는데 자수성가 했습니다"
2. 시그니엘 + 외제차 메타. "지금 시그니엘살고 고오급차 몰고 다닙니다"
3. 각종 SNS로 가스라이팅. "돈 못버는것도 정신병. 나만 믿으면 돈벌어요"
4. 강의팔이. "응 내강의 1000만원, 응 내 전자책 90만원"
5. 모임. "이 모임 들어오려면 회원권 10만원이요"

잊지 말자. "진짜"는 자신이 소유한것들을 자랑하지 않는다.

[디자이너 & 퍼블리셔를 위한 가이드 #1] 실제 프로젝트 진행 과정 / 프로젝트는 어떻게 진행될까?

스페이스RUMI — Wed, 14 Jun 2023 17:48:28 +0900

프로젝트는 이렇게 진행된다.

하나의 프로젝트는 일반적으로 이렇게 진행된다.
[ 아이디어 - 기획 - 디자인 - 퍼블리싱 - 개발 - QA - 배포 ]

아이디어를 가지고 브레인스토밍을 한다. 커뮤니케이션을 통해 도출된 계획이 글로적힌 문서로서 작성된다. 기획자는 이것을 토대로 화면을 정의한 기획문서를 제작한다.

실제 기획문서는 이것보다 훨씬 복잡하고 자세한면이 있다.

기획문서를 보고 디자이너는 화면을 그린다. 요즘은 피그마가 대세이기 때문에 (어도비가 피그마를 인수하기도 했고) 피그마로 화면을 그려준다. 기획자와 디자이너가 회의를 거쳐 디자인 컨펌이 최종확정이 되면, 완성된 디자인을 퍼블리셔 에게 전달한다.

퍼블리셔는 HTML+CSS + JS로 디자이너가 그려준 화면을 코드로 똑같이 구현한다. 퍼블리셔는 디자이너가 준 작업물을 ‘코드로 그리는’ 역할을 맡는다.

퍼블리셔와 프론트엔더의 차이점이 뭐냐고 묻는 사람들이 많은데, 퍼블리셔는 HTML + CSS 코드로 디자인과 똑같이 그리고, 약간의 Javascript를 버무려서 동적으로 움직이게 만든다. 이때 실제 데이터가 오가는 기능으로서 동작하는것은 아니다. 애니메이션 효과, 클릭하면 이거 보이게 해주세요, 슬라이드 넘어가게 해주세요. 정도의 Javascript 기술을 요한다. 항간에는 퍼블리셔가 DB도 만지고 SQL도 하고 PHP도 하는분들도 있는데.. 일반적인건 아니다. ~~(어서 탈출해..)~~

프론트엔더는 실제 데이터를 서버와 통신하여 DB에 저장하고 가져오고 유저에게 보여준다. 프론트엔더는 퍼블리싱을 할줄알아야 한다. 실제로 여러 프로젝트에 참여했지만, 스타일 및 마크업 관련(html,css) 담당 한명이 있는게 편하긴 하다. UX UI는 공통적인 부분이 많으니, 한사람이 관리하는게 여러모로 사이드이펙트가 덜 발생하기 때문이다.

백엔드 개발자는 데이터를 핸들링할 api를 만들고 db를 설계한다.
프론트 개발자는 api를 통해 서버에서 데이터를 가져와 기능을 구현한다.
보통은 백엔드가 api를 먼저 구현 해줘야 프론트 개발이 가능하다. (api 스펙을 미리 받을수도있다)

기능구현이 완료되었으면 개발서버에 배포하고 QA(테스트 및 검수)를 진행한다.

QA가 통과되면 버전별로 실제 유저가 접하게되는 프로덕트를 배포한다.

이 사이사이의 과정에서 수많은 회의와 수많은 논쟁과 커뮤니케이션을 거치고, 최종 결정을 통해 하나의 서비스가 만들어진다. 위 단계보다 훨씬 더 많은 절차를 거치는 회사들도 많다 (개발서버, 스테이징서버, 프로덕트서버마다 QA과정을 둔다던지... 기획문서가 상부의 최종컨펌을 받아야 한다든지... 회사마다 다르다)

회사마다, 팀마다, 프로젝트마다 전부 다 환경이 다르기때문에 이게 프로젝트 흐름의 정답이다!! 라고 할수는 없다. 대충 이런 사이클로 진행이 되는구나... 정도로 생각하면 된다. 전문적인 기획팀을 꾸리는 회사도 있고, 엄청난 인원수의 디자인팀을 보유하고있는 회사도 있고, 통으로 외주를 맡기는 회사도 있기 때문이다.

디자이너는 기획자와 퍼블리셔 (혹은 프론트엔더)와 회의할 일이 참 많다. 그래서 항상 커뮤니케이션 이슈가 대두되는데, 커뮤니케이션의 올바른 마음가짐이라든지 다양한 내 생각들을 다음에 다뤄볼까 한다.