Front End Develop

2025 개발자 도구(DevTools) 새로운 기능 6가지

F.E.D — Sun, 23 Mar 2025 17:43:06 +0900

2025년 크롬 개발자 도구(DevTools)는 웹 개발자들에게 더욱 강력한 도구를 제공하며, 디버깅과 최적화를 한층 더 쉽게 만들어 주고 있습니다. 이번 업데이트에서는 특히 성능, 보안, 그리고 사용자 경험 개선에 초점을 맞춘 여러 기능이 추가되었습니다. 아래는 주요 기능과 이를 활용하는 방법을 소개합니다.

1. DOM 크기 최적화 (Optimize DOM Size)

DOM 트리가 너무 크면 페이지 성능이 저하될 수 있습니다. 크롬 DevTools의 새로운 기능인 DOM 크기 최적화(Optimize DOM Size) 기능은 DOM 요소 수와 깊이를 분석하고 성능 병목현상을 일으키는 특정 노드를 바로 찾아 수정할 수 있게 도와줍니다.

사용 방법

성능(Performance) 패널에서 페이지 로드 기록을 시작합니다.
기록이 완료되면 Insights 탭에서 DOM 크기 최적화(Optimize DOM Size) 인사이트를 확인합니다.
문제를 일으키는 DOM 노드가 강조 표시되며, 클릭하면 요소(Elements) 패널로 이동해 직접 수정할 수 있습니다.

2. 3rd Party 필터링

성능 문제를 디버깅할 때, 타사 스크립트가 데이터를 복잡하게 만들 수 있습니다. 이제 서드 파티 흐리게 표시(Dim 3rd Parties) 옵션을 통해 타사 스크립트를 흐리게 표시하거나 숨겨, 1st-party 코드에만 집중할 수 있습니다.

사용 방법

성능(Performance) 패널에서 페이지 로드 기록을 시작합니다.
설정 메뉴에서 서드 파티 흐리게 표시(Dim 3rd Parties) 옵션을 활성화합니다.
타사 스크립트를 제외한 데이터만 확인하며 성능 병목현상을 분석합니다.

3. 개인 정보 보호 및 보안(Privacy and Security) 패널 개선

개인정보 보호가 점점 중요해지는 가운데, 새로운 개인 정보 보호 및 보안(Privacy and Security) 패널은 3rd-party 쿠키 차단 시뮬레이션을 제공합니다.

사용 방법

개발자 도구(DevTools)에서 개인 정보 보호 및 보안(Privacy and Security) 패널을 엽니다.
제어(Controls) 탭에서 서드 파티 쿠키를 일시적으로 제한(Limit Third-Party Cookies) 옵션을 활성화합니다.
페이지를 새로고침하여 쿠키 차단 후의 동작을 테스트하고, 차단된 쿠키 목록을 확인합니다.

4. CPU 쓰로틀링 개선

CPU 쓰로틀링 설정에 낮은 등급 모바일(Low-tier)또는 중간 등급 모바일(Mid-tier Mobile Device) 시뮬레이션 옵션이 추가되었습니다. 이를 통해 실제 사용자 환경에 가까운 성능 테스트가 가능합니다.

사용 방법

개발자 도구(DevTools)의 성능(Performance) 패널에서 설정 아이콘(톱니바퀴)을 클릭합니다.
CPU 쓰로틀링 메뉴에서 낮은 등급 모바일(Low-tier)또는 중간 등급 모바일(Mid-tier Mobile Device) 옵션을 선택합니다.
페이지를 새로고침하여 느린 디바이스 환경에서의 성능 데이터를 분석합니다.

5. AI 기반 퍼포먼스 분석

AI 어시스턴트가 플레임 차트 데이터를 분석해 최적화 제안을 제공합니다. 복잡한 데이터를 해석하고 구체적인 해결책을 제시해 디버깅 시간을 단축시킵니다.

사용 방법

우선 이 설정을 사용하려면 환경 설정을 영어로 변경 해야만 합니다.

성능(Performance) 패널에서 성능 테스트를 실행합니다.
테스트 결과에서 특정 결과 항목을 마우스 우측 마우스 클릭 해서 Ask AI 메뉴를 통해 최적화 제안을 확인합니다.
제안된 작업을 따라 성능 문제를 해결합니다.

6. 스크롤 가능한 영역 표시

요소(Elements) 패널에서 overflow: auto 또는 scroll 속성이 적용된 요소에 스크롤 뱃지가 표시됩니다.

사용 방법

개발자 도구(DevTools)의 요소(Elements) 패널에서 DOM 구조를 확인합니다.
스크롤 가능한 요소 옆에 표시된 뱃지를 클릭하여 해당 영역으로 바로 이동하거나 스타일 속성을 수정합니다.

이번 크롬 DevTools 업데이트는 웹 개발자들에게 디버깅과 최적화를 위한 강력한 도구를 제공하며, 사용자 경험과 성능 개선에 큰 도움을 줍니다. 이러한 기능들을 활용해 더 빠르고 안정적인 웹사이트를 만들어보세요!

더 자세한 영문 이미지는 출처를 참고 해보세요.

출처 : https://www.debugbear.com/blog/favourite-devtools-features-in-2025

Our Favorite DevTools Features of 2025 | DebugBear

Discover the most powerful new developer tools features in Chrome 134 that will help you build faster websites and debug performance issues more effectively.

www.debugbear.com

2024년 12월 3일

F.E.D — Tue, 3 Dec 2024 02:21:29 +0900

2024년이 끝나기전에 2024년을 회상하며..

회고글은 노션에 쓰겠지만, 블로그를 조금씩 다시 쓸 수 있는 시간이 생길 것 같다는 생각이 든다.

아침에 일어나서 저녁이 올 때까지 꽤나 많은 시간이 있겠지만, 그 속에서 시간을 알차게 보내고 잠이 들면 다시 아침이 온다.

2023년에 시작했던 것은 2024년에 마무리가 되고, 2021년에 시작했던 것은 현재 진행중이다.

2015년에 처음 이 직업을 택하고 시작할 때처럼 설레임으로 가득하다.

2019년에 첫 이직을 통해서 많은 것을 느꼈다.

2025년이면 이제 10년차다.

10년이면 강산이 변한다고 하는데, 나는 여전히 2015년에 머물러 있다.

글을 쓰기 위해서 다시 컴퓨터를 어루만지는 것이 여전히 산뜻하다.

HTML5 <details> 태그를 사용해서 Q&A 만들기

F.E.D — Mon, 9 Oct 2023 12:39:24 +0900

IE가 더 이상 서비스하지 않는 브라우저가 되고 나서, 우리는 다양한 HTML5 요소와 CSS를 사용해서 스타일링할 수 있게 되었습니다.

그 중에서 details 요소는 특히, IE에서 전혀 지원하지 않는 요소였는데요.

Can I Use(https://caniuse.com/?search=details)에서 확인해보면 더 이상 걱정하지 않아도 될 정도의 서비스 범위를 가지고 있는 것으로 확인됩니다.

details 요소를 사용해서 자주 사용하는 Q&A 컴포넌트를 만들어보도록 하겠습니다.

Q&A는 주로 아코디언(Accordion)이라는 UI 컴포넌트로 만들게 됩니다.

<section class="accordion">
  <details>
    <summary class="question">Q. 궁금한 것이 있어요.</summary>
    <div class="answer">
      저의 대답은 이렇습니다. 저의 대답은 이렇습니다. <br />
      저의 대답은 이렇습니다. 저의 대답은 이렇습니다. <br />
      저의 대답은 이렇습니다. 저의 대답은 이렇습니다. <br />
    </div>
  </details>
  <details>
    <summary class="question">Q. 궁금한 것이 있어요222.</summary>
    <div class="answer">
      저의 대답은 이렇습니다. 저의 대답은 이렇습니다222. <br />
      저의 대답은 이렇습니다. 저의 대답은 이렇습니다. <br />
      저의 대답은 이렇습니다. 저의 대답은 이렇습니다. <br />
    </div>
    </ul>
  </details>
  <details>
    <summary class="question">Q. 궁금한 것이 있어요333.</summary>
    <div class="answer">
      저의 대답은 이렇습니다. 저의 대답은 이렇습니다333. <br />
      저의 대답은 이렇습니다. 저의 대답은 이렇습니다. <br />
      저의 대답은 이렇습니다. 저의 대답은 이렇습니다. <br />
    </div>
  </details>

</section>

HTML만으로도 블로그 문서에서도 이렇게 표현하실 수 있습니다.

아래의 화살표 있는 텍스트를 각각 클릭 해보세요.

Q. 궁금한 것이 있어요.

저의 대답은 이렇습니다. 저의 대답은 이렇습니다.
저의 대답은 이렇습니다. 저의 대답은 이렇습니다.
저의 대답은 이렇습니다. 저의 대답은 이렇습니다.

Q. 궁금한 것이 있어요222.

저의 대답은 이렇습니다. 저의 대답은 이렇습니다222.
저의 대답은 이렇습니다. 저의 대답은 이렇습니다.
저의 대답은 이렇습니다. 저의 대답은 이렇습니다.

Q. 궁금한 것이 있어요333.

저의 대답은 이렇습니다. 저의 대답은 이렇습니다333.
저의 대답은 이렇습니다. 저의 대답은 이렇습니다.
저의 대답은 이렇습니다. 저의 대답은 이렇습니다.

@charset "utf-8";

:root {
  --left-padding: 35px;
  --arrow-width: 6px;
  --transition-duration: 300ms;
}

.accordion {
  height: 100%;
  padding: 50px 20px;
  color: #fff;
  line-height: 1.5;
}

details {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto 10px;
  background: #c3c3c3;
  border-radius: 10px;
  overflow: hidden;
}

/* 기본 details-marker를 안보이도록 처리 */
details summary::-webkit-details-marker {
  display: block;
}

summary {
  display: block;
  position: relative;
  padding: 15px 15px 15px var(--left-padding);
  background: #222;
  cursor: pointer;
}

summary:before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--left-padding) / 2);
  margin-top: calc(var(--arrow-width) * -1);
  border-width: var(--arrow-width);
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  transform-origin: calc(var(--arrow-width) / 2) 50%;
  transition: var(--transition-duration) transform ease;
}

details[open] > summary:before {
  transform: rotate(90deg);
}

details > .answer {
  padding: 15px var(--left-padding);
  background-color: #333;
}

CSS에서는 기본 HTML details 요소에서 summary::-webkit-details-marker 를 display: none;으로 해서 기존 HTML 네이티브 summary의 marker를 안보이도록 하고 ::before 가상 요소 선택자로 새롭게 만든 화살표를 사용합니다.

각각의 :root 변수는 화살표의 계산식을 조금 더 간편하게 유동적으로 할당할 수 있도록 도와줍니다.

혹시 CSS로 화살표를 만드는 것이 어렵게 느껴진다면 다음 문서를 참고하세요.

https://css-tricks.com/snippets/css/css-triangle/

CSS Triangle | CSS-Tricks

You can make them with a single div. It's nice to have classes for each direction possibility.

css-tricks.com

그리고 details[open]으로 해당 속성이 열리게 되었을 때 화살표를 90deg로 회전(rotate)만 해주면 됩니다.

See the Pen <details> and <summary> with animated arrow (no JS) by 김영민 (@yrbtnzxm-the-selector) on CodePen.

HTML과 CSS만으로도 이렇게 아코디언 UI를 만들 수 있는데요.

JavaScript를 추가해서 부드럽게 컨텐츠 높이만큼 늘어나도록 할 수 있겠는데요.

class QnA {
  constructor($element) {
    this.$element = $element;
    this.$summary = $element.querySelector('.question');
    this.$content = $element.querySelector('.answer');
   
    this.animation = null;  // animation 상태를 초기화
    this.isClosing = false; // 닫힌 상태인지
    this.isExpanding = false; // 열린 상태인지
    // css 변수에서 스타일을 가져오게 됨, 기본적으로 stirng이기 때문에 숫자형으로 변경
    this.CSSVariableTransition = Number(getComputedStyle(document.documentElement) 
    .getPropertyValue('--transition-duration').split('ms')[0]) || 300;
    this.$summary.addEventListener('click', (e) => this.clickEvent(e));
  }

  clickEvent(e) {
    // 브라우저의 기본 동작을 막음
    e.preventDefault();
    /*
     * 만약, $element가 닫혀있거나(isClosing), open 속성이 false라면 oepnEvent로 열기
     * 만약, $element가 열려있거나(isExpanding), open 속성이 true라면 closeEvent로 닫기
     */
    if (this.isClosing || !this.$element.open) {
      this.openEvent();
    } else if (this.isExpanding || this.$element.open) {
      this.closeEvent();
    }
  }

  openEvent() {
    // 유동적으로 height를 조절하면서 부드럽게 열리도록 처리
    this.$element.style.height = `${this.$element.offsetHeight}px`; 
    // open상태를 강제로 true로 변경
    this.$element.open = true;
    // animation을 부여해서 확장하며 열리는 효과를 부여
    window.requestAnimationFrame(() => this.expandEvent());
  }
  
  expandEvent() {
    // isExpanding 상태를 강제로 true로 변경
    this.isExpanding = true;
    // 현재 Height값을 저장
    const currentHeight = `${this.$element.offsetHeight}px`;
    // 현재 열려있는 Height값을 계산
    const expandHeight = `${this.$summary.offsetHeight + this.$content.offsetHeight}px`;
    
    // 이미 애니메이션이 진행중일 때는 취소한다. animation 내장 메서드 cancel 사용
    if (this.animation) {
      this.animation.cancel();
    }
    
    // animate 메서드 사용해서 부드럽게 열리도록 처리
    this.animation = this.$element.animate({
      // 현재 높이, 열려질 높이를 지정
      height: [currentHeight, expandHeight]
    }, {
      // CSS 변수에서 가져온 transition 값 할당
      duration: this.CSSVariableTransition,
      easing: 'ease-out'
    });
    // animation이 끝나게 되면 animation이 끝났다는 메서드 호출
    this.animation.onfinish = () => this.onAnimationFinish(true);
    // animation이 취소 되면 animation이 취소되었으니 isExpanding을 강제로 false로 변경
    this.animation.oncancel = () => this.isExpanding = false;
  }


  closeEvent() {
    this.isClosing = true;
    const currentHeight = `${this.$element.offsetHeight}px`;
    // summary의 높이 만큼 닫히도록 저장
    const closedHeight = `${this.$summary.offsetHeight}px`;
    
    if (this.animation) {
      this.animation.cancel();
    }
    
    this.animation = this.$element.animate({
      height: [currentHeight, closedHeight]
    }, {
      duration: this.CSSVariableTransition,
      easing: 'ease-out'
    });
    
    this.animation.onfinish = () => this.onAnimationFinish(false);
    this.animation.oncancel = () => this.isClosing = false;
  }
  // 애니메이션이 끝나면 초기화
  onAnimationFinish(isOpen) {
    this.$element.open = isOpen;
    this.animation = null;
    this.isClosing = false;
    this.isExpanding = false;
    this.$element.style.height = '';
  }
}

document.querySelectorAll('details').forEach(($element) => {
  new QnA($element);
});

우선, Class 문법을 활용해서 각각의 $element를 정의 해줍니다.($를 붙이는 것은 element를 가리키는 암묵적인 룰입니다.)

각각의 상태를 저장하고, CSS에서 변수를 가져와서 animation 할 때 초의 값으로 지정해줍니다.

혹시 값이 없을 때를 대비하여 300을 || (OR 연산자)를 사용해서 할당 합니다.

$summary 요소를 클릭하게 되면 clickEvent 메서드가 수행되도록 합니다.

각각의 나머지 메서드의 동작방식은 주석으로 걸어두었으니 참고하시길 바랍니다.

그리고 마지막에 애니메이션이 끝나면 요소들의 상태를 초기화 해줍니다.

그리고 details 요소들을 forEach로 순회하며 인스턴스를 생성해줍니다.

See the Pen <details> 과 <summary> 를 사용, JavaScript를 첨가 by 김영민 (@yrbtnzxm-the-selector) on CodePen.

위와 같은 아코디언 UI를 만들어보면서 JavaScript를 더욱 즐겁게 공부합시다.

출처 : https://css-tricks.com/how-to-animate-the-details-element/

React의 미래: Create React App(CRA) 대신 Vite를 사용하자

F.E.D — Sat, 15 Apr 2023 14:08:48 +0900

최근 React 생태계에 몇 가지 중요한 변화가 있었습니다.

Create React App 지원 중단, react.dev 출시, Next.js 및 Remix와 같은 대체 프레임워크의 인기 증가가 포함됩니다.

Create React App 추천 X

우선 Create React App이 추천이 되지 않습니다.

Next.js 또는 Remix 등을 추천하고 있지만 클라이언트 사이드 핸들링만 하는 경우에는 Vite 또는 Parcel을 권유하고 있습니다.

If you’re still not convinced, or your app has unusual constraints not served well by these frameworks and you’d like to roll your own custom setup, we can’t stop you—go for it! Grab react and react-dom from npm, set up your custom build process with a bundler like Vite or Parcel, and add other tools as you need them for routing, static generation or server-side rendering, and more.

https://react.dev/learn/start-a-new-react-project

Start a New React Project – React

The library for web and native user interfaces

react.dev

https://github.com/reactjs/react.dev/pull/5487#issuecomment-1409720741

Replace Create React App recommendation with Vite by t3dotgg · Pull Request #5487 · reactjs/react.dev

Create React App is not a great recommendation to be making, especially for newer developers. As an educator, I run into countless issues w/ new React devs running into unnecessary issues due to th...

github.com

Next.js 및 Remix 또는 Vite와 같은 대체 도구를 사용하는 것이 좋습니다.

# Vite 전역 설치
npm install -g vite

# 프로젝트 만들기
vite create my-react-app --template react
cd my-react-app

# 서버 구동
npm run dev

react.dev 출시

React 팀은 최근 React와 관련 문서를 위한 새로운 홈인 react.dev를 출시했습니다.

https://react.dev/
새 사이트는 이전 React 문서의 업데이트된 버전이지만 많은 새로운 기능과 리소스로 크게 개선되었습니다.
react.dev의 눈에 띄는 기능 중 하나는 풍부한 다이어그램, 일러스트레이션 및 600개 이상의 새로운 대화형 예제입니다.
새로운 리소스를 통해 개발자는 시각화된 자료로 쉽게 예제를 구현할 수 있을 것 같습니다.

특히, React를 배우기 시작한 새로운 개발자에게 도움이 많이 될 것 같습니다.

hooks 사용을 특히 강조를 많이하고 있습니다.

React

The library for web and native user interfaces

react.dev

Next.js 및 Remix와 같은 대체 프레임워크의 인기 증가

Next.js와 Remix는 React 생태계에서 인기를 얻고 있는 프레임워크들 입니다.

Next.js는 빠르고, SEO 친화적인 웹 애플리케이션을 쉽게 구축할 수 있게 해주는 React용 서버 측 렌더링(SSR) 프레임워크입니다.
여기에는 자동 코드 분할, 최적화된 이미지 로드, TypeScript 및 CSS 모듈에 대한 기본 제공 지원과 같은 기능이 포함됩니다.

Next.js를 사용하여 개발자는 빠르게 로드되고 뛰어난 사용자 경험을 제공하는 서버 렌더링 React 애플리케이션을 쉽게 만들 수 있습니다.

https://nextjs.org/

Next.js by Vercel - The React Framework for the Web

Used by some of the world's largest companies, Next.js enables you to create full-stack Web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds.

nextjs.org

# Next.js로 프로젝트 만들기
npx create-next-app@latest my-react-app
cd my-react-app

# 서버 구동
npm run dev

Remix는 React 생태계에서 인기를 얻고 있는 또 다른 프레임워크입니다.

Remix는 더 나은 개발자 경험(DX)에 초점을 맞춘 웹 애플리케이션 구축에 대한 새로운 접근 방식입니다.
내장된 linting, 고급 라우팅 및 서버리스 기능과 같은 기능이 포함되어 있어 고품질 React 애플리케이션을 빠르고 쉽게 구축할 수 있습니다.

Remix에는 또한 복잡한 프로젝트를 쉽게 구성하고 관리할 수 있는 고유한 파일 구조가 있습니다.

https://remix.run/

Remix - Build Better Websites

Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.

remix.run

# Remix로 새 프로젝트 만들기
npx create-remix@latest my-react-app
cd my-react-app

# 서버 구동
npm run dev

자세한 내용들은 공식 문서를 참고 해보세요 : )

fin.

출처 : https://blog.bitsrc.io/the-future-of-react-why-create-react-app-is-deprecated-and-hooks-are-the-future-83e8a087a325

Typescript 5.0 업데이트에서 달라진 것들 - Decorators

F.E.D — Sun, 9 Apr 2023 16:13:22 +0900

모든 링크들은 원문을 가리킵니다.

Decorators

데코레이터는 클래스와 멤버를 재사용 가능한 방식으로 사용자 정의할 수 있게 해주는 곧 출시될 ECMAScript 기능입니다.

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }

    greet() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}

const p = new Person("Ron");
p.greet();

greet은 매우 간단하지만 훨씬 더 복잡한 것이라고 상상해 봅시다. 비동기 로직을 수행하고 재귀 함수가 있고, 부작용이 있을 수 있다고 생각 해봅시다. 그런 상황에서 디버깅을 위해서 console.log()를 사용합니다.

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }

    greet() {
        console.log("LOG: Entering method.");

        console.log(`Hello, my name is ${this.name}.`);

        console.log("LOG: Exiting method.")
    }
}

위와 같은 부분들을 데코레이터가 대신 해줄 수 있습니다.

logMethod라는 함수를 작성할 수 있습니다.

function loggedMethod(originalMethod: any, context: ClassMethodDecoratorContext) {
    const methodName = String(context.name);

    function replacementMethod(this: any, ...args: any[]) {
        console.log(`LOG: Entering method '${methodName}'.`)
        const result = originalMethod.call(this, ...args);
        console.log(`LOG: Exiting method '${methodName}'.`)
        return result;
    }

    return replacementMethod;
}

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }

    @loggedMethod
    greet() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}

const p = new Person("Ron");
p.greet();

// Output:
//
//   LOG: Entering method.
//   Hello, my name is Ron.
//   LOG: Exiting method.

TypeScript는 메서드 데코레이터가 사용하는 컨텍스트 개체를 모델링하는 ClassMethodDecoratorContext라는 유형을 제공합니다.

또한, addInitializer를 사용하여 생성자에서 바인딩을 호출하는 데코레이터를 작성할 수 있습니다.

function bound(originalMethod: any, context: ClassMethodDecoratorContext) {
    const methodName = context.name;
    if (context.private) {
        throw new Error(`'bound' cannot decorate private properties like ${methodName as string}.`);
    }
    context.addInitializer(function () {
        this[methodName] = this[methodName].bind(this);
    });
}

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }

    @bound
    @loggedMethod
    greet() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}

const p = new Person("Ron");
const greet = p.greet;

// Works!
greet();

@bound 및 @loggedMethod라는 2개의 데코레이터를 사용 했습니다.

실행 순서는 "역순" 입니다.

또한, logMethod가 데코레이터를 반환하도록 하고 메시지를 기록하는 방법을 사용자 정의할 수 있습니다.

function loggedMethod(headMessage = "LOG:") {
    return function actualDecorator(originalMethod: any, context: ClassMethodDecoratorContext) {
        const methodName = String(context.name);
        function replacementMethod(this: any, ...args: any[]) {
            console.log(`${headMessage} Entering method '${methodName}'.`)
            const result = originalMethod.call(this, ...args);
            console.log(`${headMessage} Exiting method '${methodName}'.`)
            return result;
        }
        return replacementMethod;
    }
}

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }

    @loggedMethod("")
    greet() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}

const p = new Person("Ron");
p.greet();

// Output:
//
//    Entering method 'greet'.
//   Hello, my name is Ron.
//    Exiting method 'greet'.

experimentalDecorators는 당분간 계속 존재할 것입니다.

그러나 플래그가 없으면 데코레이터는 이제 모든 새 코드에 유효한 구문이 됩니다.

export 키워드 앞에 데코레이터를 추가할 수 있습니다.

기본값 뒤에도 데코레이터를 배치할 수 있습니다.

유일하게 안되는 것은 혼합 허용은 되지 않는다는 점입니다.

//  allowed
@register export default class Foo {
    // ...
}

//  also allowed
export default @register class Bar {
    // ...
}

//  error - before *and* after is not allowed
@before export @after class Bar {
    // ...
}

위의 loggingMethod 및 바인딩된 데코레이터 예제는 의도적으로 단순하며 유형에 대한 많은 세부 정보를 생략합니다.

입력 데코레이터는 상당히 복잡할 수 있습니다. 예를 들어, 위의 logMethod의 올바른 유형 버전은 다음과 같습니다.

function loggedMethod<This, Args extends any[], Return>(
    target: (this: This, ...args: Args) => Return,
    context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>
) {
    const methodName = String(context.name);

    function replacementMethod(this: This, ...args: Args): Return {
        console.log(`LOG: Entering method '${methodName}'.`)
        const result = target.call(this, ...args);
        console.log(`LOG: Exiting method '${methodName}'.`)
        return result;
    }

    return replacementMethod;
}

This, Args 및 Return 유형 매개변수를 사용하여 this 유형, 매개변수 및 원래 메서드의 반환 유형을 별도로 모델링해야 했습니다.

데코레이터 함수가 정확히 얼마나 복잡하게 정의되어 있는지는 보장하려는 항목에 따라 다릅니다.

데코레이터는 작성된 것보다 더 많이 사용되므로 일반적으로 타이핑이 잘 된 버전이 바람직하지만 가독성과 상쇄되므로 적절하게 타협해서 작업 하세요.

다음 시간에는 const type parameters에 대해서 알아보도록 하겠습니다.

출처 : https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/

Announcing TypeScript 5.0 - TypeScript

Today we’re excited to announce the release of TypeScript 5.0! This release brings many new features, while aiming to make TypeScript smaller, simpler, and faster. We’ve implemented the new decorators standard, added functionality to better support ESM

devblogs.microsoft.com

2023 17가지 UX/UI 트렌드

F.E.D — Mon, 6 Mar 2023 01:08:02 +0900

2022년에도 많은 일들이 있었습니다.

2023년에도 UX/UI에 있어서 끊임없는 변화는 당연합니다.

UX 디자인의 좋은 예를 따르고 복제하는 것이 필수적인 상황입니다.

2023년 17가지 상위 UX/UI 트렌드와 새로운 트렌드를 확인해야 하는 이유를 살펴보시죠 : )

1. 다크모드

올 해도 변함없이, 다크모드는 사랑받고 있습니다.

외관은 우아하고 세련되며 현대적입니다.

스마트폰과 노트북으로 더 많은 시간을 보내면서 다크 모드는 사용자 경험에서 중요한 역할을 합니다.

다크모드의 아름다움 외의 장점들에 대해서 살펴보시죠.

장치가 OLED 또는 AMOLED 화면을 사용하는 경우에는 배터리가 절약 됩니다.
텍스트 가독성 측면에서 좋습니다.
밤에 장치를 사용하는 동안 눈의 피로를 줄일 수 있습니다.
화면 눈부심 및 블루라이트를 최소화 합니다.

2. Neumorphism(뉴모피즘)

스큐어모피즘(Skeuomorphism)은 대상을 원래 그대로의 모습으로 사실적으로 표현하는 기법을 말합니다.

그 스큐어모피즘과 new(새로운)의 합성어로 Neumorphism이 탄생 했습니다.

스큐어모피즘 스타일의 아이콘과 뉴모피즘 스타일의 아이콘을 비교 해보세요.

매우 사실적인 스큐어모피즘

이러한 사실적인 부분들을 보완해서 단순화 시키고 플랫, 미니멀과 같은 수식어들이 붙여진 뉴모피즘 아이콘들을 보시죠.

뉴모피즘의 UI는 우아합니다.

부드러운 느낌의 UI 요소는 매우 편안합니다.

디자인 측면에서 아름답고 미래 지향적입니다.

따라서 2023년에는 Neumorphic UI가 더

많이 구현되는 것을 볼 수 있습니다.

3. Animations

디자이너는 UI 애니메이션을 활용하여 정적 그래픽보다 흐름을 훨씬 더 잘 안내하여 사용자 경험을 향상시킬 수 있습니다.

2023년에는 UI와 제품 프로모션 모두에서 점점 더 많은 애니메이션이 등장할 것입니다.

모바일 앱이 모달과 배너를 사용하지 않고 사용자에게 메시지를 전달하는 몰입형 방식입니다.

출처 : https://dribbble.com/shots/10865609-Travel-App-Concept

4. 진보된 마이크로 인터렉션

좋아요, 리트윗 등 제스처 및 터치리스 컨트롤, IPhone 14 시리즈 이후의 다이내믹 아일랜드 등 고급 마이크로 인터렉션들이 트렌드가 되고 있고, 이는 2023년에 더 성장하고 다양해질 예정입니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

5. 굵은 타이포그래피

굵은 글꼴은 사용자의 관심을 끄는 가장 쉬운 방법 중 하나입니다.

6. 부드러운 그라디언트

Microsoft의 디자인 시스템과 macOS Big Sur에서 Apple의 새로운 디자인 접근 방식은 그래디언트 기반 디자인의 두 가지 큰 장점입니다.

7. 3D는 어디에나 있다

3D 디자인은 지난 몇 년 동안 사용자를 끌어들였습니다.

메모리 소비에 대한 몇 가지 단점에도 불구하고 3D는 모바일 및 웹 응용 프로그램 모두에서 추세입니다.

https://virtual.bbcmic.ro/?disc1=elite.ssd&autoboot

8. 빈 페이지나 에러 페이지의 illustration

오류나 에러 페이지의 끔찍함과 무서움을 귀엽고 유머러스하게 풀어내기 위한 한 방법 입니다.

출처 : https://dribbble.com/shots/6606110-404-Page-Not-Found

9. 디자인 시스템

Material, Ant, Fluent 등 다양한 디자인 시스템들이 존재합니다.

점점 더 많은 회사들이 통합 디자인 경험과 디자인 시스템 구축에 대해서 진지하게 생각 중입니다.

https://daisyui.com/

10. 원격 및 가상 공간의 협업에 대한 UX

원격 및 가상 공간의 협업이 대두되던 2020년대에서 펜데믹의 영향으로 기하급수적으로 확산된 양상입니다.

다시금 줄어들고는 있지만, 이 트렌드는 스테디한 상태가 되었습니다.

11. 증강 및 가상현실

AR/VR 내에서 다양하고 흥미진진한 경험을 혁신하고 창출할 수 있습니다.

출처 : https://www.roadtovr.com/

12. 음성 인터렉션과 터치하지 않는 인터렉션

팬데믹 이후 많은 사람들이 터치리스를 통한 인터렉션을 원합니다.

화장실을 이용할 때도 손을 대지 않고 모든 것을 사용할 수 있게끔 되었습니다.

포스트 팬데믹 이후에도 이러한 트렌드는 계속되리라 생각됩니다.

13. 사용자 온보딩 경험 향상

사용자가 직전에 이미 로그인 한 부분들에 대해서 바로 사용할 수 있고, 수백만명이 화상회의 및 원격 작업을 함에 있어서 좋은 온보딩의 힘은 갈수록 강해지는 중입니다.

14. 원활한 인증

점점 password를 일일이 다 타이핑하기 귀찮아 합니다.

생체 인식 로그인과 이미 로그인 된 상황 등에 집중하고 수요가 계속되고 있습니다.

출처 : https://www.macrumors.com/

15. UX 작성 및 마이크로 카피

브랜드를 염두에 두고 작성된 특정 마이크로카피는 친근한 경험을 구축하는 데 큰 도움이 될 수 있습니다.

UX 작성 및 마이크로카피는 전체 UX 디자인에서 중요한 역할을 하며 올해 그 기반을 유지할 것입니다.

16. 개인화된 경험

예를 들어, 전자 상거래 사이트에서 개인화된 구매 권장 사항은 '필요하지 않습니다'라는 구매자 저항을 빠르게 극복합니다.

AI와 기계 학습의 부상으로 소프트웨어 제품에서 보다 개인화된 경험을 보게 될 것입니다.

17. 슈퍼앱의 부상

야놀자, 오늘의 집과 같은 소위 슈퍼 앱은 아시아 국가에서 엄청난 인기를 얻고 있습니다.

기존에는 숙박업, 인테리어에만 집중하다가 현재는 관련된 모든 사업들을 확장하여 다 진행할 수 있도록 업그레이드 되었습니다.

왜 UX/UI 트렌드를 체크하는가?

새로운 트렌드가 지속적으로 등장하고 성장하고 있습니다.

UX/UI 전문가는 최신 트렌드에 대한 정보를 계속해서 흡수하고 이를 활용해야 합니다.

개편 된 디자인 및 웹사이트는 사용자에게 신선한 느낌을 줍니다. 또한 제품에 대한 지속성과 회사의 신뢰성에 대한 증명을 합니다.

따라서 지속적으로 animation과 디자인 등 최신 디자인 트렌드를 계속해서 섭취 해보세요 : )

fin.

출처 : https://userguiding.com/blog/ux-ui-trends/

17 UX/UI Trends for 2023

2022 has been a roller coaster ride. So many things happened that year and happened fast. With the rise of virtual and remote working culture, UX/UI trends have seen a drastic change throughout the year.

userguiding.com

Docker에서 ElasticSearch로 Full-Text 검색하기(4)

F.E.D — Sun, 5 Mar 2023 19:39:06 +0900

Docker에서 ElasticSearch로 Full-Text 검색하기(1)

Docker에서 ElasticSearch로 Full-Text 검색하기(2)

Docker에서 ElasticSearch로 Full-Text 검색하기(3)

지난 시간에 이어서, 마지막으로 elasticSearch로 작성 된 App을 배포하고 사용해보도록 하겠습니다.

App을 배포하기 전에 express로 클라이언트 route를 구성해서 browser에서 검색 결과를 바로 확인할 수 있도록 하고, 불필요한 코드를 정리 해보겠습니다.

express를 설치해주세요.

npm i express

const express = require("express");
const app = express();
const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log("server connected");
});

app.get("/search", async (req, res) => {
  const query = req.query.q;

  try {
    const results = await searchQuery(query);
    res.json(results);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: "Internal sever error" });
  }
});

const { Client } = require("elasticsearch");

const client = new Client({
  host: "http://host.docker.internal:9200",
  log: "trace",
});

const searchQuery = async function (query) {
  const { hits } = await client.search({
    index: "indexing",
    body: {
      query: {
        fuzzy: {
          content: {
            value: query,
            fuzziness: "AUTO",
          },
        },
      },
    },
  });
  return hits.hits ?? [];
};

index.js 파일의 상단에 express를 호출하고, 3000 포트로 띄우는 코드를 삽입했습니다.

route를 /search로 하여 /search?q=elk 와 같이 검색 했을 시에 searchQuery함수를 실행하여, 해당 fuzzy 검색 결과의 hits를 반환하도록 했습니다.

만약에 검색 결과가 없을 시에는 빈 배열이 나오도록 해두었습니다.

docker에 배포하기 위해서 host의 주소를 http://localhost:9200가 아닌 http://host.docker.internal:9200로 해줘야 합니다.

{
  "dependencies": {
    "elasticsearch": "^16.7.3",
    "express": "^4.18.2"
  },
  "scripts": {
    "start": "node index.js"
  }
}

최종 package.json파일 입니다.

scripts는 하단 npm start가 실행될 수 있도록 설정 해두었습니다.

Docker에 Node.js 앱을 배포하려면 먼저 앱의 Docker 이미지를 빌드해야 합니다.

이는 필요한 구성을 지정하는 앱 디렉터리의 루트에 Dockerfile을 생성하여 수행할 수 있습니다.

node app의 root에 "Dockerfile"을 생성하세요.

# Use the official Node.js image as the base image
FROM node:latest

# Set the working directory to /app
WORKDIR /app

# Copy the package.json and package-lock.json files to the container
COPY package*.json ./

# Install the app dependencies
RUN npm install

# Copy the rest of the app files to the container
COPY . .

# Set the environment variables for ElasticSearch
ENV ELASTICSEARCH_HOST=elasticsearch
ENV ELASTICSEARCH_PORT=9200

# Expose the port that the app will run on
EXPOSE 3000

# Start the app
CMD ["npm", "start"]

위와 같이 작성한 코드의 설명은 다음과 같습니다.

공식 Node.js 이미지를 기본 이미지로 지정
작업 디렉토리를 /app으로 지정
package.json 및 package.lock.json 파일을 컨테이너에 복사
앱 종속성을 설치하는 명령어
나머지 앱 파일들도 컨테이너에 복사
호스트 및 포트에 대한 환경 변수 설정
포트 설정
노드 앱 실행

Docker 이미지를 빌드하려면 다음 명령어를 실행해보세요.

docker build -t docker-elk

docker-elk는 제가 생성한 node 앱의 폴더 명입니다.

docker-elk로 Docker image가 생성됩니다.

이제 배포를 해보시죠.

ocker run -p 3000:3000 --name docker-elk --link elasticsearch:elasticsearch docker-elk

배포 하고 난 뒤에 localhost:3000/search?q=elk으로 접속하면 이전에 indexing으로 데이터 생성해두었던 것들이 검색되어 화면에 노출될 것입니다.

그 외에도 elasticsearch에서 데이터들을 확인할 수 있는 주소들이 있습니다.

http://localhost:9200/_cat/indices

http://localhost:9200/indexing(먼저 indexing으로 데이터를 생성해두었던 부분)

http://localhost:9200/_cluster/health?pretty=true(클러스터의 헬스체크)

http://localhost:9200/indexing/_doc/_search(sarch시에 데이터 결과)

결과 코드는 해당 링크에 첨부 되어있습니다.

https://github.com/oinochoe/docker_elk

GitHub - oinochoe/docker_elk: docker_elk_example

docker_elk_example. Contribute to oinochoe/docker_elk development by creating an account on GitHub.

github.com

여기까지 입니다. 더 궁금한 사항은 언제든지 댓글로 남겨주세요 : )

fin.

출처 : https://voskan.host/2023/02/18/full-text-search-with-node-js-and-elasticsearch-on-docker/?mibextid=S66gvF

Docker에서 ElasticSearch로 Full-Text 검색하기(3)

F.E.D — Sun, 5 Mar 2023 17:44:01 +0900

Docker에서 ElasticSearch로 Full-Text 검색하기(1)

Docker에서 ElasticSearch로 Full-Text 검색하기(2)

지난 시간에 이어서, 이번에는 elasticsearch의 검색 결과를 향상 시켜보도록 하겠습니다.

elasticsearch는 검색 결과를 개선하기 위한 다양한 기능들을 제공합니다.

Full-text search : ElasticSearch는 복잡한 검색 쿼리를 처리하고 관련성이 높은 결과를 반환할 수 있는 강력한 전체 텍스트 검색 엔진을 제공합니다.
Fuzzy search : 퍼지 검색을 사용하면 용어 자체가 정확히 일치하지 않더라도 쿼리 용어와 유사한 용어를 검색할 수 있습니다.
Autocomplete : ElasticSearch를 사용하여 자동 완성 기능을 구현하면 사용자가 원하는 콘텐츠를 빠르게 찾을 수 있습니다.
Synonyms : ElasticSearch는 동의어 사용을 지원하여 원래 쿼리에 포함되지 않았을 수 있는 관련 용어가 검색 결과에 포함되도록 할 수 있습니다.
Highlighting : ElasticSearch는 검색 결과를 강조 표시하는 데 사용할 수 있으므로 사용자가 가장 관련성이 높은 콘텐츠를 빠르고 쉽게 식별할 수 있습니다.

Fuzzy Search와 Autocomplete 적용 하기

elasticsearch의 가장 유용한 기능 중 하나인 Fuzzy 검색 및 자동완성을 구현 해봅시다.

// Docker에서 ElasticSearch로 Full-Text 검색하기(2)에서의 기존 코드
const searchQuery = async function (query) {
  const { body } = await client.search({
    index: "indexing",
    body: {
      query: {
        match: {
          content: query,
        },
      },
    },
  });
  return body.hits.hits;
};

// 변경
const searchQuery = async function (query) {
  const { body } = await client.search({
    index: "indexing",
    body: {
      query: {
      	fuzzy: {
            content: {
              value: query,
              fuzziness: 'AUTO'
            },
        }
      },
    },
  });
  return body.hits.hits;
};

elasticsearch에서 자동 완성을 구현하려면 "completion"을 사용할 수 있습니다.

사용자가 입력할 때마다 검색어에 대한 실시간 제안을 제공할 수 있습니다.

const suggestData = async function (query) {
  const { body } = await client.search({
    index: "indexing",
    body: {
      suggest: {
        suggest_title: {
          prefix: query,
          completion: {
            field: "title.suggest",
          },
        },
      },
    },
  });

  return body.suggest.suggest_title[0].options.map((option) => option.text);
};

suggestData("elk")
  .then((results) => console.log(results))
  .catch((error) => console.error(error));

위와 같이 검색 결과를 자동완성해서 보여줄 수도 있습니다.

다음 시간에는 마지막으로 Docker에 해당 APP을 배포 해보도록 하겠습니다.

출처 : https://voskan.host/2023/02/18/full-text-search-with-node-js-and-elasticsearch-on-docker/?mibextid=S66gvF

Docker에서 ElasticSearch로 Full-Text 검색하기(2)

F.E.D — Sun, 5 Mar 2023 17:12:42 +0900

Docker에서 ElasticSearch로 Full-Text 검색하기(1)

지난 시간에 이어서, 이번에는 elasticsearch를 직접 사용해서 Full-Text 검색을 수행 해보도록 하겠습니다.

npm i elasticsearch
또는
yarn add elasticsearch

현재 Docker 컨테이너로 띄워져 있는 ealsticsearch에 연결 해봅시다.

const { Client } = require("elasticsearch");

const client = new Client({
  host: "http://localhost:9200",
  log: "trace",
});

위와 같이 작성하면 elasticsearch의 새 인스턴스가 생성되고 호스트와 포트가 지정됩니다.

디버깅에 도움이 되도록 로그 수준을 trace로 지정 했습니다.

다음으로, 데이터를 인덱싱하고 Full-text 검색한 결과를 로그로 나타내볼 수 있는 함수를 생성합니다.

const indexingData = async function (index, body) {
  const { body: response } = await client.index({
    index: index,
    body: body,
  });
  return response;
};

indexingData("indexing", {
  title: "Full-text 검색",
  content: "elk 검색 결과에 대해서..",
})
  .then((response) => console.log(response))
  .catch((error) => console.error(error));

다음으로, 검색 쿼리를 생성 해봅니다.

const searchQuery = async function (query) {
  const { body } = await client.search({
    index: "indexing",
    body: {
      query: {
        match: {
          content: query,
        },
      },
    },
  });
  return body.hits.hits;
};
searchQuery("Searching with query")
  .then((results) => console.log(results))
  .catch((error) => console.error(error));

이렇게 하면, Searching with query를 포함하는 Full-Text 검색을 수행 합니다.

다음 장에서는 elasticsearch의 검색 결과를 향상 시키는 작업을 해볼 예정입니다 : )

출처 : https://voskan.host/2023/02/18/full-text-search-with-node-js-and-elasticsearch-on-docker/?mibextid=S66gvF

Docker에서 ElasticSearch로 Full-Text 검색하기(1)

F.E.D — Sun, 5 Mar 2023 16:56:32 +0900

데이터가 중요한 세상에서 데이터를 효과적으로 검색하고 분석하는 능력은 비즈니스 모델에서 매우 중요한 요소가 되었습니다.

Full-Text 검색은 사용자가 부분만 입력해도 전체 검색 결과를 낼 수 있는 기술입니다.

Docker에서 Node.js 및 ElasticSearch로 Full-Text 검색을 사용하는 방법을 살펴 보도록 하겠습니다 : )

Full-Text란?

Full-Text란 매우 방대한 양의 문서에서 텍스트를 검색하는 데 사용되는 방법입니다.

구글과 같은 검색 엔진은 텍스트를 분석한 다음에 개별 용어와 단어로 인덱싱을 하고 사용자의 검색 쿼리에 따라서 인덱스를 통해 가장 관련성이 높은 문서를 결과로 보여줍니다.

ElasticSearch란?

ElasticSearch는 매우 수준 높은 텍스트 검색을 제공하는 분산 검색 엔진입니다.

데이터 집계, 자동완성 및 퍼지 검색과 같은 기능을 제공합니다.

Docker를 사용하는 이유?

많은 마이크로 서비스들이 만들어지고 있습니다.

Docker는 개발자가 컨테이너에서 애플리케이션을 생성, 배포, 실행을 할 수 있는 오픈 소스 플랫폼입니다.

해당 컨테이너를 사용하면 종속성을 가볍고 이식 가능하도록 만들 수 있습니다.

마이크로 서비스에서 필수 사항 중에 하나는 이식 가능성일 수 있겠지요 : )

직접적으로 어떤 장점들이 있는지 보면 다음과 같습니다.

독립성(Isolation) : Docker 컨테이너는 애플리케이션과 해당 종속성을 기본 인프라에서 분리하여 애플리케이션이 다양한 환경에서 일관되게 실행되도록 합니다.
휴대성(Portability) : Docker 컨테이너는 개발자의 노트북에서 프로덕션 서버로와 같이 서로 다른 환경 간에 쉽게 이동할 수 있으므로 애플리케이션을 쉽게 배포할 수 있습니다.
효율성(Efficiency) : Docker 컨테이너는 가볍고 기존 가상 머신에 비해 리소스를 적게 사용하므로 애플리케이션을 배포하고 실행하는 데 더 효율적입니다.
유연성(Flexibility) : Docker 컨테이너는 애플리케이션의 변화하는 요구 사항을 충족하기 위해 쉽게 확장 또는 축소할 수 있습니다.

Docker 컨테이너는 위와 같이 코드, 런타임, 시스템 도구, 라이브러리 및 설정을 포함하여 애플리케이션을 실행하는 데 필요한 모든 것을 포함하는 경량의 독립형 실행 가능 소프트웨어 패키지입니다.

각 컨테이너는 자체 환경에서 격리되고 실행되므로 애플리케이션과 해당 종속성이 기본 인프라에 대한 변경 사항의 영향을 받지 않도록 합니다.

따라서, Docker를 사용하여 ElasticSearch를 설정하면 다양한 시스템 및 배포 환경에서 일관된 개발 환경을 쉽게 만들 수 있습니다.

Docker에 ElasticSearch 설치하기

https://docs.docker.com/desktop/

Docker Desktop

docs.docker.com

도커를 먼저 설치해주세요~ 환경에 따라서 Mac에서도 intel버전과 silicon으로 선택하는 방법으로 나뉩니다.

그 다음으로, 이미지를 다운로드 해주세요.

docker pull docker.elastic.co/elasticsearch/elasticsearch:7.17.4

마지막 버전은 바꾸셔도 됩니다.

설치 되어있는지 확인은 다음 명령어로 해보세요.

docker images

이제 elasticsearch용 Docker 컨테이너를 만들고 실행시켜 보세요.

docker run -e "discovery.type=single-node" --name elasticsearch -p 9200:9200 -p 9300:9300  docker.elastic.co/elasticsearch/elasticsearch:7.17.4

여기서 포트 9200은 elasticsearch의 REST API를 위해서 사용되고, 포트 9300은 노드 간의 통신에 사용 됩니다.

올바르게 동작하는지 다음 명령어로 확인하실 수 있어요.

docker ps

또는
http://localhost:9200/
에 접속

위 명령어는 현재 실행중인 Docker 컨테이너를 나열 해줍니다.

이제, Node 서버를 통해서 검색 수행하는 부분을 다음 시간에 이어서 해보도록 하겠습니다 : )

출처 : https://voskan.host/2023/02/18/full-text-search-with-node-js-and-elasticsearch-on-docker/?mibextid=S66gvF