JIGGAG

2월 한달동안 로그

2025년 4월 17일

1인 개발을 이제 시작하시려는 분들에게 드리고 싶은 조언

  • 수익의 크기와 상관없이, 작더라도 하나의 서비스를 끝까지 완성해서... 내가 만든 서비스를 누군가 실제로 필요로 하고 사용해주는 그 느낌은 정말 특별한 경험이 될 것입니다.
  • 너무 큰 목표를 처음부터 잡게 되면 당연히 시작이 두렵고, 생각만으로도 숨이 막히면서 힘들어지기 때문에 앞으로 나아가는 발걸음 자체가 무거워집니다.
  • 사이드 프로젝트도 항상 그러하지 않을까
  • 사이드로 내려놓은 사이드 프로젝트

[번역] 리액트에서 INP를 효과적으로 최적화하는 5가지 팁

  • 항상 최적화를 한다고 하는데 눈 비비고 다시 보면 문제가 항상 발견 되는 신기한 세상

  • 반응성을 최적화한다라는 목표를 가지고 있다

  • 화면에 반응해야하는 DOM 자체를 최소화한다

    • DOM 자체가 작다면 연산이 필요할때 절대적인 수치가 작아진다
    • 그렇다면 한번에 유지되어야하는 DOM을 줄여서 연산을 줄여볼 수 있겠다

  • 그 예시로 한번에 화면에 보여지는 것을 최소화 하는 것인데

    • 화면 밖에 미리 그려두는 요소를 최대한 지연시키는 방법
    • 그리고 불필요한 뷰를 그리지 않는 것으로 뷰 + 뷰 + 뷰 조합 대신 CSS 로 그리는 이미지를 예시로 들었다
    // DOM 크기를 낭비하는 아주 전형적인 예시 🙈
<StarRating>
  <SVGStar />
  <SVGStar />
  <SVGStar />
  <SVGStar />
  <SVGStar />
</StarRating>

  • 화면 밖의 요소를 지연시키는 방법 외에 지금 노출되어야하는 화면 구성에서도 중요도에 따라 우선 순위를 줄 수 있다

    • 화면이 노출된다고 해도 사용자가 모든 컴포넌트를 한번에 다 보지는 못한다
    • 그 화면에서 가장 중요하다고 생각되는 부분을 우선하고
    • 사용자를 집중시키는 방법

  • 화면이 완료되지 않았음에도 useEffect는 호출될 수 있다는 문제가 존재한다

    • 사용자는 화면이 그려지기 전에 무언가 요청할 수 있으며
    • 이때 호출되는 것들은 화면을 더 지연시킬 수 있다
    • 렌더링이 완료된 이후 실행되기를 기대하는 경우 이슈에서 이야기한 useDeferredEffect 로 지연시키는데

  • 모든 상황에 어려움이 존재하는데 DOM 자체를 작게 구성하는 것이 최선일까 🤔

[번역] 레고 인터페이스 패널로 알아보는 UX

  • 사용자 인터페이스가 얼마나 중요한가
    • 서로 다른 기능을 어떻게 쉽게 구분할 수 있을지
    • 수많은 기능을 어떻게 구성해야 헷갈리지 않고 이해할 수 있을지
  • 자동차 스피드 모드 버튼이 엔진 버튼과 바로 옆에 위치하고 있다면
    • 운전 하며 시야를 앞에 그대로 유지한채 스피드 모드로 전환하고자 했을때
    • 잘못해서 엔진을 꺼버린다면?
  • 이러한 문제들은 좋은 인터페이스를 구현하는 방법으로도 해결할 수 있다
    • 항상 시야를 두고 있지 않는 경우 촉각이나 모양, 방향을 다르게 동작하도록 하여 구분한다던지
    • 같은 모양이나 동작이더라도 위치를 분리하여 둔다던지

(번역) Electron에 대해 사람들이 잘못 알고 있는 것들

  • 데탑앱에 왜 Electron인걸까
    • 이미 웹뷰가 있다 그럼에도 왜 크로미움의 일부를 번들링하는 수고를 감수하는 걸까요?
  • 네이티브 코드와 결합할 수 있다
    • Electron의 진정한 강점은 UI를 위한 HTML과 원하는 만큼의 네이티브 코드를 결합할 수 있다는 점입니다.
    • 네이티브 UI 컴포넌트만을 사용하여 구현할 수 있지만 네이티브, 웹앱 모두 각각 장점이 있다
©Jiggag, Built with Gatsby