📱 Webview

<blockquote><p>웹뷰에서 마주하는 여러 팁을 공유합니다.</p></blockquote><p>웹뷰를 구현하다보면 아래와 같은 화면을 자주 마주하게 됩니다.</p><p>아래 사진은 토스에서 가져왔습니다.</p><img src="https://image.until.blog/morethanmin/article/1719587839236" alt="until-680"><p>이때 하단에 항상 위치하고 있는 버튼을 보통 CTA(Click-To-Action) 버튼이라고 부르는데요. 이러한 버튼은 일반적으로 컨텐츠 위에 위치하고 있어야하기에 <code spellcheck="false">position:fixed</code>로 구현하면 됩니다.</p><p>간단한 것 같지만 한가지 고려 해야할 점이 있습니다. 컨텐츠 영역에서 특정한 높이를 차지하고 있지 않기에 뒤에 컨텐츠를 가리게 된다는 점입니다.</p><img src="https://image.until.blog/morethanmin/article/1719588105264" alt="until-681"><p>그럼 어떻게 하면 뒤 컨텐츠 영역을 가리지 않고 CTA 버튼을 만들 수 있을까요?</p><p>가장 단순한 방법으로는 최하단에 높이를 차지하는 요소를 두면 됩니다.</p><pre spellcheck="false"><code class="language-typescript">const Example = () =&gt; {
  return (
    &lt;div&gt;
      content
      &lt;Footer /&gt;
      &lt;div style={{ height: 60 }} /&gt;
      {/* 내부적으로 60px의 높이를 가진 fixed element를 렌더하고 있음*/}
      &lt;CTAButton /&gt;
    &lt;/div&gt;
  )
}

export default Example</code></pre><p>위와 같은 방식은 잘 동작하겠지만, 아래와 같은 문제점들을 마주할 수 있습니다.</p><p>바로 버튼의 높이가 동적으로 바뀌는 것에 대응할 수 없다는 것입니다.</p><p>이를 해결하기 위해서는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver"><strong>ResizeObserver </strong></a>라는 API를 사용하면 됩니다.</p><p>해당API를 사용하면 요소의 사이즈 변화를 감지하여 해당 높이를 가져올 수 있고, 이를 spacer에 주입해줄 수 있습니다.</p><pre spellcheck="false"><code class="language-typescript">const Example = () =&gt; {
  const targetRef = useRef&lt;HTMLDivElement&gt;(null)
  const spacerRef = useRef&lt;HTMLDivElement&gt;(null)

  const observer = new ResizeObserver(([entry]) =&gt; {
    if (spacerRef.current) {
      spacerRef.current.style.height = `${
        entry.target.getBoundingClientRect().height
      }px`
    }
  })

  useEffect(() =&gt; {
    if(!targetRef.current) return

    const el = targetRef.current

    observer.observe(el)

    return () =&gt; {
      observer.unobserve(el)
    }
  }, [])
  
  return (
    &lt;div&gt;
      content
      &lt;Footer /&gt;
      &lt;div style={{ height: 60 }} /&gt;
      {/* 내부적으로 60px의 높이를 가진 fixed element를 렌더하고 있음*/}
      &lt;CTAButton /&gt;
    &lt;/div&gt;
  )
}

export default Example
</code></pre><p>이러한 CTA 버튼이나 Appber처럼 fixed요소만큼 너비를 차지해야하는 경우들이 자주 발생하기에 <code spellcheck="false">useSpacer</code>라는 hook으로 분리해 보겠습니다.</p><pre spellcheck="false"><code class="language-typescript">import { useRef, useEffect } from "react";

export const useSpacer = () =&gt; {
  const targetRef = useRef&lt;HTMLDivElement&gt;();
  const spacerRef = useRef&lt;HTMLDivElement&gt;(null);

  const observer = new ResizeObserver(([entry]) =&gt; {
    if (spacerRef.current) {
      spacerRef.current.style.height = `${entry.target.getBoundingClientRect().height}px`;
    }
  });

  useEffect(() =&gt; {
    if(!targetRef.current) return

    const el = targetRef.current

    observer.observe(el)

    return () =&gt; {
      observer.unobserve(el)
    }
  }, [])

  return { spacerRef, targetRef };
};</code></pre><p>이제 CTA 버튼을 손쉽게 구현할 수 있습니다! 👏</p><p></p><p></p><p></p>

웹뷰에서 마주하는 여러 팁을 공유합니다.웹뷰를 구현하다보면 아래와 같은 화면을 자주 마주하게 됩니다.아래 사진은 토스에서 가져왔습니다.이때 하단에 항상 위치하고 있는 버튼을 보통 CTA(Click-To-Action) 버튼이라고 부르는데요. 이러한 버튼은 일반적으로 컨텐츠 위에 위치하고 있어야하기에 position:fixed로 구현하면 됩니다.간단한 것 같지

fixed 요소만큼 높이 차지하는 CTA 버튼 구현하기

🧑‍💻 Develop

<img src="https://image.until.blog/morethanmin/article/1718723304750" alt="until-541"><p>개발자에게 생산성은 곧 비용이기에 생산성을 높이는 것은 매우 중요한 일인데요.</p><p>멀티커서 기능을 잘 활용하면 생산성을 높일 수 있습니다. 저 또한 잘 활용하고 있지만 매번 활용하고 있는 기능들만 사용하게 되는 것 같아 이번 기회에 어떤 기능들이 있는지 정리해보려고 합니다.</p><p>기본적으로 마우스를 활용한 방식과 키보드를 활용한 방식이 있어요.</p><h1>마우스를 활용한 멀티 커서 단축키</h1><h2>클릭하여 하나씩 추가</h2><p>우선 가장 기초적인 방법부터 알려드릴게요.</p><p>맥에서는 <code spellcheck="false">Option</code> 키, 윈도우에서는 <code spellcheck="false">Alt</code> 키를 누른 상태로 vscode 화면에서 다른 영역을 마우스 포인터로 클릭하여 여러 커서를 추가할 수 있습니다.</p><p>이 상태에서 키보드로 타이핑을 하시면 모든 커서에서 동일하게 타이핑이 됩니다.</p><p>제거하기 위해서는 커서에 <code spellcheck="false">Option</code> 또는 <code spellcheck="false">Alt</code> 키를 누르신 체로 다시 클릭해주시면 됩니다.</p><p><code spellcheck="false">esc</code> 를 눌러서도 멀티커서를 제거할 수 있어요.</p><h2>그래그하여 추가</h2><p>클릭이 아닌 드래그해서 추가하는 방법도 있어요.</p><p>맥에서는 <code spellcheck="false">Option+Shift</code> 키, 윈도우에서는 <code spellcheck="false">Alt+Shift</code> 키를 누른 상태로 vscode 화면에서 다른 영역을 마우스 포인터를 드래그하여 여러 커서를 추가할 수 있습니다.</p><h1>키보드를 활용한 멀티 커서 단축키</h1><h2>일치하는 텍스트 모두 선택</h2><p>선택하고자 하는 내용을 드래그한다음, 맥에서는 <code spellcheck="false">Command+Shift+L</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+Shift+L</code> 키를 누르면 동일한 텍스트들에 모두 커서가 추가됩니다.</p><h2>순차적으로 일치하는 텍스트 선택</h2><p>위 기능의 경우 모든 텍스트가 선택된다면 해당 단축키를 사용하면 순차적으로 원하는 텍스트에 하나씩 커서가 추가됩니다.</p><p>선택하고자 하는 내용을 드래그한다음, 맥에서는 <code spellcheck="false">Command+D</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+D</code> 키를 누르면 드래그한 텍스트와 일치하는 다음 텍스트에 커서가 생기고 또 누르면 그 다음 텍스트에 커서가 추가되어요.</p><p>만약에 다시 되돌리기 위해서는 맥에서는 <code spellcheck="false">Command+U</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+U</code> 키를 눌러서 마지막으로 선택된 곳을 취소할 수 있어요.</p><h2>현재 커서 위 또는 아래 줄에 추가</h2><p>현재 커서 위치에서 위 또는 아래 방향으로도 멀터 커서를 연속으로 추가할 수 있어요. 맥에서는 <code spellcheck="false">Command+Option+Up/Down</code>, 윈도우즈에서는 <code spellcheck="false">Ctrl+Alt+Up/Down</code>키를 누르시면 됩니다.</p><h2>그래그한 여러 줄의 맨 마지막에 멀터 커서 추가하기</h2><p>여러줄을 드래그한 상태에서 각 줄의 마지막 라인에 커서를 추가할 수 있어요.</p><p>맥에서는 <code spellcheck="false">Option+Shift+I</code>, 윈도우에서는 <code spellcheck="false">Alt+Shift+I</code>를 키를 눌러 적용할 수 있어요.</p><p></p>

개발자에게 생산성은 곧 비용이기에 생산성을 높이는 것은 매우 중요한 일인데요.멀티커서 기능을 잘 활용하면 생산성을 높일 수 있습니다. 저 또한 잘 활용하고 있지만 매번 활용하고 있는 기능들만 사용하게 되는 것 같아 이번 기회에 어떤 기능들이 있는지 정리해보려고 합니다.기본적으로 마우스를 활용한 방식과 키보드를 활용한 방식이 있어요.마우스를 활용한 멀티 커서