📱 Webview

<blockquote>웹뷰에서 마주하는 여러 팁을 공유합니다.</blockquote>웹뷰를 구현하다보면 아래와 같은 화면을 자주 마주하게 됩니다.아래 사진은 토스에서 가져왔습니다.<img src="https://image.until.blog/morethanmin/article/1719587839236" alt="until-680">이때 하단에 항상 위치하고 있는 버튼을 보통 CTA(Click-To-Action) 버튼이라고 부르는데요. 이러한 버튼은 일반적으로 컨텐츠 위에 위치하고 있어야하기에 <code spellcheck="false">position:fixed</code>로 구현하면 됩니다.간단한 것 같지만 한가지 고려 해야할 점이 있습니다. 컨텐츠 영역에서 특정한 높이를 차지하고 있지 않기에 뒤에 컨텐츠를 가리게 된다는 점입니다.<img src="https://image.until.blog/morethanmin/article/1719588105264" alt="until-681">그럼 어떻게 하면 뒤 컨텐츠 영역을 가리지 않고 CTA 버튼을 만들 수 있을까요?가장 단순한 방법으로는 최하단에 높이를 차지하는 요소를 두면 됩니다.<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>위와 같은 방식은 잘 동작하겠지만, 아래와 같은 문제점들을 마주할 수 있습니다.바로 버튼의 높이가 동적으로 바뀌는 것에 대응할 수 없다는 것입니다.이를 해결하기 위해서는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver">ResizeObserver </a>라는 API를 사용하면 됩니다.해당API를 사용하면 요소의 사이즈 변화를 감지하여 해당 높이를 가져올 수 있고, 이를 spacer에 주입해줄 수 있습니다.<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>이러한 CTA 버튼이나 Appber처럼 fixed요소만큼 너비를 차지해야하는 경우들이 자주 발생하기에 <code spellcheck="false">useSpacer</code>라는 hook으로 분리해 보겠습니다.<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>이제 CTA 버튼을 손쉽게 구현할 수 있습니다! 👏

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

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

🧑‍💻 Develop

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

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

VSCode 멀티 커서로 생산성 높이기

취미

🍎 Mac

오 감사합니다 저도 발생하던 이슈였어요

웹뷰를 작업하면서 겪는 여러 트러블 슈팅 경험을 공유해요

프론트엔드

잘보고갑니다! 저는 모든 역할을 하고있네요.. 🥲

<img src="https://image.until.blog/until/article/1720100561172" alt="until-714">안녕하세요. 몰댄민입니다. 언틸 업데이트 사항을 알려드릴게요.<h1>컬렉션 기능</h1>많은 분들이 요청주셨던 카테고리 기능이 추가되었어요.기존에는 태그를 통해서만 게시글을 분류할 수 있었는데요,이제 아티클에 컬렉션이라는 이름으로 카테고리를 추가하고 분류하고 수 있게 되었어요.<img src="https://image.until.blog/until/article/1720100838718" alt="until-715">노션을 사용해보셨다면 곧바로 사용할 수 있을 만큼 사용하는 방법도 간단해요.아티을 작성하실 때 태그 입력란 위에서 원하는 컬렉션을 입력하여 원하는 컬렉션을 생성하면, 본인의 블로그에 <code spellcheck="false">Collections</code>메뉴가 활성화돼요.<img src="https://image.until.blog/until/article/1720101117842" alt="until-716">컬렉션 상세 페이지에서는 컬렉션에 대해 간단한 설명을 추가할 수 있어요.<img src="https://image.until.blog/until/article/1720101239171" alt="until-717">아직 정렬 기능, 태그 검색 기능 등등 보완할 부분들이 많지만 우선 적용하고 하나씩 보완해나갈 예정이에요.<h1>그 외 수정사항</h1><ul><li>태그 입력하는 입력창의 UI가 개선되었어요.</li><li>게시글 수정시 CodeBlock에 indent가 사라지는 이슈를 해결했어요.</li><li>그 외에 잡다한 버그들을 수정했어요.</li></ul><h1>기타</h1><ul><li>서비스에 대한 건의사항은 커뮤니티 또는 댓글 등 편한 곳으로 알려주세요.</li></ul>

컬렉션 기능이 추가되었어요

⚛️ React

언틸 서비스 초기에는 회원가입시 프로필 이미지를 oauth에서 제공하는 url을 그대로 저장해 사용했었다. (지금은 따로 s3에 저장하고 있습니다. 🥲)때문에 해당 주소가 유효하지 않게 되면 아래와 같이 엑박이 발생했다.<img src="https://image.until.blog/morethanmin/article/1726644394473.png" alt="until-1368">이런 문제를 해결하기 위해서는 img 태그의 onError를 적절히 사용해주면 된다.상황에 따라 아예 <code spellcheck="false">display:none</code> 을 걸어주거나, 대체 이미지를 보여줄 수도 있다. 언틸에서는 기본 아바타를 보여주는 방식으로 대응했다. 아래는 예시이다.<pre spellcheck="false"><code class="language-typescript">const Avatar = forwardRef&lt;HTMLDivElement, Props&gt;(
 (
 { type = 'user', size, src, loading = false, ...props },
 ref,
 ) =&gt; {
 const [isError, setIsError] = useState(false)

 if (loading)
 return (
 &lt;Skeleton /&gt;
 )

 if (!src || isError) {
 return (
 &lt;div
 ref={ref}
 css={[wrapperStyle, sizeStyle]}
 className={className}
 onClick={onClick}
 {...props}
 &gt;
 &lt;CgUserlane /&gt;
 &lt;/div&gt;
 )
 }

 return (
 &lt;div
 ref={ref}
 css={[wrapperStyle, sizeStyle]}
 {...props}
 &gt;
 &lt;Image src={src} fill alt="avatar" onError={() =&gt; setIsError(true)} /&gt;
 &lt;/div&gt;
 )
 },
)

export default Avatar</code></pre>

언틸 서비스 초기에는 회원가입시 프로필 이미지를 oauth에서 제공하는 url을 그대로 저장해 사용했었다. (지금은 따로 s3에 저장하고 있습니다. 🥲)때문에 해당 주소가 유효하지 않게 되면 아래와 같이 엑박이 발생했다.이런 문제를 해결하기 위해서는 img 태그의 onError를 적절히 사용해주면 된다.상황에 따라 아예 display:none 을 걸어주거