개발 창고

[토스 PO Session] 지속 가능한 성장을 만드는 방법

pIutos — Thu, 31 Jul 2025 06:26:15 +0900

바이럴 성장 만들기 (Designing Viral Growth)

Virality = Payload x Conversion Rate x Frequency

Pay Load
- 바이럴 루프 한번에 몇 명 에게 그 메세지가 도달하는가?
Frequency
- 한 바퀴 안에서 유저가 그 메세지를 얼마나 겪게 되냐
Conversion Rate
- 그 메세지를 한번 봤을 때 신규 유저로 전환되는 비율이 어떻게 되나?

ex. Facebook의 경우 처음 회원가입 때 다른 소셜 서비스의 친구들에게 초대기능 => Payload: High, 나머지는 low(1대 다, 첫 회원가입시 일회성)
Paypal의 경우 친구 초대시 1만원 지급 => Conversion Rate: Very High, 나머지는 low(일회성, 1대1)

Growth는 MAU가 아니라 CC를 높이는 것

두 목표의 차이점

지속가능하지 않은 것은 장기적으로 무의미함

지속가능하지 않은 것들의 예시

프로모션 마케팅 (일시적 마케팅)
다크 패턴 푸시
한동안만 가능한 회원가입 퍼널에서의 Tweak
리텐션이 보장되지 않은 Paid Marketing
법률적 혹은 PR 이슈로 인해 결국엔 문제가 될 제품 경험이나 퍼널
잠시만 노출할 예정인 홈 화면 인텔리전스 (ex. toss 메인 탭)

그럼 어떤 CC 값을 목표로 하는게 맞을까?

=> Usecase의
a. Broadness
b. Frequency
-> Online Penetration (온라인 전환)
-> Competition Divide Opportunities (해당 시장에서 나눠먹기: 초기에 빠르게 선점하는것이 중요)
-> Maximum C.C (=> 당신 회사의 벨류에이션의 최대값 - 이 이상을 넘어갈 수 없음)
-> Current MAU

온라인 서비스라면 Frequency는 월 3~4번이 임계점. 그 이하면 가능성이 없다

CC에게 가장 큰 영향을 주는 것은 어떤 지표들일까?

Carrying Cpacity = # Of New Daily Customers / % Customers you Lost Each Day

중요도순

Churn
Retention
Activation
Acquisition

: 많은 기업들이 반대로 보고있음..!

Cohort Retention Plateau와 WAU 대비 MAU 비율은 차이가 있을까?
- -> 전혀 다른 지표이고, Cohort Retention Plateau를 봐야한다. 매주 일으키는 변화가 좋은 쪽으로 가는지 안좋은 쪽으로 가는지는 WAU/MAU로는 알 수 없음.

하고 있는 일이 긍정적인 변화를 주는지 매주 어떻게 알 수 있을까?

7d Trailing CC
30d Trailing CC
를 비교하며 추적하면 매주 나의 행동이 미치는 영향을 이해할 수 있다.

30d는 얼마나 빨리 영향을 받냐는 볼 수 없음. 천천히 올라가기 때문.
그렇다면 7d를 보면 매일매일 행동에 따라 1/7로 올라가기 때문에 가파르게 올라감
(7d가 먼저 반응하고, 30d가 따라감)

다른 요인이 있을 수 있기에 30d도 보조로 같이 보는 것.

악영향을 끼치면 반대로 내려가겠지

제품 구조

Top Funnel (총 노출 규모 - 마케팅, organic, referral 등)
Wow Factor (입소문의 영향, 바이럴)
Recurring Value (a.k.a Retention) (이 제품을 계속 사용할 이유 등, 입소문과 상관없음)

Wow Factor와 Recurring Value는 상관관계가 없음. 하나가 높더라도 다른 하나는 낮을 수 있다.

3가지의 곱이 제품이 일으키는 사회적 Impact의 총량

영상 링크

https://youtu.be/4gjRPJZk2us

Github action으로 npm package 배포 자동화하기

pIutos — Tue, 24 Jun 2025 17:55:35 +0900

이 글에서는 필자가 배포한 tiny-eqaul 패키지를 npm에 배포하는 과정을 자동화하는 github workflow를 쓰게된 계기와, 코드를 공유하고자 한다.

배포 자동화를 도입하게 된 계기

npm 패키지의 새 업데이트를 배포하기 위해서는 다음과 같은 과정을 거쳐야 한다.

package.json의 version을 업데이트한다.
npm publish로 npm에 해당 version의 업데이트를 배포한다.
github release에 소스 코드 zip 파일을 업로드 후, 업데이트 한다.

이 과정을 업데이트마다 반복하게 되면 번거롭기 때문에, 이 과정을 한번에 수행할 수 있는 workflow를 추가하여 github action을 통해 배포 자동화를 진행하게 되었다.

workflow file 작성하기

프로젝트 루트에 .github/workflows 폴더를 생성한 다음, yaml 파일을 생성한다. 필자는 deploy_and_release_package.yaml 이름으로 파일을 생성했다.

trigger 설정하기

만약 여러 명에서 작업한다면 예를 들어 git flow를 이용하는 경우, release branch에 PR을 올리면 trigger시켜 배포하도록 할 수 있다.
하지만 해당 패키지는 필자 혼자 작업한 패키지이므로, workflow_dispatch를 이용해서 trigger하면 actions 페이지에서 수동으로 workflow를 trigger 할 수 있다.

on:
  workflow_dispatch:
    inputs:
      tags:
        description: 'Semantic Tag'     
        required: true
        default: 'v1.0.0'
        type: string # 'v[0-9]+.[0-9]+.[0-9]+'
      release_body:
        description: 'Release body'
        default: ''
        type: string

input에 sementic tag 버전과 release body, 즉 해당 release에 대한 설명을 추가할 수 있도록 했다. 그러면 아래와 같이 actions 탭에서 workflow를 선택하여 직접 trigger 시킬 수 있다.

actions build

다음으로는 action 환경에서 node 환경 설정을 하고, pnpm build를 통해 패키지를 빌드하여 asset을 만들도록 한다.
이 때 주의할 점은 permissions에 actions, contents에 쓰기 권한 (write)를 줘야한다. 그렇게 해야지 해당 action에서 파일을 업로드 하고, commit을 업데이트 할 수 있다.

jobs:
  publish_npm:
    name: Publishing to NPM

    runs-on: ubuntu-latest

    permissions:
      actions: write
      contents: write
      id-token: write

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - uses: pnpm/action-setup@v4
        name: Install pnpm
        with:
          run_install: false

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: latest
          cache: 'pnpm'
          registry-url: https://registry.npmjs.org/

      - name: Install dependencies
        run: pnpm install

      - name: Build dist files
        run: pnpm run build

다음으로는 앞서 말한 3가지 문제점을 차례 차례 구현해보겠다.

1. package.json의 버전 업데이트하기

bump-version을 사용하면 package.json의 버전을 수동으로 업데이트 할 수 있다. 해당 action을 사용해서 package.json의 버전을 앞서 받은 inputs.tag와 함께 업데이트 시킨다.

  # Deploy package to NPM
      - name: Bump Version of package.json
        uses: ramonpaolo/bump-version@v2.3.1
        with:
          tag: ${{ inputs.tags }}
          commit: true
          branch_to_push: 'main'

2. npm에 패키지 publish 하기

# ...
- name: Publish package to NPM
  run: npm publish --provenance --access public
  env:
    NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

필자는 NPM_TOKEN을 key로 사용했고, npm에서 발급받은 secret key를 repository에 등록해야한다. 등록하는 방법은 해당 블로그 문서에 잘 정리 되어있으니 참고 바란다.

3. github release에 소스 코드 assets을 등록하기

새 github release를 생성하는 actions/create-release action을 이용했다.
생성할 때, body에 앞서 받은 inputs.release_body를 추가하여 업데이트 사항을 추가할 수 있다.

  # Release package to Github
  - name: Create release
    id: create_release
    uses: actions/create-release@v1
    env:
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    with: 
      tag_name: ${{ inputs.tags }}
      release_name: ${{ inputs.tags }}
      body: ${{ inputs.release_body }}
      draft: false
      prerelease: false

release assets을 추가하기

./dist/index.js폴더 경로에 있는 index.js를 actions/upload-release-asset@v1 action을 이용해 등록한다.

  - name: Upload Release Assets
    id: upload_release_assets
    uses: actions/upload-release-asset@v1
    env: 
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    with:
      upload_url: ${{ steps.create_release.outputs.upload_url }}
      asset_path: ./dist/index.js
      asset_name: tiny_equal.js
      asset_content_type: application/javascript

마무리

이상으로 github workflow를 이용해 npm 패키지를 배포하는 것을 자동화 하는 과정을 작성해 보았다.
궁금한 점이 있다면 댓글로 남기거나, github workflow 공식 문서를 참고하길 바란다.

[NPM] Chalk 패키지 살펴보기

pIutos — Tue, 1 Oct 2024 16:40:14 +0900

chalk 모듈은 터미널 콘솔에 찍히는 로그에 쉽게 색상등의 스타일링을 할 수 있도록 도와주는 패키지이다.

import chalk from 'chalk';

const log = console.log;

// Combine styled and normal strings
log(chalk.blue('Hello') + ' World' + chalk.red('!'));

// Compose multiple styles using the chainable API
log(chalk.blue.bgRed.bold('Hello world!'));

// Pass in multiple arguments
log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));

chalk 패키지는 어떻게 스타일링을 수행하는지 소스 코드를 살펴보자. 중심 동작 설명에 불필요한 코드는 제거하여 설명하겠다.

살펴보기 전에..

터미널에서 스타일링을 하기 위해서는 ANSI escape code를 사용한다. 예를들어 아래와 같이 빨강색에 해당하는 31을 포함한 ANSI code를 원하는 문자열 앞 뒤로 붙여주게 된다면 색이 입혀 출력된다.

소스 코드

package.json

"type": "module",
"main": "./source/index.js",
"exports": "./source/index.js",
"imports": {
  "#ansi-styles": "./source/vendor/ansi-styles/index.js",
  "#supports-color": {
    "node": "./source/vendor/supports-color/index.js",
    "default": "./source/vendor/supports-color/browser.js"
  }
},
"types": "./source/index.d.ts",
"scripts": {
  "test": "xo && c8 ava && tsd",
  "bench": "matcha benchmark.js"
}

우선 패키지의 package.json부터 살펴보자.

type은 module로 ESM 패키지이다. chalk 4까지는 CJS였으나, 버전 5부터는 ESM을 지원한다.
따로 번들링 도구를 이용하여 빌드하지는 않으며, index.d.ts 파일을 직접 작성하여 export 해주고 있다.
script로 testing과 benchmarking을 할 수 있으며, 해당 패키지의 testing에 대해선 글 마지막 단락에 설명하겠다.
한가지 살펴볼만한 것은 Subpath imports를 사용하고 있다는 점이다.

import ansiStyles from '#ansi-styles';
import supportsColor from '#supports-color';

Subpath imports를 이용하면 위와 같이 패키지 내에서 간결하게 모듈을 import 할 수 있다는 이점이 있다.

typescript의 alias 설정과 비슷하며, 간결하게 package.json에서 지정할 수 있다는 장점이 있다. 참고로 typescript 5.4부터 Subpath imports를 공식 지원하므로 한번 쯤 이용해 봐도 좋을 것 같다.

소스 코드 분석

chalk에서 가장 중요한 로직은 크게 source/index.js와 source/vendor/ansi-styles/index.js 두가지 파일에 존재한다.

chalk에서 각 스타일을 모으고, 적용하며 중첩 스타일링을 수행하는 동작은 위 다이어그램에 표기된 모듈과 함수를 통해 이루어진다. 우선 anti-styles 파일부터 살펴보자.

anti-styles

const styles = {
  modifier: {
    reset: [0, 0],
    bold: [1, 22],
    dim: [2, 22],
    italic: [3, 23],
    underline: [4, 24],
    // ...
  },
  color: {
    black: [30, 39],
    red: [31, 39],
    green: [32, 39],
    yellow: [33, 39],
    // ...

이 파일에는 위와 같이 styles Object에 Ansi escape code에 맞는 color code가 정의 되어있다.

이렇게 정의된 객체는 assembleStyles() 함수가 각 property를 가공해서 등록하는 과정을 거친다. 각 스타일의 ANSI code에 해당하는 { open, close } 객체를 생성하여 각 styleName에 매핑한 다음, style을 export한다.

function assembleStyles() {
  for (const [groupName, group] of Object.entries(styles)) {
    for (const [styleName, style] of Object.entries(group)) {
      styles[styleName] = {
        open: `\u001B[${style[0]}m`,
        close: `\u001B[${style[1]}m`,
      };

      group[styleName] = styles[styleName];
    }

    Object.defineProperty(styles, groupName, {
      value: group,
      enumerable: false,
    });
}
// ...
	
const ansiStyles = assembleStyles();

export default ansiStyles;

index.js

import ansiStyles from '#ansi-styles';

for (const [styleName, style] of Object.entries(ansiStyles)) {
  styles[styleName] = {
    get() {
      const builder = createBuilder(this, createStyler(style.open, style.close, this[STYLER]), this[IS_EMPTY]);
      Object.defineProperty(this, styleName, {value: builder});
      return builder;
    },
  };
}

index.js에서는 ansiStyles import 한 다음, 반복문을 통해 styleName 각각에 createBuilder()를 이용하여 builder를 생성한다. 각 style의 open, close 값을 통해 styler를 생성한 다음 createStyler()를 통해 builder에 제공한다.

이때 createStyler()의 3번째 인자에 this[STYLER]를 받는데, 잘 기억해 두길 바란다.

const createBuilder = (self, _styler, _isEmpty) => {
  const builder = (...arguments_) => applyStyle(builder, (arguments_.length === 1) ? ('' + arguments_[0]) : arguments_.join(' '));	
  // ...
  builder[GENERATOR] = self;
  builder[STYLER] = _styler;
  builder[IS_EMPTY] = _isEmpty;

  return builder;
};

createBuilder의 동작을 살펴보면, argument의 개수에 따라 applyStyle()함수를 적용한다. arguments_를 받아 색을 입힐 string을 array로 가져와(구조분해할당) 여러개라면 Array.join()문으로 합쳐주는 것을 볼 수 있다.

이때 builder[STYLER] = _styler; 를 통해 인수로 전달받은 _styler를 builder에 등록하는 과정을 볼 수 있다.

이 과정으로 만약 체이닝을 통해 새로운 중첩 스타일을 등록한다면, 이 경우 앞서 createStyler()에 제공된 styler의 parent에 등록되게 된다.

const createStyler = (open, close, parent) => {
  let openAll;
  let closeAll;
  if (parent === undefined) {
    openAll = open;
    closeAll = close;
  } else {
    openAll = parent.openAll + open;
    closeAll = close + parent.closeAll;
  }

  return {
    open,
    close,
    openAll,
    closeAll,
    parent,
  };
};

createStyler()는 parent 여부에 따라 다른 방법으로 openAll, closeAll을 반환한다.

const applyStyle = (self, string) => {
  // ...
  let styler = self[STYLER];

  if (styler === undefined) {
    return string;
  }

  const {openAll, closeAll} = styler;
  if (string.includes('\u001B')) {
    while (styler !== undefined) {
      string = stringReplaceAll(string, styler.close, styler.open);

      styler = styler.parent;
    }
  }

  // for ES2015 template literal
  const lfIndex = string.indexOf('\n');
  if (lfIndex !== -1) {
    string = stringEncaseCRLFWithFirstIndex(string, closeAll, openAll, lfIndex);
  }

  return openAll + string + closeAll;
};

builder는 applyStyle()을 통해 styler를 적용한다. 해당 함수를 살펴보면 styler가 중첩되지 않은 경우 바로 string을 반환하는 모습을 확인할 수 있다. 그리고 if (string.includes('\u001B')) 분기를 통해 중첩 여부를 파악하고, while 반복문을 통해 중첩된 스타일을 적용해 준다.

추가적으로 template literal로 작성된 string이 들어온다면, ('\n') 여부를 통해 따로 처리를 해준다.

styles Object 등록

const chalkFactory = options => {
  const chalk = (...strings) => strings.join(' ');
  applyOptions(chalk, options);

  Object.setPrototypeOf(chalk, createChalk.prototype);

  return chalk;
};

function createChalk(options) {
  return chalkFactory(options);
}

Object.setPrototypeOf(createChalk.prototype, Function.prototype);
// createChalk의 prototype을 Function으로 변경

// 앞서 builder를 styles에 등록하는 로직

Object.defineProperties(createChalk.prototype, styles);


const chalk = createChalk();

// ...

export default chalk

최종적으로, style을 만드는 builder 로직이 담긴 styles 객체를 createChalk prototype에 등록해준 다음 default export한다. 따라서 앞선 가장 처음의 예제와 같이 스타일을 적용하고, 중첩해서도 적용할 수 있게 된다.

+ RGB Colors 기능

chalk는 기본적인 style 이외에도 RGB 컬러를 직접 입력하여 사용할 수 있도록 하는 기능도 제공한다.

// Use RGB colors in terminal emulators that support it.
log(chalk.rgb(123, 45, 67).underline('Underlined reddish color'));
log(chalk.hex('#DEADED').bold('Bold gray!'));

이 기능은 어떻게 구현되어있는지 간단하게 살펴보자.

// index.js

const usedModels = ['rgb', 'hex', 'ansi256'];

for (const model of usedModels) {
  styles[model] = {
    get() {
      const {level} = this;
      return function (...arguments_) {
        const styler = createStyler(getModelAnsi(model, levelMapping[level], 'color', ...arguments_), ansiStyles.color.close, this[STYLER]);
        return createBuilder(this, styler, this[IS_EMPTY]);
      };
    },
  };

  const bgModel = 'bg' + model[0].toUpperCase() + model.slice(1);
  styles[bgModel] = {
    get() {
      const {level} = this;
      return function (...arguments_) {
        const styler = createStyler(getModelAnsi(model, levelMapping[level], 'bgColor', ...arguments_), ansiStyles.bgColor.close, this[STYLER]);
        return createBuilder(this, styler, this[IS_EMPTY]);
      };
    },
  };
}

앞서 비슷한 방식으로 rgb, hex, ansi256를 styles Object에 builder를 등록해준다. 추가된 부분은 this.level를 이용하여 getModelAnsi() 함수를 통해 ANSI code로 변환한다는 점이다. 자세하게 설명하면 길어지기에, 더 궁금하다면 해당 함수 소스코드를 살펴보면 좋을 것 같다.

테스팅

"test": "xo && c8 ava && tsd"

chalk는 3가지 패키지를 이용하여 각 영역을 linting 및 testing 한다.

xo: Eslint wrapper. eslintrc 없이 package.json에서 rule을 정의할 수 있다.
ava: Node.js test runner
tsd: type definition 파일(.d.ts)의 테스팅

// test/chalk.js

test('support multiple arguments in base function', t => {
	t.is(chalk('hello', 'there'), 'hello there');
});

test('style string', t => {
	t.is(chalk.underline('foo'), '\u001B[4mfoo\u001B[24m');
	t.is(chalk.red('foo'), '\u001B[31mfoo\u001B[39m');
	t.is(chalk.bgRed('foo'), '\u001B[41mfoo\u001B[49m');
});

test('support applying multiple styles at once', t => {
	t.is(chalk.red.bgGreen.underline('foo'), '\u001B[31m\u001B[42m\u001B[4mfoo\u001B[24m\u001B[49m\u001B[39m');
	t.is(chalk.underline.red.bgGreen('foo'), '\u001B[4m\u001B[31m\u001B[42mfoo\u001B[49m\u001B[39m\u001B[24m');
});

test('support nesting styles', t => {
	t.is(
		chalk.red('foo' + chalk.underline.bgBlue('bar') + '!'),
		'\u001B[31mfoo\u001B[4m\u001B[44mbar\u001B[49m\u001B[24m!\u001B[39m',
	);
});

// source/index.test-d.ts

// -- Properties --
expectType<ColorSupportLevel>(chalk.level);

// -- Color methods --
expectType<ChalkInstance>(chalk.rgb(0, 0, 0));
expectType<ChalkInstance>(chalk.hex('#DEADED'));

// -- Complex --
expectType<string>(chalk.red.bgGreen.underline('foo'));
expectType<string>(chalk.underline.red.bgGreen('foo'));

// -- Complex template literal --
expectType<string>(chalk.underline``);
expectType<string>(chalk.red.bgGreen.bold`Hello {italic.blue ${name}}`);

위와같이 각 chalk의 동작과 type definition 파일에 대한 테스팅이 작성되어 있다.

Rsbuild 기반 Tistory-react 프레임워크 개발기

pIutos — Mon, 19 Aug 2024 01:20:50 +0900

들어가며

Rsbuild 기반의 tistory-react 프레임워크를 개발하게 된 계기와 기술 스택 선정부터 개발을 하며 겪은 많은 문제들을 소개하려 한다.

해당 프레임워크는 아래 깃허브에 오픈소스로 모두 공개되어있다.

https://github.com/eunbae0/tistory-react

GitHub - eunbae0/tistory-react: Create tistory skin with React.js

Create tistory skin with React.js. Contribute to eunbae0/tistory-react development by creating an account on GitHub.

github.com

프레임워크를 개발하게 된 계기

우선 필자는 typescript + tailwindcss 개발 환경을 구축하여 티스토리 스킨을 개발한 경험이 있다. 이 당시 개발을 진행하며 스킨 정보 파일(xml)구문을 파악하고, 치환자를 하나하나 파악하고 적용 하느라 개발하는데 많이 애를 먹었었다. 또한 생 HTML 파일을 작성해야해서 스킨을 개발 완료한 시점에서는 무려 1150줄이나 되는 HTML 파일을 들여다 본다고 고생했다.

당시 skin.html파일. 무려 1153줄이나 된다.

그리고 HTML의 live server를 띄우면 아래처럼 티스토리 치환자가 적용되어있고, 메인페이지와 글 상세 페이지가 혼재하는 등 개발하기 불편한 에로사항이 많았다.

최근에 문득 이 경험이 떠올라 React를 이용하여 개발한 다음 자동으로 HTML, CSS, JS 파일을 빌드해주는 환경을 개발한다면, 그리고 개발 환경에서는 메인 페이지와 글 상세, 태그 페이지 등을 적절히 라우팅 시켜주면 1000줄이 넘어가는 HTML 파일을 작성하지 않아도 되고, 기능을 개발하기 편리한 환경을 만들 수 있지 않을까? 에서 개발을 시작하게 되었다.

개발에 들어가기 전, 계획

목표

우선 크게 3가지 목표를 잡았다.

1. create tistory-react 명령어를 실행하여 쉽게 프로젝트를 시작 가능하도록 할 것.

2. dev환경에서는 라우팅되어 개발하며 HMR 서버가 제공될 것, build환경에서는 이 결과물이 합쳐져서 xml, html, css, js파일을 output으로 내보낼 것.

3. 티스토리 치환자를 완전히 몰라도 깔끔한 문서를 제공해 쉽게 개발이 가능하도록 할 것.

기술 스택 선정하기

- Lerna: cli, core와 같은 패키지를 제공하기 위해 모노레포는 필수 적용사항이었다. 이전에 Lerna를 이용하여 디자인 시스템을 개발한 경험이 있기도 하고 패키지를 개발하기 가장 무난한 Lerna를 선택했다.

- Rsbuild: 번들러는 여러 선택지가 있었다. Vite는 번들링보다는 웹 프로젝트 개발이 중심이기 때문에 선택하지 않았고, 속도 측면에서 esbuild를 선택하고 싶었지만 HMR을 지원하지 않았다. 따라서 속도도 매우 빠르고 HMR을 지원하는 rust기반의 rsbuild를 선택했다.

구현 요구사항

기술 스택을 선정한 다음, 구현시 요구사항을 쭉 적어보았다.

- 모노레포를 이용하여 cli, core, runtime, theme 등의 패키지를 분리하기

- pages/ 하위 폴더에 존재하는 파일의 라우팅 처리(a.k.a. Next.js pages router)

- 개발 환경에서 치환자를 자동으로 적용해주는 가이드를 표시

- build 명령어 실행시 SSG로 HTML 파일을 생성하기

- tistory-react.config 파일의 정의에 따라 XML 파일을 생성하기

- 모든 티스토리 치환자를 React 컴포넌트 형식으로 제공

- cli를 이용하여 프로젝트 시작시 JS, TS 선택 가능

- 문서를 통해 컴포넌트, 치환자를 상세하게 안내

등등.. 많은 요구사항을 정의할 수 있었다. 이후 하나하나 단계별로 개발을 진행했다.

Rspress

Rspress는 Rsbuild 기반의 mdx document 사이트를 제공하는 프레임워크이다.

Tistory-react의 기반이 되는 코드는 대부분 rspress의 코드를 응용하여 작성했다. 개발을 진행하며 rspress의 코드를 분석하며 동작원리를 파악하고, 원하는 기능을 개발했다.

본격적으로 개발하기 (with. 트러블 슈팅)

pages 하위 폴더에 존재하는 라우팅 하기

구상은 Next.js처럼 pages 하위 폴더에 존재하는 폴더명에 따라 라우팅을 구현하는 것이다.

dev 환경에서는 페이지 경로에 따라 일치하는 컴포넌트가 렌더링 되어야 하고, build 환경에서는 라우팅되는 것이 아니라 한 html 파일에 모든 컴포넌트가 렌더링 되어야 한다. 스킨 등록시 html을 분리해서는 안되기 때문이다.

rspress에서는 페이지 경로마다 문서를 SSR로 렌더링하기 때문에 해당 코드를 분석하고 이용했다.

경로에 맞는 컴포넌트를 불러오기 위해 단순히 App.tsx에서 타깃 경로에 있는 컴포넌트를 불러오는 구조를 상상했지만, 실제로 바로 렌더링하는 것은 불가능했고 아래와 같은 방식으로 구현되어 있었다.

1. 우선 globby 패키지를 이용해 타깃 폴더 목록을 가져온다.

2. RouteService에 각 폴더의 정보를 담아 route를 등록한다.

3. RouteService는 path, 컴포넌트의 ReactNode Object 등이 담긴 RoutesCode를 생성할 수 있다.

4. routeVMPlugin 함수에 3을 이용하여 RoutesCode를 할당한 후, 이를 커스텀 rsbuild plugin의 bundlerChain에 등록한다.

5. 해당 plugin은 rsbuild config에 등록되어 dev, build 등의 함수와 함께 실행된다.

6. rspress/runtime/src/Content.tsx에서 해당 모듈을 이용해 page path에 맞는 컴포넌트를 렌더링한다.

7. App.tsx에서 <Theme.Layout />을 불러와 이를 렌더링한다. Layout 컴포넌트에는 Content 컴포넌트를 렌더링하는 로직이 있다.

한줄 요약하자면 빌드할 때 각 routes에 해당하는 컴포넌트 Object가 담긴 모듈을 생성해, Contents 컴포넌트에서 이를 가져와 사용하는 것이다.

이 방식은 rspress의 모든 route 경로의 문서를 생성하는 방식이므로, 프로젝트에는 코드를 일부 수정하여 반영했다.

1. 타깃 폴더를 불러올 때 원하는 article, layout 등의 경로에 해당하는 파일을 불러오도록 필터링 함수 추가

// @core/RouteService.ts

async init() {
    const globby = (await import('@tistory-react/shared/globby')).globby;

    // 1. Filter page route paths file
    const files = await globby(
      [
        `**/pages/{${this.#pageRoutePaths.join(',')}}/index.{${this.#extensions.join(',')}}`,
        `**/Layout.{${this.#extensions.join(',')}}`,
      ],
      {
        cwd: this.#scanDir,
        absolute: true,
        ignore: [
          '**/node_modules/**',
          `**/.eslintrc.${this.#extensions.join(',')}`,
        ],
      },
    );

    const filesRelativePath = files.sort().map(
      filePath => normalizePath(path.relative(this.#scanDir, filePath)), // ex. src/pages/article/index.tsx
    );

    // 2. Error handling if required file does not exist
    filesRelativePath.forEach(defaultRoutePath => {
      if (!isTistoryRouteFile(defaultRoutePath))
        throw new Error(
          `Required file does not include path: /${defaultRoutePath}`,
        );
    });

    // 3. Generate routeInfo
    filesRelativePath.forEach(relativePath => {
      const absolutePath = path.join(this.#scanDir, relativePath);

      const routeInfo = {
        absolutePath: normalizePath(absolutePath),
        relativePath: relativePath,
        pageName: extractPageName(relativePath),
      };
      this.addRoute(routeInfo);
    });
  }

2. Content 컴포넌트에서 dev, build 환경에 따라 route 컴포넌트 렌더링 여부를 결정하고, App.tsx에 추가

// @runtime/Content.tsx

const { routes } = process.env.__SSR__
  ? (require('virtual-routes-ssr') as typeof import('virtual-routes-ssr'))
  : (require('virtual-routes') as typeof import('virtual-routes'));

export const Content = () => {
  const isSSR = process.env.__SSR__;

  // layout 컴포넌트 정의
  const layoutElement = routes.find(
    route => route.pageName === 'layout',
  )!.element;

  if (!isSSR) { // dev 환경에서는 라우팅 처리
    const { pathname } = useLocation();

    layoutElement.props = { 
      children: routes.find(
        route => route.pageName === removeLeadingSlash(pathname),
      )?.element,
    }; // 현재 route와 일치하는 page를 렌더링 한다.
    
    return layoutElement;
  }

  // build 환경에서는 layout에 감싸진 형태로 컴포넌트 렌더링
  const routesElements = routes
    .filter(route => route.pageName !== 'layout')
    .map(route => route.element);

  layoutElement.props = { children: routesElements };

  return layoutElement;
};

이런 방식으로 원하는 요구사항을 구현할 수 있었다.

children이 포함된 Layout 컴포넌트를 렌더링하기

<Layout>
  <MainPage />
  <ArticlePage />
  <GuestPage />
  <TagsPage />
</Layout>

위처럼 Layout 컴포넌트가 하위 페이지를 감싸는 형태로 구상했다.

export const Content = () => {
  // ...
  const routesElements = routes
    .filter(route => route.pageName !== 'layout')
    .map(route => route.element);

  return <LayoutElement>{routesElements}</LayoutElement>;
  // Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
};

이를 위와 같이 직관적으로 바로 구현했더니 에러가 발생했다. ReactNode Object를 직접적으로 React Element에 할당해서 발생한 오류였다.

export const Content = () => {
  // ...
  const routesElements = routes
    .filter(route => route.pageName !== 'layout')
    .map(route => route.element);

  layoutElement.props = { children: routesElements };

  return layoutElement;
};

Object를 억지로 Element에 할당하지만 않으면 되므로, children에 routesElements를 주기 위해 layoutElement.props 속성에 children 값을 routesElements로 할당하는 방식으로 문제를 해결했다.

onclick 이벤트 표시하기

<textarea
  onclick=""
  // ...
/>

티스토리 스킨에서 제공하는 온클릭 이벤트를 사용하기 위해서는, 위 코드처럼 onclick 이벤트에 각 이벤트에 해당하는 치환자를 string으로 넘겨줘야 한다.

하지만 onClick 이벤트에 string을 할당하면 TS 오류와 함께 리액트에서 실제 DOM으로 변환되면서 onclick 이벤트는 표시되지 않는다.

그렇기 때문에 당연히 onClick, onclick에 string을 할당하면 아예 해당 attribute가 사라지며 표시되지 않는다.

dangerouslySetInnerHTML?

onclick을 string 그대로 표시해주기 위해 여러 방법을 찾던 중, dangerouslySetInnerHTML prop을 활용하는 방법이 보여 이를 적용해 보았다.

export const InputTextArea = (props: RepTextareaProps) => {
  return (
    <div
      ref={ref}
      dangerouslySetInnerHTML={{
        __html: `
        <textarea
          onclick="${COMMENT_INPUT_COMMENT}"
          name="${COMMENT_INPUT_COMMENT}"
          ${JSON.stringify({ ...props })}
        />`,
      }}
    />
  );
};

하지만 이 방법은 온전히 textarea를 반환하는 컴포넌트도 아닐 뿐더러, prop을 사용할 때 리액트 props을 innerHTML에 표시만 하지 적용되지는 않고, 그렇다고 감싸는 div에 적용하면 타깃 Node에 적용되지 않기 때문에 사용할 수 없었다.

custom html attribute 사용하기

data-onclick이라는 attribute에 티스토리 치환자에 해당하는 string을 할당하고, 해당 attribute를 HTML render 단계에서 변환하는 방식으로 문제를 해결했다.

export const InputSubmit = (props: RepInputProps) => {
  return (
    <input
      type="submit"
      value={`${props.value ?? props.label ?? '댓글 달기'}`}
      data-onclick={COMMENT_INPUT_ONCLICK}
    />
  );
};

// build.ts

export async function renderHtml() {
  // ...
  
  // appHtml (renderToString을 통해 html string으로 변환됨)
  
  htmlTemplate // string
    .replace(APP_HTML_MARKER, () => appHtml)
    // ...
    .replaceAll(TEMP_ONCLICK_ATTR, 'onclick');

위처럼 data-onclick attribute에 치환자를 할당한 다음, 변환된 html string에서 'data-onclick'을 찾아 'onclick'으로 변환시키는 로직을 추가했다.

onclick 치환자가 잘 반영되었다.

[React Native] FlashList로 리스트의 렌더링 성능 최적화하기

pIutos — Wed, 3 Jul 2024 21:41:39 +0900

들어가며

시대생 서비스의 도서관 예약하기 서비스는 아래 이미지처럼 도서관 현재 좌석 상태를 표시합니다.

도서관 예약하기 서비스

해당 서비스의 좌석 item을 표시하기 위해 보통 18 x 30 크기의 이차원 배열을 이중 리스트로 렌더링합니다.

이를 구현하기 위해 리스트의 렌더링 성능을 최적화하기 위해 공식문서에서 제시하는 FlatList를 사용하고, getItemLayout prop을 이용하여 구현했습니다.

<FlatList
  data={...}
  renderItem={...}
  ...
  getItemLayout={(_, index) => ({
    length: itemWidth + 2,
    offset: (itemWidth + 2) * index,
    index,
  })}
>

하지만 해당 방법을 이용하더라도, 아래와 같이 시뮬레이터 및 실 기기에서 여전히 느린 렌더링 성능을 보여주었습니다.

또한 예약 페이지가 넘어가기 전에 버튼이 잠깐 멈춘듯하는 현상과, 렌더링이 될 때까지 좌석 일부만 표시되는 현상도 볼 수 있습니다.

예약 페이지의 느린 렌더링

이와 같은 현상은 UX를 저하시키는 요소이기 때문에, 개선하기 위해 Shopify/flash-list의 FlashList 컴포넌트를 서비스 코드에 도입하고, 기타 렌더링 성능을 최적화하기 위한 과정을 작성합니다.

FlashList 도입

Shopify/flash-list 패키지는 기존 RN의 FlatList보다 더 나은 렌더링 성능의 FlashList 컴포넌트를 제공합니다.

설치

$ yarn add @shopify/flash-list && cd ios && pod install

적용

<FlashList
  data={currentSeat}
  scrollEnabled={false}
  renderItem={row => {
	// ...
    return (
      <FlashList
        horizontal
        scrollEnabled={false}
        data={rowItem}
        renderItem={({item}) => {
          return (
            <SeatItem
             // ...
            />
          );
        }}
        initialScrollIndex={0}
        estimatedFirstItemOffset={itemWidth + 2}
        estimatedItemSize={itemWidth + 2}
        keyExtractor={(_, index) => index.toString()}
      />
    );
  }}
  initialScrollIndex={0}
  estimatedFirstItemOffset={itemWidth + 2}
  estimatedItemSize={itemWidth + 2}
  keyExtractor={(_, index) => index.toString()}
/>

FlashList의 prop으로 initialScrollIndex, estimatedItemSize 등의 속성을 주면 성능을 조금 더 최적화 할 수 있습니다.

단순히 FlatList를 FlashList로 교체하는 것 만으로도 이전보다는 빠르게 렌더링이 되는 것을 확인할 수 있었습니다.

추가적으로 FlashList는 FlatList와 다르게, List를 감싸는 View의 height, width를 지정해줘야 에러가 발생하지 않습니다.

트러블 슈팅: 레이아웃이 재배치 되는 현상

아래와 같이 처음 렌더링이 완료된 다음, 가로로 layout이 재정렬되는 현상이 발생했습니다.

원인을 파악한 결과, list에 들어갈 각 item의 너비(정사각형)를 소숫점으로 주게되면, 렌더링이 일어난 다음 너비를 재계산한다는 것을 알아냈습니다.

따라서 Math.round() 함수를 이용해 item의 너비를 반올림하여 정수로 설정하여 해당 문제를 해결했습니다.

const itemWidth = useMemo(() => {
  // ...
  return (width - 16) / libraryRowCount - 2; // 기존 
  return Math.round((width - 8) / libraryRowCount - 2); // 변경
  // ...

애니메이션 방식 변경

FlashList를 이용해 렌더링 시간은 이전에 비해 개선되었지만, 여전히 만족스럽지 못한 렌더링 속도를 보여주고 있습니다.

시대생 앱에서는 일관된 애니메이션을 보여주기 위해 reanimatied 기반의 @moti 패키지를 이용해, 아래와 같이 클릭 애니메이션을 추상화하여 사용하고 있습니다.

const AnimatePress = ({children, variant, ...props}: Props) => {
  return (
    <MotiPressable {...props} animate={switchVariant()}>
      {children}
    </MotiPressable>
  );
}

// 사용
<AnimatePress variant="scale_up_00">
  <Component />
</AnimatePress>

하지만 해당 커스텀 컴포넌트의 사용으로 인해 예약 페이지의 렌더링 성능이 저하되는 점을 발견했습니다.

좌: Moti 컴포넌트가 적용된 상태, Moti 컴포넌트를 제거한 상태

item마다 AnimatePress 컴포넌트를 감싸 구현이 되어있는데, devtool을 이용해 확인해 본 결과 View 레이어가 3~4중으로 더 렌더링이 되는 것을 확인할 수 있었습니다.

이에 많은 렌더링이 일어나는 예약 페이지에서는 커스텀 컴포넌트의 사용이 적합하지 못하다 판단하여, reanimated를 이용하여 직접 애니메이션을 구현했습니다.

const SeatItem = (...) => {
  const pressed = useSharedValue<boolean>(false);

  const animatedStyles = useAnimatedStyle(() => ({
    backgroundColor: pressed.value ? colors.grey60 : colors.grey40,
    transform: [{scale: withTiming(pressed.value ? 1.1 : 1, {duration: 250})}],
  }));
  
  // ...

  return isAvailable ? (
    <Pressable
      onPressIn={() => (pressed.value = true)}
      onPressOut={() => (pressed.value = false)}
      onPress={handlePressSeatItem}>
      <Animated.View
        style={[
          {
            width: itemWidth,
            height: itemWidth,
            backgroundColor: SeatStatusColorEnum[status],
            justifyContent: 'center',
            alignItems: 'center',
            borderRadius: 3,
            margin: 1,
            paddingLeft: 0.5,
          },
          animatedStyles,
        ]}>
        // ...
      </Animated.View>
    </Pressable>
  ) : (
    <View>
     // 그냥 View 표시
    </View>
  );
}

Pressable 컴포넌트의 onPressIn, Out prop을 통해 useSharedValue로 생성한 pressed 상태를 변경합니다. 그리고 AnimatedStyle을 컴포넌트에 적용했습니다.

추가적으로, 이미 예약이 불가능한 좌석(ex. 사용 중)은 클릭이 되지 않아야 하기 때문에 해당 경우 Animated가 적용되지 않은 그냥 View 컴포넌트를 렌더링하도록 구현했습니다. 이를 통해 리스트를 조금 더 빠르게 렌더링할 수 있을 것입니다.

reanimated를 이용하여 애니메이션을 직접 적용

결과 및 마무리

좌: 렌더링 성능 개선 전, 우: 개선 후

이번 글에서 소개한 방법으로 도서관 예약하기 페이지의 평균 4~5초에서 1~2초로 렌더링 성능을 많이 개선할 수 있었습니다.

[React Native] native module을 이용해 android notification 띄우기

pIutos — Tue, 18 Jun 2024 20:33:36 +0900

들어가며

Android 환경에서 커스텀 알림을 직접 구현하게 된 계기와 구현 과정, 개발을 진행하며 겪은 문제들과 해결 과정을 소개하려 합니다.

도서관 이용시간 알림 기능은 유저가 앱에서 나간 상태에도 알림으로 현재 이용시간 또는 외출시간을 쉽게 확인할 수 있도록 하는 기능입니다. 토스의 따릉이를 이용할 때 알림으로 남은 시간이 표시되는 것을 보고, 이 기능을 도서관 이용시간 알림으로 도입해보면 유저에게 편리함을 제공할 수 있겠다 생각하여 iOS를 먼저 구현했고(이전 글), Android를 구현하는 과정에 대해 작성합니다.

요구사항

도서관 이용시간 알림은 아래와 같은 기능이 구현되어야 합니다.

iOS는 ActivitKit으로 구현이 되어있음. Android 환경에서는 이와 비슷하게 동작하기 위해 Notification을 이용
카운트 다운 / 카운트 업 표시
알림은 삭제되지 않아야하며, 클릭시 deeplink를 통해 도서관 페이지로 이동해야 함

앱에서 알림을 위해 notifee 패키지를 사용하고 있지만, 요구사항을 만족시키기 위해서는 직접 Native 단에서 알림을 띄우도록 구현해야 했습니다.

이에 NativeModule을 이용하여 직접 알림 구현을 진행했습니다.

비슷한 기능을 만들어놓은 react-native-custom-timer-notification 라이브러리가 존재했지만 이 라이브러리는 요구사항에 해당하는 기능을 완전히 구현하지 못하고, 특히 Android 12+와 react-native의 최신버전인 0.74.x 버전을 제대로 지원하지 않았기 때문에 해당 라이브러리의 코드를 뜯어서 필요한 부분만 커스텀해서 구현을 진행했습니다.

구현

기본 nativeModule 설정

공식문서를 참고하여 작성했습니다.

// MainApplication.kt

// ...
override fun getPackages(): List<ReactPackage> =
  PackageList(this).packages.apply {
    add(LibraryStateNotificationPackage()) // 패키지 추가
  }
  // ...

// LibraryStateNotificationPackage.kt
class LibraryStateNotificationPackage: ReactPackage {
    override fun createViewManagers(
        reactContext: ReactApplicationContext
    ): MutableList<ViewManager<View, ReactShadowNode<*>>> = mutableListOf()

    override fun createNativeModules(
        reactContext: ReactApplicationContext
    ): MutableList<NativeModule> = listOf(LibraryStateNotificationModule(reactContext)).toMutableList()
}

// LibraryStateNotificationModule.kt
class LibraryStateNotificationModule: ReactContextBaseJavaModule {
  constructor (context: ReactApplicationContext): super(context) {
      this.myContext = context
      this.packageName = this.myContext.packageName
  }

  override fun getName(): String {
    return "LibraryStateNotification"
  }
  
  //...

사용할 package와 module을 생성한 다음, MainApplication.kt에 패키지를 추가합니다.

알림 Layout 그리기

res/layout 폴더에 Layout Resource File을 이용해 알림 레이아웃을 만듭니다.

기본 알림의 Layout과 알림을 확장했을 때의 Layout이 다르기 때문에, 각각 만들어주었습니다.

기본적으로 시간 카운터(Chronometer), text, image 순으로 배치했습니다.

Notification Builder 작성하기

Notification.Builder는 Android Notification을 위한 다양한 field값과 content view를 생성하는 객체입니다.

이를 이용해 원하는대로 알림을 커스텀하여 Notification Builder를 반환하는 함수를 작성했습니다.

private fun buildNotification(objectData:ReadableMap): NotificationCompat.Builder {
    val id = notificationId

    val isUsing = objectData.getBoolean("isUsing");
    val dateInterval = objectData.getInt("dateInterval");

    val title = //
    val body = //
    val isCountDown = !isUsing

    val startTime = SystemClock.elapsedRealtime()

    val elapsed: Int = if (isUsing) dateInterval * 1000 else dateInterval * 1000 * (-1)
    val remainingTime = startTime - elapsed

    // set notification view layout
    val notificationLayout = RemoteViews(packageName, R.layout.notification_view);
    notificationLayout.setTextViewText(R.id.title, title)
    notificationLayout.setTextViewText(R.id.text, body)

    notificationLayout.setChronometerCountDown(R.id.simpleChronometer, isCountDown);
    notificationLayout.setChronometer(R.id.simpleChronometer, remainingTime, ("%tM:%tS"), true);

    val bigNotificationLayout = RemoteViews(packageName, R.layout.notification_view_big);
    bigNotificationLayout.setTextViewText(R.id.title, title)
    bigNotificationLayout.setTextViewText(R.id.text, body)

    bigNotificationLayout.setChronometerCountDown(R.id.simpleChronometer, isCountDown);
    bigNotificationLayout.setChronometer(R.id.simpleChronometer, remainingTime, ("%tM:%tS"), true);

    val notificationBuilder: NotificationCompat.Builder =
      NotificationCompat.Builder(myContext,channelId)

    notificationBuilder
      .setContentTitle(title)
      .setContentText(body)
      .setSmallIcon(R.drawable.ic_small_icon)
      .setColor(ContextCompat.getColor(reactApplicationContext, R.color.uoslife_primarybrand)) // small icon background color
      .setStyle(NotificationCompat.DecoratedCustomViewStyle())
      .setCustomContentView(notificationLayout)
      .setCustomBigContentView(bigNotificationLayout)
      .setPriority(NotificationCompat.PRIORITY_LOW)
      .setSound(null)
      .setAutoCancel(false) // 알림 클릭시 제거 방지
      .setShowWhen(false) // timestamp 표시하지 않음
      .setOngoing(true); // 알림 제거 방지

    return notificationBuilder
  }

일부 코드는 생략했습니다. js에서 전달받은 objectData의 프로퍼티는 getInt, getBoolean 메서드 등을 이용하여 가져올 수 있습니다.

코드 순서별로 간단히 소개하면 다음과 같습니다.

js에서 전달받은 title, 여러 상태값 등을 이용하여 알림에 이용하거나 표시하기 위해 변수를 생성합니다.
카운트다운에 사용되는 Chronometer는 SystemClock을 기준으로 표시하기 때문에, remainingTime을 계산합니다.
이전에 만들었던 알림 layout을 선언(notificationLayout)하고, notificationBuilder 필드에 추가합니다.
Notification.Builder를 이용하여 notificationBuilder를 만든 다음, 여러 필드를 추가합니다.
DecoratedCustomViewStyle()을 설정해줘야 알림을 자유로운 layout으로 표시할 수 있습니다.
이후 setCustom(Big)ContentView를 이용하여 선언해두었던 layout을 적용합니다.
주석에 나와있듯 여러 옵션을 이용해 유저가 표시된 알림을 제거하지 못하도록 합니다.

notification channel 생성하기

Android O(API 26) 이상부터는 알림을 띄우기 위해 notification channel이 필요합니다.

buildNotification()함수에 채널을 생성하고, 설정하는 함수를 추가합니다.

private fun buildNotification() {
    // ...
    // set notification channel
    val notificationChannel =
      NotificationChannel(channelId, "도서관 이용시간", NotificationManager.IMPORTANCE_LOW)
    notificationChannel.description = "도서관 이용시간 및 외출시간을 안내합니다."
    notificationChannel.enableLights(true)
    notificationChannel.lightColor = R.color.uoslife_primarybrand
    notificationChannel.setShowBadge(false)
    notificationManager = myContext.getSystemService(NotificationManager::class.java)
    notificationManager.createNotificationChannel(notificationChannel)
    // ...

deeplink를 이용해 알림 클릭 시 동작 구현하기

앱의 deeplink는 React Native Navigation을 이용해 구현되어있습니다.

<!-- AndroidManifast.xml -->

<application android:usesCleartextTraffic="true" android:name=".MainApplication" android:allowBackup="false" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:theme="@style/BootTheme">
  <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode" android:exported="true" android:launchMode="singleTask" android:windowSoftInputMode="adjustPan">
    <intent-filter>
      <action android:name="android.intent.action.MAIN"/>
      <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
    <intent-filter>
      <action android:name="android.intent.action.VIEW"/>
      <category android:name="android.intent.category.DEFAULT"/>
      <category android:name="android.intent.category.BROWSABLE"/>
      <data android:scheme="uoslife"/>
    </intent-filter>
  </activity>
  ...
</application>

AndroidManifast파일에 이렇게 설정되어있는데, intent-filter 설정을 보면 VIEW 액션을 이용하여 deeplink를 여는 것을 확인할 수 있습니다.

private fun buildNotification() {
  // ...
  // mainActivity Intent
  val intent = Intent(Intent.ACTION_VIEW, "uoslife://library".toUri(), myContext, MainActivity::class.java)
    .addFlags(Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_SINGLE_TOP)

  // notification PendingIntent
  var pendingIntent = PendingIntent.getActivity(myContext, 0, intent, if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) PendingIntent.FLAG_IMMUTABLE else PendingIntent.FLAG_UPDATE_CURRENT)
  
  // ...

따라서 ACTION_VIEW 액션을 이용하여 MainActivity class를 여는 Intent를 선언한 다음, 이를 pendingIntent에 할당합니다.

// ...
notificationBuilder
  // ...
  .setContentIntent(pendingIntent)

이를 notificationBuilder.setContentIntent()에 지정해주면 알림 클릭시 intent가 실행되며 deeplink와 함께 앱이 열리게 됩니다.

저는 intent와 pendingIntent의 동작에 대해 알지 못해서 많이 해멨는데, 구현하신다면 관련 문서를 찾아보면 좋을 것 같습니다.

외출 중인 경우, countDown이 종료되었을 때 알림 삭제하기

외출 중인 상태에서 countDown이 종료되면 도서관 좌석이 자동으로 반납됩니다.

따라서 알림을 표시할 필요가 없기 때문에 해당 경우, 알림을 종료하는 코드를 작성합니다.

private fun buildNotification() {
  private lateinit var handler: Handler
  
  // ...
  
  // 외출 시간 종료 후 알림 삭제
  if (!isUsing) {
    val handler = Handler(Looper.getMainLooper())
    handler.postDelayed({
      try {
        removeNotification(id)
      } catch (e:Exception) {
        println(e)
      }
    }, abs(elapsed).toLong())
  }

  return notificationBuilder
 }

외출 중인 경우, handler.postDelayed를 이용해 알림 카운트 시간(elapsed)이 지나면 removeNotification()함수를 실행하는 동작을 추가합니다.

Native Method 내보내기

@ReactMethod 키워드를 이용하여 native에서 실행할 함수를 js로 내보낼 수 있습니다.

이를 이용하여 알림을 실행하는 함수와 제거하는 함수를 작성합니다.

// LibraryStateNotificationModule.kt

//...
private lateinit var notificationManager: NotificationManager
private val notificationId: Int = 255

// ...

private fun startNotification(objectData: ReadableMap) {
	val notificationBuilder:NotificationCompat.Builder = buildNotification(objectData)
	notificationManager.notify(notificationId, notificationBuilder.build())
}

@ReactMethod
	fun startLibraryStateNotification(objectData: ReadableMap) {
	startNotification(objectData)
}

private fun removeNotification(id: Int) {
	val notificationManager = myContext.getSystemService(NotificationManager::class.java)
	notificationManager.cancel(id);
}

@ReactMethod
	fun endLibraryStateNotification() {
	removeNotification(notificationId);
}

startNotification에서는 buildNotification함수를 이용해 NotificationBuilder를 만들고, 알림을 띄웁니다.
removeNotification에서는 알림을 cancle합니다.
도서관 이용시간 알림은 하나의 notificationId를 가지고있습니다. 여러 알림을 띄우지 않고, 하나의 알림만 표시하면 되기 때문입니다.

React Native에서 모듈 적용하기

import {NativeModules} from 'react-native';
import {throwLinkingError} from '../throwLinkingError';

interface ILibraryStateNotification {
  startLibraryStateNotification: ({
    seatRoomName,
    seatNumber,
    isUsing,
    dateInterval,
  }: {
    seatRoomName: string;
    seatNumber: string;
    isUsing: boolean;
    dateInterval: number;
  }) => void;
  endLibraryStateNotification: () => void;
}

export class LibraryStateNotificationBridge {
  static libraryStateNotificationModule(): ILibraryStateNotification {
    return NativeModules.LibraryStateNotification;
  }

  static validateExistModule(func: keyof ILibraryStateNotification): boolean {
    if (
      this.libraryStateNotificationModule() &&
      typeof this.libraryStateNotificationModule()[func] === 'function'
    )
      return true;

    throwLinkingError('LibraryStateNotification');
    return false;
  }

  static start({
    seatRoomName,
    seatNumber,
    isUsing,
    dateInterval,
  }: {
    seatRoomName: string;
    seatNumber: string;
    isUsing: boolean;
    dateInterval: number;
  }): void {
    if (!this.validateExistModule('startLibraryStateNotification')) return;
    this.libraryStateNotificationModule().startLibraryStateNotification({
      seatRoomName,
      seatNumber,
      isUsing,
      dateInterval,
    });
  }

  static end(): void {
    if (!this.validateExistModule('endLibraryStateNotification')) return;
    this.libraryStateNotificationModule().endLibraryStateNotification();
  }
}

지금까지 만들었던 Module을 검증 / 실행하는 bridge class를 작성 후, 서비스 로직에 적용했습니다.

실행할 때는 위 bridge를 이용해 아래와 같이 작성하기만 하면 됩니다.

import {LibraryDynamicIslandBridge} from '../../../utils/ios/libraryDynamicIslandBridge';

LibraryStateNotificationBridge.start({
  seatRoomName: "0 데시벨 1",
  seatNumber: "16",
  isUsing: true,
  dateInterval: // 초
});

결과물

테스트로 '더보기'에 startNotification 동작을 달아두었습니다.

구현이 완료된 모습입니다.

트러블 슈팅

BoradcastReciever를 이용해 intent를 열 수 없는 문제(Android 12+)

알림을 클릭하여 intent를 실행하는 경우, 해당 오류가 발생했습니다.

react-native-custom-timer-notification 패키지는 위 코드처럼 broadcastReciever를 이용해 pendingIntent 동작을 수행하는데, 이 동작 중 activity를 직접 여는 동작은 Android 12+부터 불가해서 발생하는 문제였습니다.

after the user taps on a notification, or an action button within the notification, your app cannot call startActivity() inside of a service or broadcast receiver.

따라서 관련 글을 참고하여 Broadcast를 사용하지 않고 아래와 같이 getActivity를 이용하는 방식으로 pendingIntent를 생성하도록 수정했습니다.

var pendingIntent = TaskStackBuilder.create(myContext).run {
  addNextIntentWithParentStack(intent)
  getPendingIntent(0, if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) PendingIntent.FLAG_IMMUTABLE else PendingIntent.FLAG_UPDATE_CURRENT)
}

foreground에서 알림을 클릭했을 때, 새로운 intent를 실행하여 앱을 덮어쓰는 현상

getActivity를 이용하여 intent를 여는 방법으로 동작을 변경했지만, background에서 알림을 클릭했을때는 intent가 실행되어 문제가 없는 반면에 foreground에서 클릭했을때는 새로운 intent를 실행해서 앱을 덮어쓰는 현상이 발생했습니다.

새 Activity가 실행되며 화면을 덮어씁니다.

react-native-navigation의 MainActivity가 덮어써져 multiple instances 에러가 발생하는 상황

pendingIntent를 정의하는 방법을 수정하고, 실행할 intent의 Activity Flag도 수정했습니다.

// mainActivity Intent
val intent = Intent(Intent.ACTION_VIEW, "uoslife://library".toUri(), myContext, MainActivity::class.java)
  .addFlags(Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_SINGLE_TOP)

// notification PendingIntent
var pendingIntent = PendingIntent.getActivity(myContext, 0, intent, if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) PendingIntent.FLAG_IMMUTABLE else PendingIntent.FLAG_UPDATE_CURRENT)

SDK 31+ 이상부터는 pendingIntent 생성시 FLAG_IMMUTABLE 옵션을 권장합니다.

intent의 Activity Flag에는 두가지 속성을 주었습니다.

FLAG_ACTIVITY_NEW_TASK: 이미 실행 중인 Activity가 있다면, 새 Activity를 실행되지 않음
FLAG_ACTIVITY_SINGLE_TOP: 호출한 Activity와 현재 최상위의 Activity가 동일한 경우, 최상위 Activity가 재사용됨

코드를 변경해서 위와같이 foreground에서도 의도한 대로 정상적으로 동작하는 것을 확인할 수 있습니다.

알림에서 PNG가 표시되지 않는 현상

타이머와 안내 텍스트는 잘 표시되었지만, PNG 이미지가 표시되지 않는 현상이 발생했습니다.

이미지를 해상도(mdpi, xdpi, ...)별로 저장하고 ImageView의 app:srcCompat 속성을 통해 이미지 경로를 주지 않고, android:src 속성으로 변경하여 해결했습니다.

<ImageView
    android:id="@+id/imageView_2"
    android:layout_width="52dp"
    android:layout_height="42dp"
    android:layout_gravity="center"
    android:layout_marginEnd="4dp"
    android:layout_weight="5"
    android:adjustViewBounds="true"
    app:srcCompat="@drawable/iroomae" <!-- 삭제 -->
    android:src="@drawable/iroomae" <!-- 추가 -->
/>

마무리하며..

kotlin과 android는 처음이라 Android의 intent와 PendingIntent의 동작원리 + ui를 그리는 부분에서 삽질을 좀 했지만, 웹앱을 만든 경험이 있어서 그런지 생각보다 구현에 큰 차이는 없구나라는 생각도 들었습니다. ~~구글과 stackoverflow 없이는 살아갈 수 없다는 점도 깨달은 점..~~

알림을 완전히 커스텀화해서 만든 경험이라 특수한 케이스이지만, RN 환경에서 Android의 알림을 구현하신다면 이 글이 도움이 되었으면 좋겠습니다.

참고문서

[React Native] RN에서 Dynamic island 위젯 만들기

pIutos — Fri, 24 May 2024 16:33:57 +0900

들어가며

React Native에서 Dynamic Island 위젯을 만드는 방법에 대해 작성했습니다.

Info.plist

파일 수정

프로젝트에서 Live Activity를 사용하기 위해, 프로젝트의 info.plist에 Supports Live Activities: YES 옵션을 추가합니다.

새로운 Widget Extension 생성하기

File > New > Target으로 들어가서, Widget Extension을 선택합니다.

이후 'Include Live Activity' 옵션을 체크한 다음, 원하는 이름으로 위젯을 생성합니다. 저는 이름을 DynamicIslandWidget으로 생성했습니다. (App Intent 옵션은 끄는 것을 추천합니다.)

App Group 생성하기

앱에서 쓴 데이터인 UserDefaults를 위젯에서도 사용할 수 있도록 App group을 만들어야 합니다.

앱에 App Group이 없다면, Apple Developer > Identifier에서 새로운 App Group을 생성합니다.

이후 xcode 프로젝트에서 RN project의 target과 DynamicIslandWidget target에 Signing & Capabilities > '+ Capability'를 눌러 App Groups를 생성한 다음, 아까 생성한 group identifier를 선택합니다.

Dynamic Island 작성하기

기본적으로 새로운 Widget Extension Target을 생성하면 사진과 같은 파일이 생성됩니다.

기본적으로 DynamicIslandWidget.swift 파일도 같이 생성되는데, 저는 LiveActivity만 사용하고 싶기 때문에 삭제했습니다. 위젯도 같이 작업하신다면 지우지 않으셔도 됩니다.

~Bundle.swift 파일 수정하기

// DynamicIslandWidgetBundle.swift

import WidgetKit
import SwiftUI

@main
struct DynamicIslandWidgetBundle: WidgetBundle {
    var body: some Widget {
        DynamicIslandWidget() // 사용하지 않는다면 파일과 함께 삭제
        DynamicIslandWidgetLiveActivity()
    }
}

// DynamicIslandWidgetBundle.swift

import WidgetKit
import SwiftUI

@main
struct DynamicIslandWidgetBundle: WidgetBundle {
    var body: some Widget {
      if #available(iOS 16.1, *) {
        DynamicIslandWidgetLiveActivity()
      }
    }
}

Project의 Deployment Target이 아래와 같이 16.1 이하로 설정되어있다면 DynamicIslandWidgetLiveActivity 해당 조건문을 추가합니다.

~LiveActivity.swift 파일 수정하기

우선 앱에서 해당 파일의 Dynamic Island를 사용하기 위해서 Target Membership에 RN project target도 체크해줍니다.

이후 해당 파일에서 swiftUI를 이용해 원하는 ui와 기능으로 코드를 작성하면 됩니다.

// DynamicIslandWidgetLiveActivity.swift

@available(iOS 16.1, *)
struct DynamicIslandWidgetLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: DynamicIslandWidgetAttributes.self) { context in
          LockScreenView(context: context)
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                  LeadingView()
                }
                DynamicIslandExpandedRegion(.trailing) {
                  TrailingView(context: context)
                }

              DynamicIslandExpandedRegion(.bottom) {
                  ContentView(context: context)
                }
            } compactLeading: {
                CompactLeadingView(context: context)
            } compactTrailing: {
                CompactTrailingView(context: context)
            } minimal: {
                EmptyView()
            }
        }
    }
}

추가적으로 Dynamic Island는 이미지와 같이 Expanded View와 Compact View, Minimal View로 구분되어 있고, 각 View에는 세부적으로 영역이 구분되어있습니다.

RN과 통신을 위한 module과 bridge 작성하기

module 파일 생성

새로운 Swift File을 생성합니다. 이름은 DynamicIslandModule로 지었습니다. 해당 모듈의 target은 RN project만 체크해주세요.

해당 모듈에서 Dynamic Island를 컨트롤하는 함수를 작성합니다. 필요한 함수는 아래와 같습니다.

startActivity
updateActivity
endActivity

// DynamicIslandModule.swift

import Foundation
import ActivityKit

@available(iOS 16.2, *)

@objc(DynamicIslandModule)
class DynamicIslandModule: NSObject {
  @objc(startActivity:withSeatNumber:withIsUsing:withDateInterval:)
  func startActivity(seatRoomName: String, seatNumber: String, isUsing: Bool, dateInterval: NSNumber) -> Void {
    do {
      let ActivityAttributes = DynamicIslandWidgetAttributes(seatRoomName: seatRoomName, seatNumber: seatNumber)
      let ActivityContentState = DynamicIslandWidgetAttributes.ContentState(isUsing: isUsing, dateInterval: Double(truncating: dateInterval))

      let _ = try Activity<DynamicIslandWidgetAttributes>.request(attributes: ActivityAttributes, contentState: ActivityContentState, pushType: nil)
    } catch {
      print("Error")
    }
  }

  @objc(updateActivity:withDateInterval:)
  func updateActivity(isUsing: Bool, dateInterval: NSNumber) -> Void {
    let ActivityContentState = DynamicIslandWidgetAttributes.ContentState(isUsing: isUsing, dateInterval: Double(truncating: dateInterval))
    Task {
      for activity in Activity<DynamicIslandWidgetAttributes>.activities {
        await activity.update(using: ActivityContentState)
      }
    }
  }


  @objc(endActivity)
  func endActivity() -> Void {
    Task {
      for activity in Activity<DynamicIslandWidgetAttributes>.activities {
        await activity.end(dismissalPolicy: .default)
      }
    }
  }
}

Bridge 만들기

위에서 작성한 Dynamic Island를 컨트롤하는 함수를 RN에서도 사용할 수 있게 해당 모듈을 내보내고 등록하는 과정이 필요합니다.

이를 위해 New File > Objective-C File을 선택을 통해 DynamicIslandBridge.m 파일을 생성합니다.

마찬가지로 target은 RN project를 체크해주세요.

// DynamicIslandBridge.m

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(DynamicIslandModule, NSObject)

RCT_EXTERN_METHOD(startActivity:(NSString *) seatRoomName  withSeatNumber:(NSString *) seatNumber  withIsUsing:(BOOL *) isUsing withDateInterval:(nonnull NSNumber *) dateInterval)
RCT_EXTERN_METHOD(updateActivity:(BOOL *) isUsing withDateInterval:(nonnull NSNumber *) dateInterval)
RCT_EXTERN_METHOD(endActivity)

+ (BOOL)requiresMainQueueSetup
{
  return NO;
}

@end

RCT_EXTERN_MODULE에 위에서 작성한 module을 담아주고, RCT_EXTERN_METHOD에 각 함수를 넣어주세요.

그리고 함수: 이후 구문에서 통신에 필요한 parameter를 정의할 수 있습니다. 저는 좌석번호, 사용 여부 등이 필요하여 넣어주었습니다.

필요한 parameter의 타입은 RN 공식문서의 Argument Type에서 확인할 수 있습니다.

React Native에서 module 호출하고 사용하기

저는 RN에서 LibraryDynamicIslandBridge class를 작성하여 사용했습니다.

react-native의 NativeModule을 호출하여 이전에 iOS에서 내보낸 DynamicIslandModule을 사용할 수 있습니다.

import { NativeModules } from 'react-native';

interface DynamicIslandModule {
  startActivity: (
    seatRoomName: string,
    seatNumber: string,
    isUsing: boolean,
    dateInterval: number,
  ) => void;
  updateActivity: (isUsing: boolean, dateInterval: number) => void;
  endActivity: () => void;
}

export class LibraryDynamicIslandBridge {
  static dynamicIslandModule(): DynamicIslandModule {
    return NativeModules.DynamicIslandModule;
  }

  static validateExistModule(func: keyof DynamicIslandModule): boolean {
    if (
      this.dynamicIslandModule() &&
      typeof this.dynamicIslandModule()[func] === 'function'
    )
      return true;
    console.warn('DynamicIslandModule not found');
    return false;
  }

  static onStartActivity({
    seatRoomName,
    seatNumber,
    isUsing,
    dateInterval,
  }: {
    seatRoomName: string;
    seatNumber: string;
    isUsing: boolean;
    dateInterval: number;
  }): void {
    if (!this.validateExistModule('startActivity')) return;
    this.dynamicIslandModule().startActivity(
      seatRoomName,
      seatNumber,
      isUsing,
      dateInterval,
    );
  }

  static onUpdateActivity({
    isUsing,
    dateInterval,
  }: {
    isUsing: boolean;
    dateInterval: number;
  }): void {
    if (!this.validateExistModule('updateActivity')) return;
    this.dynamicIslandModule().updateActivity(isUsing, dateInterval);
  }

  static onEndActivity(): void {
    if (!this.validateExistModule('endActivity')) return;
    this.dynamicIslandModule().endActivity();
  }
}

위 코드에서는 해당 모듈에 함수가 존재하는지 validate하고, 각 start와 end 등의 함수를 호출합니다.

사용 예시

// API가 호출되었을 경우
LibraryDynamicIslandBridge.onStartActivity({
  seatRoomName: response.seatRoomName,
  seatNumber: response.seatNo,
  isUsing: response.status === 'SEAT',
  // ...
});

// 상태가 변경되었을 경우
 LibraryDynamicIslandBridge.onUpdateActivity({
  isUsing: response.status === 'SEAT',
  dateInterval: ...
});

결과

참고문서

https://blog.stackademic.com/unleashing-ios-dynamic-islands-in-your-react-native-app-a-step-by-step-guide-eee3c5ed3059

https://reactnative.dev/docs/native-modules-ios

https://www.youtube.com/watch?v=BsJT26dkasA

https://github.com/hoaphantn7604/react-native-dynamic-island-tutorial

[React] ky로 로그인 유지 구현하기 (with. JWT 인증)

pIutos — Fri, 16 Feb 2024 02:05:28 +0900

들어가며

ky는 fetch와 ESM을 기반으로 하는 HTTP Client를 제공하는 라이브러리입니다.

주로 사용되는 Axios의 interceptors와 비슷하게 ky는 응답을 intercept 하여 커스텀하게 조작이 가능한 AfterResponse, BeforeRequest와 같은 훅을 제공합니다.

따라서 해당 훅을 이용하여 JWT 인증을 통해 로그인 상태를 처리하는 앱에서, 로그인을 유지하도록 하는 방법을 소개하겠습니다.

API 요청 전 Header에 access token 담기

beforeRequest 훅에서는 HTTP request 이전에 수행 할 동작을 지정할 수 있습니다. 따라서 아래와 같이 accessToken을 Authorization Header에 담는 로직을 구현합니다.

import { BeforeRequestHook } from 'ky';
import storage from '../../storage';

const setAuthorizationHeader: BeforeRequestHook = request => {
  const accessToken = storage.getString('accessToken');

  if (!accessToken) return;
  request.headers.set('Authorization', `Bearer ${accessToken}`);
};

export default setAuthorizationHeader;

이후 기본 ApiClient의 beforeRequest hooks에 해당 함수를 지정합니다.

import setAuthorizationHeader from './beforeRequest';

export const apiClient = baseApiClient.extend({
  hooks: {
    beforeRequest: [setAuthorizationHeader],
  },
});

Retry로 access token 재발급 로직 구현하기

ky는 beforeRetry 훅을 통해 API fetch retry시 처리할 동작을 구현하는 것이 가능합니다.

코드 구성은 아래와 같습니다.

1. status code가 401이 아닌 경우 retry를 중지합니다.

2. access token을 2번 가져와도 실패한다면, 토큰 만료인 경우로 판단하여 로그아웃 처리를 합니다.(유저 정보와 token을 삭제하는 등)

3. 해당 1, 2번 경우가 아닐 때 refresh token을 이용하여 access token을 가져오고, 저장합니다.

import ky, {BeforeRetryHook} from 'ky';
import UserService from '../../services/user';
import {ErrorResponseType} from '../services/type';
import {DEFAULT_API_RETRY_LIMIT} from '../../configs/api';

const beforeRetry: BeforeRetryHook = async ({error, retryCount}) => {
  const customError = error as ErrorResponseType;
  if (customError.status !== 401) return ky.stop; // status code가 401이 아닌 경우 retry를 중지합니다.

  if (retryCount === DEFAULT_API_RETRY_LIMIT - 1) {
    await UserService.onLoginDurationExpired(); // access token을 2번 가져와도 실패한다면, 토큰 만료 로그아웃 시킵니다.
    return ky.stop;
  }
  await UserService.getAccessTokenByRefreshToken(); // refresh token을 이용하여 access token을 가져옵니다.
};

export default beforeRetry;

이후 해당 함수를 이전과 마찬가지로 beforeRetry에 지정합니다.

export const apiClient = baseApiClient.extend({
  timeout: DEFAULT_API_TIMEOUT, // 10 * 1000
  retry: {
    limit: DEFAULT_API_RETRY_LIMIT, // 4
    backoffLimit: DEFAULT_API_RETRY_BACKOFFLIMIT, // 3 * 1000
  },
  hooks: {
    beforeRequest: [setAuthorizationHeader],
    beforeRetry: [handleToken],
  },
});

마무리하며

위의 모든 설정을 마쳤다면, APIClient에 access token이 만료되었을 때 refresh token을 이용해 앱 로그인을 유지하도록 구현할 수 있습니다.

[React] 함수의 중복 호출을 막기 위한 throttling 기능 적용기

pIutos — Thu, 4 Jan 2024 00:06:42 +0900

문제사항

const handleSubmit = async () => {
  // API 호출...
};

API를 호출하는 위와 같은 함수가 있습니다. 이러한 함수는 보통 button, input의 이벤트 함수에서 실행되는데, 예를 들어 유저가 단시간 내에 버튼을 여러번 클릭시 API 통신 오류가 발생하는 경우가 있었습니다.

이에 해당 함수의 클릭 시간을 조절하는 throttle기능이 필요했고, 이를 구현한 방법을 소개하겠습니다.

중복 호출을 막기 위한 useThrottle 훅 구현하기

throttle기능을 구현하는 방법 중에는 여러 방법이 있지만, 저는 slash 라이브러리처럼 함수 전체를 감싸서 throttle기능을 적용하는 방식으로 구현하고 싶었습니다.

이에 throttle의 callback의 시간을 관리하는 방법으로 Date 객체를 사용하는 방식을 생각했으며, 아래와 같이 throttle기능을 구현했습니다.

import { useRef } from 'react';

const THROTTLE_DEFAULT_TIME = 1 * 1000;

const useThrottle = <T extends Function>(
  callback: T,
  throttleTime: number | undefined = THROTTLE_DEFAULT_TIME,
): Function => {
  const time = useRef<ReturnType<Date['valueOf']>>(0);

  return () => {
    const callbackExecutionTime = new Date().valueOf();

    if (callbackExecutionTime - time.current < throttleTime) return;

    time.current = callbackExecutionTime;
    callback();
  };
};

export default useThrottle;

현재 시간의 ms시간을 반환하는 Date의 valueOf 메서드를 이용해 callbackExecutionTime을 선언합니다.

이 값과 useRef에 저장된 time값을 비교하여 throttleTime보다 작다면(throttle 중)실행 callback함수를 실행하지 않습니다.

그렇지 않은 경우 ref에 해당 시간을 저장한 다음 callback함수를 실행합니다.

다른 방식으로 구현하기

하지만 해당 방식은 아래와 같은 문제가 있습니다.

throttleTime이 정확하게 동작하지 않을 수 있습니다. 미미한 시간이지만 훅에서 Date를 생성하고, if문을 체크하며 ref에 저장하는 동작을 실행하는 동안의 시간이 있기 때문입니다.
callback이 실행될 때마다 callbackExecutionTime을 할당하기 때문에, useRef에 할당된 값이 메모리에서 해제되지 않아 메모리 누수 현상이 발생할 수 있습니다.

따라서 lodash에서 사용하는 방식인 setTimeout 함수를 이용하는 방식으로 useThrottle 훅을 구현해보았습니다.

import { useRef } from 'react';

const THROTTLE_DEFAULT_TIME = 1 * 1000;

const useThrottle = <T extends Function>(
  callback: T,
  throttleTime: number | undefined = THROTTLE_DEFAULT_TIME,
): Function => {
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);

  return () => {
    if (timer.current) return;

    callback();
    timer.current = setTimeout(() => {
      timer.current = null;
    }, throttleTime);
  };
};

export default useThrottle;

timeout 함수를 ref에 저장한 다음, timeout이 완료되면 현재 ref를 null로 초기화합니다. 만약 timer가 존재한다면 callback 함수를 실행하지 않습니다.

useRef에 할당된 값이 저장되는 heap 공간에 현재 시간의 string값(Date.valueof) 대신 setTimeout함수를 저장한다면 약간의 메모리 비용이 증가하겠지만, 성능상에 큰 차이점은 없을것입니다.

오히려 메모리 누수 현상이 발생하는 이전 방법과 다르게 ref를 해제하기 때문에 더 나은 방법이라 할 수 있을 것입니다.

결과적으로

const handleSubmit = useThrottle(async () => {
  // API 호출...
});

const handleClick = useThrottle(async () => {
  // API 호출...
}, 2 * 1000);

어느 방식으로든 useThrottle을 원하는 동작으로 사용할 수 있었습니다.

참고문서

https://minoo.medium.com/useref-%EA%B0%80-%EC%88%9C%EC%88%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9D%EC%B2%B4%EB%A5%BC-%EC%83%9D%EC%84%B1%ED%95%9C%EB%8B%A4%EB%8A%94-%EC%9D%98%EB%AF%B8%EB%A5%BC-%EA%B3%B1%EC%94%B9%EC%96%B4%EB%B3%B4%EA%B8%B0-8a0857fc5ebb

[React Native] deeplink를 이용해 알림을 여는 방법(with. notifee)

pIutos — Wed, 3 Jan 2024 21:25:05 +0900

들어가기 전에

딥링크(deeplink)는 특정 페이지에 도달 할 수 있는 링크를 말합니다. 딥링크를 이용하여 React Native 어플리케이션의 특정 페이지에 도달시킬 수 있습니다. 예를들어 'app://targetPage' 링크를 딥링크로 열게되면 targetPage가 표시됩니다.

구현 요구사항

우선 아래와 같이 notifee를 이용하여 서버에서 보내는 데이터인 notifee.data 영역에 deepLinkUrl을 담습니다.

이후 알림을 전송하고, 앱에서 알림을 받으면 해당 deeplink url을 이용하여 앱을 열어야 하도록 구현합니다. 하지만 이런 방식은 레퍼런스가 없어 기능을 직접 구현하였고,지금부터 구현한 방법을 살펴보겠습니다.

"data": {
  "notifee": {
    "id": "1",
    "title": "공지사항을 확인해 보세요!",
    "subtitle": "학사공지",
    "body": "서울시립대학교 대학원 시행세칙 및 통합대학원 학칙 일부개정(안) 사전예고",
    "data": {
      "deepLinkUrl": "uoslife://announcement/detail/123"
    },
    // ...

프로젝트에 deep link 설정하기

세팅되어있는 React Native 프로젝트에서 아래 명령어를 사용하면 플랫폼 별로 알맞게 deep linking 환경 설정이 됩니다. 자세한 사항은 해당 공식 문서를 참조해주세요.

npx uri-scheme add 'deeplink 프로젝트이름' --ios
npx uri-scheme add 'deeplink 프로젝트이름' --android

screen에 따라 deepLink url 설정하기

const DEEPLINK_PREFIX_URL = ['uoslife://'];

const deepLinksConfig = {
  initialRouteName: 'Main',
  screens: {
    Main: {
      initialRouteName: 'MainTab',
      screens: {
        // ...
      },
    },
    Library: 'library',
    Announcement: {
      initialRouteName: 'AnnouncementMain',
      screens: {
        AnnouncementMain: 'announcement',
        AnnouncementDetail: 'announcement/detail/:id',
        // ...
      },
    },
  },
};

const linking: LinkingOptions<RootStackParamList> = {
  prefixes: DEEPLINK_PREFIX_URL,
  config: deepLinksConfig,
  async getInitialURL() {
    // 딥링크를 이용해서 앱이 오픈되었을 때
    const url = await Linking.getInitialURL();
    if (url != null) return url;
  },
};

이후 해당 linking config를 NavigationConatiner에 넘겨줍니다.

<NavigationContainer linking={linking} ...></NavigationContainer>

앱 알림을 클릭했을 때 딥링크 열기

이제 앱에 deeplink설정을 완료했으니 원하는 동작인 앱 알림을 클릭했을 때 해당 딥링크를 여는 코드를 작성해보겠습니다.

앱이 Foreground 상태일 때

deeplink는 react-native의 Linking.openURL에 url을 넣으면 열 수 있습니다.

notifee의 onForegroundEvent 메서드에 클릭 시 딥링크를 여는 onPressEvent를 추가하는 방식으로 구현합니다.

import { Linking } from 'react-native';
import notifee, { Event } from '@notifee/react-native';

// ...

static async onPressEvent({ type, detail }: Event): Promise<void> {
    if (type !== EventType.PRESS) return;
    const {notification} = detail;
    if (!notification || !notification.data || !notification.data.deepLinkUrl)
      return;
    await Linking.openURL(notification.data.deepLinkUrl as string);
  }

static onForegroundEvent(): () => void {
  return notifee.onForegroundEvent(
    async event => await this.onPressEvent(event),
  );
}

이후 해당 onForegroundEvent 메서드를 App.tsx파일에서 실행시킵니다.

// App.tsx
useEffect(() => {
  NotificationService.onForegroundEvent();
}, []);

앱이 Background 상태일 때

백그라운드 상태일 때는 앱에 백그라운드 이벤트 이를 위해 notifee.getInitialNotification() 메서드를 사용합니다.

getInitialNotification
: This API can be used to fetch which notification & press action has caused the application to open.

앱을 열었을 때 해당 메서드를 이용하여 press action이 되어 들어왔는지 확인하고, 있다면 해당 notification data에서 deepLinkUrl을 이용해 딥링크를 열게 하는 동작을 구현하면 됩니다.

이에 따라 처음 구현은 아래와 같았습니다.

// App.tsx
useEffect(() => {
  (async () => {
    const initialNotification = await notifee.getInitialNotification();
    if (initialNotification) {
      const {data} = initialNotification.notification;
      if (!data || !data.deepLinkUrl) return;
      await Linking.openUrl(data.deepLinkUrl);
    }
  })();
}, [])

하지만 앱 초기로딩 시 로그인 상태를 변경하는 과정에서 문제가 발생했습니다.

TroubleShooting: 로그인 되지 않은 상태에서 발생하는 문제

React Native Navigation에서는 로그인 상태를 처리하기 위해 아래 방식과 같이 isLoggedIn 상태에 따라 각기 다른 화면을 렌더링합니다.

<Stack.Navigator ...>
  {isLoggedIn ? (
    <>
      <Stack.Screen name="Main" />
      <Stack.Screen name="Mypage" />
      // ...
      />
    ) : (
    <>
      <Stack.Screen name="Account" />
      // ...
    </>
  )}
</Stack.Navigator>

이때 isLoggedIn은 초기값이 false이기 때문에 앱 초기 로딩 과정에서 로그인 여부를 파악할 때 까지 Account 화면이 표시됩니다.

이 상황에서 만약 '~://main' 으로 deepLink 요청이 온다면 Main 페이지는 실제로 렌더링 되지 않았기 때문에 아래과 같은 오류가 발생했습니다.

따라서 로그인 로직 이후 deeplink url을 열어줘야 했고, 이 문제를 전달받은 url을 storage에 저장해서 넘겨주는 방식으로 해결했습니다.

1. 'openedDeepLinkUrl' key에 notifee에서 받은 deepLinkUrl을 저장합니다.

const linking = {
  prefixes: DEEPLINK_PREFIX_URL,
  config: deepLinksConfig,
  async getInitialURL() {
    // 딥링크를 이용해서 앱이 오픈되었을 때
    const url = await Linking.getInitialURL();

    if (url != null) return url;

    // 백그라운드에서 알림 클릭 시 deepLink가 있는 경우 해당 url을 storage에 저장
    const initialNotification = await notifee.getInitialNotification();
    if (!initialNotification) return null;
    const {data} = initialNotification.notification;
    if (!data || !data.deepLinkUrl) return null;
    storage.set('openedDeepLinkUrl', data.deepLinkUrl as string);
  },
};

2. 이후 앱 로딩과 로그인이 완료된 이후, 해당 key를 가져와 딥링크를 open합니다.

// ...set app loading and login status true
const openedDeepLinkUrl = storage.getString('openedDeepLinkUrl');
if (openedDeepLinkUrl) {
  await Linking.openURL(openedDeepLinkUrl);
  storage.delete('openedDeepLinkUrl');
}

이렇게 구현하면 앱 로딩이 완료된 상태, 그리고 로그인이 완료된 상태에서만 deeplink가 열리게 되므로 유저가 느끼는 동작에도 문제가 없고, 상기 에러가 발생하지 않았습니다.

github의 react-navigation에도 해당 issue가 오픈되어 있는데, 로그인 상태에서 딥링크 공식적인 메뉴얼이 나와있지 않았기에 여러 방법이 제시되어 있었고 저는 위와 같은 방법을 제시했습니다.

정리하기

지금까지 알림을 deepLink로 열기 위해 react native에 딥링크 환경설정을 하고, 앱이 기기에서 foreground일 때와 background 상태일 때의 코드를 각각 작성하여 알림을 열었을 때 해당 deeplink url로 이동하는 동작을 구현했습니다.

결과적으로 구현 요구사항과 일치하게 동작이 잘 되는 모습을 볼 수 있습니다.

좌: foreground 환경, 우: background 환경

문제가 있는 부분이 있거나, 이해가 되지 않는 부분이 있다면 댓글로 남겨주세요.

+) TroubleShooting2: 뒤로가기가 되지 않는 문제

nested된, 즉 여러 화면 내부에 존재하는 화면에서 뒤로가기 동작시 아래와 같은 에러가 발생했습니다.

// nested screen
const handlePressBackButton = () => {
  navigation.goBack();
};

return (
  <Header label={label} onPressBackButton={handlePressBackButton} />
  // ...
);

linking config에 아래와 같이 initialRouteName을 추가하면 해당 에러가 발생하지 않습니다.

const deepLinksConfig = {
  initialRouteName: 'Main', // 추가
  screens: {
    Main: {
      initialRouteName: 'MainTab', // 추가
      screens: {
        // ...
      },
    },

[iOS] 스플래시 화면이 찌그러지는 문제

pIutos — Wed, 22 Nov 2023 07:00:22 +0900

문제점

앱 접근시 아래와 같이 splash screen이 xcode에서 작성한대로 표시가 되지 않고 로고(png)가 원래 사이즈대로 표시되는 문제가 발생했습니다.

해결방안

1. 로고 이미지의 하단에 'Add New Constraints' 버튼을 클릭합니다.

2. 간격을 모두 0으로 설정한 다음, 'Constrain to margins' 버튼을 선택 해제한 후 Add 4 Constraints 버튼을 눌러 새 Constraint를 생성합니다.

3. constrains의 trailing, leading의 기준을 safe area로 설정하고, 마찬가지로 Top, Bottom의 기준을 superView로 설정합니다.

4. 마지막으로 전체 View의 Content Mode를 'Scale To Fill'로 설정합니다.

앞선 방법대로 설정을 완료했다면 의도한대로 splash screen이 표시됩니다.

참고링크

https://github.com/aparajita/capacitor-splash-screen/issues/8

https://stackoverflow.com/questions/65008327/my-launch-screen-image-has-a-wrong-size-on-small-screens

아래 링크는 스플래시 이미지를 만들고 적용하는 방법에 대해 자세히 설명한 글이니 참고해주세요.

https://staktree.github.io/ios/IOS-splash-01/

[React Native] 앱 접근시 필요한 동작을 구현해보자

pIutos — Tue, 21 Nov 2023 07:52:57 +0900

시대생 첫화면, Account / Main

시대생 앱은 최초 앱 접근시 로그인 유무에 따라 AccountScreen을 보여주거나, MainScreen을 보여줘야 합니다.

또한 로그인이 되어있다면 device 정보를 서버에 업데이트 시키거나, 알림을 위한 firebasePushToken 정보를 얻어오는 과정이 필요하기 때문에 이와 관련된 로직이 앱 접근시 실행되어야합니다.

본 글은 앱 접근시 어떤 로직이 실행되도록 구현했는지, 그리고 어떻게 앱의 전체적인 회원 로그인 관련 처리를 구현했는지를 설명합니다.

시작하기 앞서

시대생 앱의 사용자 인증 인가 방식은 JWT 방식을 사용합니다.
React Native의 Device Storage로는 mmkv를 이용합니다.
앱 화면을 보여주는 RootStackNavigator는 아래와 같습니다.

const [isLoading, setIsLoading] = useState(true);
const [isLoggedIn, setIsLoggedIn] = useState(false);

useEffect(() => {
  if (isLoading) return;
  (async () => await SplashScreen.hide())();
}, [isLoading]);

return (
  <Stack.Navigator
    initialRouteName="Main"
    {isLoggedIn ? (
      <>
        <Stack.Screen
          name="Main"
          component={RootBottomTapNavigator}
          options={{animationEnabled: false}}
        />
        // ...
      </>
    ) : (
      <Stack.Screen name="Account" component={AccountStackNavigator} />
    )}
  </Stack.Navigator>
);

본 글에서 설명할 앱 접근 시 로직과 앱 내 인증 인가 처리를 전체 구조를 그려보았습니다. 아래 이미지는 해당 구조도입니다.

앱 접근시 실행 로직

앱 접근시 처리해야 하는 과정은 아래와 같습니다.

notification permission을 가져온다.
알림권한에 동의했다면 FCM Token을 가져오고, Device Storage에 저장한다.
로그인 여부를 확인하기 위해 userInfo API를 서버에 요청한다.
응답이 401이라면 로그인 상태가 아니기 때문에, 앱의 로그인 상태를 false로 만든 후 Account Screen을 보여준다.
응답이 200이라면 앱의 로그인 상태를 true로 만든다.
이후 응답받은 userInfo를 Device Storage에 저장한다.
현재 Device의 정보(fcm token, app version 등)가 서버와 다르다면 최신 정보로 서버에 업데이트한다.
로그인 상태를 true로 만든 후 Main Screen을 보여준다.

이를 코드로 아래와 같이 구현했습니다. 이를 하나하나 자세히 살펴보겠습니다.

  useEffect(() => {
    (async () => {
      await NotificationService.requestNotificationPermissions();
      await NotificationService.handleFirebasePushToken();

      const hasRefreshToken = UserService.getHasRefreshToken();
      if (!hasRefreshToken) {
        setLoadingFinish();
        return;
      }

      const userInfo = await UserService.getUserInfoFromServer();
      if (!userInfo) {
        setLoadingFinish();
        return;
      }
      UserService.setUserInfoToDevice(userInfo);

      await DeviceService.updateDeviceInfo();
      setAuthenticationSuccess();
    })();
  }, []);

FCM Token 관련 로직

await NotificationService.requestNotificationPermissions();
await NotificationService.handleFirebasePushToken();

FCM Token은 한 device마다 생성됩니다. token을 가져오기 위해 알림 권한을 받아오고, 권한이 없다면 토큰을 받아오지 않습니다.

static async requestNotificationPermissions(): Promise<FirebaseMessagingTypes.AuthorizationStatus> {
  if (Platform.OS === 'android') {
    await Promise.all([
      // 생략
      // permission을 받고, notifee channel을 생성
    ]);
  }
  return messaging().requestPermission();
}

iOS에서는 토큰을 가져오는 messaging.getToken() 함수는 실행 이전에 requestPermission이 필요합니다.

FCM token을 가져오는 방법에 대해서는 양이 많기 때문에 따로 포스팅 하겠습니다.

static async handleFirebasePushToken(): Promise<void> {
  const isPermissionAuthorized =
    await this.checkPermissionIsAuthorizedStatus(); // messaging.hasPermission을 이용
  if (!isPermissionAuthorized) return;

  const token = await this.getFirebasePushToken();
  this.setFirebasePushToken(token);
}

권한이 없다면 FCM 토큰을 가져오지 않고, 있다면 토큰을 가져온 다음 device storage에 해당 토큰을 저장합니다. 각 메서드들은 class 내부에 추상화하여 사용했습니다.

Storage의 RefreshToken 유무 확인

Device Storage에 refreshToken이 존재하지 않는다면 로딩을 종료합니다. 이 과정을 추가함으로써 refreshToken 유무만 확인하면 되므로 초기에 빠른 로딩이 가능해졌습니다.

const hasRefreshToken = UserService.getHasRefreshToken();
if (!hasRefreshToken) {
  setLoadingFinish();
  return;
}

UserInfo API 요청 및 저장

JWT token을 이용하여 로그인 여부를 확인하기 위해 유저의 정보(닉네임, id등)를 가져오는 API를 요청합니다.

응답이 400, 즉 유저 정보가 없다면 마찬가지로 로딩을 종료합니다.
응답이 200으로 정상적으로 온다면 device storage에 응답받은 유저 정보를 저장합니다.

만약 accessToken이 만료되어 refreshToken을 이용해 재발급 받는 로직은 여기서 다루지 않고, 따로 포스팅하겠습니다.

const userInfo = await UserService.getUserInfoFromServer();
if (!userInfo) {
  setLoadingFinish();
  return;
}
UserService.setUserInfoToDevice(userInfo);

디바이스 정보 업데이트

해당 코드는 다음과 같습니다.

await DeviceService.updateDeviceInfo();
setAuthenticationSuccess();

static async updateDeviceInfo(): Promise<void> {
  const localDeviceInfo = this.getDeviceInfoFromLocal();
  const serverDeviceInfo = await this.getDeviceInfoFromServer();
  if (
    localDeviceInfo.appVersion !== serverDeviceInfo.appVersion ||
    localDeviceInfo.codePushVersion !== serverDeviceInfo.codePushVersion ||
    localDeviceInfo.firebasePushToken !==
      serverDeviceInfo.firebasePushToken ||
    // ...
  ) {
    await CoreAPI.patchDeviceInfo(localDeviceInfo);
  }
}

유저가 앱 또는 OS를 업데이트 하거나 FCM token이 업데이트 되는 상황같아 device 정보가 수정 될 수 있습니다.

따라서 만약 현재 device 정보가 서버와 다르다면 서버로 patch시키도록 합니다.

const setAuthenticationSuccess = () => {
  storage.set('isLoggedIn', true);
  setIsLoggedIn(true);
  setLoadingFinish();
};

이후 모든 과정이 종료되었다면 isLoggedIn과 isLoading상태를 true로 변경합니다.

앱에서 로그인 상태가 변경되는 경우

로그인 / 회원가입

로그인 또는 회원가입하는 경우 아래와 같은 작업을 수행합니다.

로그인 / 회원가입 API의 응답에서 얻은 JWT token을 device storage에 저장
deviceInfo를 서버에 저장
userInfo를 받아와 device storage에 저장
isLoggedIn 상태를 true로 변경

/** SingIn 또는 SingUp시 실행되는 함수입니다. */
static async onRegister(params: OnRegisterParamsType): Promise<void> {
  storeToken(params.accessToken, params.refreshToken);
  await DeviceService.setDeviceInfo();
  await UserService.handleUserInfo();
  storage.set('isLoggedIn', true);
}

로그아웃

device storage에 저장된 JWT token과 userInfo, isLoggedIn 상태를 삭제합니다.

static deleteUserInfo(): void {
  storage.delete('accessToken');
  storage.delete('refreshToken');
  storage.delete('user');
  storage.set('isLoggedIn', false);
};
  
static logout(): void {
  this.deleteUserInfo();
}

주의점: 직접적으로 Screen을 navigate하면 안됩니다.

공식문서에서 설명하듯이 직접적으로 useNavigation 훅 등을 이용하여 스크린으로 navigate 시키면 안됩니다. 대신에 isSignedIn, isLoggedIn과 같은 state를 이용하여 Account / Home Screen을 렌더링해야 합니다.

// 로그인 완료시
const navigation = useNavigation();
navigation.navigate('Main') // x

setIsLoggedIn(true) // o

참고링크

https://reactnavigation.org/docs/auth-flow/

[Yarn] Yarn v2에서 npm registry를 바라보도록 환경설정하기

pIutos — Fri, 8 Sep 2023 04:24:50 +0900

yarn은 위와 같이 기본적으로 registry.yarnpkg.com을 바라본다.
따라서 npm registry를 사용하는 사내 패키지를 받기 위해서 yarn이 npm registry url을 바라보도록 설정해줘야 한다.

npmRegistryServer 옵션 설정

.yarnrc.yml파일에 npmRegistryServer 옵션을 아래와 같이 설정하면 이제 npm registry로 바라본다.

npmRegistryServer: 'https://npm.pkg.github.com'

하지만 이렇게 설정하게 되면 모든 패키지를 설치할 때 해당 npm registry를 바라보기 때문에 yarn에서 받아와야하는 기존 패키지들을 설치하지 못한다는 문제가 있다.

따라서 사내 패키지만 특정적으로 npm registry를 바라보도록 설정해주어야 한다.

npmScopes 옵션 설정

yarnrc.yml settings

yarnrc는 위처럼 npmScopes옵션을 제공해서, 특정 패키지 이름(보통 회사명)에 해당하는 npmRegistryServer를 설정할 수 있다.

이때 회사명은 @를 떼고 설정해주어야 한다!

npmScopes:
  'company-name':
    npmRegistryServer: 'https://npm.pkg.github.com'

이제 회사 특정적으로 npm registry에 있는 패키지가 잘 받아와지는 것을 확인할 수 있다.

참고문서

https://yarnpkg.com/configuration/yarnrc#npmRegistryServer

https://stackoverflow.com/questions/61738819/installing-private-package-from-github-package-registry-using-yarn-fails-with-no

[Xcode] Distribution failed with errors

pIutos — Mon, 4 Sep 2023 02:28:50 +0900

문제

Xcode에서 앱 빌드 후 Archive > Distribute 하는 과정에서 다음과 같은 에러가 발생했다.

Invalid bundle. The "UlInterfaceOrientationPortrait,UlInterfaceOrientationLandscapeLeft,UlInterfaceOrientationLan dscapeRight" orientations were provided for the UISupportedInterfaceOrientations Info.plist key~

에러를 읽어보면, UISupportedInterfaceOrientations key에 해당하는 모든 orientation이 포함되어야한다고 한다.

따라서 info.plist파일에 누락된 UIInterfaceOrientationPortraitUpsideDown을 추가하였다.

// info.plist
<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationPortraitUpsideDown</string> // 추가!
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>

Invalid bundle. Because your app supports Multitasking on iPad, you need to include the LaunchScreen.storyboard launch storyboard file~

에러 안내 링크에 가니 UILaunchStoryboardName 값의 .storyboard를 떼라고 안내되어있어서 아래처럼 .storyboard를 제거하였다.

// info.plist

<key>UILaunchStoryboardName</key>
<string>LaunchScreen.storyboard</string> // .storyboard 삭제

[Vite] 컴포넌트 build시 이미지가 dynamic import되도록 환경설정

pIutos — Fri, 18 Aug 2023 00:12:27 +0900

Icon 컴포넌트 작성

사내 라이브러리에서 icon 컴포넌트를 만들어야 했는데, 아래와 같이 동적으로 name props을 변경하면 이미지가 변경되도록 구현해야했습니다.

import styled from "@emotion/native";
import { IconsNameType } from "../../..";

export type IconProps = {
  name: IconsNameType;
  size: 16 | 20 | 24;
};

export const Icon = ({ name, size }: IconProps) => {
  return <S.ImageWrapper source={require("../../../assets/images/icons/${name}.png")} size={size} />;
};

const S = {
  ImageWrapper: styled.Image<Pick<IconProps, "size">>`
    width: ${({ size }) => size}px;
    height: ${({ size }) => size}px;
  `,
};

코드만 보면 잘 동작할 것 같지만, 빌드하여 패키지 업로드를 하려하니 여러 문제가 있었습니다.

문제점 1. build시 image가 같이 번들링되지 않는다

현재 시스템에서 라이브러리를 build하면 아래와 같이 js파일과 type파일들이 번들링됩니다.

따라서 동적 Import를 위해 dist폴더에 이미지도 같이 빌드되어야 합니다.

https://ko.vitejs.dev/guide/assets.html

Vite

Vite, 차세대 프런트엔드 개발 툴

ko.vitejs.dev

vite 공식문서를 보면 public 디렉터리 아래에 asset들을 위치시키면 같이 빌드가 된다고 합니다.

하지만 src/lib폴더밖에 없는 라이브러리 개발 환경에서는 public폴더가 존재하지 않으므로 아래와 같이 임의로 폴더경로를 지정해줍니다.

// vite.config.ts

export default defineConfig({
  // ...
  publicDir: path.resolve(__dirname, "src/lib/assets"),
})

vite config에 publicDir옵션을 설정하면 해당 경로의 asset들이 자동으로 같이 build 됩니다.

이렇게 image를 dist폴더에 빌드하는것은 성공했지만, 생각해보니 다른 문제가 있었습니다.

문제점2. 이미지를 가져오는 경로가 달라야한다.

icon 컴포넌트 코드를 보면

"../../../assets/images/icons/${name}.png"

경로로 동적 import 해오고 있습니다.

하지만 모듈에서 가져와야하는 경로는

"../images/icons/${name}.png"

이므로 build시 import해오는 경로가 달라야합니다.

dist폴더에 이미지가 존재해도 dist폴더 경로에 맞게 이미지를 불러와야하는 것입니다.

공식문서에서는 전체 URL을 확인하는 방법으로 URL 생성자를 이용하는 방법을 제시합니다.

프로덕션 빌드 시, Vite는 번들링 및 에셋 해싱 후에도 해당 에셋에 대한 URL을 올바르게 가리키기 위해 필요한 변환 작업을 수행합니다.

위 방법을 사용하면 번들링 이후에 URL이 알맞게 변경된다고 하기 때문에, 이를 적용해보았습니다.

// ...
const getImageUrl = (name: IconProps['name']) => {
  return new URL(`../../../assets/images/icons/${name}.png`, import.meta.url)
    .href;
};

export const Icon = ({ name, size }: IconProps) => {
  return <S.ImageWrapper source={require(getImageUrl(name))} size={size} />;
};

이렇게 작성 후 빌드하면 URL 경로에 해당하는 image를 모두 가져와서 base64로 인코딩하고, 이를 동적으로 import하도록 번들링 된 것을 확인할 수 있습니다.

dist/*/design-system.es.js

결말

성공적으로 dynamic하게 이미지를 불러오는 icon컴포넌트를 만들었고, 이를 github registry에 배포하여 프로젝트에 불러왔습니다.

하지만 컴포넌트를 확인해보니 react native에서는 이미지 경로 require 함수에서 동적으로 가져오는것이 불가능하다고 합니다...

제가 라이브러리를 설정할 때 native 개발 환경은 설정하지 않았는데, 실제 native환경에서 확인해보니 동작하지 않았습니다.

이후 web 컴포넌트로도 컴포넌트를 만들 예정인데, 이 때 상기 동적 import 방식을 사용하려 합니다.

이미지를 동적으로 import하는 컴포넌트를 만들고, vite로 빌드하기 위한 분들을 위해 이 글을 남깁니다..!

[Strapi] Strapi 프로젝트를 Fly.io에 배포하기

pIutos — Tue, 11 Jul 2023 11:30:20 +0900

strapi 프로젝트를 Fly.io에 배포하는 방법에 대해 알아보겠습니다.

Strapi 설정

Strapi 프로젝트 생성

yarn create strapi-app strapi-fly --quickstart

명령어를 수행하면 strapi 프로젝트가 기본 설정으로 생성됩니다.

Postgresql 설정

Strapi 프로젝트를 생성하면 sqlite가 기본 데이터베이스로 설정되어 있습니다.

Fly.io는 postgresql을 기본 지원하기 때문에 이에 맞게 strapi에서 postgresql를 사용하도록 설정해주겠습니다.

// config/database.js

const path = require('path');

module.exports = ({ env }) => {
  const client = env('DATABASE_CLIENT', 'postgres'); // sqlite > postgres
  // ...
  postgres: {
    connection: {
      connectionString: env('DATABASE_URL'), // 삭제해주세요
      host: env('DATABASE_HOST', 'localhost'),
      // ...

config/database.js 파일에서 client를 sqlite에서 postgres로 변경합니다.

그리고 아래로 가면 postgres 설정이 있는데, connectionString을 삭제해주세요. 추후 Fly.io와 연동 이후 해당 설정이 있다면 에러가 발생합니다.

// .env

DATABASE_CLIENT=postgres
DATABASE_HOST=127.0.0.1
DATABASE_PORT=5432
DATABASE_NAME=데이터베이스이름
DATABASE_USERNAME=유저이름
DATABASE_PASSWORD=유저패스워드

그리고 .env파일도 DATABASE_CLIENT를 postgres로 수정하고, DB 이름과 유저이름, 비밀번호도 본인이 설정한 것으로 수정합니다.

Dockerfile 생성

Fly에 배포하기 위해서 Dockerfile를 생성해야합니다. 프로젝트 root 디렉터리에 Dockerfile 파일명으로 파일을 생성해주시고, 아래 코드를 작성해주세요.

# Dockerfile
FROM node:16
# Installing libvips-dev for sharp Compatability
RUN apt-get update && apt-get install libvips-dev -y
# Set environment to production
ENV NODE_ENV=production
# Copy the configuration files
WORKDIR /opt/
COPY ./package.json ./yarn.lock ./
ENV PATH /opt/node_modules/.bin:$PATH
# Install dependencies
RUN yarn install
# Copy the application files
WORKDIR /opt/app
COPY ./ .
# Build the Strapi application
RUN yarn build
# Expose the Strapi port
EXPOSE 1337
# Start the Strapi application 
CMD ["yarn", "start"]

추가적으로 .dockerignore파일을 생성하여 아래와 같이 작성해주세요.

.tmp/
.cache/
.git/
build/
node_modules/
data/

plugins 파일 생성

config폴더에 plugins.js파일을 생성하여 아래 코드를 작성해주세요.

// config/plugins.js

module.exports = ({ env }) => ({
  "users-permissions": {
    config: {
      jwtSecret: env("ADMIN_JWT_SECRET"),
    },
  },
});

이 파일이 없다면, 나중에 배포 후에 아래와 같은 에러가 발생합니다. ~~작성자처럼 삽질하지 말라고~~ 설정 편의를 위해 미리 작성하였습니다..

Missing jwtSecret 에러..

Fly.io 설정

Strapi 설정을 마쳤다면 Fly에 배포하기 위해 설정을 진행하겠습니다.

Fly CLI 설치

우선 컴퓨터에 Fly CLI를 설치해야합니다. 설치에 필요한 명령어는 아래와 같습니다.

Mac

brew install flyctl

Window | Linux

curl -L https://fly.io/install.sh | sh

Fly에 로그인하기

CLI를 설치했다면 아래 명령어로 로그인해야합니다. 만약 계정이 없다면 생성해주세요.

fly auth login

Fly 프로젝트 생성하기

fly launch

? Choose an app name (leave blank to generate one): 프로젝트 이름을 지정합니다.
? Choose a region for deployment: Tokyo, Japan (nrt) 한국과 가까운 도쿄로 지정합니다.

Created app '프로젝트 이름' in organization ''
Admin URL: https://fly.io/apps/프로젝트 이름
Hostname: 프로젝트 이름.fly.dev

strapi 프로젝트 루트에서 fly launch 명령을 실행하면 프로젝트 이름과 region을 지정할 수 있습니다.

이후 Postgresql database를 셋업할거냐는 질문이 나오는데 Yes를 선택해 주시고, 저는 연습용으로 사용하기 때문에 가장 작은 용량으로 선택했습니다.

만약 셋업 질문이 나오지 않는다면 목차 아래의 TroubleShooting 부분으로 가서 내용을 확인해주세요.

이후 DATABASE_URL=postgres://프로젝트이름:비밀번호...와 같은 정보가 표시됩니다. 이것을 복사해서 .env 파일에 추가해주세요.

// .env

// ...
DATABASE_URL=postgres://...

이후 기본 설정을 선택해 주시고, 다 마쳤다면 자동으로 fly.toml파일이 생성되며 프로젝트 생성 작업이 종료됩니다.

추가적으로 이후에 아래와 같은 질문이 나오는데, 추가적으로 설정할 것이 있기 때문에 No를 선택해줍니다.

? Would you like to deploy now? (y/N) > No

TroubleShooting: Fly 프로젝트 생성시 셋업 질문이 나오지 않는다면

만약 fly launch 명령어로 프로젝트를 생성했는데 fly.toml파일만 생성되고 Postgresql을 셋업해줄까? 하는 질문이 나오지 않는다면 귀찮지만 프로젝트를 삭제하고, 아래 명령어로 다시 프로젝트를 생성해주세요

fly launch --image flyio/hellofly:latest

삭제 페이지

이후 Postgresql 셋업 및 DATABASE_URL까지 env파일에 적었다면 생성된 fly.toml에서 아래 부분을 삭제해주세요.

해당 코드가 남아있으면 Strapi가 빌드된 Docker 이미지가 업로드 되지 않고, 기본 제공 이미지가 업로드됩니다.

// fly.toml

// ...
[build] // 삭제
  image = "flyio/hellofly:latest" // 삭제

fly.toml 파일 수정하기

생성된 fly.toml파일에서 [http_service]의 internal_port를 1337로 수정하고, 아래 코드를 추가해줍니다.

[http_service]
  internal_port = 1337 // 1337로 수정
  // ...

// 아래 코드 추가
[[services]]
  http_checks = []
  internal_port = 1337
  processes = ["app"]
  protocol = "tcp"
  script_checks = []

postgresql production 환경 설정

postgresql을 Fly에 배포되는 production 환경에서 사용하기 위해 config/env/production경로를 만들고, database.js파일을 생성합니다.

이전에 Strapi 설정 단계에서 .env파일에 DATABASE_URL을 지정했었습니다. 이를 파싱하기 위해 필요한 패키지를 설치합니다.

yarn add pg-connection-string pg

설치 후 database.js 파일을 아래와 같이 작성합니다.

// config/env/production/database.js

const parse = require("pg-connection-string").parse;
const config = parse(process.env.DATABASE_URL);

module.exports = () => ({
  connection: {
    client: "postgres",
    connection: {
      host: config.host,
      port: config.port,
      database: config.database,
      user: config.user,
      password: config.password,
      ssl: false,
    },
    debug: false,
  },
});

Fly에 배포하기

긴 설정을 마쳤다면 이제 배포만 하면 됩니다.

fly deploy

성공적으로 배포된 것을 확인할 수 있습니다.

참고로 배포 환경에서는 content-type을 수정하지 못하기 때문에 수정이 필요하다면 개발 환경에서 진행해주세요.

strapi 프로젝트를 수정하게 되면 다시 fly deploy 명령을 수행하여 재배포할 수 있습니다.

마치며

원래 heroku를 통해 배포하려했으나, heroku에서 이전에 제공하던 무료 플랜이 사라졌기에 대체제로 Fly.io를 찾아 배포하는 과정을 작성했습니다.

그리고 이 Fly.io에 배포하는 과정에서 거의 6시간 가량을 삽질했기 때문에 억울해서 저와 같이 시간 낭비하지 마시라고 정리해서 작성합니다.. (특히 TroubleShooting 부분.. 자동 셋업이 안떠서 postgresql 프로젝트를 따로 만들어서 연결하려다가 결국 해결 못했습니다ㅠㅠ)

그래도 계속된 삽질을 통해 Dockerfile에 사용되는 문법이나 DB설정 방법 등을 얻고가는 것 같아 그나마 만족합니다..,,

본 글은 아래 커뮤니티글을 토대로 작성되었고, 추가적인 설정이 필요한 부분과 에러가 안나도록 내용을 추가하였습니다. 또 패키지 매니저는 yarn을 기준으로 작성했기 때문에, npm을 사용한다면 해당 링크를 참고해주세요.

https://forum.strapi.io/t/fly-io-deployment/22438

[next.js] intersection observer로 무한스크롤 구현하기

pIutos — Thu, 29 Jun 2023 01:54:03 +0900

본 글은 Next.js 환경에서 무한스크롤 기능을 intersection observer를 이용해 구현한 방법에 대해 작성하였습니다.

구현 설명

우선 처음 데이터는 Next의 getServersideProps로 받고, 이후 데이터는 intersection event가 발생했을 때 다음 배열을 가져오는 api를 호출하도록 구현하겠습니다.

이때 API는 원하는 page를 쿼리 파라미터에 page=1과 같이 지정하면 해당 page의 데이터를 반환하도록 구현되어있습니다.

상세 구현

타입 지정

프로젝트에서 가져오는 정보들을 memory라 명명하여 type도 연관되게 이름지었습니다.

GetMemoryListRes 타입은 데이터를 fetching해올 때 무한스크롤 할 정보의 response타입입니다.

/** memoryList를 가져오는 api의 response type */
export type GetMemoryListRes = {
  total: number
  content: Array<MemoryType>
  pageable: {
    sort: {
      orders: [
        {
          direction: string
          property: string
          ignoreCase: boolean
          nullHandling: string
        }
      ]
    }
    page: number
    size: number
  }
}

/** Memory Type */
export type MemoryType = {
  id: number
  backgroundImage: string
  text: string
  videoId: string
  createdAt: string
  deletedAt?: string
}
/** Memory Type의 List 형식 */
export type MemoryListType = {
  memoryList: GetMemoryListRes['content']
  currentPage: GetMemoryListRes['pageable']['page']
}

getServerSideProps로 첫 배열 가져오기

import { GetServerSideProps } from 'next'
import { API_URL } from '@/constants'

// server data fetching
export const getServerSideProps: GetServerSideProps<{
  initMemoryList: MemoryListType
}> = async () => {
  /** fetch data */
  const getMemoryList = await fetch(
    `${process.env.NEXT_PUBLIC_SERVER_DEFAULT_END_POINT}post/page?page=1&size=${GET_MEMORY_LIST_DEFAULT_SIZE}&memberId=${MEMBER_ID}`
  )
  const getMemoryListRes: GetMemoryListRes = await getMemoryList.json()

  const initMemoryList: MemoryListType = {
    memoryList: getMemoryListRes.content,
    currentPage: getMemoryListRes.pageable.page,
  }
  return { props: { initMemoryList } }
}

Next.js의 getServerSideProps로 처음(currentPage: 1)에 해당하는 데이터 배열을 가져왔습니다.

그리고 가져온 정보를 토대로 initMemoryList 변수를 설정하여 prop으로 내려줬습니다.

observer 생성과 무한스크롤 구현

import { GetServerSideProps, InferGetServerSidePropsType } from 'next'

// ...

export default function MemoryList({ initMemoryList }: InferGetServerSidePropsType<typeof getServerSideProps>) {
  const [memoryList, setMemoryList] = useState<MemoryListType>(initMemoryList)

  const targetRef = useRef<HTMLDivElement>(null)

  // 1
  const handleIntersect = useCallback(
    ([entry]: IntersectionObserverEntry[]) => {
      if (entry.isIntersecting) {
        /** fetch data */
        const getMemoryList = axios.get<GetMemoryListRes>(
          `${process.env.NEXT_PUBLIC_SERVER_DEFAULT_END_POINT}post/page?page=${
            memoryList.currentPage + 1
          }&size=${GET_MEMORY_LIST_DEFAULT_SIZE}&memberId=${MEMBER_ID}`
        )
        getMemoryList
          .then((res) => {
            if (res.status !== 200) return
            setMemoryList((prev) => {
              return {
                ...prev,
                memoryList: [...prev.memoryList, ...res.data.content],
                currentPage: res.data.pageable.page,
              }
            })
          })
          .catch((error) => console.error(error))
      }
    },
    [memoryList.currentPage]
  )

  // 2
  /** control observer */
  useEffect(() => {
    const observer = new IntersectionObserver(handleIntersect, {
      threshold: 0.9,
      root: null,
    })

    targetRef.current && observer.observe(targetRef.current)

    return () => {
      observer.disconnect()
    }
  }, [handleIntersect, targetRef.current])

  // 3
  return (
    <S.Wrapper>
      {memoryList?.memoryList.map((memory, index) => (
        <Card key={index} memory={memory} ref={memoryList.memoryList.length === index + 1 ? targetRef : null} />
      ))}
    </S.Wrapper>
  )
}

위 코드는 세가지 부분으로 나누어 설명하겠습니다.

1. intersecting 했을 때 데이터를 가져오는 부분

만약 관찰하는 요소(마지막 Card 컴포넌트)가 intersecting되었다면 getMemoryList를 통해 데이터를 가져옵니다.

이때 page = currentPage + 1을 하여 현재 페이지 다음의 데이터를 가져옵니다.

그리고 가져온 데이터를 memoryList에 붙여줍니다.

2. intersection observer 생성 부분

targetRef는 null일수 있기때문에 targetRef.current가 존재하면 targetRef를 관찰할 대상으로 등록합니다.

언마운팅시에는 observer.disconnect() 함수를 호출해 등록해제합니다.

다음 데이터를 빠르게 보여주기 위해 observer의 threshold를 1이 아니라 모든 요소가 보여지기 직전인 0.8로 설정했습니다. 이렇게하면 유저가 데이터를 기다린다는 느낌을 최소화할 수 있습니다.

3. 데이터를 보여주고, Card 컴포넌트에 ref를 할당하는 부분

MemoryList.map을 통해 Card 컴포넌트에 memory에 해당하는 props를 넘겨주었습니다.

이때 ref도 함께 전달하였는데, observer가 마지막 하나의 컴포넌트만 관찰해야하므로

memoryList.memoryList.length === index + 1 ? targetRef : null

해당 코드를 통해 마지막 컴포넌트일때 targetRef를 지정해주도록 하였습니다.

+) Card 컴포넌트의 ref 설정

위 코드에서 Card컴포넌트를 보시면 ref로 targetRef를 전달해줍니다. 하지만 Card 컴포넌트는 우리가 제작한 컴포넌트이므로 별도 설정이 없다면 ref는 제대로 할당되지 않을 것입니다.

type CardProps = {
  memory: MemoryType
} & React.ComponentProps<'div'>

const Card = forwardRef<HTMLDivElement, CardProps>(({ memory }, ref) => {
  return (
    <>
      <S.CardComponentContainer ref={ref} backgroundImage={memory.backgroundImage}>
      // ...

따라서 forwardRef를 이용하여 ref를 컴포넌트 내부에 할당하도록 Card컴포넌트를 작성했습니다.

추가적으로 Card 컴포넌트는 div로 감싸여진 컴포넌트이기에, 추후 확장성을 고려하여 CardProps 타입을 div컴포넌트 props에 해당하는 타입을 확장하여 선언했습니다.

결과물

데이터가 잘 가져와져서 무한스크롤되는 모습을 확인할 수 있습니다.

mock 데이터 사용하기

구현당시 API가 나오지 않았기 때문에 API요청에 따른 데이터를 모킹해서 구현해야했습니다.

그래서 아래와같이 MockMemoryType이라는 모킹 데이터를 반환하는 함수를 만들어 구현했습니다.

/**mock data */
const MockMemoryType = (currentPage: number) => {
  return {
    data: [
      {
        id: currentPage,
        backgroundImage: '',
        youtubeUrl: '',
        text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
        createdAt: 'July 23',
        deletedAt: 'July 23',
      },
      {
        id: currentPage,
        backgroundImage: '',
        youtubeUrl: '',
        text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
        createdAt: 'July 23',
        deletedAt: 'July 23',
      },
    ],
    currentPage: currentPage,
  }
}

데이터를 모킹해서 가져올 때는 mock함수 사용과, 컴포넌트 내부에서 mockPageNumber = useRef(2)로 설정하여 page를 가져온다는점 외에는 구현 상 달라진 것은 없습니다.

intersect해서 데이터를 가져왔을 때 mockPageNumber.current++를 해주어 요청할 페이지 번호를 관리하였습니다.

// server data fetching
export const getServerSideProps: GetServerSideProps<{
  initMemoryList: MemoryListType
}> = async () => {
  /** use mock data */
  const initMemoryList = MockMemoryType(1)
  return { props: { initMemoryList } }
}

export default function MemoryList({ initMemoryList }: InferGetServerSidePropsType<typeof getServerSideProps>) {
  const [memoryList, setMemoryList] = useState<MemoryListType>(initMemoryList)

  const targetRef = useRef<HTMLDivElement>(null)
  const mockId = useRef(2)

  const handleIntersect = useCallback(
    ([entry]: IntersectionObserverEntry[]) => {
      if (entry.isIntersecting) {
        /** use mock data */
        setMemoryList((prev) => {
          return {
            ...prev,
            data: [...prev.data, ...MockMemoryType(mockPageNumber.current).data],
            currentPage: MockMemoryType(mockPageNumber.current).currentPage,
          }
        })
      }
      mockPageNumber.current++
    },
    [targetRef.current]
  )

  /** control observer */
  useEffect(() => {
    const observer = new IntersectionObserver(handleIntersect, {
      threshold: 0.9,
      root: null,
    })

    targetRef.current && observer.observe(targetRef.current)

    return () => {
      observer.disconnect()
    }
  }, [handleIntersect, targetRef.current])

  return (
    <S.Wrapper>
      {memoryList?.data.map((memory, index) => (
        <Card key={index} memory={memory} ref={targetRef} />
      ))}
    </S.Wrapper>
  )
}

TroubleShooting: 리렌더링이 많이되는 문제

구현한 로직을 보며 페이지 성능에 대해 생각하던 중, 기존 memoryList state 배열을 새로운 데이터를 덧붙이듯이 관리하게되면 데이터를 가져올 때 마다 모든 Card 컴포넌트에서 리렌더링이 일어나지 않을까? 라는 생각이 들어서 확인해보았습니다.

React Dev Tools로 확인해 본 결과, 예상대로 데이터를 많이 가져오면 많이 가져올 수록 모든 컴포넌트에서 리렌더링이 발생한다는 것이 확인되었습니다.

모든 Card 컴포넌트가 데이터를 fetching해올 때 렌더링되는 모습

export default React.memo(Card);

따라서 React.memo()를 이용하여 Card컴포넌트를 감싸주었고, 성공적으로 가져온 데이터에 대해서만 렌더링이 일어나도록 구현되었습니다.

이제 데이터 fetching시 새로 불러온 데이터에 대해서만 렌더링이 일어납니다!

[Next.js] Next에서 Styled Components와 함께 Storybook 세팅하기

pIutos — Mon, 19 Jun 2023 17:20:13 +0900

Create-Next-App을 통해 생성한 Next.js 프로젝트에서 storybook 초기 설정하는 방법에 대해 알아보겠습니다.

Storybook 설치하기

npx storybook@latest init

위 명령어로 storybook의 최신버전을 프로젝트에 설치합니다.

yarn add -D @storybook/nextjs

설치를 완료했다면 nextjs를 지원하는 패키지도 설치해줍니다. 설치를 완료했다면 아래 코드를 .storybook/main.ts 파일에 추가해줍니다.

// .storybook/main.ts
const config: StorybookConfig = {
  //...
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
}

npm run storybook

세팅을 마쳤다면 npm run storybook 명령어로 스토리북을 실행할 수 있습니다.

Storybook에서 Next.js의 절대 경로 사용하기

create-next-app으로 next.js의 최신버전을 설치하면 tsconfig 파일에 기본적으로 src/를 @/로 치환하는 절대경로가 설정되어있습니다.

//tsconfig.json
{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./src/*"]
    }
}

별도의 설정없이 storybook의 컴포넌트 내에서 절대 경로를 사용한다면 다음과 같은 에러가 발생합니다.

따라서 아래와 같이 .storybook/main.ts 파일에 절대경로 설정을 추가해줍니다.

// .storybook/main.ts
const path = require('path');

const config: StorybookConfig = {
  ...
  webpackFinal: async config => {
    config.resolve.alias['@'] = path.resolve(__dirname, '../src/');
    return config;
  },
}

storybook에 public 폴더의 이미지 불러오기

프로젝트를 진행할 때 public폴더에서 불러오고 싶다면 storybook에 정적 파일이 존재하는 위치를 알려줘야합니다.

//main.ts
const config: StorybookConfig = {
  ...
  staticDirs: ['../public'],
}

위와같이 static 경로를 ../public으로 설정한다면 storybook에서 public폴더의 이미지를 불러올 수 있습니다.

Styled Components 적용하기

storybook에서 styled-components를 사용하려면 이를 지원하는 관련 패키지를 설치해야합니다.

npm add -D @storybook/addon-styling

우선 @storybook/addon-styling 패키지를 DevDependencies에 추가합니다. 그리고 아래 코드를 .storybook/main.ts에 추가해줍니다.

// .storybook/main.ts
module.exports = {
  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials', '@storybook/addon-styling'],
  // ...
};

Styled Components의 GlobalStyles 적용하기

만약 프로젝트에서 globalStyles를 사용한다면, .storybook/preview.ts에 decorators를 추가하면 globalStyles가 적용됩니다.

// .storybook/preview.ts
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import { GlobalStyles } from '../src/styles';

// ...

export const decorators = [
  withThemeFromJSXProvider({
    GlobalStyles,
  }),
];

Styled Components의 ThemeProvider 적용하기

프로젝트에서 themeProvider를 사용하고싶다면 withThemeFromJSXProvider 속성값에 themeProvider를 추가해주세요.

// .storybook/preview.ts
import { ThemeProvider } from 'styled-components';
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import { GlobalStyles, theme } from '../src/styles';

export const decorators = [
  withThemeFromJSXProvider({
    themes: { theme },
    Provider: ThemeProvider,
    GlobalStyles,
  }),
];

export default preview;

참고자료

글 작성시 참고한 문서입니다. 관련해서 추가적인 정보를 원하시면 아래 공식문서에서 확인해주세요.

https://storybook.js.org/recipes/next

https://storybook.js.org/recipes/styled-components

[React] vite와 함께 리액트 컴포넌트 npm에 배포하기

pIutos — Fri, 16 Jun 2023 17:29:49 +0900

우리가 흔히 사용하는 react, eslint와 같은 패키지를 우리도 npm에 직접 배포할 수 있습니다.

react 함수와 컴포넌트 등을 작성한 라이브러리를 추후 프로젝트에 만들어서 사용할 예정이기 때문에, 이를 연습하기 위해 여러 리액트 컴포넌트를 npm에 배포한 과정을 설명하겠습니다.

추가적으로, 개발자 경험과 번들링 사이즈 개선을 위해 여기에 이점이 있는 pnpm과 vite를 사용해서 배포해보겠습니다.

vite + pnpm으로 프로젝트 설정하기

pnpm create vite (프로젝트 명)

위 명령어를 실행하면 아래와같이 framework와 언어를 선택할 수 있습니다. react 컴포넌트를 배포하기 위해 React를 선택한 다음, typescript를 지원하기 위해 Typescript를 선택해줍니다.

pnpm i

그리고 생성된 폴더에서 pnpm i 명령어로 dependency를 설치해주고, 기본으로 생성된 css파일과 App.tsx파일을 삭제해줍니다. (public 폴더도 삭제해주세요!)

배포할 컴포넌트 생성하기

리액트 컴포넌트 파일이 들어갈 폴더를 src/lib/components경로에 생성해 준 다음 컴포넌트 2개를 생성합니다.

npm에 배포해보기 위한 연습파일이므로 간단하게 작성해보았습니다.

//lib/src/components/TestComponent.tsx

const TestComponent = () => {
  return (
    <div>
      <span>Test</span>
    </div>
  );
};

export default TestComponent;

//lib/src/components/TestComponent2.tsx

const TestComponent2 = () => {
  return (
    <div>
      <span>Test2</span>
    </div>
  );
};

export default TestComponent2;

그리고 이 컴포넌트들을 한번에 lib/index.tsx파일을 생성하여 여기에서 한번에 export 시켜줍니다.

// lib/index.tsx

export { default as TestComponent } from "./components/TestComponent";
export { default as TestComponent2 } from "./components/TestComponent2";

만든 컴포넌트 확인하기

src 폴더의 main.tsx 파일을 다음과 같이 수정합니다.

// src/main.tsx

import ReactDOM from "react-dom";
import { TestComponent, Test2Component } from "./lib";
import React from "react";

ReactDOM.render(
    <>
        <TestComponent />
        <Test2Component />
    </>,
    document.getElementById("root") as HTMLElement
);

pnpm dev

이후 pnpm dev 명령어를 실행하면 2개의 컴포넌트가 잘 렌더링 되는것을 확인할 수 있습니다.

컴포넌트 2개가 잘 렌더링 되었습니다.

생성한 컴포넌트 빌드하기

vite config파일 수정하기

pnpm i -D path @types/node vite-plugin-dts

경로 설정을 위한 path, @types/node 패키지와 .d.ts파일 번들링을 위한 vite-plugin-dts 패키지를 설치해줍니다.

그리고 vite.config.ts 파일을 다음과 같이 수정합니다.

// vite.config.ts

import * as path from "path";

import { defineConfig } from "vite";
import dts from "vite-plugin-dts";

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/lib/index.tsx"),
        name: "index",
        fileName: "index",
    },
    rollupOptions: {
      external: ["react"],
        output: {
          globals: {
            react: "React",
          },
        },
    },
    commonjsOptions: {
      esmExternals: ["react"],
    },
  },
  plugins: [dts()],
});

lib폴더의 파일들을 build하기위해 tsconfig의 include경로도 수정해줍니다.

// tsconfig.json

{
  ...
  "include": ["src/lib"],
  ...
}

빌드 명령어를 통해 배포할 파일 생성하기

설정을 다 마쳤다면 이제 build 명령어를 통해 배포할 파일을 생성해보겠습니다.

pnpm build

/dist 폴더에 다음과같이 type 파일들과 컴포넌트가 담긴 index.js 파일이 생성되었습니다.

만든 컴포넌트를 npm에 배포하기

package.json 파일 수정하기

컴포넌트를 npm에 배포하기 위해서 package.json에 패키지에 다음과 같이 entry point를 작성해야합니다.

npm은 public으로 배포해야 무료로 배포할 수 있기 때문에 기본으로 설정되어있는 private 속성은 제거해주세요.

// package.json

{
  "name": "@eunbae/react-library-ex",
  "version": "0.0.1",
  "description": "react library ex",
  "type": "module",
  "main": "dist/index.umd.cjs",
  "module": "dist/index.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.js",
        "require": "./dist/index.umd.cjs"
      }
  },
  "files": [
    "dist"
  ],
  ...
}

version은 첫 배포이기 때문에 0.0.1로 적어줍니다. 만약 배포 이후 수정된 파일을 배포하고 싶다면 0.0.2와 같이 다른 버전으로 적어줘야 아래와 같은 오류가 뜨지 않습니다.

error: You cannot publish over the previously published versions: -

npm 배포시 제외할 파일 설정하기

package.json과 dist폴더 안에있는 파일 외에는 배포하지 않기 위해 .npmignore 파일을 생성하고, 아래와 같이 입력해줍니다.

// .npmignore

index.html               
package.json             
/src    
tsconfig.json            
tsconfig.node.json       
vite.config.ts

npm에 로그인 후 배포하기

우선 npm에 배포하기 위해서는 npm 계정이 필요합니다. 만약 계정이 없다면 [https://www.npmjs.com/](공식 사이트)에서 계정을 생성한 후 진행하시면 됩니다.

npm login

위 명령어를 실행하면 터미널에서 npm에 로그인할 수 있습니다. npm 계정의 Username, password, email, OTP(이메일로 발송)를 차례대로 입력하면 로그인됩니다.

npm publish

로그인 했다면 npm publish 명령어를 통해 배포합니다.

https://www.npmjs.com/package/@eunbae/react-library-ex

여기서 제가 배포한 패키지는 위 링크에서 확인할 수 있습니다.

+) 배포 전에 패키지 설치해보기

만약 배포 전 dist폴더에 있는 파일을 패키지처럼 설치해보고 싶다면,

pnpm i ./dist

위 명령어를 입력하면 "dist"라는 이름으로 패키지가 설치됩니다.

이후 main.tsx 파일에서 dist 명의 패키지 파일이 잘 생성되었는지 확인할 수 있습니다.

// src/main.tsx

import ReactDOM from "react-dom";
import { TestComponent, Test2Component } from "dist";
import React from "react";

ReactDOM.render(
  <>
    <TestComponent />
    <Test2Component />
  </>,
  document.getElementById("root") as HTMLElement
);

마치며

지금까지 vite를 이용해서 react 컴포넌트를 npm에 배포해보았습니다. 직접 패키지를 만들어보는 과정을 통해 여러 패키지들이 이런 방식으로 만들어진다는 점을 알게되었고, npm에 배포하는게 생각보다 쉬운 과정이라는것을 알게 되었습니다.

다음으로 제가 곧 진행할 프로젝트에서 공통적으로 사용하는 컴포넌트나 함수들을 라이브러리로 만들어서 사용해볼 예정인데, 만들고 배포하기까지의 과정을 다음 글로 작성해보겠습니다.

참고자료

https://ko.vitejs.dev/guide/build.html#library-mode

https://www.npmjs.com/package/vite-plugin-dts

https://onderonur.netlify.app/blog/creating-a-typescript-library-with-vite/

[React] 메모이제이션 Hook으로 중복연산 피하기 (useCallback, useMemo)

pIutos — Tue, 14 Mar 2023 15:08:07 +0900

메모이제이션(Memoization)은 프로그램이 동일한 계산을 반복할 때, 이전에 계산한 값을 메모리에 저장함으로써 중복되는 연산을 제거해서 프로그램 실행 속도를 빠르게하는 기술입니다.

리액트 함수형 컴포넌트에서는 이러한 메모이제이션을 돕기 위한 두가지 Hook을 제공합니다.

메모이제이션을 하지 않을 때

함수형 컴포넌트에서 상태값이 변경되면 해당 컴포넌트는 다시 렌더링합니다. 이때 컴포넌트 내부에 정의한 함수들도 다시 생성되고 실행되기 때문에 메모이제이션이 필요합니다.

아래와 같은 경우 메모이제이션 훅 useCallback과 useMemo를 사용할 수 있습니다.

렌더링 마다 함수가 새로 생성되어 참조값이 변하는 경우
실행되는 함수가 복잡한 연산을 수행하는 경우

이외에도 훅을 사용하는 다양한 경우가 있지만, 두가지 경우를 예시로 메모이제이션 훅에 대해 설명하겠습니다.

useCallback

useCallback(fn, deps);

useCallback 함수는 콜백 함수를 메모이제이션하고 반환합니다.

import { useCallback } from 'react';

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

코드에서 useCallback함수는 doSomething함수를 반환합니다. 그리고 렌더링시 반환된 함수가 저장된 memoizedCallback 함수는 의존성 배열안에 들어있는 값 a, b의 상태가 변경되었을 때만 생성됩니다.

const Example = () => {
  const [a, setA] = useState(0);
  const fetchApi = () => {
    fetch('www.example.com/api')
      .then((response) => response.json())
      .then((data) => console.log(data));
  };
  
  useEffect(() => {
    fetchApi().then(data => setA(data));
  }, [fetchApi]);
  
  return(
    <div>
      <span>{a}</span>
    </div>
  );
}

API를 가져오는 함수 fetchApi()와 이 함수를 useEffect를 통해 실행하는 코드를 작성해보았습니다. 위 예시에서 useEffect를 통해 api를 가져오면 setA가 실행되어 컴포넌트 Example이 리렌더링됩니다.

이때 fetchApi 함수는 다시 생성되어 이름은 같지만, 자바스크립트에서 다른 메모리값을 가지기 때문에 새로운 참조값으로 변경됩니다.

따라서 useEffect는 fetchApi가 변경되었다고 판단하기 때문에 api를 다시 호출하고, 또 리렌더링이 발생하여 호출을 반복하는 무한루프가 발생하게됩니다.

const Example = () => {
  const [a, setA] = useState(0);
  const fetchApi = useCallback(() => {
    fetch('www.example.com/api')
      .then((response) => response.json())
      .then((data) => console.log(data));
  }, []);
  
  useEffect(() => {
    fetchApi().then(data => setA(data));
  }, [fetchApi]);
  
  return(
    <div>
      <span>{a}</span>
    </div>
  );
}

이 경우 위와같이 useCallback 훅을 이용하면 상태 a가 바뀌어 리렌더링이 되어도 fetchApi의 참조값이 변경되지 않기 때문에 함수 재호출, 무한루프가 발생하지 않게됩니다.

useMemo

useMemo(() => fn, deps);

useMemo 함수는 콜백 함수의 반환값을 메모이제이션하고 반환합니다.

import { useMemo } from 'react';

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

코드에서 computeExpensiveValue() 함수의 반환값이 memoizedValue에 저장되며, 렌더링시 a와 b의 상태가 변경되었을 때만 선언됩니다.

const Example = () => {
  const [a, setA] = useState('');
  const [b, setB] = useState(0);
  const expensiveTask = () => {
    let i = 0;
    while(i < 10000000) i++;
    return a;
  };
  
  return(
    <div>
      <span>
        {expensiveTask()}
      </span>
      <span>
        {b}
      </span>
      <button onClick={setB(prev => prev + 1)} />
    </div>  
  );
}

계산이 오래걸리는 함수가 렌더링때마다 수행되는 코드를 위와같이 작성해보았습니다. 버튼을 클릭하면 상태 b의 값이 변경되어 리렌더링되는데, 렌더링시에 expensiveTask 함수도 호출되기 때문에 연산이 끝날때까지 렌더링이 지연됩니다.

이 경우 아래와 같이 useMemo 훅으로 결과값을 메모이제이션 할 수 있습니다.

const Example = () => {
  const [a, setA] = useState('');
  const [b, setB] = useState(0);
  const expensiveTask = useMemo(() => {
    let i = 0;
    while(i < 10000000) i++;
    return a;
  }, [a]);
  
  return(
    <div>
      <span>
        {expensiveTask()}
      </span>
      <span>
        {b}
      </span>
      <button onClick={setB(prev => prev + 1)} />
    </div>  
  );
}

이처럼 useMemo 훅을 이용하면 상태 a의 값이 변할 때만 함수가 호출됩니다. 따라서 상태 b가 변경되더라도 렌더링이 지연되지 않습니다.

참고로 useMemo 훅으로 전달된 함수는 렌더링 중에 실행됩니다. 따라서 useMemo 내부에는 렌더링 시 수행할 작업만 작성해야 합니다. 렌더링 이후 작업을 작성하고 싶다면 useEffect를 사용해야 합니다.

정리

useCallback은 콜백 함수 자체를, useMemo는 콜백 함수의 반환값을 메모이제이션 한다는 점에서 차이가 존재합니다. 두 훅을 이용하여

useCallback(fn, deps)은 useMemo(() => fn, deps)와 같습니다.

참고

https://ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EC%9D%B4%EC%A0%9C%EC%9D%B4%EC%85%98

https://ko.reactjs.org/docs/hooks-reference.html#usememo

https://thisblogfor.me/react/hooks_memoization/

[React] 리액트의 생명주기 메서드와 Hook

pIutos — Thu, 9 Mar 2023 16:53:38 +0900

리액트 컴포넌트는 기본적으로 브라우저 상에서 나타되고, 업데이트되며, 사라지는 과정을 거치게 됩니다. 이러한 과정을 생명주기라 하며, 리액트의 모든 컴포넌트에는 생명주기가 존재합니다.

생명주기 내에서는 여러 메서드가 호출되며 이를 사용할 수 있는데 클래스형 컴포넌트에서는 생명주기 메서드를 사용하고, 함수형 컴포넌트에서는 Hook을 사용할 수 있는 점에서 서로 차이가 있습니다.

우선 리액트의 클래스형 컴포넌트의 생명주기 메서드를 알아본 다음, 함수형 컴포넌트의 Hook중 하나인 useEffect 함수를 통해 차이점을 더 자세히 알아보겠습니다.

메서드란?
: 클래스 내부에서 정의한 함수를 메서드라 부릅니다.

생명주기 메서드

클래스형 컴포넌트를 작성할 때는 아래와 같이 render() 메서드를 호출하고 JSX를 return하도록 작성해야 합니다.

import React, { Component } from 'react';

class Example extends Component {
  state = {
    number: 0
  };
  render() {
    const { number } = this.state;
    return (
      <div>
      	<span>example</span>
      </div>
    );
  }
}

export default Example;

이렇게 작성한 컴포넌트 안에는 아래 그림과 같이 constructer(), componentDidMount(), componentDidUpdate() 와 같은 다양한 생명주기 메서드들이 존재합니다. 이제 생성과 업데이트, 제거되는 과정에 대해 각각 설명하겠습니다.

Mounting

처음 컴포넌트가 생성되는 것을 마운팅(mounting)이라 합니다. 컴포넌트가 마운팅이 시작되면 아래와 같은 과정을 거칩니다.

컴포넌트가 처음 마운팅 될 때 React는 컴포넌트의 constructor를 호출합니다. constructor에서는 state를 초기화하는 등의 작업을 할 수 있습니다.
다음으로 React는 컴포넌트의 render() 메서드를 호출합니다. render() 메서드를 통해 React는 화면에 표시되어야 할 내용(JSX)을 알게 되며, DOM을 업데이트합니다.
마지막으로 컴포넌트의 출력값(JSX)이 DOM에 삽입되면, React는 componentDidMount() 생명주기 메서드를 호출합니다. componentDidMount() 메서드를 이용하면 컴포넌트가 마운팅 완료 되었을 때 수행할 작업, 예를들어 API를 호출하거나 DOM의 속성을 변경하는 등의 작업을 진행할 수 있습니다.

추가적으로 constructor와 render 메서드의 호출 사이에 getDerivedStateFromProps() 메서드도 호출 가능한데, 받아온 props를 state에 넣어주고 싶을 때 사용할 수 있다 는 정도로만 간단히 설명하고 넘어가겠습니다.

Updating

새로운 props를 받거나, setState()메서드로 state가 업데이트되는 등의 상황에서 리액트 컴포넌트는 업데이트됩니다.

setState 등으로 state가 변경된 상황을 React가 인지하면 화면에 표시될 내용을 알아내기 위해 render() 메서드를 다시 호출합니다.
render() 메서드가 호출되면 마운팅 될 때와 마찬가지로 DOM을 업데이트 하고, componentDidUpdate()메서드를 호출합니다. 이를 이용해 컴포넌트가 업데이트 되었을때의 작업을 지정할 수 있습니다.

Unmounting

리액트 컴포넌트가 삭제되는 것, 즉 화면에서 사라지는 것을 Unmount라 합니다. componentWillUnmount() 메서드는 컴포넌트가 화면에서 사라지기 직전에 호출됩니다. 이 메서드를 이용하여 API 연결을 해제하거나, 이전에 setInterval 함수를 이용하여 함수를 반복 호출했다면 clearInterval함수로 중단하는 등의 작업을 할 수 있습니다.

useEffect Hook

클래스형 컴포넌트에서 사용하는 생명주기 메서드에 대하여 알아보았으니 이번에는 함수형 컴포넌트에서 사용하는 hook중 하나인 useEffect를 생명주기 메서드와 비교해보도록 하겠습니다.

useEffect를 사용할 때 아래와 같이 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값의 배열(deps)을 넣습니다. 함수를 작성할 때 반환(return)할 수 있다는 점도 기억해 주세요.

useEffect(() => {
  ...
  return () => {
    ...
  }
}, [...])

useEffect는 componentDidMount, componentDidUpdate, componentWillUnmount의 역할을 수행하며 기본적으로 처음 마운트 될 때 호출됩니다. 이는 useEffect가 componentDidMount() 메서드의 역할을 기본적으로 수행한다 할 수 있습니다.

deps 배열이 존재하지 않을 때

useEffect(() => {
  ...
})

useEffect 내부에 함수만 작성되었고 deps 배열이 없다면 컴포넌트가 리렌더링 될 때마다 항상 호출됩니다.

이 경우에는 생명주기 메서드의 componentDidMount, componetDidUpdate 메서드와 같은 역할을 수행합니다.

deps 배열이 빈 배열일 때

useEffect(() => {
  ...
}, [])

deps 배열이 빈 배열일 경우에는 처음 컴포넌트가 마운트 될 때만 실행되며, componentDidMount 메서드와 같은 역할을 합니다.

deps 배열이 존재할 때

useEffect(() => {
  ...
}, [state, props, ...])

deps 배열이 존재할 때, 즉 배열에 state나 prop이 들어있을 때에는 이 값들이 변경될 때만 useEffect가 실행됩니다. 이는 componentDidUpdate, getDerivedStateFromProps 메서드와 같은 역할을 합니다.

함수를 반환할 때 (return)

useEffect(() => {
  ...
  return () => {
    ...
  }
}, [...])

첫번째 인자의 함수를 반환(return)할 수 있는데, 이때 반환하는 함수를 clean-up 함수라 표현합니다. 이 clean-up 함수가 바로 componentWillUnmount의 역할을 수행합니다.

+) useEffect를 렌더링 이전에 실행하려면

추가적으로, useEffect는 실행이 마운트가 끝났을 때, 즉 브라우저 렌더링이 완료되었을 때 실행 된다는 것에 유의해야합니다. 만약 렌더링이 완료되기 이전에, 즉 브라우저가 화면에 DOM을 그리기 전에 호출되어야 하면 useLayoutEffect() Hook을 사용할 수 있습니다.

useLayoutEffect()는 useEffect와 사용방법은 동일하며, 실행 순서에만 차이가 있습니다.

[Firebase] Firebase hosting으로 next.js 배포 자동화하기

pIutos — Tue, 17 Jan 2023 01:09:23 +0900

시작하며

firebase는 웹 앱을 빠르게 배포 해주는 hosting기능을 제공합니다. 이번 글은 next.js 프로젝트를 firebase hosting을 이용하여 사이트에 배포하는 법에 대해 작성하였습니다. 또 github와 연결하여 pr을 날리고 병합할 때 자동으로 배포하는 방법에 대해서도 알아보겠습니다.

로컬 환경에서 firebase deploy 적용하기

Firebase CLI 설정하기

firebase cli 설치하기

npm i firebase-tools -D

우선 firebase cli를 npm install을 통해 설치해줍니다. 로컬환경에 firebase cli를 설치하게 되면 sudo 권한 문제와
피할 수 있습니다.

node_modules/.bin/firebase login

그리고 위 명령어를 통해 firebase에 로그인을 합니다.

firebase init hosting 명령어를 통해 초기화하기

node_modules/.bin/firebase init hosting

명령어를 입력하면 아래와 같이 프로젝트 셋업을 하는 질문들이 나타납니다.

저는 dongne-market이라는 이름의 파이어베이스 프로젝트가 존재하므로 찾아서 선택해주고, Hosting Setup에서 public directory를 out으로 설정해줍니다. next build && next export를 하게되면 out디렉토리에 정적 파일이 생성되기 때문입니다. 이후 질문에는 모두 No로 설정해줍니다.

Firebase deploy 명령어로 배포하기

node_modules/.bin/firebase deploy

명령어를 실행하면 아래와 같이 firebase는 out폴더에있는 정적 파일을 hosting URL에 배포해줍니다.

하지만 코드에 변경사항이 있다면 배포 전에 꼭 npm build등의 명령어를 통해 정적 파일을 생성해야한다는 번거로움이 있습니다. 그래서 다음으로 github Action을 통해 자동으로 빌드하여 배포하는 방법을 알아보겠습니다.

Github Action과 연동하여 배포하기

현재 프로젝트가 깃허브에 연동되어있다고 가정하고 환경을 구축하겠습니다. 우선 아래 명령어를 입력합니다.

node_modules/.bin/firebase init hosting:github

최초 세팅시 github와 연결하기위해 브라우저 창이 뜨며 github에 로그인이 필요합니다.

로그인이 완료되었다면 다시 터미널 창으로 돌아와 호스팅하기위한 질문에 답변이 필요합니다.

우선 원하는 github repository를 사용자 이름/저장소 이름 형식으로 입력합니다.

workflow에서 build script를 사용할지 묻는 질문에는 Yes로 설정합니다. 이는 package.json에서 설정한 npm build(next build && next export)명령어를 사용하기 위함입니다.

다음으로 매 배포시마다 어떤 script가 실행될 지 묻는 질문에는 npm ci && npm run build 를 입력해줍니다.

이후 질문에는 아래와같이 Yes, main을 입력해 줍니다.

설정이 완료되었다면 두개의 yml파일이 생성됩니다. yml 파일의 내용에 따라 main브랜치로 pr이 생성될 때 미리보기 사이트(7일간 확인 가능)에 배포되며, pr이 merge된다면 라이브 사이트(projectId.web.app)에 자동 배포가 진행됩니다.

PR 생성 시 미리보기 사이트에 배포

main 브랜치에 병합(merge)시 라이브 사이트에 배포

TroubleShooting: 프로젝트에서 .env파일을 사용한다면

만약 프로젝트에서 .env파일을 사용한다면 gitignore에 등록되어있으므로 깃허브에 따로 변수를 등록해주는 과정이 필요합니다.

프로젝트 설정(settings)탭으로 들어가서 Security > Secrets and Variables > Action 탭으로 이동 후 아래 사진과같이 New repository secret 버튼을 클릭하여 env파일에 들어갈 변수를 하나씩 저장합니다.

그리고 이전에 생성된 yml파일에서 actions/checkout@v2 와 run npm ci && npm build 스텝 사이에 아래 코드와 같이 env파일을 생성하는 스텝을 추가합니다.

- name: Generate Environment Variables File for Production
    run: |
      echo "DONGNE_MARKET_FIREBASE_APIKEY=$DONGNE_MARKET_FIREBASE_APIKEY" >> .env
      echo "DONGNE_MARKET_AUTH_DOMAIN=$DONGNE_MARKET_AUTH_DOMAIN" >> .env
      echo "DONGNE_MARKET_PROJECT_ID=$DONGNE_MARKET_PROJECT_ID" >> .env
      echo "DONGNE_MARKET_STORAGE_BUCKET=$DONGNE_MARKET_STORAGE_BUCKET" >> .env
      echo "DONGNE_MARKET_MESSAGING_SENDER_ID=$DONGNE_MARKET_MESSAGING_SENDER_ID" >> .env
      echo "DONGNE_MARKET_APP_ID=$DONGNE_MARKET_APP_ID" >> .env
      echo "DONGNE_MARKET_MEASUREMENT_ID=$DONGNE_MARKET_MEASUREMENT_ID" >> .env
    env:
      DONGNE_MARKET_FIREBASE_APIKEY: ${{ secrets.DONGNE_MARKET_FIREBASE_APIKEY }}
      DONGNE_MARKET_AUTH_DOMAIN: ${{ secrets.DONGNE_MARKET_AUTH_DOMAIN }}
      DONGNE_MARKET_PROJECT_ID: ${{ secrets.DONGNE_MARKET_PROJECT_ID }}
      DONGNE_MARKET_STORAGE_BUCKET: ${{ secrets.DONGNE_MARKET_STORAGE_BUCKET }}
      DONGNE_MARKET_MESSAGING_SENDER_ID: ${{ secrets.DONGNE_MARKET_MESSAGING_SENDER_ID }}
      DONGNE_MARKET_APP_ID: ${{ secrets.DONGNE_MARKET_APP_ID }}
      DONGNE_MARKET_MEASUREMENT_ID: ${{ secrets.DONGNE_MARKET_MEASUREMENT_ID }}

참고문서

https://firebase.google.com/docs/hosting

https://www.youtube.com/watch?v=P0x0LmiknJc

https://ji5485.github.io/post/2021-06-26/create-env-with-github-actions-secrets/

[React] recoil로 주문내역 관리하기

pIutos — Fri, 11 Nov 2022 14:56:00 +0900

학교 수업의 팀 프로젝트인 음식 주문 서비스를 구현하는 과정에서 음식 주문 내역을 추가하거나 수정, 삭제하는 기능을 구현하는 과정을 정리하였다. recoil을 사용하는 이유는 여러 컴포넌트에서 주문 정보를 사용해야하기 때문이다.

recoil의 중첩객체(nested object)를 함수형 업데이트하기

주문 내역을 추가, 삭제하기 이전에 중첩 객체를 함수형 업데이트하는 방법을 알아보자. 보통 useState안의 배열을 수정하기 위해서 아래와 같은 방법으로 함수형 업데이트를 사용해야한다.

setOrderInfo((prev) => ([...prev, newList]));

import { atom } from "recoil"

export const orderInfoState = atom({
  key: "orderInfo",
  default: {
    finalAmount: 0,
    orderList: [{
      menu: '',
      style: '',
      amount: 0,
      orderListId: 0,
      quantity: 0,
    }]
  }
})

하지만 주문 내역에 필요한 객체는 위와 같이 최종 가격인 finalAmount 속성과 주문 목록 리스트인 orderList 속성이 포함되어있다. 따라서 객체 안의 배열을 함수형 업데이트해야하는데 그 방법은 다음과 같다.

setOrderInfo((prev) => ({
  ...prev, 
  finalAmount: prev.finalAmount + 100,
  orderList: [...prev.orderList, newOrder],
}))

주문 내역 추가하기

위 그림처럼 두번째 선택인 디너 스타일을 선택했을때 주문서에 추가하도록 구현했다.

// order.jsx
const [orderInfo, setOrderInfo] = useRecoilState(orderInfoState);
const menuRef = useRef(null);
const styleRef = useRef(null);
const orderListIdRef = useRef(0);

const onChangeStyleSelect = () => {
  const menu = menuRef.current;
  const style = styleRef.current;
  const totalAmount = totalAmountbyMenuAndStyle(menu.value, style.value);
  
  const newOrder = {
        menu: menu.value, 
        style: style.value, 
        amount: totalAmount, 
        orderListId: orderListIdRef.current, 
        quantity: 1
      };
  orderListIdRef.current += 1;
  setOrderInfo((prev) => ({
    ...prev,
    finalAmount: prev.finalAmount + totalAmount,
    orderList: [...prev.orderList, newOrder]
  }));
  
  menu.value = '';
  style.value = '';
};

return (
  <div className="my-3 flex justify-between">
    <h3 className="text-lg font-bold">디너 메뉴</h3>
    <select ref={menuRef} className="outline-none">
      <option value="">--디너 메뉴를 선택하세요--</option>
      <option value="valentine">Valentine dinner ($100)</option>
      <option value="french">French dinner ($130)</option>
      <option value="english">English dinner ($130)</option>
      <option value="champagne">Champagne Feast dinner ($250)</option>
    </select>
  </div>
  <div className="my-3 flex justify-between">
    <h3 className="text-lg font-bold">디너 스타일</h3>
    <select ref={styleRef} onChange={onChangeStyleSelect} className="outline-none" disabled>
      <option value="">--디너 스타일을 선택하세요--</option>
      <option value="simple">Simple</option>
      <option value="grand">Grand (+ $20)</option>
      <option value="deluxe">Deluxe (+ $40)</option>
    </select>
  </div>
  <h2 className="font-bold text-lg">주문서</h2>
  {orderInfo.orderList
    .filter((list) => list.orderListId > 0)
    .map(order => (
      <OrderSheetBox key={order.orderListId} order={order} orderInfo={orderInfo} setOrderInfo={setOrderInfo} progress={progress}/>
    ))}
  <div className="text-lg font-bold">최종 결제 금액: ${orderInfo.finalAmount}</div>
);

두번째 스타일이 변경되었을 때 메뉴와 수량, 가격, 수량, id를 포함한 새로운 객체를 생성하여 orderList배열에 추가해주었다.

id는 삭제할때와 map에 고유한 key를 주기위해서 생성했는데, useRef를 이용하여 새 주문이 생성될때마다 1을 더한값이 id가 되도록 구현했다.

그리고 totalAmount값은 주문의 메뉴의 가격의 합으로 설정해서 전체 가격에다가 더해주었다. totalAmountbtMenuAndStyle 함수(더보기)

function totalAmountbyMenuAndStyle(menu, style) {
  let totalAmount = 0;
  switch(menu) {
    case 'valentine': totalAmount += 100; break;
    case 'french': totalAmount += 130; break;
    case 'english': totalAmount += 130; break;
    case 'champagne': totalAmount += 250; break;
    default: totalAmount += 0; 
  }
  switch(style) {
    case 'simple': totalAmount += 0; break;
    case 'grand': totalAmount += 20; break;
    case 'deluxe': totalAmount += 40; break;
  }
  return totalAmount;
}

TroubleShooting: 동일 주문은 수량만 증가하도록 처리하기

위의 동작처럼 동일한 주문인데도 주문서에서 각각의 다른 주문으로 추가된다. 따라서 두 주문을 한번에 수량과 가격만 증가하도록 하는 처리가 필요하다.

const orderListIdRef = useRef(0);
const onChangeStyleSelect = () => {
  const menu = menuRef.current;
  const style = styleRef.current;
  const totalAmount = totalAmountbyMenuAndStyle(menu.value, style.value);

  const sameOrder = orderInfo.orderList.filter(order => order.menu === menu.value && order.style === style.value)
  if(sameOrder.length === 0) {
    orderListIdRef.current += 1;
    setOrderInfo((prev) => ({
      ...prev,
      finalAmount: prev.finalAmount + totalAmount,
      orderList: [...prev.orderList, {menu: menu.value, style: style.value, amount: totalAmount, orderListId: orderListIdRef.current, quantity: 1}]
    }));
  } else {
    const newSameOrder = {...sameOrder[0], quantity: parseInt(sameOrder[0].quantity) + 1, amount: sameOrder[0].amount + totalAmount}
    const orderListExcept = orderInfo.orderList.filter(order => order.orderListId !== sameOrder[0].orderListId);
    
    setOrderInfo((prev) => ({
      ...prev, 
      finalAmount: prev.finalAmount + totalAmount,
      orderList: [...orderListExcept, newSameOrder]
    }))
  }
  menu.value = '';
  style.value = '';
};

orderList에 필터 함수를 적용해서 menu와 style이 같은 객체의 배열을 가져올 수 있다. 이 배열의 길이가 0이라면 기존 작업을 수행하면 되고, 아니라면 수량과 가격을 증가시킨 newSameOrder 객체와 orderListExecpt 배열을 업데이트한다.

orderListExecpt 배열은 업데이트할 객체 외의 모든 객체를 orderList에서 필터해서 받아온 배열이다.

참고로 sameOrder[0]으로 작성한 이유는 sameOrder는 배열을 반환하므로 [{menu: '', style: '', ...}]와 같기 때문에 배열의 0번 인덱스를 사용해야하기 때문이다!

같은 주문일 때는 수량만 증가하도록 구현된 것을 확인할 수 있다.

주문 수량 수정하기

function OrderBox({order, orderInfo, setOrderInfo, progress}) {
  const onChangeOrderQuantity = (e, orderListId) => {
    const num = e.target.value;
    const orderList = orderInfo.orderList.filter(order => order.orderListId === orderListId)[0];
    const initAmount = orderList.amount / orderList.quantity;
    const newOrderList = {...orderList, quantity: num, amount: initAmount * num}
    const orderListExcept = orderInfo.orderList.filter(order => order.orderListId !== orderListId);
    
    setOrderInfo((prev) => ({
      ...prev, 
      finalAmount: prev.finalAmount - orderList.amount + initAmount * num,
      orderList: [...orderListExcept, newOrderList]
    }))
  }

  return (
    <div className="flex my-1">
      <span>메뉴: {order.menu}</span>
      <span className="ml-2">스타일: {order.style}</span>
      <span className="ml-2">가격: {order.amount}</span>
      <span className="ml-2">주문 수량: </span>
      <input type="number" min="1" value={order.quantity} onChange={e => onChangeOrderQuantity(e, order.orderListId)} className="text-center w-10 outline-none" />
    </div>
  )
}

각 주문을 OrderBox 컴포넌트로 분리하여 작성했다. 여기서 주문 수량이 변경되었을 때 orderInfo객체가 수정되어야 한다.

주문 수량은 증가하거나 감소해야하기 때문에 단순히 수량을 +1로 처리하면 안된다. 따라서 현재 입력된 숫자값을 수량으로 지정한 다음, 수량에따른 주문 가격과 총 가격도 변경시켰다.

총 가격을 구하기 위해서 복잡하게 더하기와 빼기로 구현했는데 이것보다 좋은 방법이 있을 것 같아서 더 찾아봐야겠다..

주문 수량을 변경할 수 있도록 구현된 것을 확인할 수 있다.

TroubleShooting2: 주문 내역 오름차순 정렬하기

위와 같이 주문 수량을 변경할 때마다 배열의 순서가 바뀌어서 주문서에서 표시되는 순서도 같이 변경되는 문제가 발생했다.

이를 해결하기 위해 orderList 배열을 불러올 때 sort함수를 이용해서 오름차순으로 배열을 정렬하도록 구현했다.

{ orderInfo.orderList
  .filter((list) => list.orderListId > 0)
  .sort((a, b) => a.orderListId - b.orderListId)
  .map(order => (
    <OrderBox key={order.orderListId} order={order} orderInfo={orderInfo} setOrderInfo={setOrderInfo} progress={progress}/>
))}

주문 내역 삭제하기

function OrderBox({order, orderInfo, setOrderInfo, progress}) {
  ...

  const onClickDeleteBtn = (orderListId) => {
    const orderList = orderInfo.orderList.filter(order => order.orderListId === orderListId)[0];
    const orderListExcept = orderInfo.orderList.filter(order => order.orderListId !== orderListId);
    setOrderInfo((prev) => ({
      ...prev, 
      finalAmount: prev.finalAmount - orderList.amount,
      orderList: [...orderListExcept]
    }))
  }

  return (
    <div className="flex my-1">
      <span>메뉴: {order.menu}</span>
      <span className="ml-2">스타일: {order.style}</span>
      <span className="ml-2">가격: {order.amount}</span>
      <span className="ml-2">주문 수량: </span>
      <input type="number" min="1" value={order.quantity} onChange={e => onChangeOrderQuantity(e, order.orderListId)} className="text-center w-10 outline-none" />
      <button onClick={() => onClickDeleteBtn(order.orderListId)} className="px-2 font-bold">X</button>
    </div>
  )
}

삭제 기능을 구현하기위해 삭제 버튼을 만들고, 삭제버튼이 눌린 주문의 id를 삭제 버튼에 전달해서 orderList에 이와 일치하지않는 id의 배열을 추가하였다.(orderListExecpt)

주문을 삭제할 수 있도록 구현된 것을 확인할 수 있다.

+) select 순차 선택하도록 구현하기

주문을 위해서 디너 메뉴 -> 디너 스타일 순으로 선택하기 위해서 메뉴가 선택되기 전에는 스타일 선택은 비활성화(disabled)되어야 한다.

// 순차선택 로직
const styleRef = useRef(null);

const [isSelectedMenu, setIsSelectedMenu] = useState(false);
const onChangeMenuSelect = () => {
  setIsSelectedMenu(true);
}

const onChangeStyleSelect = () => {
  ...
  setIsSelectedMenu(false);
  menu.value = '';
  style.value = '';
};

useEffect(() => {
    const style = styleRef.current;
    if(isSelectedMenu) style.disabled = false;
    else style.disabled = true;
  }, [isSelectedMenu]);

return (
  <div className="my-3 flex justify-between">
    <h3 className="text-lg font-bold">디너 메뉴</h3>
    <select ref={menuRef} name="menu" onChange={onChangeMenuSelect} className="outline-none">
      <option value="">--디너 메뉴를 선택하세요--</option>
      ...
);

순차 선택을 구현하기 위해 useState와 useEffect를 이용해서 앞의 메뉴가 선택되었을 때 스타일 선택이 활성화되도록 구현했다.

[자료구조] c언어로 큐, 원형 큐 구현하기

pIutos — Thu, 3 Nov 2022 14:10:08 +0900

큐(Queue)란?

큐(Queue)는 먼저 들어온 데이터가 먼저 나가는 자료구조이다. 선입선출(FIFO: First-In First-Out)한다는 특징이 있고, 매표소나 계산대의 대기열을 생각해보면 이해하기 쉬울 것이다.

이번 글에서는 큐와 큐의 더 발전된 형태인 원형 큐도 구현해 보겠다.

큐 타입 구조체 정의 및 초기화 함수

#include <stdio.h>
#include <stdlib.h>

#define SIZE 100

typedef char element;

typedef struct
{
  element data[SIZE];
  int rear, front;
} QueueType;

void init(QueueType *Q)
{
  Q->rear = Q->front = -1;
}

큐의 요소에 해당하는 data 배열과, 큐의 가장 앞과 뒤에 해당하는 front, rear이 포함된 QueueType 구조체를 선언한다.

에러체크함수 is_empty(), is_full()

에러체크함수 is_empty는 아무것도 차있지 않은 상태, 즉 front와 rear가 같은지 살핀다.

is_full은 큐가 가득 차있는 상태인 rear가 size -1이 같은지 살핀다. -1을 하는 이유는 큐 data 배열은 0부터 시작하기때문이다.

int is_empty(QueueType *Q)
{
  return Q->front == Q->rear;
}

int is_full(QueueType *Q)
{
  return Q->rear == SIZE - 1;
}

삽입함수 enqueue()

삽입을 하기위해 rear을 한칸 움직이고, 데이터를 한칸 움직인 공간에 삽입한다.

void enqueue(QueueType *Q, element e)
{
  if (is_full(Q))
    printf("Overflow\n");
  else
  {
    Q->rear++;

    Q->data[Q->rear] = e;
  }
}

삭제함수 dequeue()

가장 먼저 들어온 데이터부터 삭제해야하므로 front를 한칸 움직이고 데이터를 return한다.

element dequeue(QueueType *Q)
{
  if (is_empty(Q))
  {
    printf("Empty\n");
    return 0;
  }
  else
  {
    Q->front++;
    return Q->data[Q->front];
  }
}

큐 출력함수 print()

void print(QueueType *Q)
{
  printf("Front Pos : %d\n, Rear Pos : %d\n", Q->front, Q->rear);
  for (int i = Q->front + 1; i <= Q->rear; i++)
  {
    printf("[%c] ", Q->data[i]);
  }
  printf("\n");
}

큐의 단점?

큐를 사용하면 할수록 front가 뒤로 밀려나게 되므로 마지막 공간의 front와 Rear가 같아지게 되어 삭제된 front 앞의 공간(이전에 할당된 공간)은 쓸 수 없게 된다.

원형 큐(Circular Queue)

큐의 이미 사용한 앞 공간은 쓸수 없다는 단점을 보완하기 위해 원형 큐를 사용할 수 있다. 원형 큐를 구현하기 위해서는 앞서 구현한 큐에서 일부 코드만 수정하면 된다.

에러체크함수 is_empty(), is_full()

is_empty함수는 큐의 코드와 동일하고, is_full함수는 공백 상태와 구분하기 위해서 한 칸 비워둔다. 그리고 원형큐를 구현하기 위해서는 나머지 모듈러 연산이 필요하다.(front == rear + 1을 전체 size로 나눈 나머지)

한 칸 비워두지 않으면 0번 index에 front==rear인 경우 공백 상태와 포화 상태가 중복되어서 구분할 수 없기 때문이다.

int is_empty(QueueType *Q)
{
  return Q->front == Q->rear;
}

int is_full(QueueType *Q)
{
  return Q->front == (Q->rear + 1) % SIZE;
}

삽입함수 enqueue()

삽입함수는 rear를 1만큼 증가시킨 값과 size와의 나머지로 설정하고 데이터를 저장한다.

예를들어 현재 rear가 4이고, size가 8이라면 (4 + 1) % 8 = 5번 인덱스, rear가 7이라면 (7 + 1) % 8 = 0번 인덱스에 위치한다.

void enqueue(QueueType *Q, element e)
{
  if (is_full(Q))
    printf("Overflow\n");
  else
  {
    Q->rear = (Q->rear + 1) % SIZE;

    Q->data[Q->rear] = e;
  }
}

삭제함수 dequeue()

삽입함수와 마찬가지로 front를 증가시키고 데이터를 return한다.

element dequeue(QueueType *Q)
{
  if (is_empty(Q))
  {
    printf("Empty\n");
    return 0;
  }
  else
  {
    Q->front = (Q->front + 1) % SIZE;
    return Q->data[Q->front];
  }
}

원형큐 출력함수 print()

출력함수 print()는 while문을 통해 i값을 front부터 rear까지 순차적으로 증가시키면서 출력한다.

void print(QueueType *Q)
{
  printf("Front Pos : %d\n, Rear Pos : %d\n", Q->front, Q->rear);
  int i = Q->front; // 제일 앞에있는 원소 바로 하나 전부터 시작
  while (i != Q->rear)
  {
    i = (i + 1) % SIZE;
    printf("[%c]", Q->data[i]);
  }
  printf("\n");
}

전체 코드

큐 (더보기)

#include <stdio.h>
#include <stdlib.h>
#define SIZE 100

typedef char element;

typedef struct
{
  element data[SIZE];
  int rear, front;
} QueueType;

void init(QueueType *Q)
{
  Q->rear = Q->front = -1;
}

int is_empty(QueueType *Q)
{
  return Q->front == Q->rear;
}

int is_full(QueueType *Q)
{
  return Q->rear == SIZE - 1;
}

void enqueue(QueueType *Q, element e)
{
  if (is_full(Q))
    printf("Overflow\n");
  else
  {
    Q->rear++;

    Q->data[Q->rear] = e;
  }
}

element dequeue(QueueType *Q)
{
  if (is_empty(Q))
  {
    printf("Empty\n");
    return 0;
  }
  else
  {
    Q->front++;
    return Q->data[Q->front];
  }
}

void print(QueueType *Q)
{
  printf("Front Pos : %d\n, Rear Pos : %d\n", Q->front, Q->rear);
  for (int i = Q->front + 1; i <= Q->rear; i++)
  {
    printf("[%c] ", Q->data[i]);
  }
  printf("\n");
}

int main()
{
  QueueType Q;
  init(&Q);
  
  enqueue(&Q, 'A');
  enqueue(&Q, 'B');
  enqueue(&Q, 'C');
  print(&Q);
  printf("[%c] \n", dequeue(&Q));
}

원형 큐 (더보기)

#include <stdio.h>
#include <stdlib.h>
#define SIZE 10

typedef char element;

typedef struct
{
  element data[SIZE];
  int rear, front;
} QueueType;

void init(QueueType *Q)
{
  Q->rear = Q->front = 0;
}

int is_empty(QueueType *Q)
{
  return Q->front == Q->rear;
}

int is_full(QueueType *Q)
{
  return Q->front == (Q->rear + 1) % SIZE;
}

void enqueue(QueueType *Q, element e)
{
  if (is_full(Q))
    printf("Overflow\n");
  else
  {
    Q->rear = (Q->rear + 1) % SIZE;

    Q->data[Q->rear] = e;
  }
}

element dequeue(QueueType *Q)
{
  if (is_empty(Q))
  {
    printf("Empty\n");
    return 0;
  }
  else
  {
    Q->front = (Q->front + 1) % SIZE;
    return Q->data[Q->front];
  }
}

element peek(QueueType *Q)
{
  if (is_empty(Q))
  {
    printf("Empty\n");
    return 0;
  }
  return Q->data[(Q->front + 1) % SIZE];
}

void print(QueueType *Q)
{
  printf("Front Pos : %d\n, Rear Pos : %d\n", Q->front, Q->rear);
  int i = Q->front; // 제일 앞에있는 원소 바로 하나 전부터 시작
  while (i != Q->rear)
  {
    i = (i + 1) % SIZE;
    printf("[%c]", Q->data[i]);
  }
  printf("\n");
}

int main()
{
  QueueType Q;
  init(&Q);
  
  enqueue(&Q, 'A');
  enqueue(&Q, 'B');
  enqueue(&Q, 'C');
  print(&Q);
  printf("[%c] \n", dequeue(&Q));
}

도움이 되었다면 아래 '공감' 버튼을 눌러주세요! 읽어주셔서 감사합니다 :)

[티스토리 스킨 만들기] 2. 개발 환경 세팅하기(Typescript, TailwindCSS, Webpack)

pIutos — Wed, 2 Nov 2022 15:46:20 +0900

시작하며

티스토리 스킨 적용에 필요한 파일에는 index.xml, skin.html, style.css, script.js가 있습니다. 이 파일들을 빌드하기 위해 개발 환경을 세팅해보겠습니다. 이 글은 타입스크립트와 tailwind css의 사용 설정과 webpack을 이용해 이들을 한번에 빌드하는 과정에 대해서 작성하였습니다.

티스토리 스킨 개발을 위한 파일 디렉토리는 다음과 같습니다.

tistory_skin
 |- index.xml
 |- skin.html
 |- style.css
 |- /images
   |- script.js

Typescript로 개발하기

우선 개발을 진행할 src폴더를 만들어 script.ts파일을 생성합니다. 이 파일에서 스킨에 적용할(사이드바 동작, TOC 등) 기능을 개발하면 됩니다.

ts파일을 생성했다면 이제 타입스크립트 개발환경을 세팅하고, js로 빌드해보겠습니다.

Typescript 설치

npm init

npm init 명령어를 실행하면 package.json파일이 생성되며 npm 환경이 세팅됩니다.

npm install typescript

그리고 npm을 통해 typescript를 설치합니다.

tsconfig.json 설정

typescript를 설치했다면 tsconfig.json파일을 생성하여 다음 내용을 입력해줍니다.

{
  "compilerOptions": {
    "target": "es2016",                            
    "module": "es6",
    "strict": true,
    "skipLibCheck": true,                               
    "outDir": "images",
    "watch": true
  },
  "include": [
    "src/script.ts"
  ]
}

outDirectory를 images로 설정한 다음, include속성에 js로 변환할 파일(src/script.ts)을 지정해줍니다.

Typescript 빌드하기

타입스크립트에서 자바스크립트로 빌드하는것은 쉽습니다. 아래 명령어를 터미널에서 실행하면 자동으로 빌드됩니다.

tsc

참고로 tsconfig파일에서 watch속성을 true로 주었기때문에 ts파일을 변경 및 저장할 때마다 자동으로 빌드합니다.

여기까지 따라왔다면 파일 구조는 다음과 같습니다.

tistory_skin
 |- index.xml
 |- skin.html
 |- style.css
 |- /images
   |- script.js
 |- /src
   |- script.ts
 |- /node_modules
 |- package.json
 |- package-lock.json
 |- tsconfig.json

TailwindCSS 적용하기

개발의 편의를 위해 style.css파일에 모든 스타일 속성을 적지않고, tailwind css를 설치하고 적용해보겠습니다.

그런데 설치 전에 스킨 배포의 용이성을 위해 dist폴더에 배포에 필요한 파일들만 담도록 파일 구조를 변경하겠습니다.

tistory_skin
 |- /dists
   |- index.xml
   |- skin.html
   |- style.css
   |- /images
     |- script.js
 |- /src
   |- script.ts
 |- /node_modules
 |- package.json
 |- package-lock.json
 |- tsconfig.json

tailwindcss 설치

npm install -D tailwindcss
npx tailwindcss init

npm을 이용해 tailwindcss를 설치해주고, npx tailwindcss init 명령어를 통해 tailwindcss.config.js파일을 생성하며 초기화합니다.

그리고 src경로에 input.css파일을 생성하고 다음과 같이 설정해줍니다. input.css파일에 필요한 스타일 속성을 작성할 수 있습니다.

/* src/input.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js 파일 설정

생성된 tailwind config 파일에 아래와 같이 코드를 입력해줍니다. 파일의 content속성은 dist폴더의 skin.html을 템플릿파일로 설정한다는 의미입니다.

// tailwindcss.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./dist/skin.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind CLI로 빌드하기

npx tailwindcss -i ./src/input.css -o ./dist/style.css --watch

또다른 터미널에서 위 명령어를 실행하면 dist경로에 style.css파일로 빌드됩니다. 명령어에서 --watch옵션을 주었기 때문에 input.css파일을 변경 후 저장할 때마다 자동으로 빌드합니다.

여기까지 설정을 마쳤다면 파일 구조는 다음과 같습니다.

tistory_skin
 |- /dists
   |- index.xml
   |- skin.html
   |- style.css
   |- /images
     |- script.js
 |- /src
   |- script.ts
   |- input.css
 |- /node_modules
 |- package.json
 |- package-lock.json
 |- tsconfig.json
 |- tailwind.config.js

Webpack으로 타입스크립트와 tailwindCSS 한번에 빌드하기

typescript와 tailwind를 빌드하기 위해서는 각각의 명령어를 입력해야합니다. 이렇게 하면 개발환경에서 터미널 두개를 띄워야하기 때문에 작업하는데 번거로움이 있습니다. 그래서 웹팩을 설치하여 한 명령어로 빌드과정을 통합하도록 해보겠습니다.

Webpack 설치

npm install webpack webpack-cli --save-dev

위 명령어로 webpack과 webpack-cli를 설치하면 웹팩을 프로젝트에서 사용할 수 있습니다. 그리고 webpack.config.js파일을 생성해서 아래와 같이 파일을 작성해 줍니다.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/script.ts',
  mode: 'production',
  output: {
    filename: 'script.js',
    path: path.resolve(__dirname, 'dist/images'),
  },
};

package.json파일을 다음과같이 설정하고, 터미널에서 npm run build 명령어를 실행하면 웹팩을 빌드할 수 있습니다.

// package.json
...
"scripts": {
  "build": "webpack",
},

npm run build

watch옵션으로 자동 빌드하기

파일을 저장할 때마다 자동으로 빌드하고싶다면 package.json에서 watch옵션을 설정해야합니다.

// package.json
...
"scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },

npm run watch

터미널에서 명령어를 실행하면 파일이 저장될 때 마다 자동으로 웹팩이 빌드됩니다.

webpack.config.js 설정하기

여기까지 웹팩 설정을 마쳤다하더라도, 우리가 원하는 css파일과 js파일에 대한 config 파일 설정을 하지 않았기 때문에 빌드 과정에서 오류가 발생할 것입니다. 이제 관련 설정을 해보겠습니다.

ts-loader로 typescript 빌드하기

웹팩은 타입스크립트는 이해하지 못하기 때문에 관련 loader를 설치해줘야 합니다.

npm install -D ts-loader

ts-loader는 웹팩이 타입스크립트를 해석하도록 도와주는 역할을 합니다. 다음 코드처럼 webpack.config.js 파일을 구성하면 script.js 파일을 dist/images경로에 빌드합니다.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/script.ts',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  output: {
    filename: 'script.js',
    path: path.resolve(__dirname, 'dist/images'),
  },
};

여기까지 따라왔다면 script.ts 파일이 script.js로 잘 빌드된 것을 확인할 수 있습니다.

추가적으로, 파일 용량을 확인해보면 웹팩 적용 전보다 파일 크기가 2kb가량 파일 크기가 줄어든 것을 확인할 수 있습니다. 웹팩은 코드를 주석과 공백없이 한줄로 압축하며 빌드하기 때문입니다. 이는 빠른 웹페이지의 로딩에 도움을 줍니다.

webpack 적용 전 (4kb)

webpack 적용 후 (2kb)

MiniCssExtractPlugin으로 css 분리하기

티스토리 스킨은 style.css라는 파일을 따로 업로드 해줘야 하기 때문에 js파일에 같이 번들링을 하면 안되고, 따로 분리된 css파일이 필요합니다.

그렇기 때문에 css파일을 따로 분리해주는 MiniCssExtractPlugin을 적용해 봅시다. 보통 MiniCssExtractPlugin은 js 모듈의 개수가 많을 경우 css파일의 빠른 로드가 필요할 때 사용합니다.

// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './src/script.ts',
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  output: {
    filename: 'script.js',
    path: path.resolve(__dirname, 'dist/images'),
  },
  plugins: [new MiniCssExtractPlugin({filename : "../style2.css"})],
};

// srcipt.ts

import './input.css';

위와같이 script.ts 파일에 css를 import해주어야지 웹팩이 css 파일을 인식하고 플러그인에 따라 새 css 파일로 분리합니다. 위 코드로 설정을 해주고 빌드까지 끝났다면 아래와 같이 style2.css파일이 생성됩니다.

하지만 우리가 원하는 파일은 input.css파일 그 자체가 아니라, input.css에서 Tailwind CLI로 빌드된 파일입니다.

이를 위해 postCSS를 사용해보겠습니다. 참고로 style2로 파일명을 설정한 이유도 이때문입니다.ㅎㅎ

postCSS 설치 및 세팅

이 파트에서는 tailwindcss의 도큐멘트를 참고하여 구현했습니다. 도큐멘트에 따라 tailwindcss는 이미 설치하였으므로 postcss와 autoprefixer, postcss-loader를 설치하여줍니다.

npm install -D postcss autoprefixer
npm install -D postcss-loader

그리고 프로젝트에 postcss.config.js 파일을 추가하고, webpack.config.js 파일도 수정해줍니다.(postcss-loader를 추가해주고, 파일 이름을 style.css로 변경하였습니다.)

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './src/script.ts',
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      },
    ],
  },
  output: {
    filename: 'script.js',
    path: path.resolve(__dirname, 'dist/images'),
  },
  plugins: [new MiniCssExtractPlugin({filename : "../style.css"})],
};

여기까지 마치고 npm run watch를 실행하면 잘 빌드되는것을 확인할 수 있으며, 파일 구조는 다음과 같습니다.

tistory_skin
 |- /dists
   |- index.xml
   |- skin.html
   |- style.css
   |- /images
     |- script.js
 |- /src
   |- script.ts
   |- input.css
 |- /node_modules
 |- package.json
 |- package-lock.json
 |- tsconfig.json
 |- tailwind.config.js
 |- webpack.config.js
 |- postcss.config.js

+) CssMinimizerPlugin으로 css파일 압축하기

앞서 js파일이 빌드될 때 파일이 한줄로 압축되는것을 알 수 있었습니다. 그렇다면 css파일도 압축하여 블로그의 로딩 속도를 단축시켜 볼 수 있습니다. 이를 위해 CssMinimizerPlugin을 적용해보겠습니다.

npm install css-minimizer-webpack-plugin --save-dev

// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  entry: './src/script.ts',
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      },
    ],
  },
  output: {
    filename: 'script.js',
    path: path.resolve(__dirname, 'dist/images'),
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  },
  plugins: [new MiniCssExtractPlugin({filename : "../style.css"})],
};

여기까지 따라왔다면 style.css파일이 잘 압축된 것을 확인할 수 있습니다.

css 압축 전 (27kb)

css 압축 후 (18kb)

TroubleShooting 1 : script.js 압축 불가 현상

CssMinimizerPlugin로 css압축 시 script.js는 한줄로 압축이 되지 않는 현상이 발생합니다. 웹팩 config파일의 optimization.minimizer설정에 css만 포함되어있기 때문입니다.

이를 해결하기 위해 자바스크립트를 압축해주는 TerserPlugin을 적용해서 js파일도 설정에 추가해줘야 합니다.

npm install terser-webpack-plugin --save-dev

// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  entry: './src/script.ts',
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      },
    ],
  },
  output: {
    filename: 'script.js',
    path: path.resolve(__dirname, 'dist/images'),
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin(),
    ]
  },
  plugins: [new MiniCssExtractPlugin({filename : "../style.css"})],
};

TroubleShooting 2 : 선언되었지만 읽히지 않은 함수

<!-- skin.html -->
<button onclick="{closeSidebar()}">

html에서 onclick으로 사용하도록 구현한 closeSidebar함수는 선언되었지만 읽히지 않은 함수는 웹팩 빌드 과정에서 삭제가 된다는 문제가 있습니다.

따라서 구현시에 html에서 onclick속성을 주지 말고, 자바스크립트에서 dom요소를 받아와 addEventListener로 선언해야합니다.

document.getElementById("writeBtn")!.addEventListener("click", onClickWriteBtn);

마치며

티스토리 스킨 개발을 위해 제가 했던 개발환경 세팅 과정을 글로 정리해보았습니다. 여기서는 티스토리 스킨 개발을 위한 설정을 했지만, 다른 프로젝트의 설정이나 개발에 도움이 되길 바랍니다.

[개발자의 글쓰기] 글의 종류별로 목차 잡는 법

pIutos — Fri, 28 Oct 2022 15:55:01 +0900

서론

"개발자를 위한 글쓰기" 책을 읽는 중 책의 [글의 종류별로 목차 잡는 법]에 대한 내용이 개발자가 글을 쓸 때 도움이 될 것 같은 내용이어서 요약하여 글로 남겨놓으려 한다.

글의 종류별로 목차 잡는 법, 저술편집

직접 경험한 개발기 작성하기, 저

'저'는 직접 경험한 것을 쓴 것으로, 개발 과정과 결과를 쓴 개발기가 여기에 해당한다. 저에 해당하는 글쓰기 예시는 다음과 같다.

TenserFlow를 활용한 네이버 쇼핑의 상품 카테고리 자동 분류
TailwindCSS 적용기
브라우저 렌더링 속도의 개선 과정

개발기를 쓸 때는 목차를 잘 구성해야 한다. 개발을 하는 과정에서 최종적으로 성공한 루트와 중간에 실패한 루트를 구별하는것이 중요하다. 성공한 루트를 기준으로 목차를 잡고, 실패한 루트는 최종루트 다음에 문제해결이나 팁으로 정리해 덧붙인다.

책에서 소개한 예문의 목차를 정리하면 다음과 같다.

머리말
- 서비스 설명
- 개발의 필요성
본문
- 아키텍처나 알고리즘
- 개발 모델(최종 루트)
- 개발 과정에서 발견한 문제와 해결 방법
- 남은 작업
맺음말
- 소감이나 회고

목차를 정리했다면 본문부터 쓰는것이 하나의 팁이다. 개발자가 가장 잘 쓸 수 있는 내용이 본문이기 때문이다. 그렇게 해서 본문을 쓰고 나면 맺음말을 쓰고, 머리말은 맨 마지막에 간략하게 떠오를 때마다 적는 것이 좋을 것이다.

내용을 분석해 의미를 풀고 해석하기, 술

'술'은 어떤 것을 분석해서 의미를 풀이하고 해석한 것이다. 개발에서는 새로운 기술을 자세히 설명한것이나 비슷한 용어를 비교해 풀이한 것, 에러 해결 방법 등이 술에 속한다. 술에 해당하는 글쓰기 예시는 다음과 같다.

GET과 POST의 차이
Webpack 4의 Tree Shaking에 대한 이해
typescript 에러 해결 방안

책에서 제시한 예문은 GET과 POST의 차이인데, 이 예문의 목차를 정리하면 다음과 같다.

HTTP
GET
POST
GET과 POST의 차이
참고

이 목차를 잘 보면 실제로 개발자가 쓴 글은 4장 뿐이다. 나머지는 참조한 HTTP 프로토콜의 문서를 정리한 것이다. 이렇게 원전의 내용을 먼저 쓰고 비교한 내용을 자기 생각으로 이론적으로 펼쳐 정리할 수 있다.

또 원전의 내용을 직접 실험해 비교한 뒤 그 내용을 정리해서 풀이할 수도 있다.

복잡한 자료를 편집하여 질서를 부여하기, 편

'편'은 산만하고 복잡한 자료를 편집해 질서를 부여한 것이다. 보통 시간 순서로 일어난 일이나 해야할 일을 쓴 것을 통칭하기도 한다. 개발에서는 프로그램 설치나 설정 순서, 개발 방법, 튜토리얼, 개발자 컨퍼런스 후기 같은 것이 여기에 해당한다.

편에 해당하는 글쓰기 예시는 다음과 같다.

ES2015단위 테스트 환경 구축하기
간단하게 구축해 보는 JavaScript 환경
Ubuntu의 apt-get 명령어 정리

글을 쓸 때는 한 일을 먼저 시간 순서로 적은 다음, 내용을 다 적는다. 그리고 단계를 만들고 묶은 뒤 하위 내용을 간략히 요약한다. 이렇게 쓴다면 아래 예시와 같이 글을 쓸 수 있다.

Git과 GitHub를 활용한 협업 공간으로 개발 시작하기
- Git저장소 만들기
- GitHub에 이슈 등록하기
Node.js와 Yarn으로 개발 환경 설정하기
- Node.js와 npm, yarn
- Node.js와 yarn 설치
- 프로젝트 생성
- package.json파일과 패키지 관리
- ...
Jest로 테스트 환경 설정하기
- 테스트 코드 작성
- Jest 설치
- 구현 코드 작성
- 테스트를 통한 구현 코드 수정
- 테스트 환경 공유
Travis CI를 활용해 리뷰 환경 개선하기
- Travis Ci를 활용한 테스트 자동화
- 애플리케이션의 설정 정보 관리
- Node.js 버전 유지
마치며

만약 글쓰기에 능숙하지 않다면 처음부터 구조를 생각하지 말고 본인이 한 일 등을 쭉 나열하고 그 내용부터 쓴 다음, 각 단계로 묶어 구조화하는것이 팁이 될 수 있다.

흩어진 자료를 한곳에 모아 정리하기, 집

'집'은 여러 사람의 견해나 흩어진 자료를 한데 모아 정리하는 것이다. 내용을 많이 쓰기보단 핵심만 간결하게 정리하는 것이 좋고, 글 전체가 길지 않고 내용이 각각 나열 되어있다. 기술 블로그에서는 명령어 모음, 팁, ~가지 규칙 같은 것이 여기에 해당한다.

집에 해당하는 글쓰기 예시는 다음과 같다.

자바스크립트 정규표현식 코딩 팁
스크롤과 관련된 css 속성 n가지
좋은 코딩을 위한 n가지 규칙
데이터 사이언스 인터뷰 질문 모음집

반드시 다른 여러 사람의 견해나 자료를 모아야 하는 것은 아니며 본인의 경험에서 터득한 것을 핵심만 정리해 나열하는것도 '집'이 될 수 있다.

[자료구조] c언어 구조체로 스택 구현하기

pIutos — Wed, 26 Oct 2022 15:50:08 +0900

스택(Stack)이란?

스택은 데이터를 후입선출(LIFO:Last-In First-Out)하는 자료구조로, 가장 최근에 들어온 데이터가 가장 먼저 나간다는 특징이 있다.

상자나 책을 쌓아놓은 더미를 생각하면 이해하기 쉬울 것이다. 이번 글에서는 스택을 배열 구조체를 이용해서 구현해 볼 것이다.

스택 타입 구조체 정의 및 초기화 함수

#include <stdio.h>
#define SIZE 100

typedef int element; // 배열안에 들어오는 값의 타입을 element로 한번에 지정

typedef struct {
  element data[SIZE];
  int top; // Index 번호
} StackType;

// 초기화
void init(StackType *S)
{
  S -> top = -1; // 포인터 연산자로 top에 접근해서 -1로 초기화
}

스택의 요소에 해당하는 data 배열과, 스택의 index 번호에 해당하는 top을 포함하는 StackType 구조체를 선언한다.

에러체크함수 is_full(), is_empty()

is_full함수는 스택이 공백상태인지 아닌지를 검사한다.
is_empty함수는 스택이 포화상태인지 아닌지를 검사한다.

// 에러 체크 함수
int is_full(StackType *S)
{
  return S->top == SIZE - 1;
}

int is_empty(StackType *S)
{
  return S->top == -1;
}

삽입함수 push()

push함수는 스택에 데이터를 추가한다. 만약 스택이 가득 차있다면 더이상 넣을 공간이 없으므로 가득 차있다는 문구를 출력한다.

// 삽입
void push(StackType *S, element e)
{
  if (isFull(S))
    printf("Overflow\n");
  else
  {
    S->top++;              // top을 하나 증가시킨후
    S->data[S->top] = e;   // 데이터를 삽입한다
  }
}

삭제함수 pop()

pop함수는 스택에서 데이터를 삭제하고, 그 데이터를 반환한다. 만약 스택이 비어있는 상태라면 동작하지않고 비어있다는 문구를 출력한다.

// 삭제
element pop(StackType *S)
{
  if (is_empty(S))
  {
    printf("Empty\n");
    return -1;
  }
  else
  {
    element e = S->data[S->top]; // 가장 상위에 있는 데이터를 e에 저장한 후
    S->top--;                    // top을 하나 감소시킨다
    return e;
  }
}

조회함수 peek()

peek함수는 스택에서 데이터를 삭제하지 않고 들여다 보기만 하는 함수이다. pop과 마찬가지로 스택의 비어있음을 체크한다.

// 조회
element peek(StackType *S)
{
  if (is_empty(S))
  {
    printf("Empty\n");
    return -1;
  }
  else
  {
    return S->data[S->top];
  }
}

스택 출력 함수 print()

print함수를 만들어 스택을 처음부터(0) 끝까지(top) 차례로 출력함으로써 확인할 수 있다.

void print(StackType *S)
{
  for (int i = 0; i <= S->top; i++)
  {
    printf("%c ", S->data[i]);
  }
  printf("\n");
}

전체 코드

스택을 구현한 전체 코드는 아래와 같다. (더보기)

#include <stdio.h>
#define SIZE 100

typedef int element;

typedef struct
{
  element data[SIZE];
  int top; 
} StackType;

// 초기화
void init(StackType *S)
{
  S->top = -1;
}

// 에러 체크 함수
int is_empty(StackType *S)
{
  return S->top == -1;
}

int is_full(StackType *S)
{
  return S->top == SIZE - 1;
}

// 삽입
void push(StackType *S, element e)
{
  if (is_full(S))
    printf("Overflow\n");
  else
  {
    S->top++;
    S->data[S->top] = e;
  }
}

// 삭제
element pop(StackType *S)
{
  if (is_empty(S))
  {
    printf("Empty\n");
    return -1;
  }
  else
  {
    element e = S->data[S->top];
    S->top--;
    return e;
  }
}

// 조회
element peek(StackType *S)
{
  if (is_empty(S))
  {
    printf("Empty\n");
    return -1;
  }
  else
  {
    return S->data[S->top];
  }
}

void print(StackType *S)
{
  for (int i = 0; i <= S->top; i++)
  {
    printf("%c ", S->data[i]);
  }
  printf("\n");
}

int main()
{
  StackType S;
  init(&S);

  pop(&S);
  push(&S, 'a');
  push(&S, 'b');
  push(&S, 'c');
  print(&S);

  element p = pop(&S);
  printf("%c\n", p);
  print(&S);
}

도움이 되었다면 아래 '공감' 버튼을 눌러주세요! 읽어주셔서 감사합니다 :)

[티스토리 스킨 만들기] 1. 구조 파악하기

pIutos — Fri, 21 Oct 2022 15:19:06 +0900

개요

어느날 내 티스토리에 적용할 블로그 테마를 찾는 중에 마음에 드는 테마가 없어서 내 입맛대로 스킨을 만들어 보기로 했다.
하지만 어떻게 만들어야 할 지 몰라서 찾아보는데 시간 투자를 많이했는데, 처음 개발하는 사람들을 위한 정리된 가이드 글이 있으면 좋겠다 싶어서 글을 작성한다.

스킨 제작 가이드

스킨 개발을 위해서 티스토리에서는 스킨 제작 가이드를 제공한다. 하지만 제작 가이드가 친절하게 설명되어있지 않아서 앞으로 해당 문서를 토대로 최대한 이해하기 쉽게 설명하도록 하겠다.
스킨을 적용하기 위해 필요한 파일에는 skin.html, index.xml, style.css와 추가적으로 js, image 파일이 있다. 스킨의 메인 템플릿 파일인 skin.html과 스킨 정보 파일인 index.xml에 대해서 자세히 알아보도록 하자.

기본 skin.html 파일 파악하기

블로그의 뼈대를 세우는 skin.html 파일을 알아보기 이전에 티스토리가 제공하는 치환자라는 개념을 알아보자.

티스토리 치환자?

티스토리 치환자는 그룹 치환자, 값 치환자의 2가지 형태를 가지고 있다. 치환자를 사용하면 각 url에 해당하는 HTML 결과물로 치환된다.

그룹치환자: 내부에 스킨 데이터를 포함하며 렌더링된 값으로 변환된다
값치환자: 해당하는 값으로 변환된다

<s_tag_rep>
  <li>
    <a href="" class=""></a>
  </li>
</s_tag_rep>

그룹치환자와 값 치환자 예시 - 태그가 표시되야하는 상황이라면 그룹치환자 <s_tag_rep>으로 감싸진 안의 내용을 렌더링하고, 값치환자 등을 통해 해당 태그의 링크나 이름 값으로 치환한다.

head 및 메타데이터 설정

검색엔진 최적화(SEO)를 위해서 <title>요소와 <meta>요소를 다음과 같이 추가할 수 있다.
그리고 <link>요소를 이용해 style.css 경로를 꼭 삽입해야한다. 스킨을 등록하기 위해서 꼭 필요한 파일이기 때문이다.

<head>
    <title>개발 창고</title>
    <meta charset="UTF-8" />
    <meta name="title" content="개발 창고 :: 개발 창고" />
    <meta name="description" content="안녕하세요, 개발자 플루토입니다." />
    <meta
        name="viewport"
        content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />

    <link
        rel="alternate"
        type="application/rss+xml"
        title="개발 창고"
        href="https://devpluto.tistory.com/rss"
    />
    <link rel="stylesheet" href="./style.css" />
</head>

기본으로 쓰이는 티스토리 치환자들

<body>
  <s_t3>
    ...
  </s_t3>
</body>

티스토리 치환자를 사용하기 위해서는 위 같이 <s_t3> 치환자로 전체를 감싸줘야한다. 이 치환자 안에 홈 커버, 게시글 목록, 사이드바 등의 치환자들을 추가해서 원하는 블로그를 디자인 할 수 있다. 본문 내부에 쓸 수 있는 중요한 치환자들을 알아보자.

본문 구성, 인덱스와 파머링크 페이지

인덱스 치환자는 메인페이지에서 게시글 목록을 반복하여 반환하고 , 퍼머링크 치환자는 게시글을 클릭했을 때 보여지는 글을 반환한다. 예를들어 현재 사용자의 접속이 메인페이지라면 인덱스 치환자 내부 HTML은 보여주고, 퍼머링크 치환자는 보여주지 않는 방식으로 동작한다.
인덱스 치환자 안에는 메인에서 보여질 목록 하나의 구조를 작성하면 되고, 퍼머링크 치환자 안에는 본문에 보여질 구조(제목, 내용, 이전-다음글, 댓글 등)을 작성하면 된다. 각각 해당되는 자세한 치환자는 스킨 제작 가이드의 글 카테고리에서 확인할 수 있다.

<!-- 본문 -->
<s_article_rep>
  <!-- 인덱스 페이지 -->
  <s_index_article_rep>
  ...
  </s_index_article_rep>

  <!-- 퍼머링크 페이지-->
  <s_permalink_article_rep>
  ...
  </s_permalink_article_rep>
</s_article_rep>

리스트 페이징 처리

페이징 치환자는 아래 보이는 게시글의 페이지를 출력한다.
<s_paging> 치환자는 다음과 같이 본문 치환자 안이 아니라, 아래에 위치시키면 된다. 만약 본문 안에 위치시키면 게시글 목록마다 반복하여 리스트가 표시된다.

<s_t3>
  <s_article_rep>
  </s_article_rep>
  <!-- //본문 -->

  <s_paging>
    <div>
      <a >
      <
      </a>
        <span class="flex">
          <s_paging_rep>
            <a >
              
            </a>
          </s_paging_rep>
        </span>
      <a >
      >
      </a>
    </div>
  </s_paging>
</s_t3>

사이드바

사이드바를 적용하기 위해서는 아래와 같이 적용하고싶은 위치에 <s_sidebar> 사이드바 그룹치환자 안에 <s_sidebar_element> 사이드바 개별 그룹치환자를 각각 넣으면 된다.
주로 볼수있는 방문자수나 최근 글, 댓글, 공지사항, 태그 목록 등을 넣을 수 있고 각 항목의 상세 구현은 스킨 제작 가이드의 사이드바 카테고리에서 확인할 수 있다.

  <s_sidebar>
    <!-- 오른쪽 사이드바 -->
    <s_sidebar_element>
      <!-- 카테고리 -->
      ...
    </s_sidebar_element>
    <s_sidebar_element>
      <!--최근에 올라온 글 -->
      ...
    </s_sidebar_element>
  </s_sidebar>

기타

티스토리의 방명록, 태그 페이지도 본문과 마찬가지로 <s_t3>치환자 안에 작성하면 된다. (유저가 접근한 url이 /tag라면 태그 클라우드 치환자만 표시하고 나머지는 표시하지 않는다.)
이것들도 마찬가지로 스킨제작가이드의 컨텐츠 > 태그클라우드, 방명록 카테고리에서 확인할 수 있다.

스킨 정보 파일 (index.xml) 파악하기

처음 개발을 시작할 때 xml은 처음보는 파일 형식이었고, index.xml 파일 예시 코드도 난해해서 해석하는데 많은 시간을 투자했었다. 그렇기 때문에 이해를 돕고자 설명을 덧붙이겠다.
xml 파일은 알고보면 간단한데, html 파일과 같이 마크업 언어로 태그로 데이터를 둘러싼 형태를 가지고 있다.
html은 웹페이지를 위해 정해진 태그를 사용하여 작성하는 반면, xml은 사용자가 태그를 직접 정의할 수 있고, 데이터 저장 및 전달을 위해 작성된다는면에서 차이가 있다.
티스토리 스킨에 필요한 정보가 담겨있는 xml 파일 예시코드는 해당 카테고리에 들어가서 복사-붙여넣기 하면 된다. 나는 추가적으로 작성 할 수 있는 스킨 정보에 대해 조금 더 다뤄보겠다.

홈 커버

홈 커버 치환자를 통해 슬라이더, 썸네일 리스트, 글 목록 등 다양한 홈 커버를 만들 수 있다. 하지만 홈 커버를 설정하게 되면 기본 설정인 최신 글을 표시할 수 없으므로 염두에 둬야한다.
마찬가지로 홈 커버도 홈 커버 카테고리에서 설명을 확인할 수 있고, 이해하기 쉽도록 작성한 홈 커버 예시는 다음과 같다.

<!-- index.xml -->
<default>
  ...
  <cover>
    <![CDATA[
      [
        {
          "name": "cover-thumbnail-list",
          "title": "게시물이 존재할 경우 아래에 최신순 5건이 배열됩니다",
          "dataType": "RECENT",
          "data": {"category":"ALL","size":"5"}
        }
      ]
    ]]>
  </cover>
</default>

<cover>
  <item>
    <name>cover-thumbnail-list</name>
    <label><![CDATA[ 글 리스트 ]]></label>
    <description><![CDATA[ 메인 화면에 표시할 기본 글 리스트 입니다. ]]></description>
  </item>
</cover>

<!-- skin.html -->
<s_cover name="cover-thumbnail-list">
  <s_cover_item>
    <s_cover_item_article_info>
    ...

xml 파일에서 홈 커버 치환자와 이름를 정의하고, html에 해당 이름을 <s_cover> 치환자의 name 유형에 작성함으로써 사용할 수 있다.
이렇게 작성하면 사용자는 아래와 같이 티스토리 관리자 화면 > 스킨편집 > 홈 설정에서 커버를 선택해서 사용할 수 있다.

커버 수정에 들어가면 default > cover에서 정의한 json 데이터가 표시된다.

스킨 옵션

xml 파일에서 스킨의 옵션을 정의하면 위에서 봤던 티스토리 치환자를 커스텀하여 사용할 수 있다.
다음 예시와 같이 xml 파일에서 커스텀 할 옵션들을 정의한 다음 html 파일에서 해당 치환자를 사용할 수 있다.

<!-- index.xml -->
<variables>
    <variablegroup name="커스텀 주소 링크">
      <variable>
        <name>portfolio_link</name>
        <label>
          <![CDATA[포트폴리오 주소]]>
        </label>
        <description>
          <![CDATA[ 개인 포트폴리오 사이트 링크를 설정할 수 있습니다. ]]>
        </description>
        <type>STRING</type>
        <option></option>
        <default></default>
      </variable>
      ...
    </variablegroup>  
</variables>

<!-- skin.html -->
<s_if_var_portfolio_link>
    <a href="" target="_blank">link</a>
</s_if_var_portfolio_link>

스킨을 옵션을 정의하여 작성하면 사용자는 관리자 화면 > 스킨 편집에서 다음과 같이 옵션을 선택할 수 있다.

마무리와 짤막한 팁

티스토리 스킨을 만들기 위해 기본적으로 필요한 요소들에 대해서 설명헀고, 티스토리 스킨 구조를 이해하는데 도움이 되었으면 한다.
처음부터 짜기 막막하다면 해당 글을 참고하면서 이미 만들어진 스킨의 html 구조를 파악하여 작성하면 유용할 것이다. 티스토리 치환자가 포함된 html파일을 보고싶다면 원하는 스킨을 적용한 후 스킨 편집 > html 편집에서 확인 할 수 있다.

글이 도움이 되었다면 아래 공감버튼을 눌러주세요! :)

[모두의 네트워크] 1장. 네트워크의 첫 걸음

pIutos — Thu, 13 Oct 2022 15:55:09 +0900

네트워크의 구조

컴퓨터 네트워크란 무엇일까?

'네트워크' 라는 단어에 포함된 의미는 단순히 컴퓨터 간의 연결만을 말하는 것이 아니라, 사람과 사람간의 네트워크, 물류 네트워크와 같이 다양한 종류의 네트워크가 존재한다.

컴퓨터 간의 네트워크를 연결한 것을 컴퓨터 네트워크라 한다. 컴퓨터 네트워크를 통해 컴퓨터 간 필요한 데이터, 즉 정보를 서로 주고받을 수 있다.

인터넷: 네트워크의 한 종류로, 전 세계의 큰 네트워크부터 작은 네트워크까지를 연결하는 거대한 네트워크를 말한다. 이러한 광범위한 연결을 통해 인터넷으로 해외 웹 사이트도 볼 수 있다.

패킷

패킷은 컴퓨터 간 데이터를 주고 받을 때 네트워크를 통해 전송되는 데이터의 작은 조각을 말한다.

큰 데이터를 네트워크로 그대로 보내게 되면 데이터가 네트워크의 대역폭을 많이 점유하기 때문에 다른 패킷의 흐름을 막을 수 있다. 따라서 데이터를 보낼 때는 작은 조각(패킷)으로 나눠서 보낸다.

목적지에 도착한 패킷들은 순서없이 도착하기 때문에 송신 측에서 수신 측으로 패킷을 보낼 때 각 패킷에 순서대로 번호를 붙여서 보낸다. 이렇게 하면 번호에 맞춰 정렬하여 원래 상태로 복구할 수 있다.

디지털 데이터와 네트워크 범위

디지털 데이터란 컴퓨터가 다루는 0과 1의 집합을 말한다.

0과 1의 정보를 나타내는 최소 단위를 비트(bit)라고 하고, 비트 8개를 모아 표시하는 단위를 바이트(byte)라 한다.

네트워크를 통해 데이터를 전송하는 경우는 비트 정보를 전기 신호로 변환하기 때문에 네트워크에서는 전기 신호가 전송된다.

랜과 왠?

랜(LAN, Local Area Network): 건물 안이나 특정 지역을 범위로 하는 네트워크
왠(WAN, Wide Area Network): 지리적으로 넓은 범위에 구축된 네트워크, 인터넷 서비스 제공자(ISP)가 제공하는 서비스를 이용하여 구축된다.

왠은 랜과 랜을 연결하는 것으로 생각해도 되는데, 예를들어 서울과 부산에 각각 있는 랜을 왠을 통해 서로 이어줄 수 있다.

랜은 범위가 좁기 때문에 속도가 빠르고 오류가 적지만, 왠은 범위가 넓기 때문에 랜에 비해 속도도 느리고 오류가 발생활 확률이 더 높다.

ISP(Internet Service Provider): 인터넷 상용 서비스 사업을 하고 있는 KT, U+, SKT와 같은 사업자를 말한다. 인터넷 서비스 제공자는 왠을 구축할 수 있도록 해준다.

랜의 구성 방식

가정에서 하는 랜 구성

일반적인 가정에서 인터넷을 사용하기 위해서는 일반적으로 인터넷 서비스 제공자(ISP)와 인터넷 회선을 두가지를 결정해야한다.

인터넷 서비스 제공자와 네트워크를 연결하기위해 인터넷 공유기가 필요하며 공유기 연결을 통해 가정에서 인터넷을 사용할 수 있다.

회사에서 하는 랜 구성

회사에서의 네트워크 구성에는 DMZ라는 네트워크 영역있을 수 있다. DMZ는 외부에 공개하기 위한 네트워크이며 공개 서버에는 웹 서버, DNS 서버, 메일 서버 등이 있다.

회사는 서버를 운영하기 위해서 주로 서버를 사내에 설치하거나 데이터 센터에 두거나 클라우드에 둬서 관리 한다.

사내 또는 데이터 센터에 서버를 두고 운영하는 것을 온프레미스(on-premise)라 한다. 주로 클라우드와 비교할때 사용하는 용어.

CleanDev 티스토리 스킨을 소개합니다.

pIutos — Wed, 12 Oct 2022 15:22:49 +0900

스킨 소개

CleanDev 스킨은 개발 블로그를 운영하는 개발자를 위한 깔끔한 티스토리 스킨입니다.

스킨 특징

무채색의 컬러톤을 사용한 깔끔한 디자인
필요 이상의 부가적인 기능 제거
mac 스타일의 코드 스니펫 디자인
작성 글의 가이드를 위한 TOC(Table of Contents)기능 지원
커스텀 주소 링크를 통한 포트폴리오, 이메일주소, 깃허브 링크 이미지 표시

TOC와 코드 스니펫 디자인

저작권

하지만 개인적으로 수정하여 사용하는 것은 가능합니다.

스킨 편집 지원 기능

폰트 변경

폰트를 변경할 수 있습니다. Pretendard와 나눔 고딕 폰트를 지원합니다.

커스텀 주소 링크

포트폴리오, 이메일, 깃허브 주소를 설정하면 블로그 소개글 우측 하단에 해당 링크 이미지가 표시됩니다.

적용 후

기타 기능

다크 모드 변경 기능

블로그 접근시 기본으로 디바이스 다크모드 설정에 따라 적용되고, 우측 하단 다크모드 버튼을 클릭하여 변경할 수 있습니다.

TOC(Table On Contents) 기능

블로그 글 내용의 헤더 목록을 표시해주는 TOC기능을 글 우측에 표시하여 지원합니다.

반응형 디자인

CleanDev 스킨은 반응형 디자인을 지원합니다.

추후 지원 예정 기능

CleanDev 스킨은 꾸준히 기능을 업데이트 하고 있습니다. 추후 지원 예정 기능은 다음과 같습니다.

광고 지원
Progress Bar 추가
코드 복사 기능 지원

스킨 적용하는 방법

V1.0.3

https://github.com/eunbae0/tistory_skin_cleandev/releases/download/v1.0.3/clean_dev_version_1.0.3.zip

위 링크를 통해 스킨 파일을 다운로드 할 수 있습니다. 스킨을 적용하는 방법은 아래와 같습니다.

1. 티스토리 관리자 화면의 '꾸미기' > '스킨변경' 페이지로 가서 스킨 등록 버튼을 누릅니다.

2. 추가 버튼을 누른 다음, 위에서 다운로드한 스킨 파일 모두를 선택하고 저장합니다.

3. 저장한 스킨을 적용합니다.

마무리

CleanDev 스킨은 처음으로 배포해보는 스킨이기 때문에 발생하는 문제들이 있을 수 있습니다.

오류나 개선사항에 대해서는 댓글로 남겨주시면 감사하겠습니다.

사용하신다면 Github Star와 아래 공감 버튼을 눌러주세요! 제작자에게 큰 힘이 됩니다 :)

ssh: connect to host github.com port 22: Operation timed out 에러

pIutos — Sun, 2 Oct 2022 00:59:01 +0900

문제 발생

git push를 하려 했을 때 다음과 같은 에러가 발생했다.

ssh: connect to host github.com port 22: Operation timed out
Please make sure you have the correct access rightsand the repository exists.

해결 방법

1. ~/.ssh/config 경로의 config파일에 아래 텍스트를 입력한 후 저장한다

Host github.com
Hostname ssh.github.com
Port 443
User git

2. 이후 ssh -T git@github.com 커맨드를 실행한다.

3. Are you sure you want to continue connecting (yes/no/[fingerprint])? 에서 yes를 입력하면 해결된다.

해결 상세

나의 경우 맥을 사용해서, config파일에 텍스트를 입력한 후, 터미널에서 커맨드를 실행했다.

숨김파일을 보기 위해서는 finder에서 command + shift + .(점) 을 입력하면 된다.

참고 링크

https://stackoverflow.com/questions/15589682/ssh-connect-to-host-github-com-port-22-connection-timed-out

ssh: connect to host github.com port 22: Connection timed out

I am under a proxy and I am pushing in to git successfully for quite a while. Now I am not able to push into git all of a sudden. I have set the RSA key and the proxy and double checked them, with no

stackoverflow.com

https://docs.github.com/en/authentication/troubleshooting-ssh/using-ssh-over-the-https-port

Using SSH over the HTTPS port - GitHub Docs

GitHub Enterprise Server users: Accessing GitHub Enterprise Server via SSH over the HTTPS port is currently not supported. To test if SSH over the HTTPS port is possible, run this SSH command: $ ssh -T -p 443 git@ssh.github.com > Hi username! You've succes

docs.github.com

개인 프로젝트 - 동네마켓

pIutos — Tue, 27 Sep 2022 15:04:16 +0900

프로젝트 시작 동기

프론트 개발을 공부하면서 개인적으로 토이 프로젝트를 진행하고 싶었는데, 한날 당근마켓 채용공고를 보다 문득 나도 당근마켓과 비슷한 기능을 조금 쉽게 다듬으면 이정도는 나 혼자서도 개발할 수 있지 않을까? 라는 생각에 프로젝트를 시작했다.

사용 기술 스택 선정

이 프로젝트는 어짜피 혼자하는 프로젝트니까 내가 지금껏 사용해보지 않은 기술을 사용하여 경험을 쌓자! 는 목적으로 진행했다.

따라서 언어를 제외하고는 거의 처음 사용하고, 사용해보고싶었는데 못했던 스택 위주로 선정하였다.

예전부터 Next.js를 한번 사용해보고 싶었기 때문에 Next.js와 편리한 Tailwind css를 사용해보기로 했다. 그리고 백엔드는 이전에 사용해본 적 있는 파이어베이스를 이용하여 구축했다.

기능명세서와 데이터베이스 구조 작성하기

간단하게 구현해야하는 기능을 파악하여 스프레드시트(링크)로 작성했으며, https://nosqldbm.ru/ 사이트를 이용해서 NoSQL 데이터베이스 컬렉션구조를 작성했다.

애자일 방법론 사용하기

개발 프로세스를 관리하는 방법 중에서 애자일 방법론의 하나인 스크럼에 대해서 찾았고, 이를 이용해서 스프린트 주기별로 할 리스트(백로그)를 위와같이 작성하여 관리했다. 자세한 사항은 노션 링크에서 확인할수있다.

결과적으로 개발기간이 늘어지면서 스프린트 주기를 지키지는 못했지만, 각 스프린트 별로 작성한 코드를 구현하는 과정에서 문제점이나 해결과정 등은 따로 작성해보려한다.

사실 개발을 시작하고 구조를 짠 다음 며칠간 진행하다가 방학동안 번아웃이와서 제대로 공부하지도않고 그냥 하루하루를 흐르듯이 살았었다.

그래서 처음 계획으로는 방학 내에 기능개발을 마치려했지만 개발기간이 늘어나서 아쉬움이 남는 프로젝트이다. 자세한 실제 구현사항이나 회고는 다음 글에서 풀어보겠다.

[c언어] 배열, 포인터 간단 정리

pIutos — Thu, 22 Sep 2022 13:30:04 +0900

pointer

포인터를 선언할 때도 *를 사용하고 역참조를 할 때도 *를 사용한다. 같은 * 기호를 사용해서 헷갈릴수 있지만 선언과 사용을 구분해서 생각하면 된다. 즉, 포인터를 선언할 때 *는 이 변수가 포인터다라고 알려주는 역할이고, 포인터에 사용할 때 *는 포인터의 메모리 주소를 역참조하겠다라는 뜻.

int *numPtr;                // 포인터. 포인터를 선언할 때 *
printf("%d\\n", *numPtr);    // 역참조. 포인터에 사용할 때 *

int num;
int *numPtr;
*numPtr = &num; (x)
numPtr = &num; (o)
*numPtr = num; (o)

// *numPtr은 int형, numPtr은 포인터형(int형 포인터)
// num 은 int형, &num은 주소형
// 이때 주소형과 포인터형은 동일시함. ( pointer to int와 address of int는 자료형이 같음 )

sizeof

int numArr[10] = { 11, 22, 33, 44, 55, 66, 77, 88, 99, 110 };    // 크기가 10인 int형 배열

printf("%d\\n", sizeof(numArr)); // 40
printf("%d\\n", sizeof(numArr) / sizeof(int)); // 10 (int의 size는 4이므로)

위 numArr의 사이즈는 배열 공간 10 x int 자료형의 크기 4이므로 40이다.

malloc

malloc(할당) → 사용 → free(해제) 과정을 거쳐 사용할 수 있다.

malloc으로 메모리를 할당하면 할당된 주소값이 주어지기 때문에 포인터로 주소값을 저장해야한다.

int x = 6; 이런식으로 할당한 값은 메모리공간의 스택(stack)에 할당되어 생성 뒤 따로 처리를 해주지 않아도 되지만, malloc으로 할당하면 메모리공간의 힙(Heap) 공간에 할당되기 때문에 꼭 메모리 해제를 해주어야함!(그렇지 않으면 메모리누수 발생)

int *numptr;
numptr = malloc(sizeof(int));
// *numptr = malloc(sizeof(int))와 같다

printf("%p\\n", numptr); // 메모리 주솟값!!

*numPtr = 10;   // 포인터를 역참조한 뒤 값 할당

printf("%d\\n", *numPtr);    // 10: 포인터를 역참조하여 메모리에 저장된 값 출력

free(numptr); // 꼭 해제해주어야함.

array

배열을 포인터에 할당한 뒤 포인터를 역참조해보면 배열의 첫 번째 요소의 값이 나온다. 마찬가지로 배열 자체도 역참조해보면 배열의 첫 번째 요소의 값이 나온다. 따라서 실제로는 배열도 포인터라 할 수 있다.

-> 포인터를 선언하고 배열처럼 쓸수있고, 배열을 선언하고 포인터로 쓸 수 있다!

int numArr[10] = { 11, 22, 33, 44, 55, 66, 77, 88, 99, 110 };   
 // 크기가 10인 int형 배열

int *numPtr = numArr;       // 포인터에 int형 배열을 할당 - 배열자체가 주소값가짐

printf("%d\\n", *numPtr);    // 11: 배열의 주소가 들어있는 포인터를 역참조하면 배열의 
                            // 첫 번째 요소에 접근

printf("%d\\n", *numArr);    // 11: 배열 자체를 역참조해도 배열의 첫 번째 요소에 접근

배열의 주소가 들어있는 포인터는 인덱스를 통하여 요소에 접근할 수 있다.
printf("%d\\n", numPtr[5]);    // 66: 배열의 주소가 들어있는 포인터는 인덱스로 접근할 수 있음

int *numPtr = numArr; 처럼 배열을 포인터에 바로 할당할 수 있다. 단, 자료형이 서로 같아야 하며 1차원 배열이라면 *가 한 개인 단일 포인터야 한다.

array & pointer

int numArr[10];                           // int형 요소 10개를 가진 배열 생성
int *numPtr = malloc(sizeof(int) * 10);   // int 10개 크기만큼 메모리 할당

numArr[0] = 10;    // 배열을 인덱스로 접근하여 값 할당
numPtr[0] = 10;    // 배열처럼 포인터를 인덱스로 접근하여 값 할당

free(numPtr);   // 메모리 해제

참고 링크

https://dojang.io/course/view.php?id=2

강좌: C 언어 코딩 도장

모두 펼치기모두 접기

dojang.io

Firebase에서 Github 인증 사용설정하기

pIutos — Thu, 22 Sep 2022 11:25:52 +0900

1. Firebase 콘솔에서 승인 콜백 URL 얻기

Firebase 콘솔의 인증창에서 "로그인 방법 설정"버튼을 누르고 로그인 제공업체 탭에서 깃허브를 선택하면 위와같이 승인 콜백 URL와 클라이언트 ID, 비밀번호를 입력하는 창이 뜨게된다.

2. 깃허브 설정에서 OAuth App 등록하기

깃허브로 가서 Settings > Developer Settings > OAuth Apps로 들어가면 새로운 Oauth App을 생성할 수 있다.
생성하기에서 App이름과 홈페이지 URL, 그리고 1번 과정에서 얻은 승인 콜백 URL을 입력해준다.

3. 클라이언트 ID, 비밀번호 등록하기

생성된 OAuth App에 들어가면 클라이언트 ID와 비밀번호를 얻을 수 있다. 이를 다시 파이어베이스 콘솔창으로 돌아와서 입력해주면 사용 설정된다!

참고링크 - https://firebase.google.com/docs/auth/web/github-auth?authuser=1

[모던 자바스크립트 Deep Dive] 04. 변수

pIutos — Thu, 22 Sep 2022 11:21:53 +0900

4.1 변수란 무엇이고, 왜 필요한가?

자바스크립트 엔진이 10+20 이라는 식의 의미를 해석하면 + 연산을 수행하기 위해서 10과 20이라는 숫자 값(피연산자)을 기억한다.

컴퓨터는 연산(CPU)과 기억(Memory)을 수행하는 부품이 나누어져 있기 때문에 피연산자 값은 메모리주소에 저장되고, CPU는 이 값을 읽어 들여 연산을 수행한다.

연산 결과로 생성된 숫자 값 30도 메모리 주소에 저장되는데 이 값을 재사용하려면 주소를 통해 메모리 공간에 직접 접근해야하지만, 이는 치명적 오류를 야기하는 매우 위험한 방법이기에 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다. 따라서 30이라는 값은 재사용이 불가능하다.

만약 직접적인 메모리 제어를 허용하더라도 코드가 실행될 때마다 값이 저장될 메모리 주소는 변경되므로, 코드 실행 이전에는 메모리 주소의 값을 알 방법이 없으므로 직접 접근하는 방법은 올바른 방법이 아니다.

프로그래밍 언어는 기억하고싶은 값을 메모리에 저장하고, 저장된 값을 읽어들여 재사용하기 위해 "변수"라는 메커니즘을 제공한다.

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.

변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 따라서 변수를 통해 직접적인 메모리 제어 없이 안전하게 값에 접근할 수 있다!

변수에 값을 저장하는 것을 할당(assignment-대입, 저장)이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라고 한다.

-> 변수 이름을 이용해서 참조를 요청하면, 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근해서 저장된 값을 반환한다.

4.2 식별자

변수 이름을 식별자(identifier)라고도 하며, 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.

식별자는 값이 저장되어 있는 메모리 주소와 매핑관게를 맺으며, 이 매핑 정보도 메모리에 저장되어야 한다!

식별자는 값이 아니라 메모리 주소를 기억하고있으며, 식별자는 메모리 주소에 붙인 이름이라고 할 수 있다.

4.3 변수 선언

변수 선언은 값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장하도록 준비하는 것이다. 확보된 메모리 공간은 확보가 해제되기 전까지 누구도 확보된 메모리 공간을 사용할 수 없도록 보호되므로 안전히 공간을 사용할 수 있다.

변수를 사용하려면 선언이 반드시 필요하며 var, const, let 키워드를 사용한다. let과 const는 ES6에서 도입된 키워드로, var 키워드의 함수 레벨 스코프 지원 등의 단점을 보완하기 위해 등장한 키워드이다.

4장에서는 우선 var키워드를 살펴본다. var 키워드의 변수 선언 과정을 살펴보자.

var score; 의 변수 선언문은 변수 이름을 등록하고, 값을 저장할 메모리 공간을 확보한다. (선언 단계)
변수는 선언되었지만 아직 값은 할당되지 않았다. 이때 메모리 공간은 비어있지 않고, 확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefined라는 값으로 암묵적으로 할당되어 초기화된다! (초기화 단계)

일반적으로 초기화란 변수가 선언된 이후 최초로 값을 할당하는 것을 의미한다.

만약 초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 앱이 사용했던 값이 남아있을 수 있는데, 이 값을 쓰레기값(garbage value)라 한다. 이러한 쓰레기 값을 참조하는것을 방지하기 위해 var 키워드는 암묵적으로 초기화를 수행한다.

4.4 변수 선언의 실행 지점과 변수 호이스팅

console.log(score); // undefined

var score; // 변수 선언문

위 코드를 살펴보면 변수 선언문보다 변수를 참조하는 코드가 앞에 있지만, 인터프리터에 의해 한 줄씩 순차적으로 코드가 실행되는 과정에서 참조 에러가 발생하지 않고 undefined가 출력된다.

-> 이는 변수 선언이 소스코드가 순차적으로 실행되는 시점(런타임)이 아니라 그 이전단계(소스코드의 평가과정)에서 먼저 실행되기 때문이다! 소스코드의 평과과정에서는 변수, 함수 선언문 등을 소스코드에서 찾아내 먼저 실행하고, 이 과정이 끝나면 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다.

이처럼 변수 선언문이 런타임 이전단계에서 먼저 실행되어 코드의 선두로 끌어올려진 것 처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다.

; var, let, const, function, class등의 키워드를 사용해서 선언하는 모든 식별자는 런타임 이전단계에서 실행되기 때문에 모두 호이스팅된다고 할 수 있다.

4.5 값의 할당

변수에 값을 할당할 때는 할당 연산자 "="를 사용한다. 할당 연산자는 우변의 값을 좌변의 변수에 할당한다.

var score; // 변수 선언
score = 80; // 값의 할당

var score = 80; // 변수 선언 + 값의 할당

위 코드와 같이 변수 선언과 값의 할당을 2개의 문으로 나누어 표현할 수도 있고, 하나의 문으로 단축하여 표현할 수도 있다.

두가지 표현 방식은 정확히 동일하게 동작하고, 이는 하나의 문으로 단축 표현해도 자바스크립트 엔진은 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행한다는 것이다.

이 때 변수 선언은 런타임 이전에 먼저 실행되지만, 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다!

변수에 값을 할당할 때는 이전 값 undefined(초기화된 값)가 저장되어 있던 메모리 공간을 지우고 할당값을 저장하는 것이 아니라, 새로운 메모리 공간을 확보하고 그곳에 할당 값을 저장한다는 점을 주의해야 한다.

4.6 값의 재할당

var score = 80;
score = 90; // 값의 재할당

위 코드와 같이 var 키워드로 선언한 변수는 값을 재할당할 수 있다. 재할당은 현재 변수에 저장된 값을 버리고 새로운 값을 저장하는 것이다. (엄밀이 말하면 변수를 선언 후 초기화하는 과정도 재할당이라 할 수 있다.)

처음 변수에 값을 할당할 때와 마찬가지로 이전 값 80이 저장되어있던 메모리 공간을 지우고 90을 저장하는것이 아니라, 새로운 메모리 공간을 확보하고 그 메모리 공간에 90을 저장한다!

score변수의 이전 값인 undefined와 80은 아무도 사용하지 않는 필요하지 않은 값이므로 이 값들은 가비지 콜렉터에 의해 특정 시점에 메모리에서 자동 해제된다.

가비지 콜렉터는 어플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능이다. 자바스크립트는 가비지 콜렉터를 내장하고있는 매니지드 언어로서 메모리 누수를 방지한다. (언매니지드 언어에는 개발자가 명시적으로 메모리를 할당하고 해제할 수 있는 c언어가 있다.)

요약

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.
변수는 식별자라고도 하며, 식별자는 값이 아니라 메모리 주소를 기억하고있고 메모리 주소에 붙인 이름이라고 할 수 있다.
변수는 선언과정에서 선언단계와 초기화단계를 거친다.
변수 선언문이 런타임 이전단계에서 먼저 실행되어 코드의 선두로 끌어올려진 것 처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다.
변수 선언은 런타임 이전에 먼저 실행되지만, 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.
변수에 값을 (재)할당할 때는 이전 값이 저장되어 있던 메모리 공간을 지우고 할당값을 저장하는 것이 아니라, 새로운 메모리 공간을 확보하고 그곳에 할당 값을 저장한다.

Firebase 이메일 사용자 재인증하기 (requires-recent-login 에러)

pIutos — Thu, 22 Sep 2022 00:28:58 +0900

파이어베이스를 이용해서 사용자를 삭제하기 위해 deleteUser()함수를 이용하여 구현했는데, 위와같은 오류가 발생했다.

그래서 공식 문서를 확인해보니 사용자 계정 삭제, 비밀번호 변경과 같이 보안에 민간한 작업을 하려면 최근에 로그인한 적이 있어야 한다고 설명되어있었다.

그래서 사용자 상태를 업데이트하기위해 재인증을 하는 코드를 추가해주어야하는데, 예시코드에는 credential을 받아오는 함수를 직접 작성하라 되어있고, 어떤 인자를 넣어줘야하는지 알려주지 않았다.

그래서 reauthenticateWithCredential을 선언한 파일로가서 받아야하는 인자의 타입이 AuthCredential임을 알아냈고, 구글에 검색해서 아래와 같은 결과를 찾았다.

나는 이메일을 이용하여 로그인을 구현하였기때문에 EmailAuthCrediential을 사용하였다. 만약 다른 소셜 로그인을 이용했다면 서비스에 맞는 클래스를 사용하면 될 것이다!

import { User, EmailAuthProvider, reauthenticateWithCredential } from 'firebase/auth';

async function userRecertification(email: string, password: string) {
  const user = auth.currentUser as User;
  const authCredential = EmailAuthProvider.credential(email, password);
  
  let bool;
  await reauthenticateWithCredential(user, authCredential)
    .then(() => {
      bool = true;
    })
    .catch((error) => {
      console.log(error);
      bool = false;
    });
  return bool;
}

최종 구현 코드이다. 재인증 함수 컴포넌트를 분리해서 작성하였고, EmailAuthCrediential.credential()을 이용해 authCredential정보를 받아와서 공식문서에 적힌대로 사용자 재인증 기능을 구현하였다.

추가로 bool을 선언하고 재인증 함수를 불러오는동안 return이 되어버려 undefined값이 반환되었기 때문에, await을 넣어주어 제대로 변수에 값을 지정한 다음 return하도록 했다.

HTTP와 HTTPS의 차이점

pIutos — Thu, 21 Jul 2022 16:14:09 +0900

HTTP는 무엇일까?

HTTP는 Hyper Text Transfer Protocol의 약자로, 인터넷 상에서 데이터(Hyper Text)를 주고 받기 위해서(Transfer) 서버/클라이언트 모델을 따르는 프로토콜입니다. 주로 웹 브라우저와 웹 서버간의 커뮤니케이션을 위해서 디자인 되었으며 ??

HTTP는 주로 TCP를 사용하고, 2020년부터 도입된 HTTP/3에서는 UDP를 사용합니다. 또한 기본 포트로 80번을 사용한다는 특징이 있습니다.

서버/클라이언트 모델: 클라이언트가 요청을 생성하기 위한 연결을 연다음 응답을 받을때 까지 대기하는 전통적인 방식

프로토콜: 컴퓨터 내부 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계

HTTP의 문제점

HTTP 서버는 기본 80번 포트에서 서비스를 대기하고 있으며, 만약 웹 브라우저가 80번 포트를 연결하여 데이터를 요청하면 서버는 요청에 해당하는 데이터(Hyper Text)를 전송하면서 응답하게 됩니다.

이 과정에서 누군가가 네트워크 신호를 가로채는 경우, 데이터는 외부에 그대로 노출되어 데이터가 도난당할 수 있다는 문제점이 존재합니다. 이러한 보안 취약점을 해결하기 위해 HTTPS가 등장하였습니다.

HTTPS!

HTTPS는 HTTP에서 Secure socket layer, 즉 데이터 전송 과정에서 보안이 추가된 프로토콜입니다. 데이터 전송시 텍스트를 사용하는 대신, SSL이나 TLS 프로토콜을 통해 세션 데이터를 암호화하기 때문에 데이터의 보호를 보장합니다. 그리고 HTTP와는 다르게 기본 포트로 443번을 사용한다는 특징이 있습니다.

따라서 HTTPS를 사용하면 클라이언트가 금융 활동 이나 온라인 쇼핑을 할 때 민감한 개인 정보를 서버와 안전하게 주고 받을 수 있게 됩니다.

SSL? TLS? : SSL(Secure Sockets Layer), TSL(Transport Layer Security)는 네트워크에 통신 보안을 제공하기 위해 설계된 암호 규약입니다. 이때 TLS는 SSL이 표준화되면서 바뀐 이름입니다. 따라서 TLS안에 SSL이 있다 할 수 있습니다.

그렇다면 HTTPS에서 보안이 어떤 방식으로 동작할까?

브라우저에서 https를 사용하는 사이트일 경우 보안 연결이 사용되었다는 문구를 볼 수 있습니다.

HTTPS는 SSL 암호화 통신, 즉 공개키 암호화 방식의 알고리즘을 통해 보안을 구현합니다. 그렇다면 공개키 암호화 방식에 대해서 알아보겠습니다.

공캐키 암호화 방식

공개키 암호화 방식은 암호 방식의 한 종류로 암호화와 복호화에 이용하는 키가 다른 방식을 말합니다. 공개키와 암호키가 존재하며, 위 그림에서 Hello Alice!라는 문구를 공개키로 암호화했다면 오직 암호키로만 이를 복호화할 수 있습니다. 반대로 암호키로 암호화했다면 공개키로만 복호화 할 수 있습니다.

이 방식을 이용한 클라이언트와 서버간의 흐름을 간단하게 정리해보았습니다.

클라이언트는 공개키로 HTTP요청을 암호화합니다.
이 요청을 받은 서버는 암호키로 요청을 복호화해서 해독합니다.
서버는 요청에 해당하는 데이터를 암호키로 암호화하여 클라이언트에 응답합니다.
클라이언트는 응답을 공개키로 응답을 복호화하여 해독합니다.

보안 말고 또 다른 차이점?

구글 등의 검색 엔진에서는 HTTPS를 사용한 사이트에 SEO(Search Engine Optimization) 가산점을 부여합니다. 따라서 동일한 키워드를 검색하더라도 HTTPS가 적용된 안전한 사이트가 더 상위에 노출됩니다.

요약

HTTPS는 인터넷 상에서 데이터를 주고받기위한 프로토콜인 HTTP에 보안이 추가된 방식입니다. 보안은 공개키 암호화 방식을 사용하는 SSL 암호화 통신을 통해 구현됩니다. 따라서 둘의 차이점은 보안의 적용유무에 있다고 할 수 있습니다.

참고문서

https://developer.mozilla.org/ko/docs/Web/HTTP

https://ko.wikipedia.org/wiki/HTTP

https://ko.wikipedia.org/wiki/HTTPS

https://post.naver.com/viewer/postView.nhn?volumeNo=16561296&memberNo=1834

https://ko.wikipedia.org/wiki/%EA%B3%B5%EA%B0%9C_%ED%82%A4_%EC%95%94%ED%98%B8_%EB%B0%A9%EC%8B%9D

자바스크립트로 하는 자료구조와 알고리즘 - 10장. 검색과 정렬

pIutos — Fri, 15 Jul 2022 14:49:25 +0900

10장. 검색과 정렬

검색 (search)

- 검색은 자료 구조 내에 특정 항목을 찾는 일을 말하며, 배열이 정렬됐는지 여부에따라 두 가지 주요 기법이 있다.

선형 검색

배열의 각 항목을 한 인덱스씩 순차적으로 접근하면서 동작한다.
시간 복잡도 : O(n)
배열의 정렬 여부와는 관계없이 동작하기때문에 좋으므로 정렬되지 않은 배열을 검색하기 좋다.

function linearSearch(arr, n) {
    for(var i = 0; i < arr.length; i++){
        if (arr[i] == n) return true;
    }
    return false;
}

이진 검색 (탐색)

중간 값을 확인해서 원하는 값보다 중간 값이 작은지 큰지를 확인하면서 동작한다.
시간 복잡도: O(logn)
이진 탐색은 빠르지만 배열이 정렬된 경우에만 사용할 수 있다.

function binarySearch(arr, n) {
    var lowIdx = 0, highIdx = arr.length - 1;

    while (lowIdx <= highIdx) {
        var midIdx = Math.floor((highIdx + lowIdx) / 2);
        if (arr[midIdx] == n) return arr[midIdx];
        else if (n>arr[midIdx]) lowIdx = midIdx;
        else highIdx = midIdx;
    }
    return -1;
}

정렬 (sort)

거품 정렬 (bubble sort)

가장 간단한 알고리즘으로, 전체 배열을 순회하면서 항목이 다른 항목보다 큰 경우 두 항목을 교환한다.
시간 복잡도: O(n^2) (중첩 루프)
거품 정렬은 모든 가능한 짝을 비교하기 때문에 최악의 정렬이라 할 수 있다.

function bubbleSort(array) {
  for (var i = 0, arrayLength = array.length; i < arrayLength; i++) {
    for (var j = 0; j <= i; j++) {
      if (array[i] < array[j]) {
        swap(array, i, j);
      }
    }
  }
  return array;
}

책의 예시는 인접 두 항목을 교환하는 코드가 아니어서 제로초님의 블로그글을 참고하여 공부하였다.

function bubbleSort(array) {
  for (var i = 0, arrayLength = array.length; i < arrayLength - 1; i++) {
    for (var j = 0; j < arrayLength - 1 - i; j++) {
      if (array[j] > array[j+1]) { // 인접항목 교환
        swap(array, j, j+1);
      }
    }
  }
  return array;
}

선택 정렬 (selection sort)

가장 작은 항목을 찾아서 해당 항목을 배열의 현 위치에 삽입한다.
시간 복잡도 : O(n^2) (중첩 루프)

function selectionSort(items) {
  var len = items.length, min;

  for (var i = 0; i < len; i++) {
    min = i;
    for (j = i+1; j < len; j++) { 
      if (items[j] < items[min]) {
        min = j; // 최솟값의 위치를 min값에 할당
      }
    }
    if (i != min) { // 현재 위치가 최솟값의 위치가 아니면 교환
      swap(items, i, min);
    }
  }
  return items;
}

삽입 정렬 (insertion sort)

배열을 순차적으로 검색하면서 정렬되지 않은 항목들을 배열의 왼쪽의 정렬된 부분으로 이동시킨다.
시간 복잡도 : O(n^2) (중첩 루프)

function insertionSort(items) {
  var len = items.length, value, i, j;
  
  for (i=0; i < len; i++) {
    value = items[i]; // 현재 값 덮어써질수 있으므로 저장함

    for (j = i-1; j > -1 && items[j] > value; j--) { // value가 검사값보다 작다면 검사값 위치 +1
      items[j+1] = items[j];
    } // j는 검사값이 크지 않을 때 까지 감소한다.
    items[j+1] = value; // 감소한 j값 +1이 value의 위치(가장 작은값)
    console.log(items);
  }
  return items;
}

빠른 정렬 (quick sort)

기준점을 획득한 다음 해당 기준점을 기준으로 왼쪽은 작은 항목, 오른쪽은 큰 항목으로 배열을 나눈다.
시간복잡도: 평균 - O(nlog_2(n)), 최악 - O(n^2)
기준점을 항상 잘못 선택하는 경우는 시간 복잡도가 O(n^2)이 될 수 있다.

function quickSort(items) {
  return quickSortHelper(items, 0, items.length - 1);
}
function quickSortHelper(items, left, right) {
  var index;
  if (items.length > 1) {
    index = partition(items, left, right);

    if (left < index - 1) { // 기준점 왼쪽 빠른정렬
      quickSortHelper(items, left, index - 1);
    }
    if (index < right) { // 기준점 오른쪽 빠른정렬
      quickSortHelper(items, index, right);
    }
  }
  return items;
}
function partition(array, left, right) { // 기준점 중앙으로
  var pivot = array[Math.floor((right + left) / 2)];
  while (left <= right) {
    while (pivot > array[left]) {
      left++;
    }
    while (pivot < array[right]) {
      right--;
    }
    if (left <= right) {
      var temp = array[left];
      array[left] = array[right];
      array[right] = temp;
      left++;
      right--;
    }
  }
  return left;
}

빠른 선택 (quick select)

정렬되지 않은 목록에서 k번째로 작은 항목을 찾는 선택 알고리즘이다.
빠른 정렬과 같은 접근법을 사용하지만, 기준점의 양쪽 모두를 재귀적으로 수행하는 대신 한쪽만을 재귀적으로 수행한다는 차이점이있다.
이로인해 복잡도는 O(nlog_2(n))에서 O(n)으로 낮아진다.
시간복잡도: O(n)

function quickSelectInPlace(A, l, h, k) {
  var p = partition(A, l, h);
  if (p == (k-1)) {
    return A[p]; // 일치하면 값 return
  } else if (p > (k-1)) {
    return quickSelectInPlace(A, l, p-1, k); // pivot 왼쪽배열 재귀
  } else {
    return quickSelectInPlace(A, p+1, h, k); // pivot 오른쪽배열 재귀
  }
}

병합 정렬 (merge sort)

각 하위 배열에 하나의 항목이 존재할 때까지 배열을 하위 배열로 나눈 다음, 각 하위 배열을 정렬된 순서로 병합한다.
시간복잡도: O(nlog_2(n)), 공간복잡도: O(n)
병합 정렬은 O(n)의 공간을 사용한다는 단점이 있다.
왼쪽, 오른쪽의 두 배열을 가지고 하나의 결과 배열로 병합한다. (아래의 merge 함수)

function merge(leftA, rightA) { // 병합 함수
  var results = [], leftIndex = 0, rightIndex = 0;

  while (leftIndex < leftA.length && rightIndex < rightA.length) {
    if (leftA[leftIndex] < rightA[rightIndex]) {
      results.push(leftA[leftIndex++]);
    } else {
      results.push(rightA[rightIndex++]);
    }
  }
  var leftRemains = leftA.slice(leftIndex),
  rightRemains = rightA.slice(rightIndex);

  return results.concat(leftRemains.concat(rightRemains));
}

function mergeSort(array) {
  if (array.length<2){
    return array;
  }
  var midpoint = Math.floor((array.length)/2),
  leftArray = array.slice(0, midpoint),
  rightArray = array.slice(midpoint);

  return merge(mergeSort(leftArray), mergeSort(rightArray)); // left와 right로 계속 분할
}

계수 정렬 (count sort)

값을 비교하지 않기 때문에 O(k+n)시간 안에 수행된다.
숫자에 대해서만 동작하며, 특정 범위가 주어져야 한다.
배열의 각 항목의 등장 횟수를 세어 해당 등장 횟수를 사용해서 새로운 배열을 생성한다.
주로 제한된 범위의 정수를 정렬할 때 가장 빠른 정렬 방법이기 때문에 계수 정렬을 사용한다.
시간복잡도: O(k+n), 공간복잡도: O(k)

function countSort(arr) {
  var hash = {}, countArr = [];
  for (var i=0; i<arr.length; i++) {
    if (!hash[arr[i]]) {
      hash[arr[i]] = 1;
    } else {
      hash[arr[i]]++;
    }
  }
  for (var key in hash) { // 항목이 몇개가 되든 해당 항목을 배열에 추가한다
    for (var i=0; i<hash[key]; i++) {
      countArr.push(parseInt(key)); // key 를 hash[key] 값만큼 arr에 push한다.
    }
  }
  return countArr;
}

자바스크립트 내장 정렬

자바스크립트는 배열 객체에 사용 가능한 내장 메소드 sort()가 존재하며, 이는 항목들을 오름차순으로 정리한다.

var arr = [12, 3, 4, 2, 1, 34, 23];
arr.sort(); // [1, 12, 2, 23, 3, 34, 4]

요약

알고리즘	시간 복잡도	공간 복잡도
빠른 정렬(quick sort)	O(nlog_2(n))	O(nlog_2(n))
병합 정렬(merge sort)	O(nlog_2(n))	O(nlog_2(n))
거품 정렬(bubble sort)	O(n^2)	O(n^2)
삽입 정렬(insertion sort)	O(n^2)	O(n^2)
선택 정렬(select sort)	O(n^2)	O(n^2)
계수 정렬(count sort)	O(k+n)	O(k)

자바스크립트로 하는 자료구조와 알고리즘 - 7장

pIutos — Fri, 15 Jul 2022 14:48:24 +0900

7장. 자바스크립트 메모리 관리

메모리 누수

자바스크립트는 타언어와는 달리 프로그래머가 직접 메모리를 수동으로 할당하고 해제하지 않고 사용하지않는 변수, 즉 메모리를 삭제해주는 가비지 컬렉터가 있기 때문에 매니지드언어라고 부른다. 하지만 이러한 기능에도 메모리가 올바른 방식으로 해제되지 않아 메모리 누수가 발생할 수 있기 때문에 이를 피하기위한 여러 방법이 존재한다.

객체에 대한 참조

var foo = {
	bar1: memory(), // 5kb
    bar2: memory(), // 5kb
}

function clickEvent() {
	alert(foo.bar1[0]);
}

객체에 대한 참조가 있다면 해당 참조는 메모리에 존재하는 것이다. foo객체가 bar1만을 참조하더라도 foo객체 전체를 clickEvent() 함수의 범위에 로딩해야 하기 때문에 실제로는 5KB가 아니라, 10KB의 메모리를 사용한다.

DOM 메모리 누수

DOM 항목을 가리키는 변수가 이벤트 콜백 외부에 선언된 경우 해당 DOM 항목을 제거하더라도 해당 항목은 여전히 메모리에 남게된다.

var one = document.getElementById("one");
var two = document.getElementById("two");

one.addEventListner('click', function() {
    two.remove();
    console.log(two); // 삭제 후에도 html을 출력한다(참조 유지)
}

위 코드에서 웹페이지의 two항목은 사라지지만, 해당 DOM이 HTML에서 사라지더라도 해당 DOM이 이벤트 콜백에서 사용되었다면 참조는 남는다. 이렇게 two 항목이 더 이상 사용중이 아닌경우를 '메모리 누수'라 부르며 미리 누수를 피해야한다. 따라서 아래와 같은 코드를 작성할 수 있다.

var one = document.getElementById("one");

one.addEventListner('click', function() {
    var two = document.getElementById("two"); // DOM항목을 이벤트 콜백 내부에서 사용한다.
    two.remove();
}
one.removeEventListner('click', function () {
    one.addEventListener('click', callBackExample);
}); // 또는 클릭 핸들러를 사용한 뒤 등록 해지하는 방법도 있다.

window 전역 객체

객체가 window 전역 객체에 포함되는 경우 해당 객체는 메모리에 존재하는 것이고, window의 속성으로 선언된 추가적인 객체는 모두 제거할 수 없다. window는 브라우저가 실행하는데 필요한 객체이기 때문이다. 따라서 가능하면 전역변수는 사용하지 않는 것이 좋다.

객체 참조 제한하기

객체에 대한 모든 참조가 제거되면 해당 객체는 제거되기 때문에 함수에는 객체의 전체범위가 아닌 필요한 범위, 속성만 전달해야한다.

var test = { prop1: 'test' };

function printProp(test) {
    console.log(test.prop1); // x
    console.log(test) // o
}

printProp(test); // x
printProp(test.prop1); // o

delete 연산자

원치 않는 객체 속성을 제거하기 위해 delete 연산자를 사용할 수 있다. 이때 delete 연산자는 객체에서만 동작한다.

var test = { prop1: 'test' };

console.log(test.prop1); // test

delete test.prop1;

console.log(test.prop1); // undefined

자바스크립트로 하는 자료구조와 알고리즘 - 5~6장

pIutos — Fri, 15 Jul 2022 14:47:26 +0900

5장. 자바스크립트 배열

배열

삽입

새로운 항목을 자료 구조 내에 추가하는것. .push(element)메소드를 사용해 배열 삽입을 구현할 수 있다.

var arr = [1, 2, 3, 4]
arr.push(5); // arr = [1, 2, 3, 4, 5]
arr.push(8); // arr = [1, 2, 3, 4, 5, 8]

// 시간복잡도: O(1)

삭제

.pop()메소드를 사용해 배열 삭제를 구현할 수 있다. 해당 메소드는 제거된 항목을 반환한다.

var arr = [1, 2, 3, 4]
arr.pop(); // return 4, arr = [1, 2, 3]

// 시간복잡도: O(1)

arr.shift(); // return 1, arr = [2, 3]
// shift()는 첫번째 항목을 제거한 다음 해당 항목을 반환한다.

접근

특정 인덱스의 배열에 접근하는 연산은 인덱스를 이용해서(0부터 시작) 메모리의 주소로부터 직접 값을 얻기 때문에 시간 복잡도가 O(1)이다.

var arr = [1, 2, 3, 4]
arr[1] // return 2
arr[3] // return 4

반복

반복은 어떤 자료구조 내에 담긴 항목들을 하나씩 접근하는 과정이며 모두 O(n)의 시간복잡도를 가진다.

for (변수; 조건; 수정)

for은 변수 i를 초기화하고 코드 실행 전 조건이 거짓인지 확인한다. 만약 거짓이라면 변수를 수정

하며 동작한다.

for (var i=0, len=arr.length; i<len; i++) {
	console.log(arr[i])
}

while

var counter = 0;
while(counter<arr.length){
	// ~
    counter++
} //while은 counter가 루프의 바깥에서 초기화되어야 한다.

무한 루프

while(true){
	if(breakCondition) {
   		break;
	}
}

for(;;) {
	if(breakCondition) {
   		break;
	}
} //조건을 설정하지 않음으로써 무한루프를 구현할 수 있다.

for (in)

인덱스를 하나씩 호출하는 배열을 반복 접근하기위한 방법으로, in 앞에 지정된 변수는 배열의 인덱스이다.

var arr = ['a', 'b', 'c', 'd']

for (var index in arr) {
	console.log(index)
} // 0, 1, 2, 3

for (of)

of 앞에 지정된 변수는 배열의 항목(값)이다.

var arr = ['a', 'b', 'c', 'd']

for (var element of arr) {
	console.log(element)
} // a, b, c, d

forEach()

forEach는 반복 중 바깥으로 빠져나오거나 배열 내의 특정 항목을 건너뛸 수 없다. 따라서 반복 접근한다는 의미에 있어 조금 더 명시적이라 할 수 있다.

var arr = ['a', 'b', 'c', 'd']

arr.forEach( function (element, index) {
	console.log(element, index)
} // a 0, b 1, c 2, d 3

도움 함수

.slice(begin, end)

기존 배열을 수정하지 않고 해당 배열의 일부를 반환하며, 시작과 끝 인덱스를 매개변수로 받는다.

var arr = [1, 2, 3, 4];
arr.slice(0, 2) // return [1, 2]
arr.slice(1) // return [2, 3, 4]
arr.slice() // return [1, 2, 3, 4]

.slice()는 배열 전체의 복사본을 반환하기 때문에 배열을 복사하는데 유용하다. 배열에 신규변수를 할당하면 기존변수를 '참조'하기때문에 신규변수를 변경하면 기존변수에도 변경점이 의도치않게 적용될 수 있다. 새로운 배열을 만드려면 .from()이나 .slice()등을 이용해야 한다.

var arr1 = [1, 2, 3], arr2 = arr1;

arr2[0] = 5;
console.log(arr1) // [5, 2, 3]
console.log(arr2) // [5, 2, 3]
// arr2는 arr1을 참조한다.

var arr3 = [1, 2, 3];
var arr4 = Array.from(arr3);
var arr5 = arr3.slice();
// arr4와 arr5는 새로운 배열로 생성된다.

.splice(begin, size, element1, element2, ...)

.splice()는 기존 항목을 제거하거나 신규 항목을 추가함으로써 배열의 내용을 반환하고 변경한다.

-> .splice(시작 인덱스, 제거할 항목의 크기, 추가할 신규항목들...)

var arr = [1,2,3,4];
arr.splice(); // return [], arr = [1,2,3,4]
arr.splice(1, 2); // return [2, 3], arr = [1, 4]
arr.splice(1, 2, 7, 7, 7) // return [2, 3], arr = [1,7,7,7,4]
arr.splice(1, 2, { 'ss': 1 }) // return [2, 3], arr = [1, { 'ss': 1 }, 4]

.concat()

신규 항목을 배열의 맨 뒤에 추가한 다음 해당 배열을 반환한다.

var arr = [1,2,3,4];
arr.concat() // return [1,2,3,4], arr = [1,2,3,4]
arr.concat([6, 6, 6]) // return [1,2,3,4,6,6,6], arr = [1,2,3,4]
// concat은 기존 배열은 바꾸지 않음

.length 속성

배열의 크기로 반환한다. 배열을 더 작은 크기로 변경하면 배열에서 항목들이 제거된다.

var arr = [1,2,3,4];
console.log(arr.length) // 4
arr.length = 3; // arr = [1,2,3]

전개(spread) 연산자

점 3개(...)로 표현하며 인자를 확장하는데 사용한다.

var arr = [1,2,3,4];
function addFourNums(a, b, c, d) {
	return a+b+c+d;
}
console.log(addFourNums(...arr)); // 10

Math.max와 Math.min

두 함수 모두 무한개의 매개변수를 받을수 있으며 spread연산자를 사용하면 배열의 최댓값과 최솟값을 찾을 수 있다.

var arr = [3, 2, -123, 1234, 12];
Math.max(...arr); // 1234
Math.min(...arr); // -123

6장. 자바스크립트 객체

자바스크립트 객체 속성

자바스크립트에서는 객체 상수 {} 또는 new Object(); 구문을 통해 객체를 생성할 수 있다.

속성을 추가하거나 접근하기 위해서는 objcet.propertyName 또는 object['propertyName']을 사용할 수 있다.

var jsObj = {};
var arr = [1,2,3,4];
jsObj.array = arr;
console.log(jsObj); // {array: [1,2,3,4]}

jsObj['title'] = 'Algorithms';
console.log(jsObj); // {array: [1,2,3,4], title: 'Algorithms'}

프로토타입 활용 상속

자바스크립트에서는 함수가 클래스의 자바스크립트 Object속성으로 추가되어야 한다.

function ExampleClass() {
	this.name = "js";
    this.sayName = function() {
		console.log(this.name);
}

var example1 = new ExampleClass();
example1.sayName(); // "js"

위 코드의 class는 생성자에서 sayName함수를 동적으로 추가하는데, 이러한 패턴을 프로토타입 활용 상속이라고 한다. 이 상속은 자바스크립트에서 유일한 상속 방법이며 클래스에 함수를 추가하기 위해서는 .prototype 속성을 사용한 후 함수의 이름을 지정하기만 하면 된다.

function ExampleClass() {
	this.arr = [1,2,3];
    this.name = "js";
}

var example1 = new ExampleClass();

ExampleClass.prototype.sayName = function() {
	console.log(this.name);
}
example1.sayName(); // "js"

-> 함수를 클래스에 동적으로 추가하는 방식이 자바스크립트가 프로토타입 활용 상속을 구현하는 방식이다.

자바스크립트로 하는 자료구조와 알고리즘 - 1~4장

pIutos — Fri, 15 Jul 2022 14:46:20 +0900

배세민, ⌜자바스크립트로 하는 자료구조와 알고리즘⌟, 에이콘, 2019
- 요약 및 배운점 정리

1장. 빅 오 표기법

빅오 표기법이란?

빅오 표기법은 알고리즘의 최악의 경우 복잡도를 측정하는 방법이다. 빅오 표기법에서 n은 입력의 개수를 나타내며, 알고리즘 구현시 해당 알고리즘이 얼마나 효율적인지를 나타낼 수 있는 방법이기에 중요하다!

빅오 표기법은 O()로 나타낼 수 있는데 O(1)은 상수시간, 즉 입력 공간에 대해 변하지 않음을 나타내고 O(n)은 선형시간으로 최악의 경우에 n번의 연산을 수행해야하는 알고리즘이 이에 해당한다.

빅오 표기법의 규칙

알고리즘의 시간 복잡도를 f(n)이라 표현한다. f(n)을 계산함으로써 알고리즘의 효율성을 이해할 수 있지만 계산이 어려울 수 있기 때문에 이에 도움이 되는 기본적인 여러가지 규칙이 존재한다.

계수 법칙 - "상수를 제거하라"

상수 k > 0인 경우 f(n)이 O(g(n))이면 kf(n)은 O(g(n))이다.

n과 관련되지 않은 계수는 제거하는 규칙으로, 5f(n)과 f(n)은 모두 동일한 O(f(n))이다.

-> f(n) = 5n, f(n) = n + 1인 경우는 모두 O(n)의 빅오표기법이다.

합의 법칙 - "빅오를 더하라"

코드에서 f(n)=n과 f(n)=4n이 각각 실행된다면 합의 법칙에 의해 f(n) = 5n이다. 이때 계수법칙에 의해 최종적 결과는 O(n)=n이다.

곱의 법칙 - "빅오를 곱하라"

코드에서 루프에 의해 5n번 실행되고 내부 루프가 외부 루프에의해 n번 실행된다면 f(n) = 5n x n이다. 이때 계수법칙에 의해 O(n) = n^이다.

다항 법칙 - "빅오의 k승"

f(n)이 k차 다항식이면 f(n)은 O(n^k)이다.

...
for (var i=0; i<n*n; i++) {
	conut+=1;
}
// count+=1;이 n*n번 실행되기 떄문에 f(n)=n^2이다.

2장. 자바스크립트의 독특한 특징

자바스크립트 범위

범위(scope)는 자바스크립트 변수에 대한 접근 권한을 정의하는 것이다. 자바스크립트에서 변수는 전역 범위 또는 지역 범위에 속할 수 있다.

전역 범위 - 연산자 없이 변수를 선언하게되면 전역변수를 생성함
함수 범위 - var

- 변수 호이스팅 (variable hoisting) : var를 사용하여 변수를 선언하면 어디에서 선언하든 변수 선언이 함수의 맨 앞으로 이동한다.

function scope(print){
	if(print){
    	var insideIf = '12';
    }
    console.log(insideIf);
}
scope(true) // 12출력, 오류발생x

function scope(print){
	var insideIf
    
	if(print){
    	insideIf = '12';
    }
    console.log(insideIf);
}
scope(true)
//위의 함수와 동일하다. var은 함수범위로 정의되며 호이스팅이 일어난다.

블록 범위 - let, const : 변수가 선언된 { } 내에서만 유효함

function scope(print){
	if(print){
    	let insideIf = '12';
    }
    console.log(insideIf);
}
scope(true) // 12 x, ''를 출력함

등가와 형

변수형

boolean, number, string, undefined, object, function, symbol

-> 선언만 되고 값이 할당되지 않은 변수에는 undefined가 할당된다.

true / false 확인

if 내의 매개변수는 대개의 다른 언어와는 달리 꼭 boolean형이 아니어도 된다.

- false로 평가되는 경우 : false, 0, '', "", NaN, undefined, null

- true로 평가되는 경우 : true, 0이 아닌 다른 숫자, 비어있지 않은 문자열, 비어있지 않은 객체

=== vs ==

자바스크립트는 변수 선언 시 변수에 형이 할당되지 않으며, 코드가 실행될 때 해당 변수의 형이 해석된다. 따라서 ===는 ==에 비해 등가를 조금 더 엄격히 확인한다.

==: 값만 같은지 여부를 확인

===: 형과 값 모두 같은지 여부를 확인

객체

var object1 = {};
var object2 = {};

console.log(object1 == object2); //false
console.log(object1 === object2); //false

- 동일한 속성과 값을 가져도 두 변수의 메모리상 주소는 다르기 때문에 두 객체는 동일하지 않다.

var function1 = function(){console.log(2)};
var function2 = function(){console.log(2)};

console.log(function1 == function2); //false

- 동일한 연산을 수행해도 두 함수의 메모리상 주소는 다르기 때문에 두 함수는 동일하지 않다.

→ ==, ===연산자는 숫자, 문자열, 불리언과 같은 비객체형에만 사용가능하다! (객체와 함수에서는 사용x)

3장. 자바스크립트 숫자

숫자 체계

자바스크립트는 숫자에 대해 64비트 부동소수점 표현을 사용한다. 63번째 비트는 부호를, 63~52번째 비트는 지수 값 e를, 나머지 52비트는 분수 값을 나타낸다. 이 64비트값은 어려운 공식에 의해 계산되는데, 이러한 십진분수로 인하여 자바스크립트에서 부동소수점 체계가 반올림 오류를 일으킬 수 있다. 이러한 이유 때문에 0.1과 0.2는 정확히 표현할 수 없다. 따라서 0.1 + 0.2 === 0.3의 결과는 false이다.

자바스크립트 숫자 객체

위와같은 숫자 체계의 문제를 해결하는데 도움이 되는 Number객체의 내장된 속성이 있다

정수 반올림

자바스크립트는 정수를 정수형으로 명시적으로 선언하지 않고 모든 숫자를 표현할 때 부동소수점을 사용하기 때문에 정수 나눗셈을 하면 부동소숫점의 결과가 나온다. (5/4 = 1.25) 따라서 정수 나눗셈을 하기위해서는 아래와 같은 함수를 이용해야한다.

Math.floor()
Math.round()
Math.ceil()

Number.EPSILON

두 개의 표현 가능한 숫자 사이의 가장 작은 간격을 반환한다.

function numberEquals(x, y) {
	return Math.abs(x - y) < Number.EPSILON;
}
numberEquals(0.1 + 0.2, 0.3) // true

최대치

Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2; // true

Number.MAX_VALUE + 1 === Number.VALUE + 2; // true

Number.MAX_SAFE_INTEGER: 가장 큰 정수를 반환

Number.VALUE: 가장 큰 부동소수점 수를 반환

최소치

Number.MIN_SAFE_INTEGER - 1 === Number.MIN_SAFE_INTEGER -2; // true

Number.MIN_VALUE -1 == -1; // true

Number.MIN_SAFE_INTEGER: 가장 작은 정수를 반환

Number.MIN_VALUE: 가능한 가장 작은 부동소수점 수를 반환 -> 음수가 아님! (Number.MIN_SAFE_INTEGER < Number.MIN_VALUE)

무한

Infinity > Number.MAX_SAFE_INTEGER; // true
-Infinity < -Number.MAX_SAFE_INTEGER; // true
-Infinity - 32323323 == -Infinity - 1; //true: -Infinity보다 작아질 수 있는것은 없음

크기 순서

-Infinity < Number.MIN_SAFE_INTEGER < Number.MIN_VALUE < 0 < Number.MAX_SAFE_INTEGER < Number.MAX_VALUE < Infinity

무작위 수 생성기

자바스크립트에는 숫자를 생성하기 위핸 내장 함수인 Math.random()이 있다. 이 함수는 0과 1 사이의 무작위 부동 소수점을 반환한다.

4장. 자바스크립트 문자열

자바스크립트 문자열 기본

문자열 접근

문자에 접근하기 위해 .charAt(index)을 사용할 수 있다.

'dog'.charAt(1); // "o"

문자열 접근을 위해 .subString(startIndex, endIndex)을 사용할 수 있다. subString은 지정된 인덱스 사이의 문자들을 반환한다. endIndex를 전달하지 않으면 지정된 시작위치부터 끝까지 모든 문자를 반환한다.

'YouTube'.substring(1,2) // 'o'
'YouTube'.substring(3,6) // 'Tub'
'YouTube'.substring(2) // 'uTube'

문자열 비교

자바스크립트에서는 < 와 >를 이용하여 쉽게 문자열을 비교할 수 있다.

console.log('a' < 'b') // true
console.log('abb' < 'b') // true
console.log('add' < 'ab') // false

문자열 검색

문자열 내에 특정 문자열을 찾기위해 .indexOf(searchValue[, fromIndex])를 사용할 수 있다. 일치하는 문자열을 찾으면 위치를 반환하고, 찾지 못한다면 -1을 반환한다.

'Red Dragon'.indexOf('Red') // 0
'Red Dragon'.indexOf('Dragon') // 4
'Red Dragon'.indexOf('Blue') // -1
'Red Dragon'.indexOf('Dragon', 2) // 4
'Red Dragon'.indexOf('Dragon', 6) // -1
'Red Dragon'.indexOf('', 9) // 9

startWith는 문자열이 특정 입력으로 시작하면 true를 반환하고, endsWith는 끝나면 true를 반환한다.

'Red Dragon'.startsWith('Dragon') //false
'Red Dragon'.endsWith('Dragon') //true

문자열 분해

문자열을 여러 부분으로 나누기 위해 .split(separator)를 사용할 수 있다. separator를 입력받으면 부분 문자열 배열(Arr)를 생성한다.

'chicken,cow,pig'.split(","); // ["chicken", "cow", "pig"]
'chicken'.split(""); // ["c", "h", "i", "c", "k", "e", "n"]

문자열 바꾸기

.replace(string, replaceString) 문자열 변수 내에 특정 문자열을 다른 문자열로 대체할 수 있다.

"Red Dragon".replace("Red", "Blue"); // "Blue Dragon"

개발 창고

[토스 PO Session] 지속 가능한 성장을 만드는 방법

바이럴 성장 만들기 (Designing Viral Growth)

Growth는 MAU가 아니라 CC를 높이는 것

두 목표의 차이점

지속가능하지 않은 것들의 예시

그럼 어떤 CC 값을 목표로 하는게 맞을까?

CC에게 가장 큰 영향을 주는 것은 어떤 지표들일까?

하고 있는 일이 긍정적인 변화를 주는지 매주 어떻게 알 수 있을까?

제품 구조

영상 링크

Github action으로 npm package 배포 자동화하기

배포 자동화를 도입하게 된 계기

workflow file 작성하기

trigger 설정하기

actions build

1. package.json의 버전 업데이트하기

2. npm에 패키지 publish 하기

3. github release에 소스 코드 assets을 등록하기

release assets을 추가하기

마무리

[NPM] Chalk 패키지 살펴보기

살펴보기 전에..

소스 코드

package.json

소스 코드 분석

anti-styles

index.js

styles Object 등록

+ RGB Colors 기능

테스팅

Rsbuild 기반 Tistory-react 프레임워크 개발기

들어가며

프레임워크를 개발하게 된 계기

개발에 들어가기 전, 계획

목표

기술 스택 선정하기

구현 요구사항

Rspress

본격적으로 개발하기 (with. 트러블 슈팅)

pages 하위 폴더에 존재하는 라우팅 하기

children이 포함된 Layout 컴포넌트를 렌더링하기

onclick 이벤트 표시하기

dangerouslySetInnerHTML?

custom html attribute 사용하기

[React Native] FlashList로 리스트의 렌더링 성능 최적화하기

들어가며

FlashList 도입

설치

적용

트러블 슈팅: 레이아웃이 재배치 되는 현상

애니메이션 방식 변경

결과 및 마무리

[React Native] native module을 이용해 android notification 띄우기

들어가며

요구사항

구현

기본 nativeModule 설정

알림 Layout 그리기

Notification Builder 작성하기

notification channel 생성하기

deeplink를 이용해 알림 클릭 시 동작 구현하기

외출 중인 경우, countDown이 종료되었을 때 알림 삭제하기

Native Method 내보내기

React Native에서 모듈 적용하기

결과물

트러블 슈팅

BoradcastReciever를 이용해 intent를 열 수 없는 문제(Android 12+)

foreground에서 알림을 클릭했을 때, 새로운 intent를 실행하여 앱을 덮어쓰는 현상

알림에서 PNG가 표시되지 않는 현상

마무리하며..

참고문서

android notification 공식문서

알림 클릭, pendingIntent 관련

PNG 표시되지 않는 현상 관련

postDelay 관련

[React Native] RN에서 Dynamic island 위젯 만들기

들어가며

Info.plist

파일 수정