UX 공작소

Next.js 14버전에서 모달창 띄우는 초간단 방법

어쩌다보니여기까지~ — Wed, 28 Feb 2024 22:15:53 +0900

Next.js 14 버전에서 모달 창을 쉽게 띄우는 방법을 포스팅하려고 합니다. Next.js는 폴더의 형태와 이름에 따라 경로 구성과 기능이 달라지니, 폴더 구조와 이름을 주의 깊게 설정하는 것이 중요합니다. 아래 글을 참고하여 설정해 보세요.

Next.js 14버전에서 App 라우팅 심화: 폴더 구조와 파일 특징 완벽 가이드

모달 창을 띄우기 위한 기술

Next 14버전에서 모달을 띄우기 위한 핵심기술로 패러랠 라우트와 인터셉트 라우트가 있습니다. 일반적으로 모달을 구현하기 위해 다음과 같은 폴더 구조를 사용합니다.

└── app
    ├── @modal
    │   ├── default.js
    │   ├── (.)flow
    │   │    └── page.js
    │   └── ...
    └── ...

패러랠 라우트

개념

하나의 layout에 여러 개의 화면을 동시에 표시하는 기능입니다. 모달 창 구현에서 컨텐츠 화면 children과 modal 2개의 화면을 동시에 표시하는 데 사용됩니다.

구현 방법

폴더 이름 앞에 @를 붙이면 해당 폴더가 패러랠 라우트가 됩니다.

예시

@modal
└── index.js
  ...

인터셉트 라우트

개념

기본 라우트를 인터셉트 라우트로 설정된 폴더 위치의 라우트로 대체하는 기능입니다. 모달 창 구현에서 여러 화면 중 하나에서 모달 창 열기를 클릭하면 해당 화면에 대해 인터셉트 라우트로 미리 제작된 동일한 화면을 딤드 아래에 깔아서 표시하여 통일성을 유지합니다.

구현 방법

폴더 이름 앞에 (.), (..) 또는 (...)를 붙입니다. 그 뒤에 나오는 파일 경로와 파일명이 동일하면 교체가 이루어집니다.

예시

(.)flow
 └── index.js
  ...

참고 사항:

(.)는 현재 폴더, (..)는 상위 폴더, (...)는 상위 폴더의 상위 폴더를 의미합니다. 인터셉트 라우트는 기본 라우트보다 우선순위가 높습니다. 인터셉트 라우트는 동일한 파일 경로와 파일 이름을 가진 라우트에만 적용됩니다.

폴더의 전체적인 구조

모달 창을 띄우기 위한 예시 폴더명과 파일명에 대하여 설명합니다

1. 패러랠 라우트 적용한 layout.tsx

layout.tsx는 모달창을 띄우기 위한 시작점이라고 보시면 됩니다. 패러랠 라우트는 layout 파일에서 실행됩니다.

코드를 보면, 1번이 기본으로 나오는 컨텐츠 위치이고 2번 {modal}이 병행으로 나올 모달 화면 위치입니다.

패러랠 라우트의 default.tsx

패러랠 라우트를 사용한 곳에는 default.tsx를 만들어놔야 라우트할 때 오류를 없앨 수 있습니다. 내용은 간단합니다.

// @modal/default.tsx --> 참조이미지에서 6번 파일

export default function Default() {
  return null;
}

2. 인터셉트 라우트

인터셉트 라우트를 적용해야 혹시나 화면을 강제로 리프레쉬를 하더라도 현재와 동일한 화면을 보여 줄 수 있습니다.
만약 인터셉트 라우트를 적용 하지 않는다면 해당 화면에서 버튼을 눌러서 모달창을 띄웠을 경우는 정상적으로 나오지만 모달 창이 있는 상태에서 리프레쉬를 할 경우 모달창 화면 아래의 내용이 빈화면으로 보여지게 됩니다.

4번이 기본 폴더와 파일의 구조입니다. 해당 .tsx파일들이 각각 하나의 화면을 담당하게 됩니다. 5번 인터셉트로 사용한 폴더와 파일은 @modal폴더 안에 구성이 되어 있는데요. (.)으로 시작하는 (.)i\flow가 인터셉트 라우트입니다. (.)i\flow 폴더 하위의 login폴더에 page.tsx가 있는데, 기본 폴더와 동일하게 구성되어 있습니다. 주소창에 기본 폴더로 생성된 주소로 접근하게되면 인터셉트 라우트로 설정된 화면이 나오게 되는 식입니다. (인터셉트 화면을 포함해야 모달창 아래에 원래 있어야하는 화면이 깔리게 됩니다.)

결론

이렇게 적용을 하면 패러랠 라우터로 한화면에 2개의 모듈 화면을 띄울수 있고 그중에 모달창으로 띄워진 화면에 인터셉트 라우트를 적용해서 화면을 리프레쉬를 하더라도 동일한 화면을 띄울 수 있게 됩니다.

감사합니다.

Classnames vs. clsx: 당신에게 딱 맞는 CSS 클래스 조합 도구는?

어쩌다보니여기까지~ — Mon, 26 Feb 2024 18:46:18 +0900

React에서 동적으로 클래스 이름을 조작하는 것은 흔히 발생하는 작업입니다. 이 작업을 간편하게 해주는 두 라이브러리가 바로 classnames와 clsx입니다. 이 글에서는 두 라이브러리의 장점과 단점, 특이할 만한 사항 등을 비교 분석하여 개발자들이 각 라이브러리의 특성을 파악하고 적절하게 선택하는 데 도움을 드리고자 합니다. 또한 그 중에서 최근에 더 곽광을 받고 있는 clsx에 대해서 자세히 살펴보겠습니다.

1. Classnames

classnames는 클래스 이름을 조합하고 조건부로 적용하는 데 사용되는 유틸리티 라이브러리입니다. 다음과 같은 특징을 지닙니다.

장점:

직관적인 API: classnames는 객체 형식으로 클래스 이름을 정의하여 간결하고 직관적인 코드를 작성할 수 있도록 합니다.
다양한 사용 방식: classnames는 배열, 문자열, 객체 등 다양한 형태의 클래스 이름을 지원합니다.
널널한 사용: classnames는 널리 사용되고 활발하게 유지되는 라이브러리입니다.

단점:

성능 문제: classnames는 객체를 사용하기 때문에 성능 측면에서 다소 비효율적일 수 있습니다.
문법 오류 감지 어려움: classnames는 문법 오류를 런타임까지 감지하지 못해 디버깅 과정을 어렵게 만들 수 있습니다.

특이사항:

classnames는 falsy 값을 자동으로 제거하여 불필요한 클래스 이름을 포함하지 않도록 합니다.
classNames는 최신 버전에서 dedupe 옵션을 제공하여 중복된 클래스 이름을 제거하는 기능을 추가했습니다.

2. clsx

clsx는 classnames와 유사한 기능을 제공하는 라이브러리이지만, 성능 개선과 문법 오류 감지 기능을 강화하여 다음과 같은 차별성을 지닙니다.

장점:

뛰어난 성능: clsx는 템플릿 리터럴을 사용하여 객체 생성 없이 클래스 이름을 조합하여 성능을 향상시킵니다.
문법 오류 감지: clsx는 TypeScript를 사용하여 문법 오류를 컴파일 타임에 감지할 수 있도록 합니다.
간결한 코드: clsx는 템플릿 리터럴 문법을 사용하여 간결하고 가독성이 높은 코드 작성을 가능하게 합니다.

단점:

덜 직관적인 API: classnames에 비해 템플릿 리터럴 문법에 대한 이해가 필요하여 다소 익숙하지 않을 수 있습니다.
제한적인 기능: clsx는 classnames에 비해 객체 형식의 클래스 이름 정의 기능 등 일부 기능을 지원하지 않습니다.

특이사항:

clsx는 falsy 값을 자동으로 제거하고 중복된 클래스 이름을 처리하는 기능을 기본적으로 제공합니다.
clsx는 다양한 조건부 연산자를 지원하여 다양한 상황에 맞게 클래스 이름을 조건부로 적용할 수 있도록 합니다.

npm 트렌드를 살펴보면 계속 Classnames이 상위권에 속해 있었으나 근래들어 clsx가 역전을 한것을 볼 수 있습니다. 그래서 이 포스팅에서는 clsx에 대해서 좀더 알아보고 실제 예제 코드를 활용하여 사용법을 알아보도록 하겠습니다.

clsx 사용하기

1. 설치

clsx는 NPM 또는 Yarn을 사용하여 쉽게 설치할 수 있습니다. 아래의 설치방법 중 자신에게 맞는 한가지 방법만 사용하시면 됩니다.

npm install clsx --save

yarn add clsx

2. 기본 사용

clsx는 템플릿 리터럴을 사용하여 클래스 이름을 조합하고 조건부로 적용할 수 있습니다.

import clsx from 'clsx'; // or import { clsx } from 'clsx';  // 문자열 (가변) clsx('foo', true && 'bar', 'baz'); //=> 'foo bar baz'  // 객체 clsx({ foo:true, bar:false, baz:isTrue() }); //=> 'foo baz'  // 객체 (가변) clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' }); //=> 'foo --foobar'  // 배열 clsx(['foo', 0, false, 'bar']); //=> 'foo bar'  // 배열 (가변) clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]); //=> 'foo bar baz hello there'  // Kitchen sink (중첩) clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya'); //=> 'foo bar hello world cya'

3. 조건부 연산자 사용

clsx는 다양한 조건부 연산자를 지원하여 다양한 상황에 맞게 클래스 이름을 조건부로 적용할 수 있습니다.

const type = 'primary'; const size = 'large';  const className = clsx('button', { [`button-${type}`]: type, [`button-${size}`]: size, });  <button className={className}>버튼</button>;

위 코드에서 type과 size 변수에 따라 button-primary, button-large, 또는 두 클래스 모두가 버튼에 적용됩니다.

4. 객체 형식 사용

classnames와 유사하게 객체 형식으로 클래스 이름을 정의할 수도 있습니다.

const styles = { button: 'button', active: 'active', disabled: 'disabled', };  const className = clsx(styles.button, { [styles.active]: active, [styles.disabled]: !active, });  <button className={className}>버튼</button>;

위 코드에서 styles 객체에 정의된 클래스 이름을 사용하여 코드를 더욱 명확하게 작성할 수 있습니다.

5. 기타 기능

clsx는 다양한 유용한 기능을 제공합니다.

중복된 클래스 이름 제거: 중복된 클래스 이름은 자동으로 제거되어 코드의 효율성을 높입니다.
문법 오류 감지: TypeScript를 사용하는 경우 문법 오류를 컴파일 타임에 감지할 수 있습니다.

6. 사용 예제

clsx는 다양한 상황에서 활용될 수 있습니다.

버튼 스타일 변경
컴포넌트 상태에 따라 클래스 이름 변경
테마에 따라 클래스 이름 변경
조건부로 여러 클래스 적용

7. 결론

clsx는 React에서 클래스 이름을 조건부로 적용하는 데 매우 유용한 라이브러리입니다. 간결하고 효율적인 코드를 작성할 수 있도록 다양한 기능을 제공하며, TypeScript와 함께 사용하여 문법 오류를 감지할 수 있습니다.

Day.js vs Moment.js: 날짜 처리 라이브러리 비교 분석 (초보자를 위한 가이드)

어쩌다보니여기까지~ — Thu, 22 Feb 2024 18:59:52 +0900

JavaScript에서 날짜 처리를 위한 라이브러리는 필수적인 요소입니다. 다양한 날짜 형식을 다루고, 계산하고, 포맷팅하는 작업을 쉽게 해주죠. 그 중 가장 인기 있는 라이브러리로는 Moment.js와 day.js가 있습니다. 과연 어떤 라이브러리가 더 나은 선택일까요?

1. 비교 분석

기준	day.js	Moment.js
크기 (gzip)	2.1KB	22.9KB
성능	약 1.4배 빠름	-
API	Moment.js와 유사, 변경 불가능 객체 사용	다양한 함수 제공, 객체 직접 수정 가능
기능	핵심 기능 집중, 플러그인을 통한 확장 가능	다양한 기능 제공
지원	활발하게 개발 중, 커뮤니티 성장 중	탄탄한 지원 체계, 활발한 커뮤니티
브라우저 지원	IE 11 지원하지 않음	IE 11까지 지원
장점	가볍고 빠름, 사용 편의성, 새로운 기술 적용	다양한 기능, 탄탄한 지원 체계, 풍부한 샘플 코드 및 플러그인
단점	기능 부족, 커뮤니티 규모	크기가 크고 느림, 새로운 기술 적용 부족
적합한 프로젝트	페이지 로딩 속도 중요, 최소한 기능 필요, 새로운 라이브러리 적용	다양한 기능 필요, 탄탄한 지원 체계 필요, 기존 Moment.js 코드 유지

npm trends 분석

npm trends에서 All time으로 비교를 해보면 현재 추세를 알 수 있는데, 기존에는 Moment.js가 압승이였다면 최근에는 day.js가 무섭게 치고 올라오는 것을 볼 수 있습니다.
아마도 곧 day.js가 날짜를 다루는 대세 모듈이 되지 않을까 합니다.

day.js 사용법

설치

설치는 간단하게 npm 설치하는 방식으로 프로젝트에 추가를 하면 됩니다.

npm install -S dayjs

기본 사용

Day.js는 아래와 같은 다양한 형식으로 사용됩니다.

블로그 게시글 작성 날짜 표시
댓글 작성 시간 표시
이벤트 카운트다운
생년월일 기반 나이 계산
특정 날짜 기념일 알림
예약 시스템 날짜 선택

기본적인 사용방법에 대한 예시는 아래를 참고하세요.

const day = dayjs(); // 현재 날짜  // 날짜 출력 console.log(day.toString()); // "2024-02-22T06:28:00.000Z" console.log(day.format("YYYY년 MM월 DD일")); // "2024년 2월 22일"  // 날짜 조작 day.add(1, "day"); // 하루 더하기 day.subtract(1, "month"); // 한 달 빼기 day.set("year", 2023); // 연도 변경  // 유효성 검사 day.isValid(); // true  // 요일 추출 day.day(); // 3 (목요일)  // 주 번호 추출 day.week(); // 8  // 두 날짜 비교 day.isBefore("2024-03-01"); // true

포맷팅

Day.js는 다양한 포맷 옵션을 제공하여 원하는 형식으로 날짜를 표현할 수 있습니다.

day.format("YYYY-MM-DD"); // "2024-02-22" day.format("ddd, MMM Do YYYY"); // "목, 2월 22일 2024" day.format("h:mm:ss a"); // "오후 6:28:00"  // 사용자 정의 포맷 day.format("dddd, MMMM Do YYYY, h:mm:ss A"); // "목요일, 2월 22일 2024, 오후 6:28:00 PM"

날짜 계산

Day.js는 다양한 날짜 계산 기능을 제공합니다.

// 특정 날짜 생성 const birthday = dayjs("1990-01-01");  // 나이 계산 const age = dayjs().diff(birthday, "year");  // 특정 요일 찾기 const nextMonday = dayjs().next("Monday");  // 특정 날짜 사이의 간격 계산 const daysBetween = dayjs().diff("2024-12-31", "day");

로케일 설정

Day.js는 다양한 언어를 지원합니다.

import dayjs from "dayjs"; import dayjsLocaleKo from "dayjs-locale-ko";  dayjs.extend(dayjsLocaleKo);  dayjs.locale("ko");  // 한국어 날짜 표시 dayjs().format("YYYY년 MM월 DD일"); // "2024년 2월 22일" dayjs().format("ddd, MMM Do YYYY"); // "목, 2월 22일 2024"  // 한국어 요일, 주 정보 dayjs().day(); // 3 (목요일) dayjs().week(); // 8  // 한국어 기간 표현 dayjs().diff("2024-12-31", "day"); // "314일 남음"

플러그인

Day.js는 다양한 플러그인을 통해 기능을 확장할 수 있습니다.

// 플러그인 설치 npm install dayjs-advanced-format  // 플러그인 사용 dayjs.extend(dayjsAdvancedFormat);  // 사용자 정의 포맷 사용 day.format("YYYY년 [W]주차"); // "2024년 8주차"

위의 예제 외에도 다양한 플러그인들이 존재합니다. 더 많은 정보를 보시려면 공식 홈페이지에서 찾아 보세요.

Day.js 공식 문서: https://day.js.org/

React와 Next.js에서 상태 관리하는 7가지 방법 비교: 심층 분석 및 실제 사례

어쩌다보니여기까지~ — Tue, 20 Feb 2024 22:30:33 +0900

React와 Next.js는 웹 개발에서 가장 인기 있는 프레임워크 중 하나이며, 동적인 웹 애플리케이션을 구축하기 위한 강력한 도구입니다. 하지만, 프로젝트 규모가 커지면서 여러 컴포넌트 사이에서 데이터를 공유하고 관리하는 것은 점점 더 복잡해집니다. 이러한 문제를 해결하기 위해 다양한 상태 관리 방법들이 등장했습니다.

본 글에서는 7가지 대표적인 상태 관리 방법 (useState, useReducer, Context API, Redux, Recoil, Zustand, Next.js SWR)을 심층 분석하고, 각 방법의 장단점을 비교하며 실제 사례와 함께 적용 방법을 제시하려고 합니다. 또한, 프로젝트 특성에 따라 적합한 상태 관리 방법을 선택하는데 도움이 되는 추가 고려 사항과 팁을 제공하려고 합니다.

1. useState: [로컬] 컴포넌트 내부 상태 관리

useState는 React에서 가장 기본적인 상태 관리 방법입니다. 컴포넌트 내부의 변수를 관리하는 데 적합하며, 간단하고 직관적인 사용이 가능합니다. 다만 컴포넌트 외부와는 변수를 공유할 수 없기 때문에 일반적으로는 전역 상태 관리 방법과 병행해서 로컬 변수 관리 용도로 주로 사용됩니다.

장점

배우기 쉽고 사용하기 간편
작은 컴포넌트의 상태 관리에 효율적
코드를 간결하게 유지

단점

컴포넌트 외부 상태 관리 불가능
큰 규모 프로젝트에서는 관리 어려움
중복된 코드 발생 가능성

사용 예시

const [count, setCount] = useState(0);  const handleClick = () => {   setCount(count + 1); };  return (   <div>     <h1>카운트: {count}</h1>     <button onClick={handleClick}>증가</button>   </div> );

2. useReducer: [로컬] 복잡한 상태 관리를 위한 강력한 도구

useReducer는 useState의 확장 버전으로, 여러 상태 변수를 하나의 리듀서 함수로 관리할 수 있습니다. 복잡한 상태 관리에 적합하며, 액션 기반 상태 변경을 통해 코드를 더욱 명확하고 이해하기 쉽게 만들 수 있습니다.

장점

여러 상태 변수를 효율적으로 관리
중복 코드 줄이고 액션 기반 상태 변경 가능
테스트 및 디버깅 용이
상태 흐름 추적 가능

단점

useState보다 복잡한 학습 곡선
작은 컴포넌트에는 부담스러울 수 있음
리듀서 함수 작성 및 관리 필요

사용 예시

const reducer = (state, action) => {   switch (action.type) {     case "INCREMENT":       return { ...state, count: state.count + 1 };     case "DECREMENT":       return { ...state, count: state.count - 1 };     default:       return state;   } };  const [state, dispatch] = useReducer(reducer, { count: 0 });  const handleClick = () => {   dispatch({ type: "INCREMENT" }); };  return (   <div>     <h1>카운트: {state.count}</h1>     <button onClick={handleClick}>증가</button>   </div> );

3. Context API: [전역] 전역 상태 관리를 위한 간편한 방법

Context API는 컴포넌트 트리 전역에서 상태를 공유할 수 있는 기본적인 방법입니다. props 드릴링을 방지하고 코드를 더욱 깔끔하게 유지할 수 있지만, 상태 업데이트 로직 추적이 어렵고 중복 렌더링 발생 가능성이 있습니다.

장점

전역 상태 관리에 간편하고 직관적
props 드릴링 방지
코드 재사용성 향상

단점

상태 업데이트 로직 추적 어려움
중복 렌더링 발생 가능성
큰 규모 프로젝트에서는 관리 어려움

사용 예시

// Context API 관련 import import React, { createContext, useState, useContext } from "react";  // Context 생성 const MyContext = createContext(null);  // Provider 컴포넌트: Context 값 제공 const MyProvider = ({ children }) => {   const [count, setCount] = useState(0); // count state 및 setter 정의    return <MyContext.Provider value={{ count, setCount }}>{children}</MyContext.Provider>; };  // MyComponent 컴포넌트: Context 값 사용 const MyComponent = () => {   const { count } = useContext(MyContext); // Context에서 count 값 가져오기    return (     <div>       <h1>카운트: {count}</h1>     </div>   ); };  // App 컴포넌트: Provider 컴포넌트로 감싸서 MyComponent 렌더링 const App = () => {   return (     <MyProvider>       <MyComponent />     </MyProvider>   ); };  export default App;

4. Redux: 대규모 프로젝트에서 강력한 상태 관리

Redux는 대규모 프로젝트에서 상태 관리를 위한 강력한 도구입니다. 예측 가능한 상태 흐름을 제공하고, 다양한 툴 및 라이브러리 지원으로 확장성이 뛰어나지만, 설정 및 학습 난이도가 높고 불필요한 오버헤드 발생 가능성이 있습니다.

장점

예측 가능한 상태 흐름
확장성 높고 다양한 툴 및 라이브러리 지원
테스트 및 디버깅 용이
큰 규모 프로젝트에 적합

단점

설정 및 학습 난이도 높음
불필요한 오버헤드 발생 가능성
작은 규모 프로젝트에는 부담스러울 수 있음

사용 예시

// Redux 관련 import import { createStore, combineReducers, applyMiddleware } from "redux"; import { Provider } from "react-redux"; import { useSelector, useDispatch } from "react-redux";  // 리듀서 정의 const reducer = (state = { count: 0 }, action) => {   switch (action.type) {     case "INCREMENT":       return { ...state, count: state.count + 1 };     default:       return state;   } };  // Redux store 생성 const store = createStore(reducer);  // MyComponent 컴포넌트 const MyComponent = () => {   // useSelector를 사용하여 store에서 count state 가져오기   const count = useSelector((state) => state.count);    // useDispatch를 사용하여 dispatch 함수 가져오기   const dispatch = useDispatch();    // handleClick 함수: dispatch를 사용하여 INCREMENT action 발생시키기   const handleClick = () => {     dispatch({ type: "INCREMENT" });   };    return (     <div>       <h1>카운트: {count}</h1>       <button onClick={handleClick}>증가</button>     </div>   ); };  // App 컴포넌트 const App = () => {   return (     // Provider 컴포넌트로 store 전달     <Provider store={store}>       <MyComponent />     </Provider>   ); };  export default App;

5. Recoil: Redux의 간편함과 Context API의 성능을 결합

Recoil은 Redux의 간편함과 Context API의 성능을 결합한 새로운 상태 관리 라이브러리입니다. 자동 렌더링 최적화 기능을 제공하며 기본적인 상태 관리에 효율적이지만, Redux만큼 강력하지 않고 커뮤니티 및 지원 도구 상대적으로 부족합니다.

장점

배우기 쉽고 사용하기 간편
자동 렌더링 최적화
기본적인 상태 관리에 효율적

단점

Redux만큼 강력하지 않음
커뮤니티 및 지원 도구 상대적으로 부족
큰 규모 프로젝트에는 적합하지 않을 수 있음

사용 예시

// Recoil 관련 import import { atom, useRecoilValue, useRecoilSetter } from "recoil";  // Recoil atom 정의 const countAtom = atom({   key: "count", // atom의 고유 키   default: 0, // 초기값 });  // MyComponent 컴포넌트 const MyComponent = () => {   // useRecoilValue를 사용하여 countAtom의 값 가져오기   const count = useRecoilValue(countAtom);    // useRecoilSetter를 사용하여 countAtom 값 설정 함수 가져오기   const setCount = useRecoilSetter(countAtom);    // handleClick 함수: setCount 함수 사용하여 count 값 증가   const handleClick = () => {     setCount(count + 1);   };    return (     <div>       <h1>카운트: {count}</h1>       <button onClick={handleClick}>증가</button>     </div>   ); };  // App 컴포넌트 const App = () => {   return (     // RecoilRoot 컴포넌트로 감싸서 Recoil 사용     <RecoilRoot>       <MyComponent />     </RecoilRoot>   ); };  export default App;

6. Zustand: 간편하고 가벼운 상태 관리

Zustand는 Zustand 패턴을 기반으로 하는 상태 관리 라이브러리입니다. 매우 간편하고 가벼우며, TypeScript 지원 및 React Hook과의 완벽한 통합을 제공하지만, 다른 라이브러리만큼 강력하지 않고 커뮤니티 및 지원 도구도 상대적으로 부족합니다.

장점

매우 간편하고 가벼움
TypeScript 지원
React Hook과 완벽하게 통합

단점

다른 라이브러리만큼 강력하지 않음
커뮤니티 및 지원 도구 상대적으로 부족
큰 규모 프로젝트에는 적합하지 않을 수 있음

사용 예시

// Zustand 관련 import import { createStore, useStore } from "zustand";  // Zustand store 생성 const store = createStore(() => ({   // 상태 정의   count: 0, }));  // MyComponent 컴포넌트 const MyComponent = () => {   // useStore를 사용하여 store 접근   const { count, increment } = useStore(store);    return (     <div>       <h1>카운트: {count}</h1>       <button onClick={increment}>증가</button>     </div>   ); };  // App 컴포넌트 const App = () => {   return (     // ZustandProvider 컴포넌트로 store 전달     <ZustandProvider store={store}>       <MyComponent />     </ZustandProvider>   ); };  export default App;

7. Next.js SWR: 데이터 페칭 및 캐싱을 위한 최적화된 솔루션

Next.js SWR은 Next.js에서 데이터 페칭 및 캐싱을 위한 최적화된 솔루션입니다. 데이터 폴링, 서버 측 렌더링 지원, 자동 재시도 등 다양한 기능을 제공하지만, 다른 라이브러리만큼 다양한 기능을 제공하지 않고, Next.js 환경에서만 사용할 수 있습니다.

장점

데이터 페칭 및 캐싱을 위한 최적화
데이터 폴링, 서버 측 렌더링 지원
자동 재시도

단점

다른 라이브러리만큼 다양한 기능 제공하지 않음
Next.js 환경에서만 사용 가능

사용 예시

// Next.js SWR 관련 import import { useSWR } from "swr";  // API 주소 const apiUrl = "/api/users";  // MyComponent 컴포넌트 const MyComponent = () => {   // SWR hook 사용하여 API 데이터 가져오기   const { data, error } = useSWR(apiUrl);    // 에러 처리   if (error) return <div>에러 발생</div>;    // 데이터 로딩 중 처리   if (!data) return <div>로딩 중...</div>;    // 데이터 출력   return (     <div>       {data.users.map((user) => (         <div key={user.id}>           <h1>{user.name}</h1>         </div>       ))}     </div>   ); };  // App 컴포넌트 const App = () => {   return (     <div>       <MyComponent />     </div>   ); };  export default App;

선택 가이드라인

다양한 상태 관리 방법 중 어떤 방법을 선택할지는 프로젝트의 규모, 복잡성, 개발자의 경험과 학습곡선, 팀환경 및 협업 방식 등을 고려해야 합니다.

단일 컴포넌트 : useState, useReducer
간단한 프로젝트: Context API 또는 Next.js SWR
중간 규모 프로젝트: Zustand 또는 Recoil
대규모 프로젝트: Redux

Next.js 14 핵심 기능: App 라우팅과 Pages 라우팅의 장단점 비교

어쩌다보니여기까지~ — Mon, 19 Feb 2024 18:18:40 +0900

Next.js 12버전이하에서는 기본적으로 Pages Routing 방식을 사용했으나 Pages Routing의 단점을 극복하고자 14버전에서 App Routing을 도입하게 되었습니다. 그래서 현재 14버전에서는 Pages Routing과 App Routing 방식을 선택하여 사용할 수 있습니다. 각 라우팅 컨벤션은 서로 다른 구조와 특징을 가지고 있으며, 프로젝트의 특성에 따라 적합한 컨벤션을 선택하는 것이 중요합니다. 기존 Next.js 프로젝트를 관리하는 차원이라면 Pages 라우팅 방식을 추천하지만 만약 새롭게 프로젝트를 진행하게 된다면 App 라우팅 방식을 추천합니다.

1. App 라우팅 컨벤션

App Routing Conventions는 Next.js 14 버전에서 새롭게 도입된 라우팅 컨벤션입니다. 컴포넌트 기반 라우팅을 사용하며, 다음과 같은 특징을 가집니다.

구조:
- app 폴더를 루트 폴더로 사용합니다.
- pages 폴더는 사용하지 않습니다.
- 라우팅은 app/routes.js 파일에서 설정할 수 있습니다.
- 각 페이지는 app/폴더명 폴더에 위치한 컴포넌트로 구성됩니다.
특징:
- 컴포넌트 기반 라우팅으로 코드 조직 및 관리가 용이합니다.
- 레이아웃 구성 및 재사용이 간편합니다.
- 서버 액션, 파일 시스템 기반 라우팅 등을 지원합니다.

2. Pages 라우팅 컨벤션

Pages Routing Conventions는 기존 Next.js 12버전 이하에서 사용하던 라우팅 컨벤션입니다. 파일 시스템 기반 라우팅을 사용하며, 다음과 같은 특징을 가집니다.

구조:
- pages 폴더를 루트 폴더로 사용합니다.
- 각 페이지는 pages 폴더 내에 index.js 파일로 구성됩니다.
- URL 경로는 pages 폴더의 구조에 따라 결정됩니다.
특징:
- 파일 시스템 기반 라우팅으로 직관적이고 이해하기 쉽습니다.
- 기존 Next.js 프로젝트와 호환됩니다.
- 정적 페이지 생성에 적합합니다.

1. 비교 요약

특징	App 라우팅	Pages 라우팅
구조	app 폴더 기반	pages 폴더 기반
라우팅 방식	컴포넌트 기반	파일 시스템 기반
레이아웃	컴포넌트 기반	페이지 기반
서버 액션	지원	지원하지 않음
파일 시스템 기반 라우팅	지원	지원
정적 페이지 생성	지원	지원
코드 조직 및 관리	용이	다소 어려움
레이아웃 구성 및 재사용	간편	다소 어려움

4. 적합한 컨벤션 선택

다음은 각 라우팅 컨벤션에 적합한 프로젝트 유형입니다.

App 라우팅

컴포넌트 기반 구조를 선호하는 프로젝트
레이아웃 구성 및 재사용이 중요한 프로젝트
서버 액션을 사용하는 프로젝트

Pages 라우팅

기존 Next.js 프로젝트
정적 페이지 생성에 초점을 맞춘 프로젝트
파일 시스템 기반 라우팅을 선호하는 프로젝트 5. 추가 정보

5. 결론

Next.js 14 버전은 두 가지 라우팅 컨벤션을 제공하여 개발자의 선택 폭을 넓혔습니다. 프로젝트의 특성을 고려하여 적합한 컨벤션을 선택하여 효율적인 Next.js 애플리케이션 개발을 진행하시기 바랍니다.

Next.js 14버전에서 App 라우팅 심화: 폴더 구조와 파일 특징 완벽 가이드

어쩌다보니여기까지~ — Mon, 19 Feb 2024 18:18:11 +0900

Next.js 14 버전에서 도입된 App 라우팅 방식은 폴더 구조와 파일 규칙을 기반으로 강력하고 유연한 라우팅 경험을 제공합니다. 이 글에서는 폴더와 파일의 명칭에 대한 규칙을 명확하고 간결하게 정리하여 개발자들이 App 라우팅을 쉽게 이해하고 활용할 수 있도록 정리 했습니다.

라우팅(Routing) 파일들

APP 라우팅 방식은 기본적으로 컴포넌트를 기준으로 경로를 설정하게 됩니다. 기본적으로 사용되는 라우팅 파일 형식은 아래와 같습니다.

파일 명	확장자	설명
`layout`	`.js` `.jsx` `.tsx`	화면의 레이아웃을 정의 합니다.
`page`	`.js` `.jsx` `.tsx`	화면의 컨텐츠를 정의 합니다.
`loading`	`.js` `.jsx` `.tsx`	화면이 로딩될 때 보여줄 UI 화면입니다.
`not-found`	`.js` `.jsx` `.tsx`	경로에 없는 화면을 요청할 경우 보여줄 UI 화면입니다.
`error`	`.js` `.jsx` `.tsx`	로컬 오류가 발생했을 경우 보여줄 UI 화면입니다.
`global-error`	`.js` `.jsx` `.tsx`	전역 오류가 발생했을 경우 보여줄 UI 화면입니다.
`route`	`.js` `.ts`	API의 엔드포인트 입니다.
`template`	`.js` `.jsx` `.tsx`	layout와 비슷한 역활을 하나, template은 화면에 접근할 때 마다 계속 리렌더링을 합니다.
`default`	`.js` `.jsx` `.tsx`	패러랠 라우트의 대체 페이지로 사용됩니다.

라우팅(Routing) 폴더들

이번에는 폴더를 사용한 라우팅 경로 설정 규칙을 살펴봅니다.

특징 구분	폴더명(형태)	설명
Nested Routes	`folder`	기본 폴더가 경로 지정
Nested Routes	`folder/folder`	2개이상의 중첩된 경로 지정
Dynamic Routes	`[folder]`	변수에 따라 변경되는 동적 경로 지정
Dynamic Routes	`[...folder]`	포괄 경로 구간
Dynamic Routes	`[[...folder]]`	선택적 포괄 경로 구간
Route Groups	`(folder)`	주소 체계에 관여하지 않고 단지 그룹만 지어줌 그룹 단위로 레이아웃을 별도로 가져갈 수 있음 예시> (beforeLogin), (afterLogin)
Private Folders	`_folder`	주소 체계에 관여하지 않고 폴더 정리용으로 주로 사용됨 폴더명 앞에 `_`언더바를 붙힘 `_components`로 주로 사용함
Parallel	`@folder`	주소 체계에 관여하지 않고 동시에 2개이상의 화면을 사용할 수 있음. 슬롯 이라고 함. 모두 같은 폴더 위치에 있어야 함. 보통 layout.js에서 2개이상의 화면을 적용함 주로 인터셉트와 함께 모달창 생성시 사용함
Intercepted Routes	`(.)folder`	같은 레벨의 화면을 가로챔. 주로 패러렐과 함께 모달창 생성시 사용함
Intercepted Routes	`(..)folder`	한 레벨 위에서 화면을 가로 챔
Intercepted Routes	`(..)(..)folder`	두 레벨 위에서 화면을 가로 챔
Intercepted Routes	`(...)folder`	루트 위치에서 화면을 가로 챔

기타 메타데이터 파일들

아래 파일명으로 메타데이터 콘텐츠를 설정하면 자동으로 최적화된 메타데이터가 적용됩니다.

앱 아이콘

Next.js에서 앱 아이콘을 다양한 크기로 자동으로 생성해 줍니다.

파일 명	확장자	설명
`favicon`	`.ico`	파비콘 파일
`icon`	`.ico` `.jpg` `.jpeg` `.png` `.svg`	앱 아이콘 파일
`icon`	`.js` `.ts` `.tsx`	생성된 앱 아이콘
`apple-icon`	`.jpg` `.jpeg`,`.png`	Apple 앱 아이콘 파일
`apple-icon`	`.js` `.ts` `.tsx`	생성된 Apple 앱 아이콘

오픈 그래프 및 트위터 이미지

오픈 그래프는 웹 페이지를 소셜 미디어에서 공유할 때 미리보기 이미지를 설정하는 데 사용됩니다. Open Graph 프로토콜을 사용하여 Facebook, Twitter, LinkedIn 등 다양한 플랫폼에서 일관된 미리보기 이미지를 표시할 수 있습니다. Next.js에서는 여러가지 방법으로 사용되며 기본적으로는 아래처럼 메타데이터 형식으로 많이 사용합니다.

<!-- 일반적인 사용법 --> <meta property="og:title" content="미리보기 제목" /> <meta property="og:type" content="미리보기 내용" /> <meta property="og:url" content="경로 주소" /> <meta property="og:image" content="이미지 주소" />  <!-- Next.js에서 자동으로 삽입 --> <meta property="og:image" content="opengraph-image.jpg" /> <meta name="twitter:image" content="twitter-image.jpg" />

파일 명	확장자	설명
`opengraph-image`	`.jpg` `.jpeg` `.png` `.gif`	그래프 이미지 파일 열기
`opengraph-image`	`.js` `.ts` `.tsx`	생성된 오픈 그래프 이미지
`twitter-image`	`.jpg` `.jpeg` `.png` `.gif`	트위터 이미지 파일
`twitter-image`	`.js` `.ts` `.tsx`	생성된 트위터 이미지

SEO

SEO는 검색엔진 최적화를 효과적으로 수행할 수 있도록 지원해 줍니다.

파일 명	확장자	설명
`sitemap`	`.xml`	사이트맵 파일
`sitemap`	`.js` `.ts`	생성된 사이트맵
`robots`	`.txt`	로봇 파일
`robots`	`.js` `.ts`	생성된 로봇 파일

시놀로지 나스 방화벽 설정하는 최선의 방법

어쩌다보니여기까지~ — Wed, 14 Feb 2024 22:33:16 +0900

Synology NAS를 사용하고 있다면 방화벽을 꼭 설정해야 합니다. 방화벽을 설정하지 않으면 인터넷에 연결된 NAS는 더 이상 당신의 것이 아니라 해커들의 놀이터가 될 것입니다. 만약 NAS에 중요한 정보가 저장되어 있다면 그 정보가 도난당하는 것은 시간 문제일 뿐입니다. 집에서 사용 중이라면 공유기와 함께 Synology NAS에 보안을 적용하는 것이 필요합니다.

전체 구성도

대략적인 전체 구성도는 다음과 같습니다.

시놀로지 나스 방화벽 설정 : 방화벽을 설정하여 외부에서 오는 80, 443 포트만 접근할수 있게 합니다.
공유기 포트 포워딩 설정 : 외부에서 들어오는 80, 443 포트만 시놀로지 나스로 포트 포워딩 합니다.
DDNS 설정 : 시놀로지 나스에서 DDNS를 설정합니다.
시놀로지 나스 역방향 프록시 설정 : 서브 도메인으로 시놀로지 나스 서비스에 접근할수 있게 설정합니다.

1. 시놀로지 나스 방화벽 설정

방화벽 설정 방법은 사람마다 다를 수 있지만, 포트 개방을 최소화하고 서브 도메인에만 액세스를 허용하기 위해 역방향 프록시를 설정 합니다. 먼저 Synology 제어판의 보안 항목에서 방화벽을 활성화합니다.

방화벽을 활성화 합니다.
방화벽 알림 활성화를 해제 합니다.
규칙 편집 버튼을 눌러서 방화벽 규칙을 작성합니다.

일단 포트나 소스IP를 모두 막아서 아무도 접근하지 못하게 막아놓은 다음 내부는 모두 허용해 주어서 편의성을 높이고 외부는 딱 필요한 2개의 포트(80, 443)만 열어주어서 보안을 강화하는 식입니다.

일단 아래와 같이 포트나 소스IP를 모두 막습니다.

생성 버튼을 클릭합니다.
포트에서 모두를 선택합니다.
소스IP에서도 모두를 선택합니다.
그리고 선택한 것을 거부 합니다.
확인을 클릭해서 저장합니다.

그리고 내부에서 내부로의 접근은 모두 허용을 합니다.

생성 버튼을 클릭합니다.
이번엔 소스 IP에서 특정 IP를 체크합니다.
서브넷을 선택해서 내부망을 모두 선택하도록 합니다.
IP주소는 공유기에서 사용하는 내부 IP체계를 입력합니다. (예 : 192.168.20.0) 마지막을 0으로 입력하면 내부 IP를 대표하게 됩니다.
서브넷 마스크를 255.255.255.0으로 입력합니다.
확인을 눌러 저장합니다.

이제 마지막으로 외부에서 들어오는 포트 딱 2개만 오픈 합니다. http 포트인 80와 https 포트인 443만 오픈합니다.

생성 버튼을 클릭합니다.
포트에서 사용자 지정을 선택합니다.
사용자 지정 버튼을 클릭합니다.
포트를 쉼표로 구분해서 80, 443을 입력합니다.
확인을 눌러 저장합니다.

위와 같이 3개의 규칙이 되어있다면 정상적으로 설정한 것입니다. 순서도 중요합니다. 가장 아래쪽에 모두 거부가 있어야 하고 허용되는 규칙은 그 위에 올라와 있어야 합니다.

이제 이 시놀로지 나스는 외부에서 접근할때는 웹브라우저의 주소창을 이용해서 http와 https로만 접근이 가능합니다.

2. 공유기 포트 포워딩 설정

외부에서 DDNS로 공유기로 접근을 할 경우 http인 경우 80포트로 포워딩을 시켜주고 https인 경우 443포트로 포워딩하는 설정을 해 줍니다.
저는 IPtime를 사용하므로 IPtime로 설명해 보겠습니다.

고급설정의 NAT/라우터 관리 > 포트포워드 설정을 선택합니다.
https(443 포트)로 접근하는 경우 내부 시놀로지 나스의 IP주소의 443 포트로 연결을 설정합니다.
http(80 포트)로 접근하는 경우 내부 시놀로지 나스의 IP주소의 80 포트로 연결을 설정합니다.
위의 2번이나 3번을 선택하면 세부설정을 할 수 있습니다. 내부 IP주소는 시놀로지 나스의 IP 주소입니다.
https로 접근할 경우 포트번호를 별도로 작성하지 않아도 자동으로 443포트가 지정되어 있습니다.
그럴경우 시놀로지 나스 IP의 443포트로 연결을 시켜줘라는 설정입니다.

시놀로지 나스를 위한 포트 포워딩은 이 2개의 설정만 있으면 됩니다.

3. 시놀로지 나스 DDNS 설정

역방향 프록시를 사용하기에 앞서 먼저 DDNS를 설정해야 합니다. DDNS는 외부에서 웹브라우저를 사용해서 숫자로 되어 있는 IP주소가 아니라 문자로 되어 있는 도메인으로 시놀로지 나스에 접근할 수 있게 해줍니다.

개인이 구매한 도메인을 사용 할 수도 있지만 시놀로지에서 제공해 주는 무료 서브 도메인을 사용해도 됩니다.

먼저 제어판에서 외부 액세스 메뉴를 선택합니다.
DDNS 탭을 선택합니다.
추가 버튼을 클릭합니다.
다양한 서비스 공급자가 있지만 여기서는 무료로 사용할 수 있는 Synology를 선택합니다.
시놀로지에서는 다양한 도메인을 제공해 주고 있는데, 마음에 드는것을 선택하시면 됩니다.
Synology계정을 사용하여 연결합니다.
연결테스트를 눌러서 상태가 정상적으로 연결이 되는지 확인해 봅니다.

여기서는 na.myds.me로 등록했다고 가정 합니다. 이제 외부에서 웹브라우저를 통해 http://na.myds.me를 입력하면 시놀로지 나스에 접속이 됩니다.

4. 시놀로지 나스 역방향 프록시 설정

이제 마지막으로 역방향 프록시를 설정하면 됩니다.

DSM 도메인 설정

역방향 프록시를 설정하기 전에 먼저 DSM을 접속할수 있게 설정을 해야겠지요?

로그인 포털 메뉴를 선택합니다.
DSM 텝을 선택합니다.
DDNS에서 설정한 na.myds.me의 앞쪽에 임의의 주소를 설정합니다. 여기서는 dsm을 지정해 봅니다. ( dsm.na.myds.me )
HSTS를 선택합니다. HSTS는 http로 접근할경우 자동으로 https의 보안프로토콜로 자동연결됩니다.

웹브라우저에서 시놀로지 나스로 연결할 경우 원래는 https://na.myds.me:5009로 접속해야하는데, 위와 같이 설정하면 https://dsm.na.myds.me로 뒤에 포트 번호 없이도 접속을 할 수 있습니다.

응용프로그램 도메인 설정

응용프로그램에 대해서도 포트 번호 없이 도메인으로 접속을 할 수 있습니다.

로그인 포털 메뉴를 선택합니다.
응용 프로그램 탭을 선택합니다.
각각의 응용프로그램별로 도메인을 설정합니다. (이름은 임의로 작성하면됩니다.)
1. Audio Station은 audio.na.myds.me 로 설정을 합니다.
2. Video Station은 video.na.myds.me 로 설정을 합니다.
3. Download Station은 download.na.myds.me 로 설정을 합니다.
4. File Station은 file.na.myds.me 로 설정을 합니다.
5. ... 계속 설정할 수 있습니다.

역방향 프록시 설정

드디에 역방향 프록시 설정이네요..

고급 탭을 선택합니다.
역방향 프록시 버튼을 선택합니다.

기존에 제가 설정하여 사용하는 도메인을 먼저 살펴보겠습니다.

ha는 시놀로지의 버츄얼머신으로 돌리고 있는 Home Assistant 를 도메인으로 연결해 줍니다.
strapidb는 시놀로지의 도커로 돌리고 있는 헤드리스CMS의 DB주소와 포트를 도메인으로 연결해 줍니다.
strapi는 시놀로지의 도커로 돌리고 있는 헤드리스CMS의 Admin 주소와 포트를 도메인으로 연결해 줍니다.
Webdev는 시놀로지의 webdev를 도메인으로 연결해 줍니다.

이중에서 webdev를 한번 살펴보도록 하겠습니다.

일반 탭을 선택합니다.
역방향 프록시 이름을 임의로 설정합니다. 여기서는 webdev로 설정했습니다.
소스는 입력이라고 보시면 됩니다. 보안접속인 https의 webdev.na.myds.me로 들어오는 경우
https이니 443 포트를 선택합니다.
HSTS를 활성화를 해서 http로 접속해도 강제로 https로 연결되도록 설정합니다.
대상은 시놀로지 나스의 Webdev로 연결해 주시면 됩니다. Webdev는 내부에서도 https이므로 https로 선택합니다.
호스트이름은 시놀로지 나스의 IP번호를 입력합니다.
포트는 Webdev에 할당된 포트번호를 입력합니다.

다른 서비스도 이런식으로 설정하면 됩니다.

여기까지 끝~~

웹사이트의 가독성과 스타일을 동시에 향상시키는 산돌구름 웹폰트

어쩌다보니여기까지~ — Wed, 20 Dec 2023 01:42:39 +0900

예전에 디자인을 공부하는 대학생일 때, 산돌이라는 폰트 회사를 처음 알게 되었습니다. 그때 접했던 폰트들은 주로 출판물인 에디토리얼 디자인에 활용했었는데... 지금 시간이 흘러 다시 웹폰트로 만나게 되니 정말 감회가 새롭습니다. 예전에 알던 폰트 회사들이 사라진 회사도 많은데, 지금까지 성장해 온 산돌의 저력이 새삼 느껴집니다.

오늘은 웹 디자인을 위한 필수 아이템인 웹폰트, 그중에서도 이번에 출시한 산돌구름 웹폰트에 대해 이야기해 보려고 합니다. 그 전에 먼저 웹폰트가 무엇인지부터 알아볼까요?

웹폰트란

웹폰트는 웹사이트 디자인에서 중요한 요소로, 다양한 방식으로 웹사이트의 시각적 매력과 기능성을 향상시킬 수 있는 요소입니다.

1. 웹폰트의 개념

웹폰트는 사용자의 시스템에 설치되지 않은 폰트를 웹사이트에서 사용할 수 있게 하는 기술입니다. CSS를 통해 웹폰트 파일을 불러와 웹사이트에 적용합니다. 웹폰트는 웹서버에서 호스팅되며, 웹사이트가 로드될 때 브라우저를 통해 다운로드됩니다. 이 폰트는 웹 페이지의 텍스트에 적용되어 사용자에게 표시됩니다.

2. 디자인 측면에서의 장점

독특하고 매력적인 폰트는 브랜드의 개성을 표현하고 인식도를 높일 수 있습니다. 다양한 폰트 선택으로 웹사이트의 시각적 매력을 높일 수 있으며, 특정 메시지나 콘텐츠를 강조하는 데 도움이 됩니다.

3. 기술적 측면에서의 장점

필요한 문자만을 로드하기 때문에 웹 페이지의 로딩 속도가 개선됩니다. 또한 다양한 브라우저 및 운영 체제에서 일관된 모습으로 폰트를 표시할 수 있습니다.

산돌구름 웹폰트

그럼 이번에는 산돌구름 웹폰트의 특징과 장점에 대해서 알아보겠습니다.

산돌구름 웹폰트의 특장점

다양한 폰트 옵션

산돌구름 웹폰트는 오픈 소스 웹폰트가 제공하는 제한된 종류와 달리, 12/27일 기준 약 800여 종의 산돌 폰트를 지원하며, 지원하는 폰트 종수는 앞으로도 계속 확대될 예정이라고 하네요.

검색 최적화

산돌구름 웹폰트 사용 시, 메뉴나 소개 문구 등이 텍스트로 인식되어 검색 엔진 최적화에 유리합니다. 별도의 태그 입력이 필요 없으며, 웹의 모든 부분을 텍스트로 전환할 수 있어 자동 번역 기능과의 연결이 쉽고 빠르게 수정이 가능합니다.

합리적인 비용

필요한 기간과 트래픽에 따라 원하는 제품을 선택할 수 있으며, 월간 또는 연간 구독을 통해 이용할 수 있습니다. 짧은 기간의 이벤트 페이지 조직/운영 시 비용 절감 및 간편한 적용 절차를 제공합니다.

가벼움과 빠른 전송

웹사이트에 적용된 한글만을 호출하며, 전체 11,172개의 한글 문자를 모두 호출하지 않습니다. 이로 인해 웹사이트의 로딩 속도가 최소화됩니다.

안전성

산돌구름 웹폰트 서비스는 안정성 클로즈드 베타와 오픈 베타를 통해 글로벌 팬사이트, 게임 프로모션 사이트, 인기 프로모션 이벤트 사이트 등 다양한 환경에서의 사용 테스트를 통해 서비스 안정성을 확보하였습니다. 또한, 웹폰트 서비스는 웹페이지 내 중복된 글자를 제외하고 글자의 글립 정보만을 보내기 때문에 보안에 민감한 사이트라고 하더라도 산돌구름 웹폰트에 전송되는 정보로는 텍스트 내용을 파악할 수 없어 안전합니다.

산돌구름 웹폰트 적용해 보기

이번에는 산돌구름 웹폰트를 한번 제 블로그에 적용해 보겠습니다. 산돌구름 웹폰트를 사용하기 위해서는 먼저 회원가입을 해야 합니다. 회원가입은 국내거주자, 국외거주자로 구분하고 있고 학생인 경우 또 다른 혜택이 있는 것 같습니다. (전 학생이 아니라 확인해볼수가 없네요 크흠)

그리고 산돌구름 폰트 웹사이트와 산돌구름 웹폰트 웹사이트는 다릅니다. 혼동하지 않도록 주의하세요. 아래 화면처럼 웹폰트로 접근해야 합니다.

산돌구름 폰트 : 이미지 편집용 폰트나 온/오프라인 제작물을 만들기 위한 폰트 등 일반적인 그래픽에 사용되는 폰트를 구매/사용할 수 있는 웹사이트
산돌구름 웹폰트 : 웹폰트를 구매/사용할 수 있는 웹사이트

산돌구름 웹폰트 바로가기

적용을 위해서 먼저 상품을 구매하는 것이 좋습니다. 처음 사용해 본다면 트라이얼 버전으로 시작하는 것을 추천합니다.

웹폰트 구매하기

가격은 다양합니다. 저도 테스트를 위해 트라이얼 버전을 선택해 봤습니다. 트라이얼 버전은 다양한 산돌구름 웹폰트 중 하나를 선택해 한 달간 무료로 사용해 볼 수 있는 요금제입니다.(폰트 1종, 월 1GB까지 사용 가능!)

이제 많은 폰트 중에서 원하는 폰트를 선택합니다. 저는 제 블로그의 타이틀에 사용해 보기 위해 Sandoll 코믹스텐실 폰트를 선택해 봤습니다.

프로젝트가 없다면 프로젝트를 먼저 생성하라고 프로젝트 생성 팝업이 뜹니다. 프로젝트 명은 임의로 작성하고, 사이트 주소는 해당 폰트가 적용될 웹사이트의 주소를 넣으시면 됩니다. 이 주소는 중요합니다. 사이트 주소가 다르면 인증에 실패해 폰트가 나타나지 않습니다.

개발 서버의 주소는 옵션이므로 필요한 경우에만 넣어주시면 됩니다.

프로젝트가 생성되면 위의 그림처럼 스크립트 코드를 제공합니다. HTML과 CSS를 다룰 줄 안다면 쉽게 사용할 수 있습니다. 저는 제 티스토리 블로그에 한번 적용해 보겠습니다.

위와 같이 HTML 편집 화면에서 해당 스크립트를 적용하고 CSS에는 title에 적용해 봤습니다. 간단하죠? ^^

그러면 위와 같이 기존 1번의 타이틀에 대해서, 좀 더 명확하게 보이는 2번의 타이틀처럼 바뀌게 됩니다. (역시 산돌 폰트가 예쁘네요 ^^)

실제로 산돌구름 웹폰트를 사용해보니 몇 가지 좋은 점이 있었습니다. 우선, 사용이 매우 쉽고 편리했다는 점입니다. 구매하는 과정이나, 웹사이트에 적용하는 과정이 간단해서 초보자도 쉽게 따라 할 수 있습니다. 또한, 트라이얼 버전을 통해 무료로 시험해볼 수 있다는 것도 큰 장점입니다. 이를 통해 원하는 글꼴을 미리 경험해볼 수 있어서 실제 구매 결정에 큰 도움이 될것 같습니다.

마지막으로 산돌구름 웹폰트를 다음과 같은 분들에게 추천드려 봅니다.

웹페이지나 블로그를 운영하면서 개성 있는 디자인을 원하는 분들.
웹사이트에 특별한 개성을 표현하고 싶은 분들.
저렴한 가격에 다양한 글꼴을 실험해보고 표현해 보고 싶은 분들.
디자인 프로젝트에 특별한 글꼴을 적용하고자 하는 웹 디자이너 분들.

산돌구름 웹폰트 사용 방법에 대한 동영상 가이드를 제공 하고 있네요. 참고하시면 도움이 될것 같아 링크 걸어봅니다.

이 포스팅은 해당 기업으로부터 소정의 원고료를 지원받았으나 최대한 객관적으로 작성했습니다.

nextjs(react)에서 tailwindcss와 구글폰트 연계해서 사용하기

어쩌다보니여기까지~ — Sat, 25 Nov 2023 15:01:53 +0900

Next.js를 사용할 때 스타일링으로 tailwindcss를 많이 사용할 것입니다. 또한 폰트로 Google Fonts도 많이 사용하게 되는데요. 구글 웹폰트를 사용하는 경우 보통 아래와 같이 CDN으로 구글에서 웹폰트를 불러와서 적용하는 방법을 많이 사용합니다.

<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR" />
    <style>
      body {
        font-family: "Noto Sans KR", serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

이럴 경우 사용이 편한 장점도 있지만 오프라인이거나 네트워크가 좋지 않은 환경에서는 단점으로 작용을 합니다. 그래서 Next.js에서는 폰트를 별도의 패키지로 만들어서 제공하고 있습니다. 이럴 경우 사용하는 것은 웹폰트를 사용하는 것만큼 쉽고 퍼블리싱 할 때 local로 해당 폴더만 가져가기 때문에 오프라인일 때도 웹폰트가 표현이 되는 장점이 있습니다.

Next.js에서 Google Fonts 적용하는 방법

패키지는 next/font/google이며 아래와 같이 적용할 수 있습니다.

import { Noto_Sans_KR } from 'next/font/google';

폴더와 파일 구조

제가 현재 사용하는 Next.js는 14버전입니다. 그리고 폴더 구조는 아래의 캡처화면을 참고하시면 됩니다.

styles에 fonts 폴더를 만들어서 font.ts에 폰트 패키지를 불러와서 설정하고 전체적으로 활용할 수 있게 했습니다.(폴더 위치는 자유롭게 사용하시면 됩니다.)
tailwindcss에서 폰트를 사용하는 것처럼 사용하기 위해서 tailwind.config.ts에 설정을 합니다.
layout.tsx에 일차 적용을 합니다. layout.tsx는 공통적으로 항상 처음 적용되는 tsx이며 웬만한 초기설정은 여기서 해줍니다.
page.tsx는 실제로 적용하는 방법입니다.

각 페이지마다 설명을 하도록 하겠습니다.

1. font.ts 설정하기

가장 처음 google fonts 패키지를 불러와서 설정하는 파일입니다.

// https://fonts.google.com/variablefonts 여기에서 Fonts를 찾아서 추가합니다.
import { Noto_Sans_KR, Single_Day } from "next/font/google";

// Font의 classnames를 합치는 공통 함수
const sumClass = (...classnames: string[]) => {
  return classnames.join(" ");
};

// noto_sans_kr에 Noto_Sans_KR 적용
const noto_sans_kr = Noto_Sans_KR({
  subsets: ["latin"], // preload에 사용할 subsets 또는 preload: false
  weight: ["100", "400", "700", "900"], // 사용할 wght 설정
  variable: "--noto_sans_kr", // tailwindcss에서 사용할 수 있도록 CSS 변수 방식 설정
  display: "swap",
});

// single_day에 Single_Day 적용
const single_day = Single_Day({
  weight: ["400"],
  variable: "--single_day",
  display: "swap",
});

// 폰트가 추가되면 여기에 ,(콤마)로 구분하여 추가함 - 외부에서 FontClassNames를 불러와 적용함
export const FontClassNames = sumClass(noto_sans_kr.className, single_day.variable);

여기서는 Noto_Sans_KR, Single_Day 폰트를 불러와서 FontClassNames에 배열로 설정한 상태입니다. 여기서 잘 보면... 첫 번째는 noto_sans_kr.className로 뒤에 .className으로 붙는 반면.. 두 번째는 single_day.variable로 뒤에 .variable이 붙습니다. 쉽게 말해서 .className은 fontFamily로 바로 반영이 되는 반면, .variable는 CSS 변수 방식으로 정의만 한 상태라 실제로 적용하기 위해서는 tailwindcss의 도움을 받아 별도 지정해야 합니다. 3번째 폰트를 추가한다면 .variable 형태로 추가해야 합니다.

2. tailwind.config.ts 설정하기

tailwindcss를 사용하지 않는다면 이 부분은 생략이 가능합니다. 사용할 경우는 아래의 설정을 해 놓으면 어디에서든지 Font를 자유롭게 사용할 수 있습니다.

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    fontFamily: {
      sans: ['var(--noto_sans_kr)'], // fonts.ts에서 variable로 설정한 CSS 변수를 불러와 적용합니다.
      happySans: ['var(--single_day)'], // fonts.ts에서 variable로 설정한 CSS 변수를 불러와 적용합니다.
    },
  }
  ...
}

3. layout.tsx 설정하기

13버전 이하에서 공통 마크업은 _document.tsx에 작성하고 공통 로직은 _app.tsx에 작성했었는데 14버전으로 넘어오면 모두 layout.tsx에서 작성하게 되었습니다. 그래서 Fonts를 공통으로 적용하기 위해서 layout.tsx에 적용합니다.

import { FontClassNames } from "@/styles/fonts/fonts"; // 설정한 fonts.ts에서 `FontClassNames` 불러옴

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={FontClassNames}>{children}</body>
    </html>
  );
}

<body>에 적용함으로써 전체적으로 해당 폰트가 적용됩니다.

4. page.tsx 설정하기

이제 tailwindcss로 원하는 페이지에 폰트를 적용하는 방법의 예입니다.

export default async function Confirm() {
  return (
    <main className="flex flex-col items-center ">
      <h1 className={"font-happySans"}>확인하였습니다.</h1>
    </main>
  );
}

위와 같이 font-happySans의 클래스로 적용하면 해당 폰트는 Single_Day 폰트가 적용되게 됩니다.

Nextjs(React)에서 Google Sheets를 데이터베이스로 사용할 수 있을까

어쩌다보니여기까지~ — Fri, 17 Nov 2023 14:23:58 +0900

영세한 개발자나 취미로 개발을 하는 사람이라면 항상 생각하는 것이 내가 개발한 웹서비스를 무료로 서버에 올려서 사용할 수 있을까? 라는 것입니다. 스태틱 한 웹서비스인 경우는 상대적으로 길이 많은데 데이터베이스까지 붙여야 한다면 이건 또 말이 다르게 됩니다. 고성능의 데이터베이스까지는 필요도 없는데 말이죠.

저도 이번에 Next.js(React)로 아주 간단한 웹서비스를 토이 프로그램으로 개발하기로 하면서 데이터베이스에 대해 문득 든 생각이 Google Sheets를 사용하면 되지 않으까?였습니다. 그래서 여기저기 이것저것 알아보다가 굳이 고성능이 필요하지 않다면 Google Sheets가 대안이 될 수도 있겠다고 판단하여 시도해 봤습니다. 결과는 어느 정도 성공적이어서 잊어버리기 전에 공유를 하려고 합니다.

Google Sheets의 데이터베이스에 대한 한계

Google Sheets를 데이터베이스 활용하기 위해서는 몇 가지 한계에 대해서 고려해 봐야 합니다.

데이터 동기화

Google Sheets를 데이터베이스로 사용하려면, Google Sheets API를 사용하여 데이터를 동기화해야 합니다. Google Sheets API는 제한된 트랜잭션을 지원하기 때문에, 데이터 동기화 과정에서 성능 저하가 발생할 수 있습니다.

데이터의 양

Google Sheets는 최대 1,048,576개의 행과 256개의 열을 지원합니다. 따라서 데이터양이 많을 경우 Google Sheets를 데이터베이스로 사용하기에는 적합하지 않습니다.

데이터 종류

Google Sheets는 텍스트, 숫자, 날짜, 시간 등 다양한 데이터 형식을 지원합니다. 하지만, JSON, XML 등과 같은 복잡한 데이터 형식을 지원하지 않습니다.

보안

Google Sheets는 기본적으로 공개되어 있습니다. 따라서, Google Sheets를 데이터베이스로 사용하려면, 데이터 보안을 위한 추가 조치를 취해야 합니다.

Google Sheets의 데이터베이스로 사용하기

위와 같은 한계에도 불구하고 사용하기로 했다면 아래와 같은 설정 작업이 필요합니다.

Google API 사용 신청

GCP(Google Cloud Platform) 프로젝트 생성

먼저 프로젝트를 하나 생성해야 합니다. 이 프로젝트에 계정을 추가하고 이 계정으로 API를 사용하게 됩니다. 아래 URL에 접속하여 신청할 수 있습니다.

https://console.cloud.google.com/projectselector2/apis/credentials

처음 사용한다면 먼저 서비스 약관에 대해서 승인을 해야 합니다. 승인이 완료되었다면 이제 프로젝트를 하나 생성합니다.

프로젝트 선택 버튼을 누릅니다.
우상단에 있는 새 프로젝트 버튼을 누릅니다.

프로젝트 이름은 임의로 넣어주면 됩니다.
만들기 버튼을 눌러주세요.

프로젝트에 계정 생성

프로젝트가 생성이 되었습니다.
이제 생성된 프로젝트에 계정을 하나 등록하고 이 계정으로 인증을 해야 합니다.

사용자 인증정보 메뉴를 선택합니다.
사용자 인증 정보 만들기 > 서비스 계정 을 선택합니다.

서비스 계정 ID는 임의로 작성하시면 됩니다.
완료 버튼을 눌러서 계정을 생성합니다. 이제 이 계정으로 인증해서 API를 사용할 수 있습니다.

키(Key) 인증방법 생성

계정까지 생성이 되었습니다.
이제 외부(Next.js)에서 Sheets API를 사용하기 위해서 키(Key)를 활용하면 됩니다. 그러기 위해서 키(Key)를 발급 받아야 합니다.

생성된 계정의 우측 끝에 있는 ...을 눌러줍니다.
키 관리를 선택합니다.

키 추가를 선택하고 새 키 만들기를 눌러줍니다.

키 유형으로 JSON을 선택합니다.
만들기 버튼을 클릭해서 생성해 줍니다.

그러면 이렇게 JSON으로 되어 있는 Key 파일을 다운로드하게 됩니다.

중요한 사항은 이 Key 파일을 잘 보관해야 합니다. 왜냐하면 보안을 위해 더 이상 웹사이트에서 동일한 Key를 받을 수가 없습니다. 유일하게 지금 다운로드한 파일 하나만 있습니다. 다시 받으려면 키 관리에서 새로 키를 발급을 받아야 합니다. 또한 다운로드한 파일도 잘 관리해야 합니다. 혹시나 유출되거나 공개된 Git에 올라가서 다른 사람이 가져가게 된다면 파국을 맞을 수도 있습니다.

Google Sheets API 서비스 활성화.

계정과 키(key)를 생성했으니 이제 이 계정으로 어떤 서비스의 API를 사용할지 선택해야 합니다. Google API의 종류는 정말 엄청 많은데, 그중에서 우리가 지금 사용해야 할 Google Sheets를 찾아서 활성화 해줘야 합니다.

좌측 상단의 햄버거 메뉴를 선택합니다.
메뉴 중 API 및 서비스 메뉴를 선택합니다.
라이브러리 메뉴를 선택합니다.
라이브러리 화면의 검색창에 google sheets api로 검색을 합니다.

찾은 화면에서 사용 버튼을 눌러서 활성화를 시켜 줍니다.

Googoe Sheets 사용 권한 등록

API쪽에서의 처리는 다 되었습니다.
이제 이 API 계정이 해당 Google Sheets에 대해 편집자 권한을 가질 수 있게 등록을 해줘야 Write를 할 수 있습니다.
이 계정을 확인할 수 있는 방법은 이 계정의 이메일 주소이기 때문에 이 이메일 주소를 Google Sheets의 공유자에 등록을 해줍니다.

이메일 주소는 이전에 봤던 화면에서 서비스 계정 메뉴에 있거나 좀 전에 다운로드한 Key.json 파일 안에 있습니다.

사용할 구글 시트를 하나 만들고 위의 이메일 주소를 편집자 권한으로 등록해 줍니다.

우측 상단에 있는 공유 버튼을 눌러줍니다.
주소 란에 위에서 확인한 계정의 이메일 주소를 넣어 줍니다.
권한을 편집자 권한을 주어서 쓰기가 가능하도록 해줍니다.
전송을 눌러서 등록해 줍니다.

이제 해당 계정의 API로 이 시트에 내용을 쓰거나 읽을 수 있게 되었습니다.

Google Sheet의 주소 표시줄에서 빨간색으로 칠한 코드 부분이 Document ID이며 이코드를 사용하여 API로 읽거나 쓸 수 있게 됩니다.

next.js에서 활용하기

이제 Google 쪽에서는 준비를 끝냈고 next.js(React) 쪽에서 세팅을 해주면 됩니다. Next.js는 설치되었다는 전제입니다.

Google Sheets를 편하게 사용하게 해주는 패키지(google-spreadsheet)

실력만 좋다면 전용 라이브러리 없이 googleapis 만으로도 사용이 가능하긴 합니다만 그렇지 못한 사람들을 위해 Theo Ephraim라는 분이 많은 사람들이 좀더 편리하게 사용할 수 있도록 google-spreadsheet를 만들어서 github에 배포를 해주었습니다.(감사합니다) 이것을 활용해 보겠습니다.

아래 패키지를 설치해 줍니다.

Google Sheet를 쉽게 사용할 수 있게 해주는 패키지입니다.

패키지 매니저가 npm인 경우 : npm i google-spreadsheet --save
패키지 매니저가 yarn인 경우 : yarn add google-spreadsheet

Google에 JWT로 인증을 할 수 있게 해주는 패키지입니다.

패키지 매니저가 npm인 경우 : npm i google-auth-library --save
패키지 매니저가 yarn인 경우 : yarn add google-auth-library

코드 구조 설명

편집기는 VS code를 사용했습니다. 폴더의 위치에 대한 안내와 가장 중요한 google-spreadsheet를 사용하기 위한 사전 코딩에 대해서 먼저 말씀드리겠습니다. 이 코드는 제가 보기 편하게 작성한 것이기 때문에 본인에게 맞게 재 설정하셔도 됩니다.

라우터를 구성하는 app 폴더에 화면에 접근만 하면 바로 Sheet의 Row 읽기와 쓰기를 할 수 있는 코딩을 작성해 놨습니다.
중요한 부분으로 api 폴더에 googleSheet와 통신을 할 수 있는 코드가 있는 곳입니다. 바로 옆의 코드 내용이 있는 위치입니다.
key.json은 위에 서 다운로드한 json 파일의 긴 이름(test-sheet-project-40xxx-15xxx611.json)을 관리하기 편하게 이름을 변경해 놓은 것입니다.
본격적인 코드를 작성하기 전에 패키지를 import 한 부분입니다.

// src > core > api > googleSheet > pages.ts

import { GoogleSpreadsheet } from "google-spreadsheet"; // google-spreadsheet를 불러옵니다.
import { JWT } from "google-auth-library"; // Google에 JWT 인증을 위해 google-auth-library를 불러옵니다.
import credential from "../../../../key.json"; // 다운로드한 인증 key.json을 불러옵니다.
import { VAR_GOOGLE_SHEETS } from '@/core/constants/common'; // Sheets에 사용할 상숫값을 불러옵니다.
import {OrderRowData} from '@/@types/common'; // Typescript로 코딩하는지라 값에 대한 Type를 불러옵니다.
const SCOPES = ["https://www.googleapis.com/auth/spreadsheets"]; // 해당 API로 sheets를 손대겠다는 범위 설정입니다.
const documentID = "1DiS8M8T6R5duaRiMddaZ-Q-LeZKBENQSOM7bMtRbOz8"; // Sheet의 고유 문서 ID입니다.
const jwt = new JWT({ ... }); //JWT로 위에서 불러온 key.json 값을 대입해 넣습니다.

이렇게 기본 준비는 끝났고 이제 공통으로 사용하는 코드입니다.

공통 코드

문서 전체 불러오기

documentID에 해당하는 sheets의 내용을 모두 로드해오는 코드입니다. Read, Write 할 때 불러와서 사용합니다.

// src > core > api > googleSheet > pages.ts

//////////////////////////////////////////////////////
// 공통 : Google Sheets에 접속해서 Load 하기
///////////////////////////////////////////////////////
export async function loadGoogleSheet() {
  try {
    const doc = new GoogleSpreadsheet(documentID, jwt);
    await doc.loadInfo();
    return doc;
  } catch (error) {
    console.error("Sheet Load Rows Error:", error);
    throw new Error("Failed to Load Rows data.");
  }
}

불러온 문서 중 원하는 Row만 발췌하기

아래는 위에서 불러온 전체 문서에서 내가 선택한 시트(탭)에서 id(여기서는 "번호")에 해당하는 Row(한 줄)의 Index 값을 찾아내는 코드입니다.

// src > core > api > googleSheet > pages.ts

//////////////////////////////////////////////////////
// 공통 : 해당하는 행(Row) 불러오기
///////////////////////////////////////////////////////
export async function findRow(id: string) {
  try {
    const doc = await loadGoogleSheet(); // 문서 불러오기
    const sheet = doc.sheetsByTitle["주문리스트"]; // 문서에서 시트 이름에 해당하는 시트 선택하기
    await sheet.loadHeaderRow(10); // 헤더에 해당하는 INDEX 번호를 설정함
    const rows = await sheet.getRows<OrderRowData>(); // 해당 시트의 모든 rows를 불러옴
    const rowsLengh = rows.length; // 총 Rows의 개수
    const rowNumber = rows.findIndex((row) => row.get("번호") === id); // 번호가 id에 해당하는 값인 Row Index 번호를 발췌함
    return {rowsLengh, rowNumber, rows}; // 총 Rows 수, 현재 row의 Index 값, 현재 Sheet의 값을 전달함
  } catch (error) {
    console.error("Sheet find row Error:", error);
    throw new Error("Failed to find Row data.");
  }
}

문서 참조

코드를 작성하기 전에 Sheet를 간략히 설명드립니다.

Index 번호는 Sheet의 고유한 줄번호입니다. sheet.loadHeaderRow(10); 여기에서 10은 Index 10번째 줄을 헤더로 사용하겠다는 선언입니다. 만약 이 선언이 없다면 기본으로 Index 1번(첫 번째 줄)을 헤더로 사용하게 됩니다.

Header의 이름은 추후에 설명드리겠지만 미리 작성을 해놔도 되고 sheet.setHeaderRow(['해더이름1', '해더이름2',...], 10); 코드를 통해서 설정할 수도 있습니다.

하단의 시트(탭)의 주문리스트 이름을 doc.sheetsByTitle["주문리스트"]로 설정하여 해당 시트를 특정하게 됩니다.

Write(쓰기) 코드

이제는 아래의 코드를 활용하여 쓰기를 할 수 있습니다.

// src > core > api > googleSheet > pages.ts

//////////////////////////////////////////////////////
// Create : Google Sheets에서 해당 Sheet의 하단에 Row 데이터 추가
///////////////////////////////////////////////////////
export async function setRow(orderData: OrderRowData) {
  try {
    const doc = await loadGoogleSheet(); // 문서 불러오기
    const sheet = doc.sheetsByTitle["주문리스트"]; // 문서 중 특정 시트(탭)을 특정함
    await sheet.setHeaderRow(['번호','아이디','부서','이름', ...], 10); // 10번째 라인을 헤더로 설정하고 해더이름을 작성함
    const rows = await sheet.getRows<OrderRowData>(); // 해당 시트의 모든 rows를 불러옴
    const rowsLengh = rows.length; // 총 Rows의 개수
    const orderNo = rowsLengh + 1; // 총 Rows에서 1을 더해서 문서 번호를 생성함
    orderData.번호 = orderNo.toString(); // 배열에 생성된 문서 번호를 추가함(문자열로 추가함)
    const res = await sheet.addRow(orderData); // Google Sheets에 추가함
  } catch (error) {
    console.error("Sheet save Row Error:", error);
    throw new Error("Failed to save Row data.");
  }
}

// src > app > useSheet > write > page.tsx

import { setRow } from "../../../core/api/googleSheet/page";

export default async function Page() {
  const nowTime = new Date();
  const orderData = {
    // 임의로 값을 넣어서 테스트로 사용함
    번호: "", // 일련번호는 등록할 때 붙임
    아이디: "이름 + 전화번호",
    부서: "얍 부서",
    이름: "얍 이름",
    전화번호: "얍 전화번호",
    단가: 40000,
    주문수량: 5,
    주문금액: 200000,
    입금방법: "계좌이체",
    주문일: nowTime,
    수정일: nowTime,
    입금완료: false,
    입금완료일: nowTime,
    입금관리자확인: false,
    입금관리자확인일: nowTime,
    인수완료: false,
    인수완료일: nowTime,
    인수관리자확인: false,
    인수관리자확인일: nowTime,
    비고: "",
  };
  const orderRow = await setRow(orderData); // api의 write Fn으로 보냄
  return <div></div>;
}

브라우저에서 쓰기 URL을 호출하면 자동으로 쓰기가 실행됩니다.

http://localhost:3000/useSheet/write

아래와 같이 한 줄이 추가된 것을 확인할 수 있습니다.

Read(읽기) 코드

이제는 아래의 코드를 활용하여 특정 Row를 읽을 수 있습니다.

// src > core > api > googleSheet > pages.ts

//////////////////////////////////////////////////////
// Read : Google Sheets에서 해당 Sheet 중 ID와 일치하는 ROW를 불러옴
///////////////////////////////////////////////////////
export async function getRow(id: string) {
  try {
    // id는 문서 번호이며 해당 번호에 대한 Row의 Index 번호를 찾아 회신해 줌
    const { rowsLengh, rowNumber, rows } = await findRow(id); // 위의 공통 코드에서 불러옴

    // 회신 받은 Index 번호를 활용해서 Rows에서 Row 값을 불러와 데이터를 객체로 저장
    const orderRow: OrderRowData = {
      번호: rows[rowNumber].get("번호"),
      아이디: rows[rowNumber].get("아이디"),
      부서: rows[rowNumber].get("부서"),
      이름: rows[rowNumber].get("이름"),
      전화번호: rows[rowNumber].get("전화번호"),
      단가: rows[rowNumber].get("단가"),
      주문수량: rows[rowNumber].get("주문수량"),
      주문금액: rows[rowNumber].get("주문금액"),
      입금방법: rows[rowNumber].get("입금방법"),
      주문일: rows[rowNumber].get("주문일"),
      수정일: rows[rowNumber].get("수정일"),
      입금완료: rows[rowNumber].get("입금완료"),
      입금완료일: rows[rowNumber].get("입금완료일"),
      입금관리자확인: rows[rowNumber].get("입금관리자확인"),
      입금관리자확인일: rows[rowNumber].get("입금관리자확인일"),
      인수완료: rows[rowNumber].get("인수완료"),
      인수완료일: rows[rowNumber].get("인수완료일"),
      인수관리자확인: rows[rowNumber].get("인수관리자확인"),
      인수관리자확인일: rows[rowNumber].get("인수관리자확인일"),
      비고: rows[rowNumber].get("비고"),
    };

    return { rowsLengh, orderRow }; // 총 주문수, Row 값 // 불러온 Row의 값을 객체에 담아 Return 해줌
  } catch (error) {
    console.error("Sheet read Row Error:", error);
    throw new Error("Failed to read Row data.");
  }
}

브라우저에서 읽기 URL을 호출하면 자동으로 읽기가 실행됩니다.

http://localhost:3000/useSheet/read

위의 화면처럼 한 줄을 불러오는 것을 볼 수 있습니다. (이미지에서는 이름과 아이디만 표시되어 있음)

Update와 Delete도 쉽게 가능하니 그 부분은 직접 해보시기 바랍니다.

'시놀로지가 갑자기 켜지지 않아요' 해결방법

어쩌다보니여기까지~ — Tue, 7 Nov 2023 23:07:29 +0900

저는 시놀로지로 DS918+을 사용합니다. 18년도 산이니까 대략 5년 정도 사용한 제품으로 보증기간이 끝난 제품인 거지요. 다시 말하면 이제는 제가 알아서 고쳐 써야 한다는 것이기도 하구요. 그 상황에서 이런 고장이 발생하니 좀 황당했습니다. 그래도 해결하는 방법이 비교적 간단했기에 다른 사람들을 위해 글로 공유를 하려고 합니다. 불행하게도 사진을 찍어놓지는 못했네요. 최대한 상황 설명으로 작성해 보겠습니다.

증상

어느 순간 NAS에 접속을 해보니 접속이 되지 않아서 살펴보니 NAS 전원이 꺼져있었습니다. 전원 버튼을 누르니 전원 LED(파랑)가 계속 깜박이다가 약 10~20초 후에 바로 전원이 꺼져버립니다. 전원이 들어와야 로그를 보던 상태를 보던 할 텐데 처음부터 NAS가 켜지지 않으니 난감하더라구요.

인터넷 서칭을 해보니 모든 주변기기와 하드웨어를 제거해 보고 하나씩 붙여가면서 테스트를 해보라고 해서 SSD도 제거하고 USB도 제거하고 다시 켜봐도 동일한 증상이었습니다. 마지막으로 하드디스크 4개를 모두 뽑아놓고 전원을 켜봤습니다. 그랬더니 좀 다른 증상이 나타났습니다. 전원은 정상적으로 들어왔습니다. DSM에 접속을 하면 하드디스크가 없다는 화면이 나오기는 했습니다. 말하자면 켜지긴 한 것이지요. 그 상태에서 하드디스크를 하나 껴봤습니다. 그랬더니 또 바로 전원이 꺼져버렸습니다.

해결 방법

하드를 하나 꼽자 꺼졌다는 것은 전원이 모자라서 그럴 수도 있겠다는 생각이 들었습니다. 그래서 어댑터의 고장을 의심하게 되었고 어댑터의 출력을 멀티 테스터로 체크를 해보았는데 12V가 나오지 않는 것이었습니다. 그래서 어댑터의 고장을 확신하고 어댑터를 구매하게 되었습니다.

위의 문제로 시놀로지에 문의했고 아래와 같은 답변을 받았습니다. 참고하세요.

발생한 문제와 관련하여 근본 원인을 파악하는 데 도움이 되도록 초기 문제 해결 확인을 수행하시기 바랍니다.

AC 전원(110V 또는 220V)이 안정적인지 확인하고 연결된 UPS 장치가 있으면 제거합니다. 전원 플러그는 벽면 콘센트에 직접 연결해야 합니다. 연장 코드를 통해 연결하지 마십시오. 케이블/와이어 및 커넥터가 손상되거나 파손되지 않았는지 확인하십시오.

위의 해결 방법을 수행했는데도 문제가 계속되는 경우,

Synology 제품과 관련하여 발생한 문제에 대해 진심으로 사과드립니다. 당사의 판매 및 수리/교체 서비스는 모두 파트너에게 맡기기 때문입니다. NAS의 보증 상태를 확인하고 한국 공급업체에 직접 연락하여 서비스를 요청하세요.

[보증 상태 확인 방법]

모델 DS918+의 보증 기간은 3년입니다. 제품 보증은 유효한 판매 기록에 따라 구매일로부터 시작됩니다. (예: 송장 또는 구매 증명) 제품 보증 및 정의 방법에 대한 자세한 내용은 http://sy.to/rwmyo 를 방문하십시오.

[기기 보증 기간이 지난 경우] 기기가 RMA 서비스 대상이 아님을 알려드리게 되어 유감입니다. 유료 수리 서비스를 제공할 수 있는 공인 서비스 제공업체에 문의하십시오. 여기에서 공인 공급업체를 찾으세요. http://sy.to/xncxx

장치를 수리할 수 없는 경우 예비 데이터 복구 권장 사항을 고려하십시오. 다른 Synology NAS를 통해: Synology NAS 간에 마이그레이션하는 방법(DSM 6.0 이상) https://sy.to/bvpuv

PC를 통해: Synology NAS가 오작동할 때 PC에서 데이터를 복구하는 방법(Ubuntu 버전 18.04에 해당) https://sy.to/ddkyb

구매 제품

네이버에 검색을 해보니 이런 일이 자주 있는지 여러 곳에서 시놀로지 어댑터를 팔고 있었습니다. 정품은 중국산 제품인데 반해서 호환 제품은 한국산 제품으로 특이하게 호환 제품이 더 안심이 되었습니다. ㅎㅎ

시놀로지의 제품별로 사용되는 어댑터의 전원이나 전류가 다르고 어댑터 단자도 다르기 때문에 꼭 본인의 모델명으로 검색을 해서 구매하는 것을 추천합니다.

구매할 때는 꼭 기존 어댑터의 OUTPUT의 전압과 전류를 확인하고 동일한 값인지 꼭 확인하고 구매를 하셔야 합니다.

저는 아래의 제품으로 구매를 했습니다.

http://itempage3.auction.co.kr/DetailView.aspx?ItemNo=C809476327&frm3=V2

와아!! 신난다!! 어댑터를 교체하니 정상적으로 다시 NAS가 켜졌습니다.

Google의 할 일 관리 서비스인 Tasks를 아시나요?

어쩌다보니여기까지~ — Tue, 7 Nov 2023 22:02:51 +0900

저는 구글의 서비스를 사용하는 것을 좋아합니다. 인터넷이 있다면 어디에서나 작업할 수 있고, 거의 실시간으로 모든 기기에서 동일한 서비스를 이용할 수 있기 때문입니다. 게다가, 헤비유저가 아니라면 무료로 사용할 수 있는 많은 서비스도 있구요. 저는 할 일을 관리하기 위해 구글 Keep을 사용했습니다. 하지만 Keep은 무언가를 마구 적는 데는 좋지만, 할 일을 관리하는 데 불편한 점이 있었습니다. 구글에는 할 일을 관리할 수 있는 Tasks라는 서비스가 있습니다. 이전에는 할 일을 관리하는 데 몇 가지 단점이 있었지만, 이제 다시 살펴보니 내가 원하는 수준으로 사용할 수 있는 방법이 있어서 소개를 하려고 합니다.

Google Tasks

Google Tasks는 구글 서비스 중에서 약간 기생하는 서비스 같은 느낌의 앱입니다. 기본 Tasks는 별도의 Standalone은 없고 Gmail, Calendar, Chat, Drive, Docs, Sheets, Slides 같은 Google Workspace 서비스 화면의 우측에 탭 형태로 붙어 있습니다. 처음에 저는 이것 때문에 Tasks 사용을 꺼렸었는데요.

이 부분을 극복할 수 있는 크롬 익스텐션을 발견하게 되어 현재는 저의 주요한 할 일 관리 프로그램이 되었습니다.

Google Tasks의 사용성

화면이 우측에 기생했다 뿐이지 사용성 자체는 좋습니다. 할 일을 추가하거나 할 일에 마감일을 설정할 수도 있고 한 단계 Depth를 낮출 수도 있습니다. 완료된 할 일은 자동으로 가려졌다가 필요하면 다시 찾아볼 수도 있습니다. 할 일의 순서도 클릭-드래그로 자유롭게 이동을 할 수도 있습니다.

크롬 익스텐션으로 사용하기

Tasks가 어디에 기생하지 않고 독립적인 화면에서 사용할 수 있도록 홀로 서게 해주는 Standalone 익스텐션이 있습니다.

Fullscreen for googletasks

fullscreen for googletasks, TasksBoard for Google 등 이런 류의 익스텐션이 몇 개 더 있지만 사용해 본 결과 저에게는 fullscreen for googletasks 익스텐션이 더 잘 맞아서 이것을 선택했습니다.

구글 크롬 브라우저의 익스텐션인 만큼 구글 크롬을 사용하셔야 합니다.

익스텐션 위치
https://workspace.google.com/marketplace/app/google_tasks_standalone/845259613276?hl=ko

익스텐션을 설치합니다. 설치 후 접근을 하면 처음에는 예시 화면이 나오지만 Google에 로그인을 하면 본격적으로 본인의 Google Tasks의 내용을 불러와서 동일하게 사용을 할 수 있습니다.

저의 Tasks 화면입니다.

화면 보기 모드

화면은 총 3가지의 보기 모드를 제공합니다.

화면의 우측 상단의 톱니바퀴 모양 설정을 누르면 3가지의 보기 모드를 선택할 수 있습니다.

1. 크롬의 탭 형태

일반적으로 브라우저의 탭 형태로 화면을 보고 사용할 수 있습니다.

2. 크롬 왼쪽 탭으로 고정

크롬 브라우저의 기능으로 항상 탭의 왼쪽에 고정이 되게 하는 것입니다. 크롬 브라우저를 열게 되면 자동적으로 같이 열리기 때문에 편리합니다. 저는 항상 크롬 브라우저를 띄워놓고 일을 해서 이렇게 세팅을 해 놓았습니다.

3. 단독 크롬 앱 형태

크롬의 기능 중 하나인 단독 앱 형태로 사용할 수 있습니다. 군더더기 없이 해당 서비스의 내용만 볼 수 있습니다.

4. 별도 앱으로 사용

맥 OS의 바탕화면이나 윈도즈의 바탕화면에 바로 가기 아이콘을 만들어서 사용할 수도 있습니다. 이것도 크롬 브라우저의 기능으로 가능한 형태입니다.

모바일 앱

데스크톱에서는 서드파티의 익스텐션으로 편리하게 사용할 수 있는데 모바일에서는 Google에서 직접 앱으로 개발하여 배포를 하고 있습니다. 모바일에서도 단독으로 편리하게 사용할 수 있어서 사용성이 좋습니다. 언제 어디서나 타스크를 관리할 수 있습니다.

Google Play 위치 : https://play.google.com/store/apps/details?id=com.google.android.apps.tasks&hl=ko

App Store 위치 : https://apps.apple.com/kr/app/google-tasks-%ED%95%A0-%EC%9D%BC-%EC%99%84%EB%A3%8C%ED%95%98%EA%B8%B0/id1353634006

간단한 사용법

Fullscreen for googletasks를 기준으로 간단한 Tasks 사용법입니다. Fullscreen for googletasks 익스텐션의 기능은 기본 Google Tasks의 기능을 그대로 사용하고 있습니다.

할 일 목록 만들기

먼저 할 일 목록을 만들어서 관리하는 것이 좋습니다. 저 같은 경우는 할 일 목록, 구매 목록, 중고 판매 목록으로 3개를 만들어서 사용하고 있습니다. 이 부분은 개인에 맞게 활용하시면 됩니다.

좌측의 + 버튼을 눌러서 할 일 목록을 추가할 수 있습니다.

할 일 추가

화면 아래에 있는 버튼을 눌러서 선택된 할 일 목록에 할 일을 추가할 수 있습니다.

할 일 제목을 입력합니다.
상세 내용을 입력할 수 있습니다. 필수 항목이 아니므로 생략할 수 있습니다.
마감일을 설정할 수 있습니다. 필수 항목이 아니므로 생략할 수 있습니다.
1. 만약 마감일을 설정하면 Google 캘린더에도 자동으로 등록이 됩니다.

활용하기

하위 목록으로 설정할 수도 있고 목록의 순서를 바꿀 수도 있습니다. 다른 목록으로 이동하는 것도 가능합니다.

이외에도 다양한 기능들을 활용할 수 있습니다.

할 일 관리 앱으로 매우 추천합니다.

디자이너라면 꼭 알아야할 컬러 조합 추천 색상 팔레트 웹사이트 8선

어쩌다보니여기까지~ — Mon, 6 Nov 2023 21:39:29 +0900

프로젝트를 시작할 때 색상에 대해서 쉽게 생각할 수 있지만 실제로 색상 팔레트를 설정하는것은 생각보다 어려울 수 있습니다. 예를 들어, 웹사이트를 만들 때 디자이너의 경험에 상관없이 어떤 색상을 사용할지 항상 어려운 과제입니다. 색상 팔레트 웹사이트는 이러한 경우에 어떤 안내를 제공해줍니다. 일부 서비스는 정확한 색상 정보를 받기 위해 웹사이트에 회원으로 등록해야 하고, 어떤 경우에는 회원으로 등록하지 않아도 유용한 정보를 제공해 주는 곳도 있습니다. 여기 몇 가지 이러한 색상 팔레트 서비스를 제공하는 웹사이트를 소개하겠습니다.

1. Colordot - A color picker for humans

URL : https://color.hailpixel.com

사람을 위한 색상 선택기라고 되어 있는데 이 서비스는 색상조합을 추천한다기보다는 디자이너가 색상조합을 쉽게 만든다에 초첨을 맞춘 서비스 입니다. 쉽게 색상을 선택하고 색상의 채도와 명도를 조절하여 색상조합 세트를 만들 수 있습니다.

위의 캡쳐화면처럼 마우스의 가로, 세로, 스크롤에 따라 색상과 밝기와 채도를 변경할 수 있습니다.

2. Adobe Color - 색상 휠, 색상 팔레트 생성기

URL : https://color.adobe.com/ko/create/color-wheel

역시 Adobe는 다른것 같네요. 예전에는 Adobe Kuler로 서비스를 했던것 같은데 지금은 명칭을 정상적인 스펠링으로 사용하고 있는것 같습니다.

기본적으로 색상환을 가지고 색상배색을 하는데, 기본적으로 유사, 단색, 삼각형, 보색 등등에 대한 추천 색상을 제시해 줍니다. 제시된 색상에서 커스터마이징을 하여 색상세트를 만들 수 있고 로그인을 한 상태라면 저장도 가능합니다. 거대 디자인회사에서 제공하는 서비스라 그런지 완성도면에서 매우 훌륭합니다.

3. ColorMagic | AI Color Palette Generator

URL : https://colormagic.app/?ref=toolai.io

ColorMagic은 단어를 입력하면 관련된 색상 팔레트를 제시해주는 AI 기반 툴입니다. 봄, 여름, 가을, 강아지, 숲과 같은 단어를 입력하면 관련된 색상을 한눈에 확인하실 수 있습니다. 회원 가입을 하지 않는 경우에는 3번까지만 이용하실 수 있다고 합니다. 놀랍게도, 이 서비스는 한글도 인식하여 상대적으로 정확한 색상 팔레트를 제공합니다. 이 서비스를 활용하시면 블로그나 웹사이트에 색감을 살리는데 도움이 될 것 같습니다.

4. Coolors - The super fast color palettes generator!

URL : https://coolors.co/palettes/trending

COOLORS는 다양한 색상 팔레트를 제공하며, 사용자들은 자신의 취향에 맞는 팔레트를 쉽게 찾을 수 있습니다. 또한, 팔레트에 좋아요를 눌러 인기를 얻을 수 있는 기능을 제공합니다. 무료로 이용 가능한 팔레트도 다양하게 제공되어 예술적 창의력을 자유롭게 표현할 수 있습니다. COOLORS는 사용자가 고유한 색상 조합을 생성할 수 있는 도구를 제공하며, 예술가와 디자이너의 창의성을 촉진합니다. 이 플랫폼은 색상의 세계를 탐험하고 예술적 비전을 현실로 만들기 위한 귀중한 도구로 사용됩니다.

5. LOL Colors - Curated color palette inspiration

URL : https://www.webdesignrankings.com/resources/lolcolors

해당 웹사이트는 웹디자인에 대한 랭킹을 제공하며, 여러 색상 팔레트에 대한 정보도 제공합니다. 기존에 설정된 여러 색상 팔레트에 대해 누구나 좋아요 랭킹을 부여할 수 있어요. 더 많은 좋아요를 받은 색상 팔레트을 선택하고 커스터마이징하여 사용한다면 매우 유용할 것 같습니다.

6. ColorPalettes.net - Color Palette Ideas

URL : https://colorpalettes.net

ColorPalettes.net은 광고가 다소 포함되어 있지만, 이미지를 기반으로 색상을 추출하여 자연스러운 색상 팔레트를 제공합니다. 기능은 다양하지는 않지만 자연스러운 컬러 코드를 찾는 데 유용하게 활용할 수 있습니다.

7. Color Hunt - Color Palettes for Designers and Artists

URL : https://colorhunt.co

이 서비스는 비교적 활용도가 뛰어난 색상 팔레트를 제공합니다. 별도의 회원가입 없이도 색상을 생성할 수 있을 뿐만 아니라, 다른 사용자가 만든 색상 팔레트를 수집할 수도 있습니다. 쿠키를 활용하여 정보를 저장하는 것으로 보입니다. 단어를 입력하여 관련된 색상 팔레트를 찾을 때도 유용한데, 관련 단어를 제시하면 그와 어울리는 색상 팔레트를 제공해줍니다. 또한 새로운 팔레트와 인기 있는 팔레트, 무작위 팔레트를 제공하여 활용도 면에서도 탁월하다고 생각됩니다.

8. ColorSpace - Color Palettes Generator and Color Gradient Tool

URL : https://mycolor.space

ColorSpace는 특정 색상을 선택하면 해당 색상과 조화를 이루는 다양한 컬러 팔레트를 제공해줍니다. 실제 웹사이트를 개발할 때 색상 아이디어를 찾는 데 매우 유용할 것으로 보입니다.

피그마에서 일러스트파일(ai)파일 불러오는 방법

어쩌다보니여기까지~ — Thu, 26 Oct 2023 16:57:19 +0900

피그마를 사용하다 보면 제목에서 말한 것처럼 일러스트레이터 파일인 ai를 불러와야 하는 경우가 있어요.
느낌적인 느낌으로 ai 파일도 벡터 기반 파일이고 일러스트레이터 파일도 벡터 기반 파일이므로 쉽게 불러와질 것 같지만 아쉽게도 불가능합니다.
illustator를 만든 회사가 Adobe라며.. Adobe가 피그마를 인수했다며.. 그렇다면 호환성 면에서도 바로 불러와져야 하는 거 아냐?
뭐 나중에야 가능하겠지만 당장은 불가합니다. 그래서 약간의 변환작업이 필요한데 수중에 Adobe 일러스트레이터 프로그램이 있다면 문제가 없겠지만 이것도 유료이므로 없는 경우도 많겠지요.
그래서 ai, eps 파일을 svg 파일로 무료 변환해 주는 웹서비스가 있어서 소개해드립니다.

파일 간 변화를 서비스해 주는 convertio

벡터 파일의 변환뿐만 아니라 문서, 동영상, pdf 등 300여 가지의 다양한 포맷의 형식을 읽어들여서 가능한 파일 포맷으로 변환을 해주는 웹서비스입니다.

https://convertio.co/kr

무료 서비스 내용

이 서비스는 일부 한정된 부분에 대해서 무료이고 그 이상을 원할 경우만 유료로 사용할 수 있습니다. 가끔씩 파일의 포맷을 변환해야 한다면 그냥 무료로도 충분히 사용할 수 있습니다.

무료 서비스의 한도

무료사용은 아래와 같은 한도가 있습니다.

최대 파일 크기 : 각 파일당 100MB 이하
지난 24시간 동안 변환 수 : 최대 파일 10개 이하
동시 변환 수 : 2개

사용방법

https://convertio.co/kr 으로 이동하세요.

빨간색 버튼을 클릭해서 변환을 원하는 파일을 선택하세요. 컴퓨터에 있는 파일뿐 아니라 드롭박스나 구글 드라이브에 있는 파일도 변환이 가능해요

저는 이렇게 네이버의 버튼들이 모여있는 ai 파일을 선택했어요.

ai 파일을 어떤 파일로 변환하기를 원하는지 약 300여개의 포맷 중 선택을 하면 돼요. 피그마에서 사용하려면 SVG로 변환하면 돼요.

이제 변환 버튼을 클릭하세요 파일은 서버에 올라가서 변환이 되기 때문에 너무 큰 파일을 변환하려면 업로드 시간이 오래 걸릴 수도 있고 유료로 서비스에 가입을 해야 할 수도 있어요

조금 기다리면 위와 같이 변환이 완료되고 다운로드 버튼이 보입니다. 이 버튼을 눌러 로컬 컴퓨터에 다운로드를 해서 사용하면 됩니다.

이제 피그마에서 변환된 SVG 파일을 불러와서 사용하면 됩니다. 참~ 쉽죠?

피그마 실무에서 가장 유용한 플러그인 리스트

어쩌다보니여기까지~ — Wed, 27 Sep 2023 00:27:14 +0900

피그마에 힘을 더해주는 실무에서 많이 사용하는 플러그인에 대해서 정리를 해 볼까 합니다.

피그마 플러그인 적용 방법

피그마의 플러그인 적용 방법은 매우 쉽습니다. 플러그인을 별도로 설치하는 개념이 아니고 커뮤니티에 있는 플러그인을 단지 찾아서 실행시킨다는 개념입니다. 경우에 따라서 플러그인에 회원가입을 해야 하는 경우도 있습니다.

상단 도구 메뉴에서 Resources 메뉴를 선택합니다.
탭 메뉴 중 중간에 있는 Plugins 탭을 선택합니다.
Search all plugins의 검색창에 원하는 플러그인 명을 입력하고 검색을 합니다.

원하는 플러그인이 나타나면 우측에 있는 Run 버튼을 클릭하면 됩니다.

피그마의 유용한 플러그인들

Annotate it

이 플러그인은 기획자용 툴입니다. 화면에 번호 주석을 달아서 설명하는 용도로 사용됩니다.

와이어 프레임에 쉽게 주석을 달거나 스마트한 방식으로 디자인할 수 있습니다. 프레임을 선택하고 새로 추가를 클릭하면 자동으로 주석이 생성됩니다.

주석을 달 때 마크다운 문법을 사용하기 때문에 쉽게 글을 작성할 수 있습니다.

플러그인 위치 : https://www.figma.com/community/plugin/859894273811051899/annotate-it

Brandfetch

이름에서도 알 수 있듯이 전 세계의 각종 브랜드의 로고와 심벌, 아이콘, 서체 등을 찾아서 사용할 수 있는 플러그인입니다. 모든 브랜드 로고를 다 섭렵할 수는 없겠으나 잘 알려진 대표적인 브랜드는 잘 찾아내는 것 같네요.

플러그인 위치 : https://www.figma.com/community/plugin/733590967040604714/brandfetch

Iconify

Iconify는 수많은 무료 아이콘을 찾아서 사용할 수 있는 플러그인입니다. 피그마에 아이콘 관련 플러그인은 매우 많지만 Iconify가 가장 많은 아이콘과 편리한 사용성으로 피그마에서는 필수 아이콘 플러그인이라고 할 수 있습니다.

플러그인 위치 : https://www.figma.com/community/plugin/735098390272716381/iconify

Material Design Icons

구글에서 제작하여 무료로 제공하는 아이콘 플러그인입니다. 플러그인은 Icons8 Team에서 제작해서 올려놓은 것 같네요. 그래서 구글의 아이콘과 Icons8의 아이콘이 같이 있습니다. 말이 필요 없는 아이콘 셋입니다.

플러그인 위치 : https://www.figma.com/community/plugin/740272380439725040/material-design-icons

Streamline icons, illustrations, Elements, Emoji

Streamline icons도 아이콘을 제공하나 그 외에 illustrations, Elements, Emoji 등도 제공하고 있어서 필요한 경우 요긴하게 사용할 수 있는 플러그인입니다.

플러그인 위치 : https://www.figma.com/community/plugin/852192486284901337/streamline-icons-illustrations-elements-emoji

3dicons

3dicons는 3D 형태의 아이콘을 찾아서 적용할 수 있게 해주는 플러그인입니다. 3D인 만큼 1400여 개 정도의 아이콘을 제공하고 있어서 다양하다고는 할 수 없지만 잘 찾으면 높은 퀄리티의 아이콘 이미지를 사용할 수 있게 해 줍니다.

플러그인 위치 : https://www.figma.com/community/plugin/1107546399747513238/3dicons

Remove BG

선택한 이미지의 배경을 지워주고 오브젝트만 추출해 주는 플러그인입니다. 다 좋은데 귀찮게 회원가입을 하고 API Key를 발급받아 입력해 줘야 합니다. 성능이 좋은 만큼 필요하다면 가입해서 이용해 보기를 추천합니다.

플러그인 위치 : https://www.figma.com/community/plugin/738992712906748191/remove-bg

Unsplash

매우 유명한 무료 이미지를 찾아 입력해 주는 플러그인입니다. 피그마를 사용한다면 필수로 사용하는 플러그인입니다.

플러그인 위치 : https://www.figma.com/community/plugin/738454987945972471/unsplash

Unsplash Avatars

Unsplash에서 제공하는 플러그인으로 아바타로 사용할 사람 이미지를 쉽게 넣을 수 있는 플러그인입니다.

플러그인 위치 : https://www.figma.com/community/file/768076317731510334/unsplash-avatars

Figma walker

Figma walker는 현재 페이지에서 프레임과 구성 요소를 검색하고 선택해서 바로 이동할 수 있게 하는 플러그인입니다. 페이지와 프레임이 많아지면 매우 유용하게 사용할 수 있습니다.

피그마에 검색 기능이 강화되면서 유용성이 약간 퇴색되기는 했지만 그래도 손에 익으면 매우 편리하게 작업을 할 수 있습니다.

플러그인 위치 : https://www.figma.com/community/plugin/732773762837487095/figma-walker

Contents reel

피그마로 디자인할 때 무의미하지만 필요한 Dummy 텍스트와 Dummy 이미지, 아이콘 등을 쉽게 넣을 수 있게 해주는 플러그인입니다. 이것도 거의 필수 플러그인입니다.

플러그인 위치 : https://www.figma.com/community/plugin/731627216655469013/content-reel

Lottiefiles

피그마에서 Lottiefiles을 쉽게 사용할 수 있습니다. 로티 파일은 애니메이션 GIF나 SVG로 간단한 반복 애니메이션 이미지를 제공해 줍니다. 그래서 보통 화면이 로딩될 때나 간단한 aniGIF를 사용할 때 주로 사용됩니다. 약 80,000개 정도가 제공된다고 하네요.

플러그인 위치 : https://www.figma.com/community/plugin/809860933081065308/lottiefiles

Instance finder

피그마에 사용된 단일 인스턴스 또는 구성 요소를 선택하면 플러그인이 모든 페이지와 모든 프레임을 검색하고 사용된 모든 인스턴스 목록을 생성합니다.

플러그인 위치 : https://www.figma.com/community/plugin/741895659787979282/instance-finder

피그마의 꽃 오토 레이아웃 사용법

어쩌다보니여기까지~ — Sat, 23 Sep 2023 23:40:55 +0900

피그마 편집의 꽃이라 할 수 있는 오토 레이아웃입니다.

오토 레이아웃은 디자인 요소를 자동으로 배열하고 정렬하는 강력한 기능입니다. 이를 사용하면 웹 페이지, 모바일 앱 및 기타 사용자 인터페이스 디자인을 쉽게 조작하고 관리할 수 있습니다. 오토 레이아웃의 주요 특징은 다음과 같습니다

요소 정렬: 오토 레이아웃을 사용하면 요소를 수평 또는 수직으로 정렬할 수 있습니다. 이렇게 하면 텍스트, 이미지 또는 버튼과 같은 요소들을 쉽게 정렬할 수 있습니다.
크기 조절: 요소의 크기를 자동으로 조절할 수 있습니다. 이로써 다양한 화면 크기 또는 내용에 맞게 요소의 크기를 조정할 수 있습니다.
자동 스크롤: 만약 요소가 공간을 벗어나면 자동으로 스크롤이 생성됩니다. 이로써 긴 목록이나 페이지를 만들 때 효과적으로 사용할 수 있습니다.
반응형 디자인: 오토 레이아웃을 사용하면 디자인이 유동적으로 변할 수 있습니다. 이로써 다양한 디바이스 크기나 내용에 맞게 디자인을 조절할 수 있습니다.

오토 레이아웃은 디자이너들에게 레이아웃 작업을 간소화하고 일관성을 유지하는 데 큰 도움을 줍니다. 디자인 요소들을 더 빠르고 효율적으로 배치하고 관리할 수 있으므로 협업과 프로젝트 관리에 매우 유용합니다.

오토 레이아웃 (Auto Layout)

설정

각각의 요소를 모두 선택하고 shift + A를 눌러 오토 레이아웃을 지정하면 디자인 패널에 아래와 같은 속성 설정 창이 나옵니다. 이 설정을 통해 다양하고 파워풀한 레이아웃 설정을 할 수 있습니다.

번호	이름	설명
1	Direction(방향)	각 아이템들이 가로 또는 세로로 정렬되게 지정
2	Spacing between items(아이템 간 간격)	각 아이템들 사이의 간격을 지정
3	Horizontal padding(가로 여백)	묶음의 왼쪽, 오른쪽의 여백을 지정
4	vertical padding(세로 여백)	묶음의 위쪽, 아래쪽의 여백을 지정
5	Individual padding(4각 개별 여백)	왼쪽, 오른쪽, 위쪽, 아래쪽의 여백을 각각 지정
6	Alignment(기준 정렬)	레이아웃을 늘리거나 줄일 때 기준이 되는 정렬 위치
7	Advnced auto layout settings(추가설정)	그 외 추가적인 설정

Absolute position.

일반적으로 오토 레이아웃을 지정하면 가로 방향 또는 세로 방향으로 일렬로 나열을 합니다. 하지만 아이템에 Absolute position를 지정하면 이 아이템은 레이어 한 단계 위로 절대위치로 지정할 수 있습니다.

해당 아이템을 선택하고 속성 패널의 우측 상단에 있는 1번 Absolute position 아이콘을 선택하면 2번 아이템이 일렬로 정렬되는 것이 아니라 절대 위치값으로 어디든 위치할 수 있게 됩니다.

Advanced auto layout

오토 레이아웃의 기본 속성 외에 잘 사용하지 않지만 중요한 속성을 한 단계 뒤로 숨겨놓았습니다.

먼저 오토 레이아웃 요소를 선택합니다.
Advanced auto layout 아이콘을 선택합니다.

3. Strokes

Border의 값을 간격에 포함할지, 말 지 선택할 수 있습니다.

Included in layout를 선택하면 Border 값을 간격에 포함합니다.
Excluded from layout를 선택하면 Border 값을 간격에서 제외합니다.
친절하게 샘플 이미지를 보여줍니다.

4. Canvas stacking

아이템들의 전후 순서를 설정할 수 있습니다.

First on top을 선택하면 첫 번째 아이템이 가장 위에 올라옵니다.
Last on top을 선택하면 마지막 아이템이 가장 위에 올라옵니다.
친절하게 샘플 이미지를 보여줍니다.

5. Align text baseline

정렬의 기준을 중앙으로 할지 텍스트를 기준으로 할지 설정합니다.

-를 선택하면 아이템들이 모두 중앙으로 정렬이 됩니다.
V를 선택하면 아이템들이 텍스트의 하단 베이스라인에 맞추어서 정렬이 됩니다.

auto layout resizing

아이템을 정렬하고 리사이징을 할 경우 각 아이템들이 어떻게 사이즈 반응할지에 대한 설정을 할 수 있습니다.

먼저 오토 레이 아웃된 아이템을 선택합니다. 그러면 좌측 디자인 창에서 Frame 속성에서 Horizontal resizing, Vertical resizing로 수평 수직의 설정을 할 수 있습니다.

Horizontal resizing를 Fixed로 설정을 하면 고정 값이므로 크거나 작거나 지정된 값으로 크기가 정해집니다.
Horizontal resizing를 Hug로 설정을 하면 Auto layout로 묶은 아이템들은 모두 포함이 됩니다.

Fill container는 크기가 유동적으로 변형이 됩니다.

1번을 Fill container로 설정하고 2번을 Fixed width 설정을 한 상태에서 반응형 웹처럼 크기를 조정하게 되면 1번 아이템은 유동적으로 크기가 변경되며 빈 공간을 꽉 채우게 됩니다. 다시 말하면 반응형 웹에 사용되는 Auto Layout이라고 보시면 됩니다.

피그마의 컴포넌트 프로퍼티(Property)와 베리언트(variants) 사용법

어쩌다보니여기까지~ — Fri, 22 Sep 2023 17:45:34 +0900

이전 포스팅에서 피그마의 컴포넌트에 대해서 포스팅을 했었습니다. 만약 피그마의 컴포넌트에 대해서 잘 모르시면 아래 링크를 먼저 읽어보시는 것이 좋습니다.

피그마의 컴포넌트로 구현하는 아토믹 디자인

피그마에서 가장 중요하고 이해가 필요한 것이 컴포넌트 프로퍼티(Property)와 베리언츠(Variants), 오토 레이아웃입니다.

한글로 번역하면..

프로퍼티(Property) - 속성 : 인스턴스의 디자인 패널을 통해 미리 마스터 컴포넌트에 설정해 놓은 속성(Property)을 선택 또는 입력으로 지정한 변형을 줄 수 있음
베리언츠(Variants) - 변형 : 몇 개의 마스터 컴포넌트를 베리언츠로 하나로 묶어서 설정하며 인스턴스로 사용할 때 디자인 패널에서 그 중 하나를 선택하여 사용함

마스터 컴포넌트를 생성하고 인스턴스를 복제하여 사용할 때 미리 세팅해 놓은 속성이나 베리언츠의 설정으로 인스턴스에 제한된 변형을 줄 수 있습니다.

예를 들면, 버튼의 on/off의 형태나, 버튼의 위계 구분 등에 활용할 수 있습니다.

컴포넌트의 프로퍼티(Property)

하나의 컴포넌트에 3종류(Boolean, Instance swap, Text)의 프로퍼티가 있으며 이 프로퍼티를 여러 번 사용하면서 여러 건의 프로퍼티를 만들 수 있습니다. 프로퍼티의 설정은 컴포넌트 하위의 요소를 선택하고 3개의 프로퍼티 중 하나를 선택하여 설정하면 됩니다.

Boolean : 컴포넌트 요소에 대해 True/False로 2가지 값을 가짐
Instance swap : 컴포넌트 요소에 대해 다른 요소로 바꿔치기할 수 있음
Text : 사용된 글씨를 변경할 수 있음

아래와 같이 마스터 컴포넌트에 Text 프로퍼티와 Boolean 프로퍼티를 지정하였습니다.

이렇게 설정된 프로퍼티의 사용은 인스턴스로 사용될 때 디자인 패널에서 지정된 속성값을 선택하면서 사용이 가능합니다. 아래와 같이 Title과 ShowIcon의 설정을 변경하며 사용할 수 있습니다.

컴포넌트의 베리언츠(Variants)

베리언츠는 위에서처럼 생성한 마스터 컴포넌트들을 여러 개 묶어서 하나의 베리언츠로 만들 수 있습니다. 베리언츠는 보라색 점선 테두리로 하나로 묶인 것처럼 표시를 합니다.

베리언츠로 묶인 각각의 마스터 컴포넌트들은 위에서 설정한 프로퍼티를 다르게 가지고 있습니다. (일반적으로 베리언츠로 묶인 컴포넌트들은 프로퍼티를 동일하게 맞춰서 사용하는 편이긴 합니다.)

이 베리언츠의 사용도 인스턴스로 사용될 때 디자인 패널에서 베리언트 컴포넌트를 선택하는 것으로 사용할 수 있습니다. 위의 그림에서는 2번째 베리언트 컴포넌트를 선택했네요.

결론

이 컴포넌트, 컴포넌트 프로퍼티, 베리언츠를 활용하여 아래와 같이 버튼 시스템 같은 UI 시스템을 만들어 놓고 필요할때 적용하여 사용합니다. 컴포넌트, 베리언츠를 사용하면 여러 사람이 동시에 디자인을 진행해도 동일한 UI를 구사할 수 있고 마스터 컴포넌트를 수정하게 되면 적용된 전체 인스턴스를 수정할 수도 있습니다. 컴포넌트로 아토믹 디자인을 구현하게 되는 것이지요.

피그마의 컴포넌트로 구현하는 아토믹 디자인

어쩌다보니여기까지~ — Fri, 22 Sep 2023 14:22:32 +0900

웹 및 앱 디자인의 세계에서는 효율성, 일관성 및 확장성이 가장 중요합니다. 최근 몇 년간 상당한 인기를 얻은 접근 방식 중 하나는 Figma 구성 요소를 사용한 아토믹 디자인 설계 구현입니다. 이 기사에서는 아토믹 디자인 개념, 이것이 Figma에 어떻게 적용되는지, 디자이너와 개발자에게 제공되는 이점에 대해 살펴보겠습니다.

아토믹 디자인이란 무엇입니까?

원자 설계(Atomic Design)는 브래드 프로스트(Brad Frost)가 도입한 방법론입니다. 재사용성과 일관성을 촉진하는 디자인 시스템을 만드는 체계적인 접근 방식입니다. 원자 디자인의 핵심 아이디어는 사용자 인터페이스를 더 작고 재사용 가능한 구성 요소로 나누는 것입니다. 개발자들에게 객체지향이 있다면 UX/UI 디자인에서는 아토믹 디자인이 있다고 보시면 됩니다. 이러한 구성 요소는 다섯 가지 수준으로 분류됩니다.

1. 원자(Atoms)

원자는 디자인 시스템의 기본 구성 요소입니다. 여기에는 Button, 입력 필드, 아이콘과 같은 개별 요소가 포함됩니다.

2. 분자(Molecules)

분자는 원자의 조합입니다. 이는 입력 필드와 버튼으로 구성된 검색 표시줄과 같은 보다 복잡한 UI 요소를 나타냅니다.

3. 조직(Organisms)

조직은 분자와 원자를 결합하여 탐색 표시줄과 같은 사용자 인터페이스의 기능적 섹션을 형성하는 상위 수준 구성 요소입니다.

4. 템플릿(Templates)

템플릿은 조직이 배치되어야 하는 위치를 나타내는 페이지의 레이아웃 구조를 정의합니다. 특정 페이지나 화면을 만들기 위한 청사진을 제공합니다.

5. 페이지(Pages)

페이지는 콘텐츠가 템플릿에 추가되어 완전한 사용자 인터페이스를 만드는 디자인의 최종 구현입니다.

Figma에서 Atomic Design 구현

Figma에서 아토믹 디자인을 구현하기 위해서는 컴포넌트라는 개념을 잘 이해하고 활용해야 합니다.

마스터 컴포넌트와 인스턴스

피그마에서 원자, 분자를 구현하기 위해 컴포넌트를 활용하게 됩니다. 마스터 컴포넌트를 하나 만들고 필요에 따라 마스터 컴포넌트의 복사품인 인스턴스를 생성하여 붙여 넣는 식입니다. 마치 홍길동의 분신술 같은 개념입니다. 이때 인스턴스에서 미리 설정한 속성의 변경에 따라 아이콘을 변경하던가, 텍스트를 변경하던가 하는 소소한 변경이 가능합니다.

인스턴스를 여러 개 만들어서 사용하고 있을 때 마스터 컴포넌트를 수정하게 되면 연결되어 있는 인스턴스들도 한 번에 수정이 되기 때문에 잘만 사용하면 활용성이 매우 좋습니다.

마스터 컴포넌트 만들기

마스터 컴포넌트 만드는 것은 매우 쉽습니다.

첫 번째 방법은 아래와 같이 컴포넌트화 시킬 요소를 모두 선택한 후 마우스 오른 클릭하여 Create component를 선택하는 방법입니다.

두 번째 방법은 아래와 같이 컴포넌트화 시킬 요소를 모두 선택한 후 화면의 상단에 있는 컴포넌트 생성 버튼을 클릭하는 방법입니다.

이렇게 생성된 마스터 컴포넌트는 무조건 1개만 존재하게 되고 복제된 인스턴스는 여러 개가 될 수 있습니다.

마스터 컴포넌트의 아이콘은 아래 그림의 1번과 같고 인스턴스의 아이콘은 2번과 같습니다.

개떡같이 그려도 찰떡같이 분석해주는 구글의 AI 마법 그림 도구 오토드로우( AutoDraw)

어쩌다보니여기까지~ — Mon, 18 Sep 2023 23:57:35 +0900

오토드로우(AutoDraw)는 구글이 개발한 인공지능 기반 그림 그리기 도구입니다. 이 도구는 사용자가 그림을 그릴 때 도움을 주며, 간단한 스케치나 그림을 입력하면 그림을 인식하고 관련된 그림과 그림 요소를 제안합니다. 오토드로우를 사용하면 더 전문적인 그림 작업을 하지 않고도 빠르게 그림을 만들 수 있습니다.

오토드로우(AutoDraw)의 주요 특징

인공지능 기반 그림 인식

오토드로우는 강력한 인공지능 기술을 기반으로 작동합니다. 사용자가 스케치한 그림을 실시간으로 분석하여 그림 요소를 인식하고 이에 맞는 제안을 제공합니다.

그림 제안

사용자가 그림을 그리는 동안, 오토드로우는 비슷한 형태나 주제의 그림 요소를 화면 하단에 제안합니다. 이러한 제안은 사용자가 원하는 그림을 찾는 데 도움이 됩니다.

간편한 수정과 추가

그림 요소를 선택하면 그림을 그리는 동안에도 쉽게 추가하고 수정할 수 있습니다. 이를 통해 사용자는 빠르게 그림을 완성하거나 아이디어를 개선할 수 있습니다.

저장 및 공유

오토드로우에서 만든 그림은 저장하거나 다운로드하여 컴퓨터나 모바일 기기에 보관할 수 있습니다. 또한, 생성된 그림을 손쉽게 공유할 수 있어, 다른 사람들과 협업하거나 소셜 미디어에서 공유하는 데 유용합니다.

무료 사용

오토드로우는 무료로 사용할 수 있으며, 계정 등록이나 구독을 요구하지 않습니다. 누구나 웹 브라우저를 통해 쉽게 접근하고 사용할 수 있습니다.

교육적 활용

오토드로우는 교육용 도구로도 활용될 수 있습니다. 학생들이 그림을 그리고 시각적인 아이디어를 표현하는 데 도움을 주며, 교사나 교육자들이 수업에서 활용하기에 좋습니다.

다양한 플랫폼에서 작동

오토드로우는 다양한 웹 브라우저에서 작동하며, 모바일 기기에서도 사용 가능합니다. 이로써 어디서나 그림 작업을 시작하고 완료할 수 있습니다.

오토드로우는 그림 그리기를 빠르고 쉽게 만들어주는 강력한 도구로, 비전문가부터 전문적인 그림 작가까지 다양한 사용자에게 유용합니다. 그림을 그리는 과정을 단순화하고 창의적인 시각적 표현을 촉진하는 데 도움이 되는 도구입니다.

무료 접속 웹사이트

https://www.autodraw.com

무료로 이미지의 배경을 제거해 주는 웹사이트

어쩌다보니여기까지~ — Sat, 16 Sep 2023 23:32:21 +0900

"remove.bg"는 배경을 자동으로 제거하는 온라인 도구입니다. 이 도구는 주로 사진 편집 작업을 수행하는 사용자들에게 매우 유용하며, 사진에서 불필요한 배경을 쉽게 제거하여 주요 주제를 강조할 수 있습니다. 아래는 "remove.bg"에 대한 주요 특징과 작동 방식에 대한 정보입니다:

자동 배경 제거: "remove.bg"는 사진을 업로드하면 인공 지능 (AI)을 사용하여 주요 주제를 식별하고 배경을 자동으로 제거합니다. 이를 통해 배경 제거 작업을 빠르고 효율적으로 수행할 수 있습니다.

온라인 사용: "remove.bg"는 온라인 서비스로 제공되므로 별도의 소프트웨어 설치나 다운로드가 필요하지 않습니다. 웹 브라우저에서 엑세스하여 사용할 수 있습니다.

다양한 이미지 형식 지원: "remove.bg"는 JPEG 및 PNG와 같은 다양한 이미지 형식을 지원합니다. 이로써 사용자들은 자신의 필요에 맞게 이미지를 업로드하고 배경을 제거할 수 있습니다.

무료 및 유료 옵션: "remove.bg"는 무료로 사용할 수 있는 옵션과 유료 구독 옵션을 제공합니다. 무료 옵션은 해상도가 제한되며, 더 높은 해상도 및 기타 고급 기능을 원하는 경우 유료 구독을 구매할 수 있습니다.

API 제공: "remove.bg"는 API를 제공하여 다른 애플리케이션 또는 웹 서비스에서 자동 배경 제거 기능을 통합할 수 있습니다. 이를 통해 개발자들은 자신의 소프트웨어나 웹 사이트에서 "remove.bg"의 기능을 활용할 수 있습니다.

"remove.bg"는 소셜 미디어 프로필 사진, 제품 사진, 웹 사이트 이미지, 광고 및 디자인 작업 등 다양한 분야에서 사용되며 편리하고 빠른 방식으로 배경을 제거하고 이미지를 수정하려는 사용자들에게 유용한 도구 중 하나입니다. 한글을 지원하고 있어서 쉽게 사용이 가능합니다.

원본 이미지를 아래와 같이 배경을 자동으로 쉽게 제거할 수 있습니다.

생각보다 쉽게 배경이미지를 삭제하고 투명하게 처리하거나 대체 배경이미지로 변경할 수 있습니다.

무료 접속 웹사이트

https://www.remove.bg/ko

커스텀 스킨의 애드센스와 티스토리 공식 애드센스의 충돌 문제 해결 했습니다.

어쩌다보니여기까지~ — Fri, 15 Sep 2023 19:07:56 +0900

안녕하세요. 오랜만에 스킨 업데이트(버전 3.0.1)를 진행했습니다. 이번 버전에서는 이전에 유료로 판매되던 Tskin을 무료로 제공하게 되었습니다. 이전의 유료 스킨이었던만큼 이번 업데이트는 완성도가 높은 스킨을 제공합니다.

티스토리 커스텀 스킨에서 애드센스 오류 발생 및 해결

이번 업데이트의 가장 주요한 특징은 애드센스 기능의 개선입니다. 이제 스킨 설정에서도 광고의 게시와 삭제를 토글버튼으로 쉽게 조절할 수 있도록 처리되었습니다.

문제 발생

티스토리 커스텀 스킨에서 애드센스 개선 과정 중 발생한 문제에 대해 설명드리겠습니다. 티스토리가 애드센스 광고를 공식적으로 적용하게 되면서, 공식 스킨이나 애드센스가 적용되지 않은 기존 스킨에서는 쉽게 광고를 추가할 수 있게 되었지만, 수동으로 애드센스 코드를 적용했던 스킨에서는 애드센스 충돌 문제가 발생한 것입니다.

원인

문제의 원인은 수동으로 애드센스를 개설할 때 생성된 client 코드와 티스토리 공식 애드센스를 적용했을 때 자동으로 생성된 client 코드가 다른 것입니다. 이는 하나의 웹페이지에 두 개의 client 코드가 존재하면서 문제가 발생한 원인으로 해석됩니다.

<!-- 티스토리에서 자동으로 생성되는 애드센스 코드 --> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-11111xxxxxxxxx" crossorigin="anonymous"></script>  <!-- 본인이 수동으로 작성한 애드센스 코드 --> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-22222xxxxxxxxx" crossorigin="anonymous"></script>

해결 방법은 2개의 client 코드 중 하나를 제거하는 방법과 아래에 말씀드린 또다른 한가지 방법이 있었습니다.

해결방법

첫번쨰 해결 방법

애드센스 문제를 해결하기 위한 첫 번째 방법은 수동으로 개설한 애드센스 코드를 제거하는 것입니다. 이렇게 하면 광고를 미세하게 조절할 수는 없지만, 문제를 쉽게 해결할 수 있습니다. 티스토리의 공식 애드센스 광고 위치는 나쁘지 않으며, 광고 위치를 크게 수정하지 않아도 됩니다.

그러나 반대로, 티스토리의 공식 애드센스 연동을 해제하고 수동으로 개설한 애드센스 코드만 적용한 경우에는 여전히 오류가 발생할 수 있습니다. 티스토리에서 공식 애드센스 연동을 하던 하지않던 무조건 client 코드를 삽입하는 것으로 보입니다. (코드를 어떻게 만드는 것인지 원...)

하지만 미세하게 조절이 필요한 경우도 있어서 수동 애드센스를 포기 못할 경우도 있겠지요.

두번째 해결 방법

두번쨰 해결방법이 현재 Tskin에 적용한 방법이고 애러는 제거되었으나 아직 영향도는 살펴봐야 합니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-11111xxxxxxxxx" crossorigin="anonymous"></script>  <!-- 아래의 코드를 수정해 주세요 --> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-22222xxxxxxxxx" crossorigin="anonymous"></script>

위의 코드 중 컨트롤이 가능한 수동으로 단 코드를 아래와 같이 수정하는 것입니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js crossorigin="anonymous"></script>

?client=ca-pub-22222xxxxxxxxx" 이 부분을 제거하는 것입니다.

위 방법을 통해 현재까지 애드센스 오류가 발생하지 않고 광고가 정상적으로 표시되고 있습니다. client 코드를 특정하지 않으면서 문제를 해결한 것으로 보입니다. 그러나 이 방법의 영향도는 좀더 살펴봐야 할듯 합니다.

결과

현재 UXGJS_Tskin_BASIC_V3-V3.0.1 버전에서 이 문제를 해결하였습니다.

Tskin BASIC 무료 배포

어쩌다보니여기까지~ — Mon, 11 Sep 2023 19:01:37 +0900

Tskin BASIC v3 무료 배포 화면으로 자동 이동합니다.

잠시만 기다려 주세요.....

Tskin BASIC V3 무료 배포 바로가기

자동으로 이동하지 않으면 위의 링크를 클릭해 주세요.

Tskin Basic 다운로드 및 버전 변경사항

어쩌다보니여기까지~ — Wed, 6 Sep 2023 18:33:50 +0900

Tskin Basic 라이선스

꼭!! 라이선스 상세내용에 대해 아래 더보기 버튼을 눌러 확인해 주세요.

이 라이선스는 Tskin Basic 스킨(이하 "스킨"이라 함)을 무료로 배포하는 조건과 제한사항을 상세하게 기술한 문서입니다. 이 라이선스를 준수하지 않으면, 스킨을 사용하거나 배포할 수 없습니다.

사용 허가
1. 스킨은 개인 또는 상업적인 목적으로 본인의 블로그에 무료로 적용하여 사용할 수 있습니다.
2. 필요한 경우 수정하여 사용할 수 있습니다.
제한 사항
1. 스킨을 판매하거나 상업적으로 사용할 수 없습니다. 본인의 블로그에만 적용할 수 있습니다.
2. 스킨을 수정하고 다시 배포하는 것은 금지됩니다.
3. 다른 웹사이트에 스킨을 호스팅하는 것 역시 금지됩니다.
배포
1. 스킨 파일은 다른 블로그나 카페 등 개별적으로 배포할 수 없으며 아래의 배포 URL을 통해서만 가능합니다.
2. 스킨을 소개하거나 배포가 필요한 경우 아래의 배포 URL의 링크를 공유해 주세요.
  1. 배포 URL : https://uxgjs.tistory.com/pages/Tskin-베이직-V3-배포
저작자 표시
1. 웹페이지 하단(푸터)에 있는 DESIGNED BY UX공작소 명칭과 링크는 어떠한 경우에도 삭제 및 변형할 수 없습니다.
2. 해당 저작자 표시를 가리거나 코드와 링크만 존재하고 색상을 변형하여 눈에 보이지않게 처리할 수 없습니다.
3. 저작자 표시는 존재하나 그 주위로 그림이나 문구를 통해서 오해할 만한 표시를 금지합니다.
스킨에 대한 권한
1. 스킨에 대한 모든 저작권과 권리는 해당 스킨의 개발자(UX공작소)에게 속합니다.
2. 스킨을 다운로드하고 사용하는 경우에 한해 스킨 사용에 대한 허가가 부여됩니다.
책임 제한
1. 이 스킨은 "있는 그대로" 제공됩니다. 스킨 사용으로 인한 어떤 문제나 손실에 대해 제작자는 어떠한 책임도 지지 않습니다.
2. 스킨을 사용하면서 발생한 예기치 못한 문제나 스킨 설명서를 따라하면서 발생한 문제, 스킨을 사용자화하면서 발생한 문제, 플러그인을 사용하면서 발생한 문제 등 어떠한 상황에서 발생 가능한 모든 문제는 운영자가 책임지지 않습니다.
3. 기술 지원은 불가합니다. 다만 오류나 추가 기능 요청 사항에 대해서는 차기 버전에 반영하도록 노력하겠습니다.
라이선스 변경
1. 라이선스는 언제든지 변경될 수 있습니다. 변경 사항이 발생하면 스킨 사용자는 즉시 새로운 라이선스 조건을 준수해야 합니다.
연락처 정보
1. 스킨에 대한 업데이트 알림이나 문의, 지원이 필요한 경우, 다음 게시판으로 문의하십시오
  1. 인스타그램 : https://instagram.com/uxuigjs?igshid=OGQ5ZDc2ODk2ZA==
  2. 오류/개선 요청 게시판 : https://uxgjs.tistory.com/228

이 라이선스는 2023-09-08에 작성되었으며, 스킨을 사용하는 모든 사용자는 이 라이선스 조건을 엄격히 준수해야 합니다. 이 조건을 어기는 경우, 스킨 사용을 중단해야 하며 스킨 사용 권한이 취소됩니다. 위반사항이 크다고 판단되면 고소를 진행 할 수 있습니다.

※ 라이선스 동의

이 스킨을 다운로드 받는 순간 위 라이선스 조건에 동의하는 것으로 간주합니다.

변경사항

V3.0.2 (2023.10.19)
- 대댓글 작성/수정 창 열기 오류 수정
- UXGJS_Tskin_BASIC_V3-V3.0.2.zip
V3.0.1 (2023.09.15)
- 애드센스 오류 수정
- 애드센스 설정 항목 추가 및 구성요소변경(on/off 기능 추가)
- CCL 정렬 수정
- UXGJS_Tskin_BASIC_V3-V3.0.1.zip
V3.0.0 (2023.09.11)
- 무료로 전환
- UXGJS_Tskin_BASIC_V3-V3.0.0.zip

스킨에 대한 업데이트, 공지 등은 당분간 오픈채팅방을 통해서 공유합니다.

UX공작소 오픈채팅방

모바일에서 UX공작소 오픈채팅방 바로가기

Tskin Basic 무료 배포

어쩌다보니여기까지~ — Mon, 4 Sep 2023 17:16:41 +0900

UX공작소

Tskin 베이직 V3

UXGJS_Tskin_BASIC_V3

Tskin Basic은 다양한 기능을 갖춘 Tistory 스킨으로, 이전 버전에는 유료였으나, Version 3부터 무료로 제공됩니다. 이제 사용자들은 다양한 스킨 기능을 무료로 이용할 수 있습니다.

기본 기능

다양한 홈커버 꾸미기를 할 수 있어요 상세설명

8가지 홈커버 아이템으로 티스토리 홈 화면을 자유롭고 다양한 모양으로 꾸밀 수 있습니다.

카드형 또는 리스트형으로 홈화면을 보여줄 수 있어요

2가지 형태의 티스토리 홈 설정으로 홈 화면을 카드형태의 리스트 보기와 일반 형태의 리스트 화면을 보여 줄 수 있습니다.

카테고리 앞에 멋진 아이콘을 달 수 있어요 상세설명

왼쪽 LNB(왼쪽 내비게이션 바)의 카테고리 이름 옆에 원하는 멋진 아이콘을 추가할 수 있습니다. 이 아이콘은 원하는 디자인으로 선택하여 카테고리를 시각적으로 더욱 풍부하게 표현할 수 있습니다.

서브 카테고리를 펼쳐 놓을 수 있어요 상세설명

처음 접속할 때, 하위 카테고리를 축소하거나 확장할 수 있는 옵션이 제공됩니다. 중요한 카테고리인 경우, 하위 카테고리를 확장하여 해당 카테고리의 내용을 더 자세히 살펴볼 수 있습니다. 이를 통해 사용자는 필요한 정보를 보다 효과적으로 찾고 활용할 수 있습니다.

본문에 자동으로 목차(TOC)를 표시해 줘요 상세설명

본문의 헤더 태그에 따라, 자동으로 우측에 목차 미니맵이 나타납니다. 이 미니맵은 본문의 내용을 헤더별로 시각적으로 보여주어 사용자가 내용을 효과적으로 탐색하고 이동할 수 있도록 도와줍니다.

멋진 댓글창이 있어요 상세설명

데스크톱 화면의 우측 공간을 활용하여 메신저 채팅 창 형식의 댓글 창을 표현함으로써 댓글에 더욱 친근한 분위기를 조성할 수 있습니다. 이렇게 하면 사용자들이 댓글을 더 쉽게 작성하고 소통할 수 있도록 도와줄 수 있습니다.

SNS 기능

네이버 이웃추가를 쉽게 구현할 수 있어요 상세설명

왼쪽 툴바 기능을 활용하여 네이버 블로그와 친구가 될 수 있는 기능을 추가했습니다. 이를 통해 내 블로그를 네이버 사용자들이 쉽게 블로그 네트워크에 추가하여 소통할 수 있습니다.

내 SNS를 보여줄 수 있어요 상세설명

블로그에서 운영 중인 소셜 미디어 계정을 링크로 제공하여 방문자들이 쉽게 접속할 수 있게 합니다. 이를 통해 다양한 채널을 활용하여 소셜 미디어를 효과적으로 운영하고 상호작용을 증가시킬 수 있습니다. 사용자들은 블로그를 통해 더 많은 정보와 소통 기회를 얻을 수 있습니다.

애드센스 기능

인피드 광고를 보여줄 수 있어요 상세설명

Tistory 블로그에 Infeed AdSense 광고를 간편하게 적용하여 목록 화면처럼 광고를 자연스럽게 노출시켜 클릭률을 높일 수 있습니다. 이를 통해 광고가 콘텐츠와 조화롭게 표시되어 사용자들의 더 높은 클릭률을 유도할 수 있습니다.

멀티플렉스 광고를 보여줄수 있어요 상세설명

Tistory 블로그의 본문 하단에 멀티플렉스 광고를 적용할 수 있으며, 이를 통해 독자들을 광고로 자연스럽게 유도할 수 있습니다.

댓글창에도 광고를 넣을 수 있어요 상세설명

독자들이 관심을 가지는 댓글 섹션에 광고를 배치하여 더 많은 클릭을 유도할 수 있습니다. 이러한 전략은 광고 콘텐츠와 독자들 간의 상호작용을 촉진하고 블로그 수익을 높이는데 도움을 줄 수 있습니다.

특별 기능 (태그 활용)

간단한 소통 게시판을 만들 수 있어요 상세설명

UX공작소에서 제작한 T스킨만의 장점으로 태그 기능을 활용하여 간단한 소통 게시판을 만들어 활용할 수 있습니다.

블로그에 작성된 이미지를 랜덤하게 전체화면으로 보여 줄 수 있어요 상세설명

UX공작소에서 제작한 T-Skin의 독특한 장점 중 하나인 태그 기능을 활용하여 본문에 사용된 이미지를 자동으로 무작위로 선택하여 본문의 첫 화면에 표시할 수 있어 블로그 글의 주목도와 친근함을 증가시킬 수 있습니다.

모든 티스토리 사용자에게 무료입니다.
지금 바로 다운로드하세요!

DOWNLOAD

피그마에서 Constraints 옵션 사용법

어쩌다보니여기까지~ — Thu, 24 Aug 2023 16:03:48 +0900

피그마 뿐아니라 대부분의 이미지 편집툴에서 공통적으로 활용되는 것이 Constraints라는 옵션입니다. 이게 보통 많이 봐와서 안다고 생각할 텐데 막상 모르고 사용하는 경우가 많아서 명확하게 정리를 한번 해보려고 합니다.

개념을 먼저 이해해야 하는데, Frame의 크기가 변경될 때 설정된 요소는 어떤 기준으로 움직이는지에 대한 설정입니다.

상세 옵션 설정

기본값은 가로(Horizontal)는 Left, 세로(Vertical)는 Top입니다.

기본값 ( 가로 : `Left`, 세로 : `Top`)

요소의 왼쪽부터 Frame까지의 거리가 고정이 되고 요소의 상단부터 Frame까지의 거리가 고정이 되어서 Frame의 크기를 변경하면 우측과 하단 부위의 넓이만 움직이게 됩니다.

오른쪽과 하단 고정 ( 가로 : `Right`, 세로 : `Bottom`)

요소의 오른쪽부터 Frame까지의 거리가 고정이 되고 요소의 하단부터 Frame까지의 거리가 고정이 되어서 Frame의 크기를 변경하면 좌측과 상단부위의 넓이만 움직이게 됩니다.

오른쪽, 왼쪽과 상단, 하단 고정 ( 가로 : `Left and Right`, 세로 : `Top and Bottom`)

요소의 오른쪽부터 Frame까지의 거리도 고정하고 요소의 왼쪽부터 Frame까지의 거리도 고정됩니다. 마찬가지로 요소의 상단부터 Frame까지의 거리가 고정되고 요소의 하단부터 Frame까지의 거리도 고정이 되어서 Frame의 크기를 변경하면 요소의 크기가 변경이 됩니다.

가로 중앙과 세로 중앙 고정 ( 가로 : `Center`, 세로 : `Center`)

가로, 세로 모두 중앙을 퍼센트 기준으로 정렬됩니다. 그래서 Frame을 변경하면 퍼센트 기준으로 현재 위치로 정렬이 됩니다.

가로 우측과 세로 중앙 고정 ( 가로 : `Right`, 세로 : `Center`)

이번엔 응용동작입니다.

요소의 오른쪽부터 Frame까지의 거리를 고정하고 요소의 중앙부터 Frame까지의 거리가 고정이 되어서 Frame의 크기를 변경하면 우측과 중앙 부위의 넓이만 움직이게 됩니다.

보통 GNB 영역에서 우측 햄버거 메뉴가 이런 식으로 적용이 된다고 생각하시면 됩니다.

만약 Left - Center라고 설정한다면 보통 GNB 영역에서 로고의 위치를 잡을 때 사용할 수 있겠지요.

피그마의 문서 구조는 어떻게 되나요?

어쩌다보니여기까지~ — Wed, 23 Aug 2023 17:52:04 +0900

포토샵으로 웹디자인과 모바일디자인같은 UI디자인을 하던 시대를 지나 맥킨토시 진영에서 스케치(Sketch)라는 걸출한 UI전용 툴이 탄생하면서부터 시작된 UI전용 툴의 춘추전국시대를 지나 현재는 피그마(Figma)가 UI툴 업계를 평정하는 양상입니다.

Figma는 UI 디자인 및 협업 도구로서 혁신적인 위치와 상태에 있습니다. 이전의 UI 도구들이 겪었던 한계와 문제점을 극복하여, Figma는 웹 기반의 협업 플랫폼으로 디자이너들이 함께 작업하고 디자인을 공유하며 시각화할 수 있는 기능을 제공합니다.

이제 Figma는 단순히 UI 요소만 디자인하는 도구를 넘어서, 디자인 시스템을 관리하고 유지할 수 있는 기능을 포함하고 있습니다. 디자인 시스템을 구축하고 유지하면서 일관된 디자인 언어를 유지하고 팀 간의 협업을 원활하게 진행할 수 있습니다.

또한 Figma는 디자인 프로토타이핑 및 애니메이션 기능을 강화하여, 정적인 디자인만이 아닌 상호작용과 움직임을 보여줄 수 있도록 도와줍니다. 이로써 디자이너들은 실제 사용자 경험을 더 잘 시뮬레이션하고 고객들에게 더 생생한 느낌을 전달할 수 있습니다.

Figma의 성공은 개발자와 디자이너 간의 강력한 협업을 촉진하고, 디자인 프로세스를 더욱 효율적으로 만들어 냄으로써 이루어졌습니다. 이제 Figma는 대부분의 큰 기업과 스타트업에서 필수적인 도구로 자리매김하며, 디자인 커뮤니티에서도 큰 영향력을 행사하고 있습니다.

요약하자면, 2023년 현재 Figma는 UI 디자인 뿐만 아니라 협업, 디자인 시스템 관리, 프로토타이핑 등 다양한 기능을 갖춘 혁신적인 도구로서 디자인 분야에서 중요한 위치와 영향력을 갖고 있습니다.

피그마의 문서구조에 대해서 알아보자

피그마는 문서의 구조가 상당히 유연하게 동작을 합니다.

먼저 최상위에 Page가 존재를 하고 Page 하위로 여러개의 Section으로 구분을 할 수 가 있으며 그 Section안에 또 여러개의 Frame으로 나눌 수 있습니다. 이 Frame은 웹사이트의 하나의 화면에 해당한다고 보시면됩니다.

Page > Section > Frame

Page도 Section도 Frame도 다중으로 생성이 가능해서 문서를 구조화 하는데 너무 편리합니다.

20230818_mov파일을 GIF로 변환하는 방법(feat. Homebrew, ffmpeg)

어쩌다보니여기까지~ — Fri, 18 Aug 2023 17:39:31 +0900

맥북에서 화면을 녹화해서 누구나 볼 수 있게 aniGIF로 변환해야 될 일이 생겼습니다. 여기서부터 시작했는데, 이 과정에서 많은 기술적인 정보를 습득하게 되어 포스팅을 해 봅니다.

화면 녹화하기

맥북에서 화면을 녹화할 때 기본 기능을 활용할 수 있습니다.

Shift + Command + 5 버튼을 동시에 누르면 화면 캡처 또는 녹화 모드로 진입을 하게 됩니다.

왼쪽 3개의 버튼은 스틸샷 캡처, 가운데 2개의 버튼은 화면 동영상 녹화, 오른쪽 끝의 버튼은 실행 버튼입니다. 저는 가운데에 있는 버튼을 클릭하여 화면을 녹화하였습니다. 해당 화면을 녹화하면 결과물이 ***.mov라는 동영상 파일 포맷으로 저장이 됩니다. 이제 이 동영상 파일을 animate GIF 변환시켜야 합니다.

Homebrew 설치하기

Homebrew는 macOS 운영 체제에서 사용되는 패키지 관리 도구입니다. 이는 터미널을 통해 손쉽게 소프트웨어 패키지를 설치, 관리하고 업데이트할 수 있도록 도와주는 시스템입니다. Homebrew를 사용하면 소프트웨어를 명령어로 간편하게 설치하거나 업데이트할 수 있으며, 의존성 문제를 자동으로 해결해 주기도 합니다.

Homebrew는 macOS에 있는 여러 유용한 도구, 라이브러리 및 소프트웨어를 설치하는 데 도움이 됩니다. 사용자가 필요한 소프트웨어를 수동으로 다운로드하고 설치하는 대신에, Homebrew를 사용하여 명령어를 입력하여 패키지를 관리할 수 있습니다. 이를 통해 소프트웨어의 설치, 업데이트, 제거가 간편해지며 개발자나 시스템 관리자 등에게 편의성을 제공합니다.

Homebrew는 커뮤니티 기반으로 개발되었으며, 오픈 소스로 제공되어 누구나 기여하거나 사용할 수 있습니다. 설치하기 위해서는 macOS 터미널을 열고 Homebrew의 설치 명령어를 입력하면 됩니다. 이렇게 하면 macOS 시스템에서 Homebrew가 설치되며, 그 후에는 Homebrew 명령어를 사용하여 원하는 패키지를 관리할 수 있습니다.

ffmpeg를 설치하기 위해서 먼저 MacOS에 Homebrew를 설치해야 합니다.

Homebrew를 설치하는 방법은 다음과 같습니다:

터미널 열기 : 먼저, macOS의 "응용 프로그램" 폴더에서 "터미널" 을 찾아 실행합니다.
Homebrew 설치 명령어 입력 : 터미널 창에 아래의 명령어를 복사하여 붙여 넣고 엔터 키를 누릅니다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

설치 확인 : 명령어를 실행하면 Homebrew 설치가 시작됩니다. 설치 중에 관리자 비밀번호를 입력하라는 메시지가 표시될 수 있습니다. 비밀번호를 입력하고 설치가 진행되도록 하세요.
설치 완료 : 설치가 완료되면 터미널에서 해당 메시지가 표시됩니다.

... ==> Next steps: - Run `brew help` to get started - Further documentation: https://docs.brew.sh

만약 인텔 CPU가 아닌 애플 M1/M2 CPU가 장착된 MacOS라면 아래와 같이 2개의 실행 명령어를 더 실행해야 합니다

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/<USER_ID>/.zprofile eval "$(/opt/homebrew/bin/brew shellenv)"

설치가 끝나면 이제 Homebrew를 사용하여 다양한 소프트웨어 패키지를 설치하거나 관리할 수 있습니다. 설치 후에는 터미널에서 brew 명령어를 사용하여 Homebrew 명령어를 실행할 수 있습니다.

우리는 이제 이것을 이용하여 ffmpeg를 설치해야 합니다.

ffmpeg 설치하기

ffmpeg은 오픈 소스 멀티미디어 프레임워크로, 비디오와 오디오 파일 변환, 편집, 처리를 가능하게 합니다. 다양한 형식과 코덱 간의 변환, 스트림 추출, 필터링, 인코딩/디코딩을 지원하며, 터미널 같은 명령 줄 도구로 작동합니다.

Homebrew로 설치하는 방법은 간단합니다.

ffmpeg 설치 : 터미널에서 다음 명령어를 입력하여 FFmpeg를 설치합니다.

brew install ffmpeg

설치하는데 상황에 따라 다르겠지만 보통 2~5분 정도의 시간이 소요됩니다.

설치 확인 : 설치가 완료되면 ffmpeg 명령어를 사용하여 FFmpeg가 정상적으로 작동하는지 확인합니다.

위 단계를 따라가면 FFmpeg를 설치하고 사용할 수 있습니다. 이렇게 하면 비디오와 오디오 파일을 변환, 편집하거나 다양한 멀티미디어 작업을 수행할 수 있는 환경이 마련됩니다.

드디어 `***.mov`를 `GIF`로 쉽게 변환할 수 있어요.

설치는 모두 끝났습니다. 이제 ffmpeg를 사용하여 동영상을 animateGIF로 변경만 하면 됩니다.
ffmpeg를 사용하기 위해서는 다양한 설정값이 있지만 모두 설명하기는 어렵기 때문에 여기서는 간단히 GIF로 변환하는 명령어만 설명하도록 하겠습니다.

ffmpeg -i 변환할동영상.mov -vf "fps=10, setpts=0.25*PTS, scale=320:-1:flags=lanczos" 변환된결과물.gif

ffmpeg : FFmpeg 명령어를 실행합니다.
-i 변환할동영상.mov : 입력 파일로 변환할동영상.mov를 지정합니다.
-vf "fps=10, setpts=0.25*PTS, scale=320:-1:flags=lanczos" : vf(비디오 필터링) 옵션을 설정합니다.
- fps=10은 초당 10프레임으로 애니메이션을 만든다는 것을 나타내며
- setpts=0.25*PTS는 영상의 재생 스피드를 변경합니다.(여기서는 빠르게 설정함)
- scale=320:-1은 너비를 320픽셀로 조정하고, 높이를 원본 비율에 맞- 춰 자동 조정합니다.
- flags=lanczos는 스케일링 알고리즘으로 lanczos를 사용한다는 것을 나타냅니다.
변환된결과물.gif : 출력 파일의 이름을 변환된결과물.gif로 지정합니다.

이렇게 변환이 되었습니다^^ .

시놀로지 VideoStation으로 영상이 재생되지 않을 때 해결하는 방법

어쩌다보니여기까지~ — Tue, 23 May 2023 00:28:11 +0900

시놀로지에서 VideoStation은 정상적으로 잘 설치가 되었는데 영상을 플레이하다보면 잘 재생이 되는 경우도 있지만 어떤 영상은 재생이 되지 않는 경우가 있습니다.
그런경우 혹시 오디오 코덱의 문제가 아닌지 확인해 볼 필요가 있습니다. 코덱이 무료코덱도 있지만 유료 코덱도 존재합니다. 그래서 VideoStation같은 무료의 제품인경우는 굳이 돈을 지불해가면서 까지 코덱을 제공해 주지 않습니다.
그 유료코덱중에 대표적으로 DolbyⓇ의 오디오 코덱(DTS, EAC3, TrueHD)들이 있습니다.
그래서 시놀로지를 설치하거나 업데이트를 하는 경우 DTS, EAC3, TrueHD 코덱이 실행될 수 있게 설치하는 작업을 해야 하는데, 이과정이 다소 복잡하고 짜증이 납니다.
이 부분을 github에 AlexPresso라는 분이 쉽게 설치할 수 있게 파일로 만들어 놓은 것이 있습니다.

AlexPresso : https://github.com/AlexPresso/VideoStation-FFMPEG-Patcher

시놀로지 앱 미리 설치하기

실행 전에 먼저 VideoStation, FFmpeg을 설치 또는 업데이트 합니다.

VideoStation 설치

VideoStation는 패키지센터에서 선택하여 설치하면 됩니다.

FFmpeg 설치

FFmpeg는 시놀로지 패키지센터에서 공식 지원하는 앱이 아닙니다. 그래서 별도의 사설 패키지센터인 SynoCommunity를 설치하고 그곳에 있는 FFmpeg를 설치하면 됩니다. 먼저 아래와 같이 SynoCommunity를 설치합니다.

설정 버튼을 클릭합니다.

팝업창에서 패키지 소스 탭을 클릭합니다.
추가 버튼을 클릭합니다.
이름을 입력합니다. 이름은 임의로 넣어주면 됩니다.
위치는 http://packages.synocommunity.com/를 입력합니다.

그러면 아래와 같은 사설 패키지센터(커뮤니티)가 설치가 됩니다. 이제 그 중에서 FFmpeg를 선택하여 설치합니다.

원래는 FFmpeg4만 있었는데, 지금 보니 FFmpeg5, FFmpeg6가 추가로 생겼네요. 무슨차이인지는 아직 잘 모르겠습니다.

커뮤니티 메뉴를 선택합니다.
저는 FFmpeg4를 설치했습니다.

`VideoStation-FFMPEG-Patcher` 스크립트 실행하기

이제 기본적인것은 설치가 되었습니다. 이제 스크립트만 실행 시키면 됩니다. 스크립트는 .sh 파일로 터미널 창에서 실행시켜야 합니다.

VideoStation-FFMPEG-Patcher

터미널창 열기

먼저 SSH로 접근하기 위해 SSH 서비스를 활성화 해야 합니다.

원하는 작업 후 가능하면 SSH를 다시 비활성화 시켜놓는 것이 좋습니다. 해커들이 여기 접근하려고 무지하게 접속을 합니다.

제어판에서 터미널 및 SNMP를 선택합니다.
터미널 탭을 선택합니다.
SSH 서비스 활성화를 체크합니다.
기본 포트가 22번이지만 다른 포트로 변경하는 것이 좋습니다.

터미널 접속하기

윈도우즈의 경우 아래와 같이 터미널 창에서 본인의 시놀로지로 SSH 접속을 시도 합니다.

ssh 아이디@시놀로지나스주소 -p포트번호의 형태로 명령어를 실행합니다. 예> ssh xxxxxx@192.168.10.100 -p823
yes를 입력합니다.
아이디에 해당하는 비밀번호를 입력합니다. (입력해도 타이핑이 눈에는 보이지 않아요)

그러면 접속이 되며 프롬프트가 보이게 됩니다. 이 프롬프트에 명령어를 실행하면 됩니다.

터미널에 스크립트 입력하기

이 명령어를 실행하기 위해서는 root 권한을 먼저 획득해야 합니다. 그리고 설치 스크립트를 실행시킵니다.

root권한을 얻기위해 sudo -i 명령어를 실행합니다.
비밀번호를 다시한번 넣어줍니다.
설치 스크립트를 실행합니다.

jua@juNAS:~$ sudo -i jua@juNAS:~$ curl https://raw.githubusercontent.com/AlexPresso/VideoStation-FFMPEG-Patcher/main/patcher.sh | bash

오류없이 설치가 되면 정상적으로 잘 설치가 된것입니다.

맥OS에서 숨겨진 폴더와 파일 표시하기

어쩌다보니여기까지~ — Fri, 19 May 2023 13:54:42 +0900

맥OS는 사용자에게 편의성과 보안을 제공하기 위해 일부 폴더와 파일을 숨김 처리합니다. 하지만 때로는 숨겨진 폴더와 파일에 접근해야 할 필요가 있을 수 있습니다. 이 글에서는 맥OS에서 숨겨진 폴더와 파일을 표시하는 방법에 대해 자세히 알아보겠습니다.

1. Finder 옵션 설정

Finder는 맥OS에서 파일 및 폴더를 탐색하는 기본 애플리케이션입니다. 숨겨진 폴더와 파일을 표시하기 위해서는 다음 단계를 따르세요:

Finder를 엽니다.
상단 메뉴에서 "Finder"를 클릭한 후 "환경설정"을 선택합니다.
"고급" 탭을 클릭합니다.
"모든 파일 확장자 표시" 옵션을 선택합니다.
"라이브러리 폴더 표시" 옵션을 선택합니다.
변경 사항을 저장합니다.

이제 Finder에서는 숨겨진 폴더와 파일이 표시됩니다.

2. 단축키로 숨겨진 폴더와 파일을 토글

간단하게 키보드의 단축키를 사용하여 숨겨진 폴더와 파일을 보이게 했다가 보이지 않게 했다가 할 수 있습니다.

Shift + command + .

3. 터미널을 통한 숨겨진 폴더와 파일 접근

터미널은 맥OS에서 명령어를 실행하고 시스템에 대한 깊은 접근을 가능하게 해주는 도구입니다. 숨겨진 폴더와 파일에 접근하기 위해서는 다음과 같은 명령어를 사용하세요:

Spotlight 검색을 열고 "터미널"을 입력한 후 터미널 애플리케이션을 실행합니다.
다음 명령어를 입력하여 숨겨진 폴더와 파일이 있는 디렉토리로 이동합니다:

Copy code cd 경로/폴더명

숨겨진 폴더와 파일을 탐색하고 조작합니다. 이제 터미널을 통해 숨겨진 폴더와 파일에 자유롭게 접근할 수 있습니다.

3. 주의사항

숨겨진 폴더와 파일을 표시하는 것은 시스템 파일에 접근할 수 있으므로 조심해야 합니다. 올바르지 않은 수정이나 삭제는 시스템에 문제를 일으킬 수 있습니다. 따라서 숨겨진 폴더와 파일을 조작할 때에는 신중하게 실행해야 합니다.

위의 방법들을 따라하면 맥OS에서 숨겨진 폴더와 파일을 표시할 수 있습니다. 필요에 따라 숨겨진 폴더와 파일에 접근하여 원하는 작업을 수행할 수 있습니다. 보안과 편의성 사이에서 적절한 조화를 이루어 자신에게 필요한 정보에 빠르게 접근할 수 있도록 해보세요.

레노버 태블릿 Y700 반글화 및 문제점 해결방법

어쩌다보니여기까지~ — Fri, 17 Feb 2023 12:04:55 +0900

레노버 내수용 태블릿 초기 반글화 하기

제가 레노버 Y700을 구매했습니다. ㅎㅎ
중국 내수용 제품이다 보니 한글화부터 이것저것 설정해야 할 것이 많은데 잊어버리지 않기 위해 정리 차원에서 정리했습니다.

1. 처음 설정

처음 태블릿을 실행시키면 중국어로 나오게 됩니다. 중국어를 모른다면 일단은 영어로 설정을 해 놓고 시작하는 것이 좋습니다.
다음 화면 와이파이를 잡아 줍니다.
다음 화면 Game Mode는 우측 하단 Next 버튼을 클릭합니다.
다음 화면 PC Mode도 Next 버튼을 클릭합니다.
다음 화면 LeCloud도 Skip 버튼을 클릭합니다.
다음 화면 Recommended apps도 Skip 버튼을 클릭합니다.
다음 화면 System Navigation 도 둘 중 하나를 선택하고 Go 버튼을 클릭합니다.

2. 반글화(한글화) 설정하기

이제 기본적으로 시작할 준비가 되었습니다. 글로벌롬으로 사용할 것이 아니기 때문에 내수롬에서 반글화를 세팅해 주어야 합니다.

A. USB debugging 활성화

Settings > About tablet(My Devices) > ZUI Version 메뉴를 5번 이상 연타를 하면 개발자 옵션이 활성화됩니다. 개발자 옵션이 활성화되면 General Settings > Developer options 메뉴가 나타납니다. 여기에서 USB debugging를 활성화해 줍니다.

B. setedit로 반글화하기

setedit로 반글화를 해야 하는데 먼저 사전 작업을 해야 합니다.

system_locales를 ko-KR로 설정

General settings > Languages & input > 4개의 언어 설정을 모두 차례대로 한 번씩 클릭해서 실행

기본적으로 내수롬에서는 setedit에서 system_locales가 보이지 않습니다. 위의 작업을 해줘야 해당 메뉴가 나타납니다.

setedit 다운로드하기

레노버에 기본으로 있는 인터넷 브라우저를 실행시킵니다. 처음 동의를 받는데 일단 동의를 하고 실행을 해서 아래의 URL에 접속을 합니다.

apkpure.com은 App store를 제외한 가장 커다란 사설 Store입니다.(앱 검열이 없기 때문에 주의가 필요함) https://apkpure.com에 접속합니다.

우측 검색창에서 setedit를 검색하고 다운로드를 해서 Install을 합니다.

setedit 설정하기

검은색 화면에 변수와 값이 있는 텍스트가 쭉~ 나옵니다. 그중에 system_locales을 찾습니다.
해당 변수를 클릭하여 값(Value)을 ko-KR로 변경해 줍니다.

system_locales : ko-KR

재부팅

재부팅을 해야 적용이 됩니다.

C. 시스템 업데이트

일단 먼저 레노버 시스템(ZUI)를 최신 버전으로 업데이트해 줍니다.

setedit로 언어 변경은 시스템이 업데이트될 때마다 해주어야 합니다.

3. 기본 필수 앱 설치

아직 구글 플레이스토어가 없으니 apkpure.com에서 몇 가지 필수 앱을 설치합니다.

구글 플레이스토어 설치

apkpure.com > google play store를 검색하여 다운로드하여 설치합니다.

재부팅

재부팅을 해야 적용이 됩니다.

google play store 업데이트

재부팅 후 google play store 앱을 실행시킨 후 우측 상단 ...를 클릭해서 업데이트를 해 줍니다.

gboard 설치

한국 자판을 설치해야 하므로 구글에서 제공하는 gboard를 설치합니다.

apkpure.com > gboard를 검색하여 다운로드하여 설치합니다.

설치가 완료되면 설정화면에서 gboard를 제외한 모든 키보드를 비활성화 시킵니다.

Settings > General settings > Languages & input > On-screen keyboard

4. Google 로그인

이제 구글에 로그인을 합니다.

5. 몇 가지 추가 세팅

시간을 서울로 설정

Settings > General settings > Date & time에서 Seoul로 변경합니다.

불필요한 중국 앱 삭제

아이콘을 길게 클릭 후 삭제(Delete)를 눌러 삭제하거나 Disable을 해 줍니다.

문제점 해결하기

1. Zui14로 업데이트 이후 Google Play가 실행되지 않을 때 해결하는 방법

시스템을 업데이트하거나 특정한 이유로 Google Play store가 접속이 되지 않는 경우가 발생할 경우 아래의 방법으로 해결할 수도 있습니다.

Settings > App management로 입장

우측 상단의 ... 클릭 후 서브 메뉴에서 Google Basic Services를 선택합니다.
기본으로 활성화가 되어 있을 텐데, 이것을 비활성화했다가 다시 활성화 해줍니다.
다시 Google Play에 접속을 하면 접속이 되는 것을 확인할 수 있습니다.

아파트 천정에 붙은 와이파이 AP 초기화 하는 방법

어쩌다보니여기까지~ — Mon, 13 Feb 2023 18:15:35 +0900

입주를 했을 때부터 천정에 둥그런 WIFI가 달린 것을 보았습니다. 사실 이게 WIFI라는 것을 알았지만 기본 속도가 최대 300Mbps밖에 되지 않아서 거들떠도 보지 않았습니다.

아파트마다 설치된 장비가 업체도 다르고 모델도 다르겠지만 저희 집에 붙어 있는 장비는 MAP-11NCV3라는 AP입니다. 이 글을 읽으시는 분들은 아마도 이것 때문에 오셨을 확률이 높겠지요?

WAN : 전원이 들어왔는지 네트워크선이 연결되었는지 확인
WLAN : 무선 WiFi가 동작하는지 확인
전원 스위치 : 뽀족한 것으로 눌러야 전원이 토글 됨
리셋 스위치 : 5초 이상 길게 누르면 제품이 초기화됨

기본 WiFi 접속 정보

기본 WiFi에 접속하는 비밀번호는 입주시점에 알려줍니다. 하지만 몇 년이 지나고 살던 사람이 바뀌고 하다 보면 잊어버리기 십상인데요.. 그럴 때는 천정 공유기를 살짝 돌려서 빼내면 보통 뒷면 기판 쪽에 스티커로 붙여놓은 경우가 많으니 그것을 확인해 보면 됩니다.

무선WiFi의 이름입니다. 보통 아파트의 동호수를 사용합니다.
접속 비밀번호입니다. 스마트폰으로 접속 후 해당 비밀번호를 입력하면 접속이 됩니다.
관리자 화면(보통 저희는 : 192.168.10.254)으로 접속해서 들어가는 관리자 아이디와 비밀번호

초기화하는 방법

저는 이 AP를 브리지 모드로 전환을 하는 바람에 이렇게도 접속이 안되고 저렇게도 접속이 되지 않아서 초기화를 했습니다. (알아보니 브리지 모드가 기본 모드이고, 게이트웨이 모드가 옵션 모드라고 하네요 ㅠㅠ)

RST 버튼을 5초 이상 눌러줍니다.

초기화는 천정 AP에 있는 RST의 구멍에 뽀족한 것으로 5초 이상 누르면 됩니다. 리셋이 되면 기본적으로 있던 무선WiFi의 이름이 동호수에서 MAP11N으로 변경이 되고 관리자 아이디와 비번이 maxio/1012 또는 admin/admin 으로 바뀝니다.

스마트폰의 DHCP를 수동으로 변경해 줍니다.

리셋했을 경우 브리지 모드가 기본 모드이기 때문에 그냥은 접속이 되지 않습니다.

아래의 세팅 값을 변경한 후 접속해야 합니다.

스마트폰으로 접속하기

설정화면에서 WiFi 메뉴로 접속을 합니다.
네트워크 중 MAP11N를 선택하여 접속을 합니다.
비밀번호를 1234567890으로 입력합니다.

이때 WiFi는 연결이 되었지만 인터넷은 연결이 되지 않았든 메시지가 나올 수 있습니다. 그래도 정상상태입니다.

네트워크의 설정화면으로 들어가서 IP 설정을 DHCP에서 고정으로 변경합니다.

IP 주소를 192.168.10.111으로 변경합니다.
게이트웨이를 192.168.10.254로 변경을 합니다.

이렇게 임시적으로 변경을 합니다.(나중에는 다시 DHCP로 변경해 줘야 합니다.)

브라우저에서 관리자 화면 접속하기

이제 관리자 화면을 접속해 봅니다. 관리자 화면은 위에서 설정한 게이트웨이 주소와 동일합니다.
모바일 브라우저의 주소창에 http://192.168.10.254를 입력하면 관리자 화면이 나옵니다.
초기 관리자 아이디/비번은 maxio/1012 또는 admin/admin입니다.

이제 원하시는 설정을 하시면 됩니다.

그리고 꼭!! 관리자의 아이디와 비번, 무선접속에 대한 SSID와 비밀번호를 변경하셔야 합니다. 그래야 해킹의 위험이 적어집니다.

레노버태블릿(M10PLUS 3세대, P12) 공장초기화하는 방법

어쩌다보니여기까지~ — Fri, 10 Feb 2023 17:35:00 +0900

레노버 태블릿을 가지고 있는데 공장초기화해야 할 일이 있어서 실제로 해봤습니다. 인터넷에 잘 나와있지 않아서 공유 차원으로 작성합니다.

만약 태블릿을 중고로 판매할 목적으로 초기화를 해야 한다면...
반드시 구글 로그아웃을 하고 초기화를 해야 합니다.
그렇지 않으면 구매한 상대방이 구글로 로그인 할때 이기기는 재설정 되었습니다. 라는 메시지와 함께 구글 락이 걸려버리게 됩니다. 분실한 태블릿을 보호하기 위해 구글에서 기본으로 락이 걸리도록 해 놓은 안전 장치입니다. 본인이 초기화 해서 사용할때는 문제가 없지만 중고로 판매할 경우는 꼭 구글 로그아웃하는것을 잊지 마세요.

1. 전원 끄기

먼저 전원을 꺼 줍니다.
공장초기화 때는 전원 버튼과 음량 버튼을 활용하여 메뉴 선택과 실행을 합니다.

전원 버튼
볼륨 업 버튼
볼륨 다운 버튼

2. 공장초기화 모드로 진입

전원을 켬과 동시에 전원 버튼 + 볼륨 업 버튼을 동시에 누릅니다.

그러면 위와 같이 START화면이 나옵니다. 여기에서 볼륨 버튼을 클릭하여 Recovery Mode메뉴를 이동합니다.

3. 공장초기화 실행

Recovery Mode(복구모드)를 확인합니다.
전원 버튼을 클릭하여 리커버리를 실행합니다.

Wipe data/factory reset 메뉴를 선택하여 데이터를 지우고 공장 초기화를 합니다.
전원 버튼을 선택합니다.

정말 초기화를 할 것이냐고 물어봅니다.
전원 버튼을 선택합니다.

약간의 시간(대략 30초~1분)이 지난 다음에 리부팅을 하라고 합니다.

Reboot system now 메뉴를 선택하여 재부팅합니다.
전원 버튼을 선택하여 재부팅을 합니다.

4. 공장초기화 후 재설치

재부팅이 되면 처음 설치했을 때의 화면이 나타납니다.
이제 화면을 넘기며 설정을 하면 됩니다.

VScode의 package.json에서 AWS의 S3로 배포하는 방법

어쩌다보니여기까지~ — Tue, 7 Feb 2023 19:56:00 +0900

React.js나 Vue.js 등의 Package 프로젝트로 개발을 할 때 쉽게 AWS의 S3로 배포하는 방법에 대해서 공유합니다.
먼저 AWS의 S3의 버킷은 이미 생성되어 있다는 가정입니다.

S3 버킷 생성

아래와 같이 버킷이 생성되어 있습니다.

목차는 S3의 버킷입니다.
버킷의 이름이며 잘 기억해 놔야 합니다.
리전, 그러니까 실제로 물리적으로 파일이 저장되는 위치라고 보시면 됩니다. 기억해놔야 합니다.
액세스는 퍼블릭으로 되어 있어야 외부에서 접근이 가능합니다.

IAM 권한 부여하기

이제 외부에서 접근하기 위해서 IAM에서 권한을 부여해야 합니다.

좌측 메뉴에서 사용자를 선택합니다.
보안 자격 증명 탭을 선택합니다.
중간쯤에 위치한 액세스 키를 발행합니다.
발행을 하면 Access key ID와 Secret access key 발행됩니다. Access key ID는 확인이 가능하나 Secret access key는 이때 아니면 더 이상 확인이 불가하기 때문에 엑셀 문서를 다운로드해 잘 보관을 해야 합니다.
리전 위치를 다시 한번 기억합니다. 나중에 사용됩니다.

AWS CLI 설치

이제 로컬 컴퓨터에서 배포를 하기 위해서 AWS CLI를 설치합니다. AWS CLI는 터미널에 명령어를 입력해서 AWS를 실행할 수 있는 프로그램입니다.
설치하는 방법은 아래 링크에서 확인합니다.

https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html

로컬 컴퓨터 인증하기

이제 CLI가 가능합니다. 로컬 컴퓨터에서 바로 AWS S3에 업로드할 수 있도록 Access key ID와 Secret access key로 로그인을 해야 합니다. 한 번만 로그인을 하면 됩니다.
터미널 창에서 아래와 같이 입력을 합니다.

aws configure --profile 사용자 ID

여기에서 사용자 ID는 AWS IAM에서 생성한 ID입니다.
그러면 아래와 같이 4개의 정보를 물어봅니다.

위의 IAM에서 생성한 Access key ID와 Secret access key를 순서대로 입력하고 region name은 한국이라면 대부분 서울에 있는 리전인 ap-northeast-2로 입력합니다.

저장 파일 포맷은 json으로 입력하면 됩니다.

 aws configure --profile 사용자 ID AWS Access Key ID [****************XATH]: AKxxxxxxxxxxxxxTH AWS Secret Access Key [****************5VjO]: YBHxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxVjO Default region name [ap-northeast-2]: ap-northeast-2 Default output format [json]: json

package.json에 명령어 추가하기

이제 다 되었습니다. 이제 명령어를 쉽게 실행하기 위해 package.json의 scripts에 아래와 같이deploy 명령어를 작성합니다.

 "scripts": { "dev": "next", "build": "next build", "build-d": "next build && next export", "deploy": "next build && next export && aws s3 sync ./out s3://버킷명 --profile=사용자 ID", "start": "next start", }

이제 npm run deploy 라고 실행하면 빌드를 하고 스태틱으로 파일을 형성해서 S3로 업로드가 됩니다.

Hello Giga WiFI와 IPTIME 공유기를 이지메쉬(Mesh) 망으로 연동하기

어쩌다보니여기까지~ — Thu, 2 Feb 2023 13:27:30 +0900

LG 헬로비전의 인터넷을 설치하면 상품 종류에 따라 Giga WiFi 유무선 공유기를 하나 무상으로 제공을 해줍니다. 제가 받은 공유기는 머큐리에서 제작한 MC-G500입니다.
저는 IPTIME의 A8004T 공유기와 머큐리의 MC-G500 공유기를 활용하여 Mesh WiFi를 구성하려고 합니다. 처음에는 IPTIME 제품끼리만 Mesh가 가능한 줄 알았는데, 설치해보니 이기종도 설치가 가능했습니다.

나는 왜 인터넷과 TV을 LG 헬로비전으로 바꾸었을까?

인터넷망 구성

저는 최근 지어진 아파트에 살고 있고 단자함이 별도로 존재하고 있습니다. 단자함에는 전화망, TV망(동축케이블), 인터넷망(UTP 케이블)이 구성되어 있습니다.

제가 구성한 망은 아래와 같습니다.

1번 : 단자함

먼저 LG 헬로비전의 광케이블이 단자함의 모뎀으로 들어오게 됩니다. 이 모뎀은 설치기사님이 설치를 해 줍니다. 모뎀에는 총 4개의 LAN 단자가 존재하는데 보통 설치기사님이 설치할 때 하나는 거실의Giga WiFi로 보내고 또 하나는 개인 LAN(서재)으로 빼 줍니다. 이렇게 되면 2개의 망으로 되어버립니다.
저는 하나의 망으로 구성하기 위해 서재에 있는 IPTIME A8004T를 매인 공유기로 활용하려고 합니다. 이 공유기로 내부망이 하나로 만들어지게 됩니다. 그래서 모뎀의 LAN 단자에서 바로 서재로 가는 랜선 하나만 연결하였습니다. 거실의Giga WiFi로 가는 랜선은 허브쪽에 연결을 하였습니다.

LG U+에서 들어오는 광케이블입니다.
모뎀에는 총 4개의 단자가 있고 그중에 하나만 사용해서 서재의 랜선을 연결합니다.
동축케이블을 이용해서 TV 신호를 거실로 보내줍니다. 또는 분배기로 연결하고 분배기에서 여러 방으로 보낼 수도 있습니다.
전원선입니다.

2번 : 서재

단자함에서 랜선으로 들어온 케이블을 IPTIME A8004T의 WAN(인터넷) 단자에 연결을 합니다.

단자함에서 온 랜선을 WAN(인터넷) 단자에 연결합니다.
4개의 LAN단자중 하나에서 다시 단자함으로 보낼 랜선을 연결합니다.

이제 여기서 나온 랜선 하나를 다시 단자함으로 보내서 허브를 통해 각방으로 보내줘야 합니다. 저희 집은 전화선도 인터넷 선과 동일하게 CAT.5E로 되어 있어서 1Gbps를 커버해 주기 때문에 전화선을 이용하여 다시 단자함으로 보내주었습니다. (만약 일반 전화선으로 되어 있다면 선을 다시 깔던가 공유기를 다른 곳으로 이동하던가 구성을 변경해야 합니다.)

1번 : 단자함

서재에서 전화선을 타고 다시 단자함으로 들어오게 되면 이 랜선을 이번에는 허브에 연결을 합니다. 단자함에 기본 설치되어 있는 허브를 이용하면 되겠지만 저희 집은 500Mbps 용이라 1Gbps로 이용하기 위해 별도로 제품을 구매했습니다. 단자가 많이 필요하지 않다면 저렴한 8Port 짜리 허브를 구매해도 됩니다.

서재에서 들어온 랜선을 허브에 채결을 합니다. (허브라 아무 곳이나 연결하면 됩니다.)
이제 모든 포트는 하나의 망으로 구성이 됩니다. 각 방으로 연결되어 있는 랜선을 쭉~ 연결을 하면 됩니다.(순서는 상관없습니다.) 이 중에 하나는 거실의 Hello Giga WiFi로 연결이 됩니다.

3번 : 거실

이제 거실로 이동합니다. 사실 거실의 구성은 설치기사님이 알아서 해 놓으셨을 것입니다. 따로 만질 필요는 없습니다.

인터넷 공유기입니다. 벽 쪽 단자에서 들어온 거실용 랜선을 이 공유기의 WAN(인터넷) 단자에 체결합니다. 아마도 설치기사님이 이미 그렇게 해 놨을 것입니다.
이제 4개의 랜포트가 활성화되고 이중 하나를 Hello 셋톱박스에 연결을 합니다. 이것도 설치기사님이 이미 해놨을 것입니다.
저희 집에 들어오 공유기는 머큐리사에서 제작한 MC-G500 제품입니다. 이 제품은 Mesh가 가능한 제품이라 이후에 설정하는 방법을 참조하시면 됩니다.

공유기에서 나온 랜선을 이제 셋톱박스에 연결을 합니다. 그리고 벽 쪽에서 나오는 동축케이블(TV 망)도 셋톱박스에 연결을 합니다. 셋톱박스의 HDMI 단자를 TV에 연결을 하면 구성이 끝납니다. 요기까지도 설치기사님이 이미 해 놨을 것입니다.

전원 선입니다.
Hello Giga WiFi에서나온 랜선입니다.
TV와 연결하는 HDMI 단자입니다.
단자함에서 전달받은 벽 쪽에서 나오는 TV 망(동축케이블)입니다.

4번, 5번 : 각방

이제 각 방의 벽 쪽에 있는 랜포트에 랜선을 연결하여 컴퓨터에 연결을 하면 됩니다.

Mesh WiFi 망을 포함한 소프트웨어 구성

전체 하드웨어적인 망 구성은 완료가 되었습니다. 이제 공유기 설정으로 소프트웨어적으로 구성을 하는 것이 남아 있습니다.

IPTIME A8004T 설정

IPTIME A8004T이 메인 공유기입니다. 내부망의 아이피 배정을 이 공유기의 DHCP 기능으로 배정을 합니다.
다른 설정을 설명하기에는 내용이 너무 많아서 Mesh 구성에 대한 부분만 작성하려고 합니다.

로그인했다 치고...
펌웨어 업데이트를 최신 버전으로 했다 치고...

좌측의 메뉴 중에 Easy Mesh 메뉴를 선택합니다.
비활성화되어 있던 공유기를 Controller mode로 선택합니다.
스마트폰으로 WiFi 연결 시 보일 네트워크 이름을 설정합니다. 임의로 설정하면 됩니다. 접속을 위한 비밀번호를 입력합니다.
활성화가 되면 메뉴 중에 Eash Mesh 관리 툴 메뉴가 보입니다.

Eash Mesh 관리 툴 메뉴를 선택하면 아래와 같은 컨트롤 화면이 보입니다.

현재는 아직 아무것도 보이지 않습니다. 이제 서브 Mesh 공유기 또는 슬레이브 Mesh 공유기 설정을 하게 되면 해당 목록에 보이게 됩니다.
처음에는 IPTIME 제품만 Mesh 연결이 가능할 줄 알았는데, 다른 제품도 연결이 가능했습니다.
일단 요기까지 보고 MC-G500 공유기를 설정하도록 하겠습니다.

Hello Giga WiFi 설정(MC-G500) 설정

Hello Giga WiFi공유기는 서브 공유기입니다. 그래서 DHCP도 꺼놓고 Mesh도 Slave로 해놔야 합니다.
초기화된 상태에서 해당 공유기의 IP는 192.168.200.254로 되어 있습니다. 컴퓨터나 노트북에서 브라우저로 해당 주소(http://192.168.200.254)로 접속하면 아래와 같은 로그인 화면이 나타납니다.

공유기 초기화 만약 설정하면서 이상하게 꼬여 접속도 되지 않을때는 초기화를 해야 합니다. 아래의 방법으로 초기화를 할 수 있습니다.

제품 옆면의 1번 리셋 스위츠를 뾰족한 것으로 5초이상 누르고 있으면 전면의 led 전체가 깜빡이면서 초기화가 됩니다.

사용자 ID는 lgadmin이고 비밀번호는 LGHV_ap_XXXX입니다. 여기에서 XXXX는 공유기의 MAC 주소를 활용하기 때문에 제품마다 고유의 번호를 가지고 있고 제품의 뒷면에서 확인할 수 있습니다. 또는 3번처럼 여기버튼을 누른 후 나온 번호를 참고해도 됩니다.
위에 있는 6자리의 임의번호를 정확히 입력합니다.

외부 WEB 접속 설정

로그인을 하고 아래의 메뉴로 이동을 합니다.
이 메뉴를 활성화하면 이후 서브 공유기로 설정한 후에도 해당 관리자 화면에 접속을 할 수가 있습니다.

고급 설정을 선택합니다.
시스템 관리를 선택합니다.
원격 웹 접속을 선택합니다.
비활성화되어 있는 메뉴를 활성화시킵니다.
포트 번호는 잘 기억해야 합니다. 나중에 화면에 접근 시 필요합니다.
적용을 선택합니다. 공유기가 재부팅이 됩니다.

만약 WiFi로 컴퓨터(노트북)에 연결해서 설정한다면 재부팅 시 WiFi가 끊기니 재연결을 해야 합니다. 저는 매번 까먹고 연결이 안 되어서 뭐가 잘못됐는지 한참 헤맸습니다. ㅠㅠ

DHCP 설정 해제

DHCP는 접속하는 기기에 대해 자동으로 IP 번호를 부여하는 기능인데, 해당 기능은 매인 공유기인 IPTIME A8004T에서 제공하고 있으므로 여기서는 해제를 해야 합니다. 만약 그대로 활성화를 한다면 다른 IP 번호가 부여되어서 꼬이게 됩니다.

고급 설정을 선택합니다.
네트워크 관리를 선택합니다.
LAN 연결 설정을 선택합니다.
DHCP를 사용안함으로 설정합니다.
적용을 선택합니다. 공유기가 재부팅이 됩니다.

EashMesh Slave 설정

이제 마지막으로 Mesh를 활성화해야 합니다. 매인이 IPTIME로 설정했으니 이 공유기는 Slave(서브)로 설정해야 합니다.

고급 설정을 선택합니다.
Easymesh를 선택합니다.
기본 설정을 선택합니다.
활성화를 사용으로 설정합니다.
동작 모드는 Slave로 설정합니다.
연동 모드는 유선으로 설정합니다.
적용을 선택합니다. 공유기가 재부팅됩니다.

Eash Mesh 관리 툴 확인

이제 관리 툴에 접속을 하게 되면 위에서 설정한 MC-G500공유기의 Mesh단말이 나타난 것을 확인할 수 있습니다.

동일망에 있는 경우 자동으로 리스트에 추가됩니다. 거실_LGHV이름은 관리툴화면에서 임의로 설정한 것입니다.

접속해 보기

이제 이 공유기는 서브 공유기로 Mesh도 서브로 작동합니다. 그리고 아이피 번호도 IPTIME의 A8004T의 DHCP에서 받은 아이피 주소로 변경이 됩니다.
기존에는 http://192.168.200.254이렇게 접속을 했다면 이제는 http://192.168.0.XXX:포트번호이렇게 변경이 되었습니다. 여기에서 XXX는 IPTIME의 A8004T공유기 설정화면에서 확인하시면 됩니다. 뒤의 포트번호는 위에서 설정할때 확인했던 번호를 입력하면 됩니다.

IP 주소가 변경되었습니다.
사용자 ID는 위에서 확인한 ID와 비밀번호가 동일합니다.
아쉽게 돼 외부 접속을 할 경우에는 아이디와 비밀번호 힌트가 보이지 않습니다.

Mesh 접속 확인해 보기

이제 스마트폰으로 Mesh에서 설정한 WiFi의 네트워크 이름과 비밀번호로 접속을 합니다.
서재에서 접속한 WiFi가 거실에서도 동일하게 유지가 된다면 정상적으로 설정이 된 것입니다.

TV망(동축케이블) 구성

LG 헬로비전은 다른 IPTV 업체와 다르게 TV 망(동축케이블)이 존재합니다.
그래서 동축케이블을 각방으로 분배를 하면 각방에서도 실시간 방송을 무료로 볼 수가 있습니다. 개꿀~~

1번 : 단자함

단자함에 동축케이블로 되어 있는 TV 망을 볼 수 있습니다. 먼저 분배기와 짧은 동축케이블을 준비해야 합니다. 분배기와 동축케이블은 철물점 같은 곳이나 인터넷에서 구매를 하면 됩니다.

이 케이블은 헬로비전의 모뎀에서 나온 동축케이블 입니다.
거실에 있는 셋톱박스로 가는 동축케이블입니다.
안방으로 가는 동축케이블입니다. 이 케이블은 안방의 일반 TV에 연결을 합니다.
기존에 있던 분배기인데, 광통신으로 받은 기본 TV 신호를 각방으로 보내는 역할을 합니다. 저희는 헬로비전을 보기 때문에 사용하지 않는 기능입니다.

현재 저희 집은 잘 작동하고 있습니다. ㅎㅎㅎ

나는 왜 인터넷과 TV을 LG 헬로비전으로 바꾸었을까

어쩌다보니여기까지~ — Wed, 1 Feb 2023 23:36:01 +0900

이번에 집 인터넷과 방송을 SK브로드밴드에서 LG 헬로비전으로 변경하였습니다.

기존에 SK브로드밴드도 모바일 결합을 하면 가격이나 품질 등에서 나쁘지는 않았으나 약정의 족쇄에서 풀려나기도 했도 사은품이나 월비용 등 기타 여러 가지를 고려해서 변경했습니다.

다행히 저희 집이 LG 헬로비전 서비스가 가능한 지역이라 여러 가지로 비교해 보고 결정을 했습니다.

LG 헬로비전은 SK, KT, LG 같은 대기업에서 시작한 곳이 아니고 영세한 지역 케이블에서 시작한 업체입니다. CJ에서 지역 케이블을 인수하여 운영했었는데 그때는 동축 케이블망을 사용하여 인터넷 품질이 완전 똥망이였습니다. 근래 LG로 넘어가면서 LG U+ 망을 같이 사용하게 되면서부터 혜자스러워졌습니다. 그리고 원래 출신이 케이블방송이었기 때문에 방송 면에서도 더할 나위 없는 혜택을 맛볼 수 있게 되었습니다.

LG 헬로비전을 사용하면서 얻게 되는 이점

먼저 저렴한 비용입니다.

LG 헬로비전은 원래 비용이 저렴한 데다가 모바일을 운영하는 SK, KT, LG에 포함되어 있지 않기 때문에 이 모든 통신사를 2~4회선을 가족으로 묶을 수 있으며 그렇게 되면 비용이 더 저렴해지게 됩니다.

케이블방송을 여러 방에서 시청을 할 수 있습니다.

SK, KT, LG의 IPTV는 실시간 방송을 인터넷망을 통해 보기 때문에 거실 같은 한 군데에서만 볼 수가 있습니다. 만약 2곳 이상의 장소에서 보려면 추가 비용을 지불해야 합니다. 그러나 LG 헬로비전은 실시간 방송의 기본망이 동축케이블이기때문에 분배만 잘하면 여러 곳에서도 실시간 방송을 볼 수 있습니다.(VOD는 해당하지 않아요)

가성비 좋은 인터넷망을 이용할 수 있습니다.

원래 SKB의 500M 상품을 이용했었는데, 거의 동일한 비용으로 1G 상품을 이용할 수 있습니다. 인터넷 속도 측정을 해보면 그래도 600~900M의 실제 속도를 뽑아주고 있습니다.

Mesh 망을 이용해서 여기저기에서도 동일한 WiFi망을 구성할 수 있습니다.

LG 헬로비전의 정식 상품으로 Mesh 패키지가 있지만 조그만 관심이 있다면 직접 Mesh 망을 구축할 수 있습니다. 인터넷 설치할 때 무료로 제공해 주는 LG Giga WiFi와 사제로 구매한 IpTime을 Mesh망으로 연결 할 수 있습니다. 이 방범은 아래에 포스팅되어 있습니다.

Hello Giga WiFI와 IPTime공유기를 이지메쉬(Mesh)로 연동하기 바로가기

LG 헬로비전의 단점

누구나 가족이 될 수는 없습니다.

지역 케이블방송사를 기반으로 하기 때문에 전국적인 커버가 되지 않아서 설치 불가 지역이 있습니다. 하고 싶지만 할 수 없는 그런....

광랜은 가능한 사용하지 말기를..

기가 인터넷 상품은 광통신으로 LG U+ 망을 사용하기 때문에 어느 정도 품질이 보장되지만 광랜 상품은 동축케이블을 타고 오는 방식이라 품질 보증이 잘되지 않습니다. 만약 인터넷 품질이 중요한 분이라면 가격을 좀 더 지불하더라도 기가인터넷 상품으로 신청하시는 것을 추천합니다.

기타

만약 사는 곳에 LG헬로비전이 들어온다면 한번쯤 설치를 고려해 볼 만합니다.

STRAPI V4 새 게시판(Content-Type) 만들고 권한 설정하기

어쩌다보니여기까지~ — Tue, 10 Jan 2023 18:36:37 +0900

프론트앤드 개발자에게 꼭 필요한 백앤드를 책임질 STRAPI

Headless CMS STRAPI 최신 버전을 도커 이미지로 만들어서 시놀로지에 올려 서비스하는 방법

STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 설명

STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 - Settings(설정) 설명

STRAPI V4 새 게시판(Content-Type) 만들고 권한 설정하기

Strapi를 설치했으니 이제 한번 게시판을 만들어보겠습니다. Strapi에서는 콘텐츠 타입(Content-Type)이라고 합니다. Content-Type Builder에서 만들면 됩니다.

Content-Type Builder

생성하기

Content-Type Builder 메뉴를 선택합니다.
Create new collection type 메뉴를 선택합니다.

아래와 같이 Content-Type의 게시판 이름을 작성하는 팝업이 뜹니다. 여기서는 Content-Type의 이름, API로 사용할 단수형 UID와 복수형 UID가 자동으로 만들어집니다. 자동 생성되는 UID는 수동으로 변경을 할 수 있습니다. 또는 Display name을 수정할 수도 있습니다.

Display name의 이름을 작성합니다. 저는 blogPost라고 작성했습니다.
자동으로 API ID(단수형)가 입력됩니다. 카멜 타입은 자동으로 -타입으로 변경됩니다.
자동으로 API ID(복수형)가 입력됩니다. 카멜 타입은 자동으로 -타입으로 변경됩니다.

이제 3개의 입력항목(Field) title, content, user 을 만들어보겠습니다.

먼저 제목(title)으로 사용할 짧은 내용을 입력할 항목인 Text를 선택합니다.

Name에는 title이라고 입력하고 짧은 텍스트인 Short text를 선택합니다.

다음 2번째 항목을 만들기 위해 Add another field 버튼을 클릭합니다.

이번에 많은 내용을 입력해야 하므로 Rich text를 선택합니다.

Name에는 content라고 입력하고 3번째 항목을 만들기 위해 Add another field 버튼을 클릭합니다.

이번엔 Relation을 선택합니다. Relation은 다른 Content-Type과 연결해서 거기의 정보를 불러와서 사용하는 항목입니다.

blogPost 게시판에 생성될 항목 이름을 작성합니다.
6개의 종류 중 첫 번째 것을 선택합니다.blogPost has one User인데 영어의 말처럼 **하나의 글은 하나의 사용자를 갖는다.**라는 의미입니다.
User 게시판(Content-Type)과 연결을 시켜줍니다.

완성입니다. 3개의 필드가 생성된 것을 볼 수 있습니다.

나중에 Add another field 버튼을 클릭하면 필드를 더 추가할 수 있습니다.
Save 버튼을 클릭하면 서버가 재시작되고 전체 페이지가 새로고침이 됩니다. 재시작이라 시간이 조금 걸립니다.

권한 설정하기

게시판(Content-Type)이 하나 만들어졌습니다. 이제 이 게시판에 접속할 수 있는 권한을 설정해야 합니다.

권한은 Settings에서 설정할 수 있습니다.

Settings를 선택합니다.
2번째 메뉴에서 Roles를 선택합니다.
기본적으로 Authenticated와 Public 2개의 Role이 있습니다. Authenticated는 로그인 인증을 한 회원, Public은 로그인 인증을 하지 않은 사람의 접근 권한을 설정할 수 있습니다. 이 Roles는 변경도 가능하고 추가도 가능합니다.
먼저 Public에 대한 접근 권한을 설정하겠습니다.

Public 권한에 대한 것인지 먼저 확인합니다.
지금 생성한 Blog-post가 맞는지 확인합니다.
인증 없는 사람이므로 생성은 불가하고 보는 것만 가능한 권한(find, findOne)만 권한을 줍니다.

Save 합니다.

Authenticated에 대한 접근 권한을 설정하겠습니다.

Authenticated 권한에 대한 것인지 먼저 확인합니다.
지금 생성한 Blog-post가 맞는지 확인합니다.
인증한 사람이므로 모든 권한을 줍니다.

Save 합니다.

이제 완성입니다. 다음 포스팅에는 이 게시판(Content-Type)에 API를 활용하여 글을 작성하는 방법을 설명하겠습니다.

STRAPI V4의 무조건 알아야 하는 관리자 화면의 Settings(설정) 설명

어쩌다보니여기까지~ — Fri, 6 Jan 2023 14:54:04 +0900

프론트앤드 개발자에게 꼭 필요한 백앤드를 책임질 STRAPI>

Headless CMS STRAPI 최신 버전을 도커 이미지로 만들어서 시놀로지에 올려 서비스하는 방법

STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 설명

STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 - Settings(설정) 설명

이전 포스팅에서 STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 설명을 했습니다. 그중 Setting 부분은 중요하기도 하고 내용도 많기 때문에 여기에 별도로 포스팅을 하려고 합니다.

Settings

Settings은 Strapi의 전체적인 기능에 대한 설정을 하는 화면입니다.

GLOBAL SETTINGS

GLOBAL SETTINGS은 Strapi에 대한 일반적인 설정을 하는 부분입니다. Overview, API Tokens, Internationalization, Media Library, Webhooks 메뉴로 구성되어 있습니다.

Overview

Overview 메뉴를 선택합니다.
Strapi의 버전과 업그레이드 위치 등의 링크 정보를 확인만 할 수 있습니다.
로고를 원하는 이미지로 변경할 수 있습니다.

API Tokens

Strapi에게 REST API를 요청할 때 사용 인증 권한부여(Authorization)를 하기 위해 사용하는 Token 리스트입니다.

API Tokens 메뉴를 선택합니다.
새로운 토큰을 을 생성할 수 있습니다.
생성된 토크의 리스트를 확인할 수 있습니다. 연필을 누르면 내용 편집을 할 수 있습니다.

2번 Create new API Token 버튼을 클릭하거나 편집 버튼을 누르면 아래와 같은 Token 발생 화면이 나타납니다.

신규 생성이면 자동으로 Token 번호가 발행되나 편집인 경우는 새롭게 Token을 재생성해야 합니다.
Token 번호입니다. 생성된 Token 번호는 기록이 되지 않기 때문에 이 화면을 나가면 어디에서도 다시 볼 수 없습니다. 그렇기 때문에 해당 Token은 따로 잘 보관하고 있어야 합니다. Token을 다시 생성하면 기존의 생성되었던 Token은 사용할 수 없게 됩니다.
이 Token에 대한 이름과 설명입니다.
Token 사용기간을 설정할 수 있습니다. 기간은 처음 한번 지정하면 더 이상 수정이 되지 않습니다.
Token Type입니다. 읽기만 가능(Read-only), 모든 기능 가능(Full access), 권한 개별 설정(Custom)등을 선택할 수 있습니다.
이 Token에 대한 권한을 확인할 수 있습니다. Token Type가 권한 개별 설정일 경우는 개별로 설정이 가능합니다.

Internationalization

다국어를 지원할 수 있습니다. 기본적으로 English가 Default로 설정되어 있으며 경우에 따라 한국어, 일본어 등 다른 나라의 언어를 지원합니다. 지원한다는 것은 대단한 것은 아니고 글을 작성할 때 Default로 설정한 언어의 입력 페이지와 설정한 다국어의 입력 페이지가 같이 공존하며 자동 번역이 되는 것은 아니고 본인이 직접 작성해서 넣어야 합니다.

위의 화면에서는 Englash와 Korean 2개의 다국어를 설정했습니다.

현재 Korean으로 Default로 설정되어 있는 것을 확인할 수 있습니다.
편집을 통해 Default를 다른 언어로 자유롭게 변경할 수 있습니다.

Internationalization을 활성화했다면...

Content Manager를 선택해서 글쓰기 모드로 진입합니다.
우측의 메뉴에 Internationalization 설정 영역이 활성화됩니다.
Internationalization 설정에 따라 입력을 언어별로 할 수 있습니다. 먼저 Default의 입력 항목이 나오고 우측 메뉴에서 선택한 언어에 따라 입력 항목이 전환됩니다.

Media Library

미디어 라이브러리지만 설정은 거의 이미지에 대한 설정이라고 보시면 됩니다.

Responsive friendly upload : 업로드한 이미지의 사이즈를 3가지로 자동 생성하여 화면의 사이즈에 따라 최적의 이미지를 보여주므로 성능을 좀 높일 수 있다.
Size optimization : 너무 고해상도의 이미지를 업로드하면 최적화된 해상도와 사이즈로 자동 변환을 해 줍니다.
Auto orientation : 사진의 EXIF 정보를 확인하여 자동으로 가로 또는 세로로 회전을 해 줍니다.

Webhooks

웹후크는 HTTP 요청(일반적으로 POST 요청)으로 이벤트가 발생했을 때 다시 되돌려 주는 HTTP 콜백입니다. 애플리케이션에서는 이 콜백을 받고 대부분 후속작업을 진행하는 데이터 및 신호로 사용합니다.
(웹후크는 직접 사용해 보지 않아서 아직 저는 이해도가 떨어지네요 ㅠㅠ)

ADMINISTRATION PANEL

헷갈리지 말아야 할 것이 여기 ADMINISTRATION PANEL에서 설정하는 내용은 Strapi의 관리자 화면에 대한 권한 및 사용자 설정입니다. 아래에 있는 USERS & PERMISSIONS PLUGIN 과는 다릅니다. 일반 User에 대한 설정이 아닙니다.

Roles

관리자의 역할에 대한 정의를 할 수 있습니다. 기본적으로 Author, Editor, Super Admin의 역할이 미리 세팅돼있고 추가로 역할(Role)을 설정할 수 있습니다.

기본 세팅되어 있는 역할입니다.
1. Author : 자신의 콘텐츠를 만들고 관리할 수 있습니다.
2. Editor : 콘텐츠를 만들고 모든 콘텐츠를 관리 및 게시할 수 있습니다.
3. Super Admin : 모든 권한을 가지고 있습니다. Strapi 생성 시 첫 번째 관리자에게 할당됩니다.
현재 권한에 대한 사용자가 몇 명인지 확인할 수 있습니다.
권한을 복사, 수정, 삭제할 수 있으며 복사는 유료 버전에서만 제공됩니다.
새로운 역할을 생성할 수 있습니다.

Users

현재 관리자로 가입되어 있는 사용자의 리스트를 볼 수 있습니다.

관리자를 직접 추가하기 위해 Invite new user 버튼을 클릭합니다.

새로운 관리자를 추가할 수 있습니다.

기본적인 이름과 이메일을 입력합니다.
이 사용자의 역할을 선택하여 설정합니다.

EMAIL PLUGIN

이메일은 비밀번호 재설정이나 이메일 사용자 확인 등.. 시스템에서 이메일을 사용하고자 할 때 필요한 설정을 하는 곳입니다.
기본은 sendmail로 되어 있으나 로컬에서만 작동하기 때문에 production 환경에서는 외부의 서비스를 이용해야 합니다. 아래의 화면은 많이 사용하는 sendgrid 서비스를 활용하기 위해 provider를 설치하고 설정한 화면입니다.

Configuration

Configuartion에서는 직접 작성하는 것이 아니라 config > plugins.js에 작성된 email 설정에서 값을 불러와 보여주는 식으로 되어 있습니다.

USERS & PERMISSIONS PLUGIN

여기는 관리자가 아니라 사용자에 대한 설정을 하는 곳입니다.

Roles

사용자의 역할에 대한 정의를 할 수 있습니다. 기본적으로 Authenticated, Public의 역할이 미리 세팅돼있고 추가로 역할(Role)을 설정할 수 있습니다.

기본 세팅되어 있는 역할입니다.
1. Authenticated : 로그인한 사용자에 대한 역할입니다. 보통 View, Write 등의 권한이 주어집니다.
2. Public : 로그인하지 않은 사람에 대한 역할입니다. 보통 View의 권한만 주어집니다.
현재 역할별 인원수를 확인할 수 있습니다.
이름 및 역할 등을 수정/편집할 수 있습니다.

Providers

회원가입을 쉽게 도와주는 SNS 프로바이더입니다. 대부분 외국계 서비스라 한국에서 도움이 될만한 게 몇 개 없네요. 그래도 Custom도 가능하다고 하니 카카오톡이나 네이버를 연동할 수도 있을 것 같습니다. (아직 해보지는 않았어요 ^^)

기본으로 email은 Enabled 해 놓으시는 것이 좋습니다.
페이스북이나 트위터 등 기타 SNS 서비스들은 해당 SNS에서 적용 코드(Client ID, Client Secret ..)를 발급받아서 적용만 하면 작동이 됩니다.

Email templates

사용자가 비밀번호를 재설정하거나, 이메일로 정상적인 사용자인지 체크하기 위한 이메일 템플릿을 수정할 수 있습니다.

Advanced settings

기타 사용자에 관한 설정을 할 수 있습니다.

로그인했을 때 어떤 역할이 주어지는지 설정할 수 있습니다.
다중 가입이 되지 않게 하나의 이메일당 하나만 가입할 수 있게 설정합니다.
가입 활성화를 False로 하면 더 이상 회원가입을 받지 않습니다. 다만 관리자 페이지에서 직접 추가는 가능합니다.
비밀번호를 재설정하기 위한 페이지 URL을 지정합니다.
회원가입 시 이메일로 정상적인 사용자인지 확인하는 기능을 활성화할 수 있습니다. 미리 시스템에 이메일 기능이 추가되어 있어야 합니다.
이메일을 확인한 후 리디렉션될 URL을 지정합니다.

STRAPI V4의 무조건 알아야 하는 관리자 화면 설명

어쩌다보니여기까지~ — Thu, 5 Jan 2023 17:52:59 +0900

프론트앤드 개발자에게 꼭 필요한 백앤드를 책임질 STRAPI>

Headless CMS STRAPI 최신 버전을 도커 이미지로 만들어서 시놀로지에 올려 서비스하는 방법

STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 설명

STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 - Settings(설정) 설명

얼마 전에 시놀로지의 도커에 STRAPI V4를 이미지로 만들어서 서비스하는 방법을 포스팅했습니다. (위의 링크를 참조하세요.)

이번에는 STRAPI V4의 백 앤드 관리자 화면에 대해서 가장 기초적인 설명을 하도록 하겠습니다.

STRAPI는 Bronze Silver Gold의 유료 서비스와 완전히 무료인 Community Edition을 서비스하고 있습니다. 보통은 Community Edition으로 시작하겠지요.

STRAPI V4 로그인하기

설치를 완료하고 해당 URL에 접속을 합니다.
보통 http://192.168.0.100(도메인IP):12345이렇게 설치한 포트 번호를 적용해서 열 수가 있습니다.

여기에서 좌측에 DEVELOPMENT라고 되어 있으면 개발 환경이라고 보시면 됩니다. 추후 실제 서비스를 할 때는 Production환경으로 할 필요가 있습니다.

관리자 화면

로그인했다 치고..
들어오면 아래와 같은 화면이 나타납니다. 중앙 영역에 있는 내용들은 설명서, 예제 등 참고하거나 도움을 받을 수 있는 일반적인 내용들이므로 시간 날 때마다 영어 연습한다 생각하고 보시면 도움이 많이 됩니다.
중요한 부분은 화면의 좌측에 있는 메뉴들입니다.

Strapi는 대부분 플러그인 또는 모듈 형태로 구현이 되어 있습니다. 좌측의 메뉴도 하나하나 모듈과 플러그인으로 구성되어 있다고 보시면 됩니다. 크게 3개의 그룹으로 형성되어 있습니다.

Content Manager : Content-Type Builder로 생성한 게시판의 내용을 보는 영역
PLUGINS : 설치된 플러그인들을 볼 수 있는 영역
GENERAL : Strapi를 운영하기 위한 기본 메뉴 영역
개인 영역 : 프로필과 로그아웃을 할 수 있는 영역

Content Manager

Content Manager는 기본으로 설치가 되는 모듈입니다. Content-Type Builder로 생성한 게시판의 내용을 보는 영역입니다. 콘텐츠를 보고 수정하고 삭제할 수 있는 CMS 운영의 가장 중요한 영역이라고 보시면 됩니다.

Content Manager로 들어가면 COLLECTION TYPES, SINGLE TYPES 2개의 카테고리가 있습니다.
COLLECTION TYPES은 우리가 일반적으로 아는 게시판이라고 생각하시면 쉽습니다. 하위로 현재 Article과 User 게시판을 볼 수 있습니다. User 게시판은 기본으로 설치되어 있는 게시판이고 Article은 제가 만든 게시판입니다.
SINGLE TYPES은 별도의 고정 페이지라고 보시면 됩니다. 예를 들어 홈페이지라면 회사소개 페이지 정도 되겠네요. 게시판처럼 글이 계속 추가되는 것이 아니라 그냥 딱! 고정된 하나의 화면이라고 보시면 쉽습니다.
현재 화면은 Article이 선택되어 있는 상태라서 Article에 대한 내용이 나옵니다. 옛날부터 많이 보던 게시판 형태지요?
Create new netry 버튼을 눌러서 게시글을 추가할 수 있습니다.

PLUGINS

위에서 이야기했듯이 Strapi의 구성은 대부분 Plugin으로 되어 있고 이 시스템에 설치된 Plugin들을 보여주는 메뉴입니다.

현재 Content-Type Builder, Media Library, Comments 플러그인이 설치되어 있는 상태이고 Content-Type Builder, Media Library는 기본으로 설치가 되어있는 플러그인입니다. Comments플러그인은 제가 설치를 한 플러그인입니다.

Content-Type Builder

Content-Type Builder은 게시판을 만드는 플러그인입니다. 이것을 이용해 위에서 보았던 Article 게시판을 만들었습니다.

COLLECTION TYPES, SINGLE TYPES, COMPONENTS 총 3개의 그룹으로 되어 있고 각 그룹에 해당하는 항목을 제작할 수 있습니다.

COLLECTION TYPES 게시판을 만들 수 있습니다. 현재 기본인 User가 있고 제가 만든 Article이 있네요. 하단에 있는 Create new collection type를 누르면 새로운 게시판을 만들 수 있습니다.
SINGLE TYPES 페이지를 만들 수 있습니다. 현재 제가 만든 TestSinglePage가 있습니다. 하단에 있는Create new single type를 누르면 새로운 페이지를 만들 수 있습니다.
COMPONENTS는 Content-Type Builder에 공통적으로 사용할 수 있는 컴포넌트를 만들 수 있습니다. 하단에 있는Create new component를 누르면 새로운 컴포넌트를 만들 수 있습니다.
현재는 Article이 선택되어 있는 상태라 Article에 대한 게시판 설정화면이 보입니다.
이 게시판의 글쓰기 화면 구성을 어떻게 할 건지에 대한 설정 화면으로 진입할 수 있습니다.
현재 Article 게시판의 입력항목을 추가할 수 있습니다.
Article 게시판의 기본 구성을 변경할 수 있습니다.

입력항목에 대한 좀 더 자세한 설명은 별도로 작성할 예정이고 일단은 여기까지만 설명을 하겠습니다.

Media Library

이미지, 사운드, 영상뿐만 아니라 문서, 압축파일 등 대부분의 첨부 파일에 대해서 한곳에 모아서 관리할 수 있는 플러그인입니다. 제로보드에 익숙했던 우리나라의 CMS에서는 많이 사용하지 않는 방식이긴 하나 외국의 CMS에서는 이런 식으로 많이 사용하나 봅니다.

폴더를 생성해서 폴더별로 관리할 수 있습니다.
새로운 첨부파일을 업로드할 수 있습니다. 일단 업로드 후 원하는 게시글에 링크 형태로 삽입을 하여 사용합니다.
생성된 폴더는 화면의 상단에 폴더를 따로 보여줍니다.
현재 위치의 Assets를 보여 줍니다.

GENERAL

Plugins

플러그인 메뉴는 별것 없습니다. 그냥 이 시스템에 설치된 플러그인들이 무엇인지 보여주기만 합니다. 여기에 보면 내가 설치한 플러그인 외에 기본적으로 설치된 플러그인도 같이 볼 수 있습니다. Content Manager, Content Type Builder, Email, Media Library, Internationalization, Roles & Permissions 은 기본으로 설치된 플러그인이고 Comments는 제가 따로 설치한 플러그인입니다.

Marketplace

Strapi의 장점 중 하나는 커뮤니티를 통해서 플러그인을 계속 개발된다는 것입니다. 그렇게 추가된 플러그인들은 Marketplace를 통해 보여주게 됩니다. 보통 github이나 npm 모듈로 제공되고 있습니다. 본인이 개발한 플러그인이나 프로바이더도 올릴 수 있습니다.

한 가지 아쉬운 점이라면 바로 버튼 클릭으로 설치가 되는 것은 아니고 설치환경에서 CLI를 통해 설치를 해야 한다는 점입니다. 나중에 개선이 될는지는 모르겠네요.

Marketplace는 PLUGINS와 PROVIDERS로 구분됩니다. PLUGINS는 Strapi에 설치되어 기능을 수행하는 듯하고 PROVIDERS는 외부에서 서비스하는 제품과 연동시켜주는 역할을 하는 것 같습니다.(추측~)
Submit plugin : 내가 만든 플러그인을 등록할 수 있는 기능입니다.
이미 등록되어 있는 플러그인이며 Github의 추천인 Star의 점수를 보여줍니다. 이 점수가 높으면 플러그인의 신뢰도가 높다고 보시면 됩니다.
이 플러그인의 설치된 횟수를 보여줍니다.
More : 이 플러그인에 대한 자세한 정보 페이지로 이동합니다.
Copy install command : 미 설치된 경우 Copy install command 버튼이 보이고 이미 설치된 경우는 Installed라고 표시됩니다. 아쉬운 점은 Copy install command를 눌러도 아무런 변화가 없다는 것입니다.

플러그인을 설치하려면 More눌러 들어간 화면에서 설치방법을 숙지하고 CLI로 설치를 해야 합니다.

Settings

세팅 부분은 Strapi 관리자에서 상당히 중요한 부분이고 내용도 많기 때문에 별도의 포스팅을 하겠습니다.
아래 경로를 참고하세요.

STRAPI V4의 무조건 알아야 하는 관리자 화면의 Settings(설정) 설명 바로 가기

Headless CMS STRAPI 최신 버전을 도커 이미지로 만들어서 시놀로지에 올려 서비스하는 방법

어쩌다보니여기까지~ — Tue, 13 Dec 2022 01:54:50 +0900

예전에는 제로보드, 워드프레스 같은 CMS(콘텐츠 매니지먼트 시스템)를 주로 사용해서 카페(게시판)나 블로그 등을 만들어 서비스하는 것이 대세였습니다. 현재는 Frontend의 발달로 인해 백앤드 위주로 서비스되는 Headless CMS가 부상을 하고 있고 그 중심에 STRAPI가 있습니다.

STRAPI

STRAPI는 쉽게 말하면 워드프레스 같은 CMS에서 백앤드쪽의 부분만 담당하는 서비스라고 보시면 됩니다. 프론트앤드는 react.js로 개발하든, vue.js로 개발하든 알아서하고 백앤드는 STRAPI에서 제공하는 RESTful or GraphQL로 데이터를 주고받도록 하는 것입니다. 그렇게 확보된 콘텐츠는 STRAPI에서 관리할 수 있습니다. 자세한 설명은 아래의 링크를 참조하세요.

프론트앤드 개발자에게 꼭 필요한 백앤드를 책임질 STRAPI>

Headless CMS STRAPI 최신 버전을 도커 이미지로 만들어서 시놀로지에 올려 서비스하는 방법

STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 설명

STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 - Settings(설정) 설명

시놀로지 도커에서 STRAPI V4 서비스하기

시놀로지에 보면 도커를 사용할 수 있는 기능이 있습니다.
이 도커를 이용해서 STRAPI를 서비스할 수 있습니다. 그런데 한 가지 작은 문제가 있습니다. 작년까지만 해도 STRAPI에서 도커이미지를 만들어서 도커 허브에 올려줘서 쉽게 사용할 수 있었는데, 지금 4 Version부터는 도커 이미지를 만들어 주지 않는다고 합니다. 그래서 시놀로지 도커의 레지스트리(=도커 허브)에서 STRAPI를 받아서 사용할 겨우 구 버전(STRAPI V3)의 STRAPI만 설치할 수 있습니다.

그래서 직접 도커 이미지를 만들어서 시놀로지에 올려서 서비스해 보기로 했습니다.
도커이미지를 만드느라 3일 동안 삽질하면서 알게 된 정보를 공유합니다. 참고로 저는 도커에 대해서 많이 알지 못하는 초보입니다. 구글링을 하면서 해결한 내용이라 완전히 이해하면서 기록한 것은 아니므로 잘못된 내용이 있으면 지적질 부탁드립니다.

도커 이미지 만들기

먼저 도커가 설치되어 있다는 가정하에 진행하겠습니다. 윈도즈나 맥인 경우 아래의 도커 데스크톱을 설치하면 됩니다.

도커 데스크톱 바로가기

Dockerfile 작성하기

Docker Image를 만들기 위해서는 어떻게 만들 것인지에 대한 내용을 먼저 작성해야 하는데 그것이 Dockerfile 파일입니다. 여기에 작성된 내용 순서대로 이미지가 만들어집니다.

######################## ## Dockerfile 파일 ## ########################  # BASE OS # 이미지의 기본 OS를 무엇으로 할 것인가로 작성합니다. # 여기서는 어렵게 작성했지만.. 결론은 # node.js 14버전이 설치된 alpine 리눅스 OS를 기본 OS로 설치하고 포트는 1337로 설정합니다. ARG NODE_VERSION=14 FROM node:${NODE_VERSION}-alpine AS base-alpine EXPOSE 1337  FROM base-alpine  # alpine 리눅스는 리눅스 중에서도 가장 가벼운 리눅스로 웬만한 기능들은 모두 제거한 OS입니다. # 그래서 기본적으로 사용할 최소한의 프로그램을 설치해 주는 것이 편리합니다. # apk update : 설치되어 있는 프로그램을 최신 버전으로 업데이트함 # apk add ~~ : ~~ 뒤에 작성된 프로그램들을 새로 설치함 RUN apk update && apk add build-base gcc autoconf automake zlib-dev libpng-dev nasm bash vips-dev  # ARG는 Dockerfile 내에서만 사용되는 변수 # 설치할 STRAPI_VERSION을 작성합니다. latest라면 현재 시점에서 최신 버전을 설치하겠다는 의미입니다. ARG STRAPI_VERSION=latest  # 먼저 STRAPI의 지정된 버전을 global로 alpine 리눅스에 설치합니다. # 이렇게 하면 굳이 로컬 컴퓨터에 STRAPI를 설치할 필요가 없습니다. RUN yarn global add @strapi/strapi@${STRAPI_VERSION}  # /srv/app 디렉터리에 STRAPI 소스를 설치할 것입니다. # /srv/app 디렉터리를 만들고 첫 번째 사용자의 권한을 부여해서 디렉터리를 프리하게 만들어 줍니다. # 이제 이 폴더는 제 겁니다. RUN mkdir -p /srv/app && chown 1000:1000 -R /srv/app  # 작업 폴더를 설정합니다. 이제 이 폴더에 프로젝트 파일들이 저장되고 실행될 것입니다. WORKDIR /srv/app  # 로컬 컴퓨터와 데이터를 주고받을 볼륨을 설정합니다. 이제 이 폴더의 내용이 로컬 폴더가 똑같이 공유됩니다. VOLUME /srv/app  # docker-entrypoint.sh를 실행시키기 위해서 docker-entrypoint.sh를 도커의 /usr/local/bin/으로 복사합니다. # 이 파일에 작성된 내용들이 실행되면서 프로젝트 파일이 만들어질 것입니다. COPY docker-entrypoint.sh /usr/local/bin/  # docker-entrypoint.sh의 권한을 풀어줍니다. # 파일이나 폴더를 생성할 때 문제가 생기지 않도록 권한을 부여합니다. RUN chmod 777 /usr/local/bin/docker-entrypoint.sh && ln -s /usr/local/bin/docker-entrypoint.sh  # 도커 이미지를 통해 컨테이너를 처음 실행시킬 때 옮긴 docker-entrypoint.sh 파일을 실행시킵니다. ENTRYPOINT ["docker-entrypoint.sh"]  # 도커 이미지를 통해 컨테이너를 처음 실행시킬 때 명령어가 실행됩니다. CMD ["strapi"]

ENTRYPOINT에 의해서 아래의 docker-entrypoint.sh 파일이 실행됩니다. 이 파일도 Dockerfile 파일과 동일한 공간에 위치해 있어야 합니다.

################################# ## docker-entrypoint.sh 파일 ## #################################  #!/bin/sh set -ea  if [ "$*" = "strapi" ]; then   if [ ! -f "package.json" ]; then     DATABASE_CLIENT=${DATABASE_CLIENT:-sqlite}     EXTRA_ARGS=${EXTRA_ARGS}     echo "Strapi $(strapi version) 버전을 사용 중입니다."     echo "현재 /srv/app 폴더에 프로젝트가 없습니다. 새로운 Strapi 프로젝트를 만듭니다..."      DOCKER=true strapi new . --no-run \     --dbclient=$DATABASE_CLIENT \     --dbhost=$DATABASE_HOST \     --dbport=$DATABASE_PORT \     --dbname=$DATABASE_NAME \     --dbusername=$DATABASE_USERNAME \     --dbpassword=$DATABASE_PASSWORD \     --dbssl=$DATABASE_SSL \     $EXTRA_ARGS   elif [ ! -d "node_modules" ] || [ ! "$(ls -qAL node_modules 2>/dev/null)" ]; then     if [ -f "yarn.lock" ]; then     echo "Node modules이 설치되어 있지 않습니다. Yarn을 이용하여 모듈을 설치 중입니다..."     yarn install --prod --silent     yarn build     else     echo "Node modules이 설치되어 있지 않습니다. npm을 이용하여 모듈을 설치 중입니다..."     npm install --only=prod --silent     npm run build     fi   fi    if [ "$NODE_ENV" = "production" ]; then     STRAPI_MODE="start"   elif [ "$NODE_ENV" = "development" ]; then     STRAPI_MODE="develop"   fi   echo "App을 시작합니다. (with ${STRAPI_MODE:-develop})..."   exec strapi "${STRAPI_MODE:-develop}" else   exec "$@" fi

Docker Image 만들기

자.. 이제 모든 준비는 끝났습니다. 이제 먼저 도커 이미지를 만들어 보겠습니다. 도커 이미지를 만드는 명령어는 아래와 같습니다. 여러 가지 다양한 옵션이 있지만 저는 아래 옵션만 적용했습니다.

docker build -t <생성할 이미지명>:<태그명> <Dockerfile 위치>

# 샘플 docker build -t njo2-strapi-4.5.3:1.0 .

가장 뒤에 있는 .을 빼먹지 말고 붙여주세요. Dockerfile이 있는 위치를 지정하면 되는데 보통은 Dockerfile이 있는 위치에서 명령어를 실행시키기 때문에 현재 위치를 나타내는 .을 붙여줍니다.
이 명령을 실행시키면 아무 변화가 없어 보입니다. 별도의 파일로 다운로드 되는 것은 아닙니다. 도커 명령어나 도커 데스크톱에서 Docker의 이미지 목록을 보면 결과물이 생성된 것을 볼 수 있습니다.

도커 데스크톱에서는 좌측 이미지 메뉴에서, CMD 창에서 docker image ls 명령어를 실행하면...
현재 이미지의 리스트가 나옵니다.

Docker Image를 로컬 파일로 내려받기

시놀로지 Docker에 이미지를 추가하기 위해서는 먼저 도커 이미지를 내려받아야 합니다. 내려받는 파일은 압축파일인 .tar로 다운로드 됩니다. 아래의 명령어를 입력하면 njo2-strapi-4.5.3.tar라는 tar 압축파일이 생성됩니다.

docker save -o <다운로드할 도커 이미지 압축 파일 이름> <생성할 도커 이미지>

# 샘플 docker save -o njo2-strapi-4.5.3.tar njo2-strapi-4.5.3

이제 이 압축파일을 그대로 시놀로지에 업로드합니다.

시놀로지 NAS에 도커이미지 적용하기

이렇게 생성된 이미지는 먼저 로컬 컴퓨터의 도커 데스크톱으로 정상적으로 컨테이너가 생성하고 실행되는지 확인하는 것이 좋습니다. 정상적인 이미지라고 판단되면 이제 시놀로지 NAS의 공유 폴더에 도커 이미지를 올립니다.

시놀로지에 이미지 올리기

위치는 어디든지 상관없습니다. 저는 _IMAGES라는 폴더를 만들고 올렸습니다.

시놀로지 도커에 이미지 등록하기

이제 이 이미지를 시놀로지 도커에 등록을 합니다. 시놀로지에서 도커 프로그램을 실행시킵니다.

도커 앱에서 좌측 메뉴 중 이미지를 선택합니다.
상단 메뉴 중 추가를 선택합니다.
파일에서 추가를 선택합니다.

업로드한 폴더에서 이미지 파일을 선택해서 이미지를 추가합니다. 1GB가 넘어가는 크기라 추가하는데 시간이 좀 걸립니다.(대략 2~5분 정도?) 추가에 실패하는 경우가 있는데 여러 번 더 시도해 보면 올라갈 수 있습니다.

그러면 위와 같이 이미지가 등록됩니다.

Strapi Docker 컨테이너 실행하기

이제 올린 이미지로 컨테이너를 실행하면 되는데, 그전에 먼저 DB도 설치를 해야 합니다. 만약 별도의 DB를 설치하지 않는다면 내장되어 있는 경량의 sqlite를 자동으로 사용하게 되는데 강력한 DB는 아닙니다. 그래서 가능하면 postgreSQL를 설치하고 사용하는 것이 좋습니다.

설치하는 방법은 아래 포스팅을 참조하세요.

시놀로지 NAS의 Docker로 STRAPI 설치하기

위의 포스팅에는 Strapi 컨테이너를 실행하는 부분도 있긴 한데, 아래의 내용이 개선된 내용이니 아래를 참조하시는 편이 좋습니다.
위의 이미지에서 추가한 Strapi 이미지를 더블 클릭해서 컨테이너 설치를 시작합니다.

먼저 네트워크를 선택합니다. 네트워크는 postgreSQL와 동일한 네트워크를 선택하면 됩니다.

보통 bridge를 선택하시면 됩니다.
다음 버튼을 클릭합니다.

컨테이너 이름을 먼저 설정합니다.
고급 설정을 선택합니다.

환경 탭을 선택하고 환경 변수를 입력합니다.
추가 버튼을 7번 클릭해서 입력칸 7개를 만듭니다.
기본 7개의 환경 변수 정보를 입력합니다.

설정해야 하는 환경정보는 아래와 같습니다. 7개의 중요 변수와 4개의 추가 변수를 입력합니다.

설정값 정보 환경 변수 설정

환경 변수	값	설명
NODE_ENV	development	development / production 개발을 할 것인지.
DATABASE_CLIENT	postgres	사용할 db 종류를 작성합니다.
DATABASE_NAME	strapi	strapi_postgres에서 설정한 DB 이름을 작성합니다.
DATABASE_HOST	192.168.0.10	시놀로지 NAS의 아이피 주소를 작성합니다.
DATABASE_PORT	15432	strapi_postgres에서 설정한 Port 번호를 작성합니다.
DATABASE_USERNAME	strapi	strapi_postgres에서 설정한 User를 작성합니다.
DATABASE_PASSWORD	strapi	strapi_postgres에서 설정한 비밀번호를 작성합니다.

아래는 옵션

환경 변수	값	설명
DATABASE_SSL		SSL 보안 여부를 작성합니다.
JWT_SECRET		사용자 권한 플러그 인용 JWT에 서명하는 데 사용되는 암호입니다.
ADMIN_JWT_SECRET		관리자 패널용 JWT 서명에 사용되는 암호입니다.
APP_KEYS		세션 쿠키에 서명하는 데 사용되는 비밀 키입니다.

링크 탭을 클릭합니다.
추가 버튼을 클릭합니다.
컨테이너 이름 중에 postgreSQL를 선택합니다. 미리 postgreSQL를 설치해 놔야 목록에 나옵니다.
임의의 별칭을 입력합니다.

이제 고급 설정을 빠져나와서 다음 버튼을 클릭합니다.

다음으로 포트 설정을 합니다.

로컬 포트는 실제로 서비스할 포트를 작성하면 됩니다. 해당 포트는 방화벽에서 열어줘야 하며 해당 포트로 접속을 할 수 있습니다. 임의의 번호를 입력하면 됩니다.
컨테이너 포트를 작성해야 하며 이포트번호는 특별한 경우가 아니라면 1337포트를 사용하면 됩니다. (dockerFile 설정에서 EXPOSE 1337와 동일하면 됨 )

마지막으로 볼륨을 설정하면 됩니다. 이 볼륨은 로컬 컴퓨터(시놀로지에서는 공유 폴더)의 폴더와 도커 이미지의 특정 폴더와 1:1 매칭이 됩니다. 그래서 이곳에 파일을 추가하게 되면 다른 쪽 폴더에도 동일하게 동기화가 됩니다.

파일 추가 또는 폴더 추가 버튼을 클릭합니다. (Strapi는 폴더만 추가하면 됨)
파일/폴더에는 시놀로지 나스의 원하시는 특정 폴더를 선택해 주면 됩니다.
마운트 경로는 도커 이미지 경로를 작성하면 되는데 특별한 경우가 아니라면 /srv/app를 작성하면 됩니다. (dockerFile 설정에서 VOLUME /srv/app와 동일하면 됨 )

이제 최종적으로 이렇게 생성될 것이라는 요약정보를 보여줍니다.

완료 버튼을 클릭하면 이제 컨테이너가 생성되고 바로 실행이 됩니다.

방화벽 열어주기

설치가 완료되었다면 시놀로지 NAS에서 방화벽을 열어줘야 합니다. 열어주지 않으면 초기 설치될 때 컨테이너가 바로 죽어버릴 수 있습니다.

방화벽은 제어판의 보안 탭에서 지정합니다.

제어판 아이콘 선택합니다.
보안 탭을 선택합니다.
방화벽 탭을 선택합니다.
규칙 편집 버튼을 클릭합니다.

위의 3개의 Strapi 관련 프로그램에 대해서 방화벽을 해제해 주면 됩니다. (프로그램명은 다를 수 있습니다.)

접속해 보기

접속해서 위와 같은 화면이 나타나면 일단 90%는 설치가 완성되었다고 보시면 됩니다. 나머지 문제는 아래 오류에 대해서 처리하면 해결될 수 있습니다.

발생할 수 있는 오류

초기 컨테이너 실행 오류

상황

위의 세팅을 하고 처음 컨테이너를 실행하면 컨테이너가 바로 죽어버리는 현상이 발생할 수 있습니다.
그 이유는 처음 실행될 때 package.json에 의해 node_modules 폴더에 의존성 파일이 설치되게 되는데 이게 시놀로지의 방화벽에 의해 막혀서 설치가 되지 않아 오류가 발생하는 현상입니다.

해결 방법

해결 방법은 간단합니다. 초기 설치할 때 방화벽을 풀어주고 설치하면 설치가 잘 진행됩니다. 다만 설치가 끝나면 다시 방화벽을 활성화시켜야 합니다. 추후 플러그인을 설치하려면 그때도 다시 방화벽을 열었다가 설치가 완료되면 다시 닫아주셔야 합니다. (위의 설명 확인해 주세요.)

xxx파일 : no such file or directory

docker-entrypoint.sh : no such file or directory 또는 package.json : no such file or directory

상황

Dockerfile 을 만들어 컨테이너로 실행할 때 위와 같은 식의 오류가 발생하는 경우가 있습니다. 아무리 살펴봐도 잘못된 부분이 없는데 위의 오류가 발생합니다. 저는 이것 때문에 거의 2일을 날려버렸습니다.
여러 다른 이유가 있겠지만 저의 문제는 CRLF 문제였습니다. CRLF, LF는 줄바꿈 타입인데 CRLF는 (\r\n), LF는 **(\n)**의 보이지 않는 코드가 들어갑니다. 이것은 리눅스, 윈도우 같은 OS 별로 다른 형태의 기본 줄바꿈을 가지고 있기 때문에 발생하는 문제입니다.

해결 방법

해결 방법은 CRLF였다면 LF로 변경해 보고 LF였다면 CRLF로 줄바꿈 형식을 바꿔보시면 됩니다.
만약 vsCode를 사용한다면 아래와 같이 수정이 가능합니다.

우측 하단의 CRLF또는 LF를 클릭합니다.
상단 중앙에 2개 중 선택하는 메뉴 중에 하나를 선택합니다.

Strapi: Warning an error occurred while requesting the API

상황

이 부분은 정상적으로 설치가 되고 초기 화면까지는 나오는데 실제 관리자 화면(https://localhost/admin)으로 접속했을 때 Strapi: Warning an error occurred while requesting the API라는 오류 화면이 나올 때가 있습니다.

해결 방법

위의 문제는 보통 서비스하기 전에 먼저 Build를 한번 해 놓으면 해결이 됩니다. ( yarn build )
위의 코드에서는 해결 방법을 이미 적용시켜놓은 상태인데 덕분에 처음 로딩 시 build 하는 시간이 더 소요가 됩니다.

# ...   if [ -f "yarn.lock" ]; then     echo "Node modules이 설치되어 있지 않습니다. Yarn을 이용하여 모듈을 설치 중입니다..."     yarn install --prod --silent     yarn build # 빌드를 추가함   else     echo "Node modules이 설치되어 있지 않습니다. npm을 이용하여 모듈을 설치 중입니다..."     npm install --only=prod --silent     npm run build # 빌드를 추가함   fi # ...

oci runtime exec failed "/bin/bash"

상황

위의 문제는 사실 오류는 아닙니다. 다만 해당 OS에 bash가 없어서 생기는 문제입니다.
도커 이미지의 베이스 OS로 사용하는 alpine리눅스가 몸집을 가볍게 하기 위해 대부분의 기능을 제거한 버전이라 용량이 작은 대신 없는 기능들이 있기 때문입니다. 그중에 bash 프로그램도 뺏기 때문에 이런 현상이 생기는 것입니다. bash 대신 sh는 기본으로 사용이 가능합니다.

해결 방법

위의 문제는 dockerFile에서 alpine를 설치하는 코드 다음에 아래의 코드를 추가하면 됩니다.

RUN apk update && apk add bash

위의 dockerFile에는 적용해 놓은 상태입니다.

[Google Sheets] 소계 합산할때 유용한 SUBTOTAL 함수 활용하기

어쩌다보니여기까지~ — Mon, 28 Nov 2022 16:24:43 +0900

구글 시트나 엑셀에서 소계가 포함된 계산을 할 때 요긴하게 사용할 수 있는 함수 중에 SUBTOTAL 함수가 있습니다. 이 함수는 구글 시트뿐 아니라 엑셀에도 동일하게 존재합니다.

SUBTOTAL() 함수가 필요한 상황

시트의 열(세로)에 대한 부분 합을 계산해 줍니다. 아래의 2개의 동일한 합계를 구하는데, 첫 번째의 합계는 1,600,000원이고 두 번째의 합계는 1,200,000원입니다. 정상적이라면 오른쪽처럼 1,200,000원이 나오는 것이 맞습니다. 체험비와 식사비는 소계가 적용되어 있기 때문에 모두 더한다면 중복 계산이 되기 때문입니다.

1,600,000 : 소계까지 더해진 금액이므로 틀린 값입니다.
1,200,000 : 소계가 중복 계산되지 않기 때문에 맞는 값입니다.

이렇게 소계가 포함된 합산식에서 매우 편하게 사용할 수 있는 함수입니다.

SUBTOTAL() 함수 사용 방법

SUBTOTAL은 꼭 범위의 합산만 구하는 함수는 아닙니다. 아래와 같이 다양한 값을 구할 수 있으며 그래도 일반적으로 가장 많이 사용하는 9번 또는 109번인 SUM() 정도는 기억해 놓는 것이 좋습니다.

구문

SUBTOTAL(함수 코드 번호, 범위 1, [범위 2, ...])

함수 코드 번호

Code (숨겨진 행 포함)	Code (숨겨진 행을 무시)	기능	번역
1	101	AVERAGE	평균값
2	102	COUNT	숫자가 있는 셀의 개수
3	103	COUNTA	숫자나 문자가 있는 셀의 개수
4	104	MAX	최고값
5	105	MIN	최젓값
6	106	PRODUCT	곱
7	107	STDEV	표본표준편차
8	108	STDEVP	표준편차
9	109	SUM	합계
10	110	VAR	표본분산
11	111	VARP	분산

사용 예제

가장 많이 사용되는 SUM에 대해서만 사용 설명을 해보겠습니다.

체험비는 번지점프, 레일바이크, 우도 잠수함, 9.81파크 이용에 대한 소계 비용입니다. 사실 요기에서는 SUM() 함수나 SUBTOTAL() 함수나 동일한 결괏값이 나옵니다.
=SUBTOTAL (9, F5:F8)
식사비도 한라산 비빔밥, 흑돈가, 고기 국수에 대한 소계 비용입니다. 마찬가지로 여기도 SUM() 함수나 SUBTOTAL() 함수나 동일한 결괏값이 나옵니다.
=SUBTOTAL (9, F10:F12)
중요한 부분이 합계를 구하는 부분인데, 여기서도 SUM() 함수가 아닌 SUBTOTAL() 함수를 사용하게 됩니다. 범위는 전체 범위를 잡으시면 됩니다. 그러면 SUBTOTAL() 함수가 자동으로 소계에 사용된 SUBTOTAL() 함숫값을 알아서 제외해 줍니다. 그래서 최종 결괏값이 정상적으로 나오게 됩니다. =SUBTOTAL (9, F3:F14)

[Google Sheets] 구글 시트 행과 열 고정하는 방법

어쩌다보니여기까지~ — Fri, 25 Nov 2022 15:18:12 +0900

스프레드시트를 사용하다 보면 내용이 많아질 경우 헤더나 타이틀을 고정해야 편리할 때가 있습니다. 이번 시간에는 그 헤더나 타이틀을 고정하는 방법을 포스팅하려고 합니다.

1번은 행을 고정한 모습입니다.
2번은 열을 고정한 모습니다.

행 고정하기

행 고정하기는 시트의 첫 번째 행, 두 번째 행은 기본적으로 고정을 할 수 있습니다. 또한 현재 커서가 위치한 자리를 기준으로 고정을 할 수도 있습니다.

먼저 고정하기 원하는 행을 선택해 놓습니다.
상단 메뉴에서 보기를 선택합니다.
고정을 선택합니다.
고정에 대한 메뉴를 선택합니다.
1. 행 고정 없음 : 행 고정을 초기화합니다.
2. 행 1개 : 첫 행, 그러니까 1번 행을 고정합니다.
3. 행 2개 : 두 번째 행, 그러니까 2번 행을 고정합니다.
4. 2행까지 : 현재 선택되어 있는 행을 기준으로 고정을 할 수 있습니다. 마우스로 5번째 행을 선택했다면 여기는 5행까지라고 나오게 됩니다.

그러면 위와 같이 가로로 두꺼운 회색의 선이 생기고 그 위쪽으로는 스크롤이 되지 않습니다.

열 고정하기

열 고정도 행 고정과 동일한 방법으로 지정할 수 있습니다.

방법은 행 고정과 동일합니다.

[Google Sheets] 구글 시트 조건부 서식의 모든 것

어쩌다보니여기까지~ — Wed, 23 Nov 2022 11:31:03 +0900

구글 시트도 엑셀처럼 조건부 서식이 가능합니다. 조건부 서식이란 셀의 내용이 특정 조건에 해당할 경우 그 셀 또는 그 라인의 스타일을 변경할 수 있는 기능입니다.

조건부 서식

조건부 서식은 크게 2가지로 나눌 수 있습니다.

해당 조건에 맞는 경우 자기 자신 셀의 스타일을 변경하는 일반 조건부 서식과
다양한 조건과 서식을 적용할 수 있는 맞춤 수식이 있습니다.

일반 조건부 서식

일반 조건부 서식은 간단하게 조건을 설정할 수 있는 장점이 있습니다. 다만 자기 자신의 셀에 대해서만 서식을 지정할 수 있습니다.

A에서 E까지의 컬럼 중에 점수가 50점 이하인 경우 셀에 표시를 해라라는 조건부 서식입니다.
조건은 텍스트, 날짜, 숫자에 대한 다양한 조건을 한 번에 편리하게 지정할 수 있지만 서식이 적용되는 범위는 해당 셀에만 반영이 됩니다.
예를 들어 셀의 조건에 해당하는 행 전체에 대해 서식을 지정하고 싶다면 맞춤 수식을 사용해야 합니다.

맞춤 수식

위의 그림처럼 1번의 일정(내용) 컬럼에 어떤 내용이 들어 있다면 해당 행의 배경색을 엷은 브라운으로 칠해라.
2번의 **일정(내용)**에 **"이동"**이라는 단어가 나오면 해당 행의 배경색을 흰색으로 칠하고 글자는 이태릭체에 회색으로 변경돼서 잘 보이지 않게 해라.
라는 조건부 서식을 적용할 수 있습니다.

맞춤 수식 적용하기

조건부 서식은 조건을 적용할 셀 또는 행를 선택하고
상단 메뉴에서 서식 을 선택합니다.
드롭다운 메뉴에서 조건부 서식을 선택합니다.

그러면 우측에 조건부 서식 규칙 창이 열리게 됩니다. 원래는 아무 내용이 없는 상태지만 예제에서는 3개의 조건부 서식을 이미 설정해 놓은 상태라고 보시면 됩니다.
이 3개의 조건부 서식은 순서를 변경할 수 있으며 적용은 아래부터 위로 적용이 됩니다. 다시 말하면 위쪽에 있는 조건이 상위 조건입니다.

그중에 상위에 있는 조건부 서식을 하나 살펴보기 위해 클릭을 해보겠습니다.

해당 조건이 적용될 범위를 정합니다. 상단 헤더 부분을 제외한 영역이 선택되어 있네요.
다양한 조건이 있지만 여기서는 맞춤 수식을 선택합니다.
맞춤 수식에 대한 조건을 작성하면 되는데 여기서는 =$F3="이동"의 조건을 지정했습니다.
- 조건 수식은 표준 표기법(='sheetname'!cell)을 따릅니다.
- 가장 앞쪽의 =는 수식을 사용하겠다는 표시입니다.
- $F3에서 $는 절댓값을 표시합니다. 다시 말해 F컬럼에 대해서만 조건을 보겠다는 뜻입니다.
- F컬럼의 값이 "이동"인 경우 행에 대해 지정된 스타일을 적용해라라는 의미입니다.
조건이 일치할 경우 해당 셀 또는 행에 적용될 스타일을 지정합니다.
- 볼드, 이탤릭, 언더라인, 취소선, 글자색, 배경색을 지정할 수 있습니다.

이번엔 3번째의 조건부 서식 규칙을 보겠습니다.

다른 조건은 위의 내용과 동일하고 다른 부분은 맞춤 수식만 조금 다릅니다.

조건 수식은 표준 표기법(='sheetname'!cell)을 따릅니다.
- AND 조건은 AND(조건1, 조건2, 조건3, ...) 이런 식으로 모든 조건이 만족해야 참이 됩니다.
- $F3 <> "이동" 조건은 F컬럼의 내용이 "이동"이 아니어야 하고,
- $F3 <> "" 조건은 F컬럼이 "" 공백이 아니면 아래 지정된 서식을 적용해라라는 의미입니다.
- 그래서 "이동"이 아닌 뭔가 내용이 있는 경우는 엷은 브라운 배경색을 칠하게 됩니다.

Google Sheets에서 드롭다운 목록 만들기

어쩌다보니여기까지~ — Thu, 17 Nov 2022 17:31:30 +0900

안녕하세요. 구글 시트에서 드롭 다운 목록 만들기에 대해서 설명하겠습니다. 드롭 다운 목록은 다양한 곳에 활용되는데요. 저는 여행 일정표에 적용하는 예제로 설명을 하려고 합니다.

드롭 다운 목록은 크게 2가지 방법으로 사용하는데요. 그중에 하나는 범례를 이용해서 만드는 방법이 있고, 직접 항목을 입력해서 만드는 방법이 있습니다.

1. 범례를 이용해서 만드는 방법

가장 많이 이용하는 방법으로 별도의 범례 시트를 만들어서 목록 리스트를 만들어 놓고 연결하여 사용하는 방법입니다.

▲ 일자를 적용해 볼 텐데요. 위와 같이 드롭 다운 목록에 1일차 ~5일차까지 적용되어 있는 것을 볼 수 있습니다.

▲ 범례라는 시트를 하나 만들어서 이곳의 항목을 참조해서 불러오게 하는 것입니다.

만드는 방법

드롭 다운 목록은 데이터 > 데이터 확인 기능을 활용하여 만들 수 있습니다.

먼저 날짜가 나올 항목을 선택하고
상단 메뉴바에서 데이터를 선택합니다.
그중에 아래쪽에 있는 데이터 확인을 선택하면 됩니다.

셀 범위는 해당 드롭 다운 목록이 적용될 셀 위치입니다.
항목 중 범위에서의 목록을 선택하면 범례에서 해당 목록을 지정할 수 있습니다.
범위에서의 목록을 선택했다면 어떤 범위의 목록을 적용할 건지 지정할 수 있습니다.
꼭 이 항목을 선택해야지 셀 이 드롭 다운 형태로 표시가 됩니다.
경고 표시를 선택할 경우 입력은 가능하나 빨간 경고 표시가 되고, 입력 거부를 선택할 경우 입력 자체가 되지 않습니다.
저장을 하시면 드롭 다운 이 적용됩니다.

2. 직접 항목을 입력해서 만드는 방법

별도의 시트를 만드는 수고까지 필요 없고 단순하게 만들고 싶다면 항목을 직접 입력하여 만들 수도 있습니다.

만드는 방법

이것도 역시 데이터 > 데이터 확인 기능을 활용하여 만들 수 있습니다.

이번에는 항목 목록을 선택해 줍니다.
그리고 항목을 쉼표로 구분하여 목록을 작성합니다.

위와 같이 항목으로 작성한 드롭 다운 목록이 나타납니다.

Google Sheets 시작하기

어쩌다보니여기까지~ — Mon, 7 Nov 2022 16:57:02 +0900

Google Sheets(줄여서 Sheets)를 사용하는 방법입니다.
일단 설명은 PC에서 작업하는 것을 기준으로 하며, 웹브라우저에서 URL 접근을 통해 시작할 수 있습니다.
다양한 웹브라우저가 있지만 아무래도 같은 구글에서 만들어진 크롬을 사용하는 것이 호환성 면에서 좋을 것 같습니다.

Google Drive 열기

Sheets를 사용하기 위해서는 https://sheets.google.com로 직접 접근하는 방법과 https://drive.google.com 로 접근하는 방법이 있습니다. 아니면 처음부터 문서 자체의 URL로 접근하는 방법도 있고요.

사람마다 개인차는 있으나 저는 일단 https://drive.google.com로 접근하는 방법을 추천드립니다. 내가 주야장천 Sheets만 사용한다면 sheets로 바로 접근하는 것이 편리하지만 구글 독스, 구글 슬라이드 등 구글의 다양한 서비스를 사용한다면 https://drive.google.com로 접근하는 것이 여러모로 좋습니다.

만약 구글 회원가입이 되어 있고 Drive를 사용한다고 하면 위와 같은 화면을 만날 수 있습니다.

내 드라이브는 클라우드로 제공된 내 Drive의 내용을 탐색기처럼 폴더 구조로 구분하여 관리할 수 있습니다.
매인 화면에도 Root의 폴더와 파일들을 보여 줍니다.
현재 나의 클라우드 사용 용량을 볼 수 있으며 만약 무료 저장용량이 15GB를 넘게 되면 추가로 용량을 구매할 수 있습니다.
만약 컴퓨터에 드라이브 프로그램을 깔았다면 클라우드에 자동으로 파일을 동기화할 수도 있습니다.
다른 사람의 공유 문서를 이곳에서 확인할 수 있습니다.
새로 만들기를 하면 여러 가지를 생성할 수 있습니다.
폴더를 만들거나 업로드를 할 수 있고 Sheets도 생성할 수 있습니다.

Google Sheets 사용하기

Sheets를 사용하는 방법은 처음부터 문서를 생성하는 방법이 있고 엑셀 같은 다른 스프레드시트 프로그램의 문서를 불러와서 열어서 사용하는 방법이 있습니다.

먼저 생성하는 방법입니다.

Sheet 생성하기

새로 만들기를 클릭하거나 화살표를 눌러
빈 스프레드시트를 클릭합니다.

화면 구조 설명

새롭게 엑셀과 같은 화면이 생성이 되었습니다. 사용하는 방법에 대해서는 추후 포스팅할 예정입니다.

제목을 작성할 수 있습니다. 오른쪽의 별을 클릭하면 중요 문서함에서 쉽게 접근할 수 있습니다.
메뉴입니다 메뉴를 통해 다양한 작업을 할 수 있습니다.
툴바입니다 다양한 기능을 구현할 수 있습니다.
시트를 추가하거나 삭제할 수 있습니다. 또한 시트의 특징에 맞는 이름으로 변경할 수 있습니다.
실제로 작업할 영역입니다.

Google Workspace 무료 사용 방법

어쩌다보니여기까지~ — Wed, 24 Aug 2022 15:07:01 +0900

구글이 자신들의 수익모델은 광고라고 하면서 천사처럼 많은 유용한 서비스를 무료로 제공하다가 거의 독점적인 지위를 획득 한 다음에 돈을 내라고 하는 모습을 슬슬 보이고 있습니다. 마음에 들지 않지만 대안이 없는 상황에 울며 겨자 먹기로 비용을 지불하게 됩니다.

그러나 괘심하긴 해도 완성도 높은 서비스를 처음에 무료로 제공해 주니 개인 사용자 입장이라면 나쁘게만 보기도 어렵기는 합니다.

그런 서비스 중에 Google Workspace가 있는데 이 서비스도 기업에서 사용하면 유료의 비용을 지불해야 하지만 개인이라면 대부분 무료로 사용할 수 있습니다.

Google Workspace에는 아래의 프로그램들이 포함되어 있습니다.

Google Workspace

Docs : MS워드 같은 워드프로세서 프로그램
Sheets : MS엑셀 같은 스프레드시트 프로그램
Slides : MS파워포인트 같은 프리젠테이션 프로그램
Forms : 설문지 프로그램
Keep : 인스턴트 메모 프로그램
Sites : 웹사이트 만드는 프로그램(유료 서비스에만 포함)
Drive : 온라인 클라우드 저장소
Gmail : 이메일 프로그램
Meet : ZOOM 같은 화상회의 프로그램
Calender : 일정관리 프로그램
Chat : 채팅, 메신저 프로그램

가격

개인이 사용할 경우는 대부분 무료입니다.

대표 프로그램

Google Workspace의 대표 프로그램이라 하면 Drive, Docs, Sheets, Slides라고 할 수 있으며 마이크로소프트의 오피스 프로그램인 MS워드, MS엑셀, MS파워포인트와 비슷한 프로그램입니다. 무료로 사용할 수 있으면 웹브라우저(크롬)만 있으면 언제 어디서나 사용할 수 있습니다.

Google 프로그램끼리 호환성도 좋고 작업물에 대한 댓글이나 채팅, 실시간 수정, 공동 작업 등.. 협업을 하기에 최적화되어 있습니다.

Google Docs

구글 독스는 MS워드나 아래아한글같은 워드프로세스 프로그램입니다. 장점이라고 하면 인터넷 브라우저(크롬)만 있으면 언제 어디서든 무료로 작업이 가능하다는 것입니다. MS워드, PDF등 다양한 포맷의 문서를 가져와 수정하고 다양한 포맷의 문서로 내보내기 할 수 있습니다.

Google Docs 참조

Google Sheets

구글 시트는 MS 엑셀 같은 스프레드시트 프로그램으로 인터넷 브라우저(크롬)만 있으면 언제 어디서든 무료로 작업이 가능합니다. MS 엑셀의 문서를 불러와 사용할 수 있고 다시 내보내기를 할 수도 있습니다. 여러 사람과 같이 공동으로 작업할 수 있습니다.

초기 버전은 간단한 기능만 있었는데, 현재는 MS엑셀과 견주어도 손색이 없을 만큼 기능도 많아지고 안정화도 되어 있습니다.

Google Sheets 참조

Google Slides

구글 슬라이드는 MS 파워포인트같은 프레젠테이션 프로그램입니다. 장점이라고 하면 인터넷 브라우저(크롬)만 있으면 언제 어디서든 무료로 작업이 가능하고 발표도 할 수 있다는 것입니다. 사전에 다양한 탬플릿도 제공하고 있어서 쉽게 발표 자료를 만들 수 있습니다.

Google Slides 참조

Google Drive

Google Drive는 클라우드 저장소이며 Google Workspace의 문서를 작성하게 되면 모두 여기 Google Drive로 저장이 되고 관리를 할 수 있습니다. 해당 관리 화면에 접속을 하게 되면 탐색기처럼 카테고리 형태로 구분하여 쉽게 관리를 할 수 있습니다.
Google Drive는 개인 사용자에게 15GB의 넉넉한 무료 저장 공간을 제공하고 있으며 특별히 이미지나 영상 같은 멀티미디어 자료가 많지 않다면 차고 넘치는 용량입니다. 또한 용량이 부족하다면 추가비용으로 구매를 하여 사용할 수 있습니다.

Google Drive 참조

React.js에서 JSX사용하기

어쩌다보니여기까지~ — Thu, 14 Jul 2022 17:27:19 +0900

JSX란?

React에서 JSX는 필수 요소는 아니지만 React를 코딩하는데 많은 편리함을 더해주는 확장 문법이라고 보면 됩니다.

JSX란? - React 공식웹사이트

React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다. React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

공식 사이트에서는 위와 같이 작성되어 있지만.. 당췌 뭔 소린지...

쉽게 말하면 React.js에서 Virtual DOM을 만들 때 편하게 코딩하라고 HTML처럼 할 수 있게 해주는 템플릿 언어 비스무리한것이다라고 이해하면 될 것 같습니다. (이것도 어려운가? ㅠ)
이렇게 작성된 JSX를 babel로 컴파일을 하면 웹브라우저가 알아먹을 수 있는 javascript로 자동 변환이 됩니다.

예를 들면 아래와 같습니다.

const name = "홍길동"; const element = <h1>Hello, {name}</h1>; ReactDOM.render(element, document.getElementById("root"));

이렇게 될 때... const element = <h1>Hello, {name}</h1>;이 부분이 JSX 문법으로 작성된 것입니다. 이해가 되시나요? "이게 뭐~~ 많이 본것 같은데.."라고 생각할 수 있겠지만, 일반 javascript에서는 DOM을 이런 식으로 만들지 않습니다. document.createElement('h1'); 이렇게 만들지..

JSX 기본 설정

JSX를 사용하기 위해서는 babel을 적용해야 합니다. babel은 정말 개발자들에게는 축복과도 같은 javascript 컴파일러라고 할 수 있습니다. 개발자가 익숙하고 편리한 특정 언어로 코딩을 한 다음에 babel을 돌리면 브라우저가 알아먹을 수 있도록 javascript로 변환을 해주기 때문입니다. JSX 문법도 같은 혜택을 받을 수 있습니다.
적용하는 것도 아주 간단하게 CDN 한 줄만 걸어주면 됩니다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!DOCTYPE html> <html lang="en">     <head>         <meta charset="UTF-8" />         <meta http-equiv="X-UA-Compatible" content="IE=edge" />         <meta name="viewport" content="width=device-width, initial-scale=1.0" />         <title>React CDN 추가</title>         <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>         <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>          <!-- babel 추가 -->         <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>     </head>     <body>         <!-- react가 나타날 위치 -->         <div id="root"></div>          <!-- // javascript의 type를 text/babel로 설정해야 JSX가 번역됨 -->         <script type="text/babel">             const name = "홍길동";             const element = <h1>Hello, {name}</h1>;             //JSX를 사용하여 HTML을 Javascript로 변환 (babel이 역할을 함)             ReactDOM.render(element, document.getElementById("root"));         </script>     </body> </html>

그리고 babel이 컴파일해야 하는 구간을 알아먹을 수 있도록 script type을 "text/babel"으로 해주어야 합니다.
보통 <script type="text/javascript">이렇게 작성을 하는데 <script type="text/babel">이렇게 해야 적용이 됩니다.

JSX 문법

JSX를 사용하기 위해서 몇 가지 주의해야 할 문법이 있습니다.

표현식(Expression)

표현식은 {}로 감싸서 나타내면 됩니다. 대부분의 javascript 표현식은 모두 구현이 가능합니다.

const name = "홍길동"; const nameDetail = {     firstName: "홍",     lastName: "길동", };  const element = <h1>성은 {nameDetail.firstName}이요, 이름은 {nameDetail.lastName}, 전체 이름은 {name}</h1>;  ReactDOM.render(element, document.getElementById("root"));

Function Component

아래 코드처럼 다양한 Function 형태로 컴포넌트화할 수 있습니다.

const title = "기능 컴포넌트화하기"; function Desc() {     return (         <h2>Function 형태로 컴포넌트화할 수 있습니다.</h2>     ); } const Body = () => <p> 본문 내용이 나오는 영역입니다. </p>; const Footer = () => {return <p> Footer 영역입니다.</p>;};  // 함수형 컴포넌트 function App() {     return (         <>             <h1>{title}</h1>             <Desc></Desc>             <Body />             <Footer />         </>     ); }  ReactDOM.render(<App />, document.getElementById("root"));

Class Component

아래 코드처럼 Class 형태로도 컴포넌트화할 수 있습니다.

const title = "기능 컴포넌트화하기"; function Desc() {     return (         <h2>Function 형태로 컴포넌트화할 수 있습니다.</h2>     ); } const Body = () => <p> 본문 내용이 나오는 영역입니다. </p>; const Footer = () => {return <p> Footer 영역입니다.</p>;};  // 클래스 형 컴포넌트 class App extends React.Component {     render() {         return (           <>             <h1>{title}</h1>             <Desc></Desc>             <Body />             <Footer />           </>         );     } }  ReactDOM.render(<App />, document.getElementById("root"));

Props 사용하기

Props를 이용하여 컴포넌트에 값을 넘길 수 있습니다. <Body>에서 title 과 desc의 속성을 넘기면 Body컴포넌트가 props로 받아서 사용할 수 있습니다.

const Body = (props) => {     return         <>           <p> 제목 : {props.title}</p>;           <p> 내용 : {props.desc}</p>;         </> };  function App() {     return (         <Body title="제목입니다." desc="설명입니다." />     ); }

구조 분해 할당 (튜플 분해)

props를 넘길 때 구조를 분해해서 할당할 수도 있습니다. 받는 쪽에서 아예 { title, desc }으로 받아서 굳이 props를 작성할 필요 없이 바로 받아서 사용할 수 있습니다.

const Body = ({ title, desc }) => {     return         <>             <p> 제목 : {title}</p>;             <p> 내용 : {desc}</p>;         </> };  function App() {     return (         <>           <Body title="제목입니다." desc="설명입니다." />         </>     ); }

조건(3항) 연산자 사용하기

jsx의 표현식을 활용할 때 if 문은 사용할 수 없고 대신에 3항 연산자로 사용할 수 있습니다. 3항 연산자란 일반적인 if 문을 축약한 형태입니다.

// 일반 if 문. if (yn === true) {     return <Body title="제목입니다." desc="설명입니다." />; } else {     return <Body title="없습니다." desc="아닙니다." />; }  // 3항 연산자 {     yn === true ? <Body title="제목입니다." desc="설명입니다." /> : <Body title="없습니다." desc="아닙니다." />; }  // AND 연산자 : true 면 실행, false 면 아무것도 없음. {     yn === true && <Body title="제목입니다." desc="설명입니다." />; }

JSX 사용 시 주의사항

하나의 부모 요소만 있어야 합니다.

컴포넌트는 하나의 요소로만 감싸져야 합니다. 만약 아래와 같이 하나 이상의 요소가 있으면 에러가 발생합니다.

// 이렇게 묶어주는 하나의 부모 태그가 없으면 오류가 발생함 function App() {     return (         <h1>{title}</h1>         <Desc></Desc>         <Body />     ); }  // 아래와 같이 가상의 태그로라도 하나로 묶어주어야 정상임 function App() {     return (         <>             <h1>{title}</h1>             <Desc></Desc>             <Body />         </>     ); }

class는 className로 작성해야 합니다.

jsx에서 태그의 attribute 이름으로 class를 작성할 때는 className으로 작성해야 합니다. 왜냐하면 javascript에 기본적으로 class가 있기 때문에 혼돈을 없애고자 className으로 사용해야 합니다.

function App() {     return (         <>             <h1 class="abc">{title}</h1> <--// X 오류 발생             <h1 className="abc">{title}</h1> <--// O 정상 작성             <Desc />             <Body />         </>     ); }

HTML attribute 이름 대신 camelCase 프로퍼티 명명 규칙을 사용해야 합니다

jsx에서 style를 작성할 때로 "-"가 아니라 camelCase를 사용해야 합니다.

function App() {     const style = {         font-size: '20px' // X 오류 발생         fontSize: '12px' // O 정상 작동     }      return (         <>             <h1 className="abc" style={style} >{title}</h1>             <Desc />             <Body />         </>     ); }

React.js의 아주 기초적인 사용법

어쩌다보니여기까지~ — Mon, 11 Jul 2022 20:11:26 +0900

React를 공부하기 시작했습니다. 아주 간단한 것부터 알게 된 것을 기록해 볼까 합니다. React는 프레임워크라기보다는 라이브러리라고 할 수 있습니다. 그렇기 때문에 기존의 HTML에 간단하게 React를 적용할 수 있습니다.

먼저 가장 기본적인 HTML은 아래와 같습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>그냥 HTML 기본 구성</title>
  </head>
  <body>
    <div></div>
  </body>
</html>

React.js 적용하기

react.js를 적용하기 위해서 먼저 react.js javascript CDN을 적용해야 합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React CDN 추가</title>

    <!-- CDN 추가 -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  </head>

  <body>
    <div></div>
  </body>
</html>

이제 이 HTML 문서는 React를 실행시킬 수 있습니다. 간단하죠? 한번 간단하게 적용해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React CDN 추가</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  </head>

  <body>
    <!-- react가 나타날 위치 -->
    <div id="root"></div>
    <script type="text/javascript">
      // react가 나타날 위치에 h1 태그를 생성
      ReactDOM.render(React.createElement("h1", { style: { color: "blue" } }, "안녕하세요."), document.getElementById("root"));
    </script>
  </body>
</html>

먼저 react가 발현될 dev를 지정합니다. 보통은 id="root"를 많이 사용하나 바꾸어도 상관없습니다. 그리고 react 문을 작성합니다. react도 javascript이므로 javascript 형식으로 작성합니다.

<script type="text/javascript">
  ReactDOM.render(React.createElement("h1", { style: { color: "blue" } }, "안녕하세요."), document.getElementById("root"));
</script>

위의 구성은 React의 라이브러리를 사용한 것입니다.

ReactDOM.render(A, B); : A를 B에 표시해라라는 의미입니다.
React.createElement(A, B, C) : A Tag를 B의 속성으로 C의 내용을 넣어서 DOM을 만들라는 의미입니다.

그래서 위와 같이 적용을 하면 id="root" 위치에 <h1 style="color:blue" >안녕하세요.</h1>이 만들어집니다.

적용하는 것은 간단하죠?

다음 포스팅은 JSX를 적용하는 방법을 작성해 보려고 합니다.

T스킨BASIC V2 Version 2.5.5 배포합니다

어쩌다보니여기까지~ — Thu, 16 Jun 2022 18:51:34 +0900

안녕하세요. 스킨 업데이트(Version 2.5.5)를 했습니다.

스킨 다운로드

Hotfix

댓글창 여닫을 때 댓글의 레이아웃이 틀어지는 현상 수정
모바일 화면일 경우 댓글 글쓰기 버튼이 보이지 않던 부분 수정

수정된 파일

script.js
style.css

컴퓨터 최적화 프로그램 구라제거기 사용법

어쩌다보니여기까지~ — Thu, 16 Jun 2022 14:51:30 +0900

컴퓨터, 특히 게임을 하다 보면 사양이 충분함에도 불구하고 자꾸 렉이 걸려서 짜증이 나는 경우가 있습니다. 그럴 경우 해결하는 방법이 여러 가지가 있지만 그중에서 컴퓨터에 불필요하게 설치되는 보안 프로그램들도 한몫합니다. 은행이나 관공서 웹사이트에 접속을 하게 되면 키보드 보안 프로그램부터 다양한 프로그램들이 자동으로 설치가 됩니다. 그 웹사이트에서 일을 볼 때는 필요하겠지만 그 일이 끝난 다음에서는 그냥 컴퓨터의 리소스를 잡아먹는 민폐 프로그램이 되어 버립니다.
그런 민폐 프로그램들을 삭제해 주는 최적화 툴이 구라제거기 입니다.

구라제거기 설치법

이름이 좀 구리지만, 저는 이런 이름 좋아합니다. 너무~ 한국적이야..
먼저 개발자님의 블로그 사이트로 이동을 합니다. 티스토리 블로그를 사용해서 배포를 하고 계십니다. (감사~)

https://teus.me/category/IT/%EA%B5%AC%EB%9D%BC%EC%A0%9C%EA%B1%B0%EA%B8%B0

프로그램이 업데이트될 때마다 올리시므로 가장 위쪽에 있는 게시글을 보고 다운로드를 하시면 됩니다.

다운로드한 프로그램을 압축 해제하면 2개의 폴더(x64와 x86)가 있는데 보통 64비트 운영체제를 사용한다면 x64 폴더의 파일을 설치하면 됩니다.

해당 폴더에는 3개의 파일이 존재합니다.

구라제거기 설치 파일
구라제거기로 제거가 되지 않는 프로그램을 직접 제거할 수 있는 Uninstall 프로그램

1번인 구라제거기를 설치하면 일단 윈도우에서 정말 설치할 것이냐고 물어봅니다. 해당 프로그램이 Windows에 등록이 되어 있지 않다 보니 일단 막고 보는 것이니 그냥 설치를 진행하시면 됩니다.

추가 정보를 클릭합니다.

그러면 실행 버튼이 보입니다. 이 버튼을 클릭하여 설치를 진행합니다.

구라제거기 사용법

설치가 되면 일단 쭉~ 한번 컴퓨터를 읽어서 민폐 프로그램들을 찾아냅니다.

제 컴퓨터에서 8개나 있었네요.

리스트를 마우스 오른 클릭을 하면 업무용 프로그램 등록을 할 것인지 물어봅니다.
업무용 프로그램으로 등록되었다면 관리 버튼을 눌러서 관리할 수 있습니다. 이 업무용 프로그램은 상황에 따라 제거를 하지 않을 수도 있습니다.
선택한 프로그램만 제거할 수 있습니다.
모든 프로그램을 제거할 수 있습니다.
삭제를 한 후 목록을 다시 읽어서 모두 삭제가 되었는지 확인하면 됩니다.

이렇게 아무것도 나오지 않는다면 정상적으로 모두 삭제된 것입니다.

그 후에 2번인 np~~ 어쩌고하는 Uninstall 파일 2개도 실행해서 제거해 주면 됩니다.

Google캘린더(달력)에 대한민국 휴일 표시하기

어쩌다보니여기까지~ — Thu, 9 Jun 2022 14:04:20 +0900

구글 캘린더에 대한민국 휴일을 표시하는 설정에 대해서 소개합니다. 네이버 달력이라면 그냥 기본으로 나오겠지만 구글캘린더의 경우는 별도의 설정을 해 주어야 합니다.
휴일의 표시는 각 나라의 휴일을 구글에서 미리 작성해 놓은 것을 내 캘린더에 불러와 적용하는 방식으로 되어 있습니다.

대한민국 공유일 표시하기

먼저 설정화면으로 이동합니다.

캘린더 화면의 우측상단의 설정 아이콘을 클릭합니다.
메뉴 중 설정을 클릭합니다.

설정화면 중 좌측 메뉴에서 캘린더 추가 메뉴를 선택합니다.
관심분야와 관련된 캘린더를 선택합니다.
지역 공휴일의 모두 둘러보기를 선택하면 각나라의 휴일을 선택할 수 있습니다. 우리는 대한민국의 휴일을 선택합니다.

캘린더에서 공휴일 보기

대한민국 휴일에 대한 설정을 했다면 이제 보기 좋게 표시하면 됩니다.

설정을 정상적으로 했다면 좌측메뉴에 대한민국의 휴일 이라는 캘린더가 보입니다.
캘린더명의 우측끝에 더보기 아이콘을 선택합니다.
색상을 빨간색으로 선택합니다. (보통 공휴일은 빨간색이므로.. ㅎ)
그러면 캘린더에 휴일의 명칭이 빨간색으로 표시되게 됩니다.

감사합니다.