Foresitory 🌳 Foresitory 🌳

전체 글

• 화면 너비를 초과하지 않는 툴팁 만들기 w.React

  TECH 2024. 4. 28. 21:08

  툴팁은 클릭하거나 또는 마우스를 특정 구성 요소에 가져갔을 때(hover 했을 때) 상황에 맞는 도움말이나 정보를 표시합니다. 툴팁을 직접 만들어서 사용하던 중, hover 요소가 화면 상 오른쪽 끝에 위치할 때 툴팁의 컨테이너가 화면 너비를 넘어가는 현상을 발견했습니다.    다음과 같은 현상은 사용자가 예상한 대로 인터페이스가 동작하지 않고, 툴팁의 내용을 확인하기 위해 화면을 스크롤해야 하기 때문에 사용자 경험을 저해합니다. 따라서 위와 같은 경우를 개선하여 툴팁의 컨테이너가 화면의 가로 길이를 넘어가지 않도록 툴팁의 위치를 조정해 보도록 하겠습니다.    우선 수정 전 툴팁 코드는 다음과 같습니다.import styles from './tooltip.module.css';import IconQna..

  Read More
• 리액트에서 requestAnimationFrame 사용 시 주의할 점

  TECH 2024. 3. 17. 20:41

  리액트에서 requestAnimationFrame API를 사용하면서 겪었던 문제를 공유해 보려고 합니다. 📌 문제가 되었던 코드 function AnimationSection() { const [count, setCount] = useState(0); const text = 'welcome to ttaerrim world'.toUpperCase(); const textRef = useRef(null); const animate = () => { const width = textRef.current?.scrollWidth; if (width) { if (count > width) { setCount(0); } else { setCount((c) => c + 10); } } requestRef.curren..

  Read More
• React Hook Form의 서로 비슷한 기능들을 비교해 보자

  TECH 2024. 2. 3. 15:46

  이번 포스팅에서는 React Hook Form을 사용하면서 느꼈던 비슷한 기능을 하는 API들을 비교하고 사용하며 느낀 점들을 정리해 보았습니다. 1️⃣ Controller vs. useController AntD, MUI와 같은 UI 라이브러리나 커스텀 컴포넌트를 사용할 때 Controller나 useController를 사용하여 React Hook Form의 기능을 쉽게 적용할 수 있습니다. Controller function Component() { const { control } = useForm(); return ( ( )} /> ) } Controller를 사용하면서 느꼈던 점은, Controller의 render 속성의 return 문에서 사용하는 컴포넌트의 속성이 많아질수록, 또는 한 컴포..

  Read More
• useState, 클로저를 활용하여 동작한다고?

  TECH 2024. 1. 27. 21:48

  이번 포스팅에서는 클로저에 대해서 간단히 알아보고, 클로저가 활용되는 예시 중 하나인 useState의 내부 동작 방식을 자세히 알아보도록 하겠습니다. ✔️ 클로저란? 함수형 프로그래밍 언어에서 사용되는 중요한 특성 중 하나로, 함수와 그 함수가 선언된 렉시컬 환경과의 조합입니다. 자바스크립트는 렉시컬 스코프를 따르는 프로그래밍 언어이기 때문에 발생하는 현상입니다. W3C School에서는 클로저를 함수가 private한 변수를 사용할 수 있도록 한다고 설명합니다. 이 설명이 클로저의 기능을 쉽게 이해하는 데 도움이 되었습니다. 여기서 렉시컬 스코프란? 자바스크립트 엔진은 함수가 호출되는 위치가 아닌 함수를 어디에 정의했는지에 따라 함수의 상위 스코프를 결정합니다. 상위 스코프에 대한 참조는 함수 정의가..

  Read More
• React에서 Event Handler는 어떻게 동작할까요?

  TECH 2024. 1. 11. 16:37

  모락 서비스 개발 당시 다음과 같은 코드 리뷰를 받은 적이 있었습니다. 동료분께서 남겨 주신, 이벤트 위임 대신 노드마다 이벤트 핸들러를 등록하는 방식에 대한 코멘트였습니다. 저는 리액트로 개발을 하면서 이벤트 위임을 활용해 이벤트 핸들러를 할당한 적이 단연코 단 한 번도 없었기 때문에 굉장히 신선한 접근으로 느껴졌습니다. 리뷰받은 부분 ⬇️ export default function MapModal() { const onClickAddressListItem = (e: Event) => { // 생략 }; return ( {addressData.map((address) => ( {주소} ))} ); } 코드 리뷰 ⬇️ 코드 리뷰에서는 리액트에서 등록한 이벤트 핸들러가 어떻게 동작하는지 간단하게 조사해 보..

  Read More
• Zero Runtime CSS-in-JS에 대해 알아보자

  TECH 2024. 1. 6. 23:02

  최근에 진행한 프로젝트에서 요즈음 주목받고 있는 Zero Runtime CSS-in-JS 라이브러리, Vanilla Extract를 사용해 보았습니다. Vanilla Extract는 컴파일 타임에 CSS 파일을 생성하여 기존 런타임에 생성되는 CSS-in-JS보다 성능상의 이점을 제공하는 것으로 알려져 있습니다. 그렇다면 기존의 CSS-in-JS에는 어떤 성능적인 문제가 있었기 때문에 Zero Runtime CSS-in-JS 기술이 떠오르게 되었을까요? 이 포스팅에서는 런타임 CSS-in-JS 라이브러리의 특징과 문제는 무엇인지, 그리고 Zero Runtime 접근 방식이 그 문제를 어떻게 해결하는지에 대해 알아보도록 하겠습니다. CSS 적용 과정 CSS가 웹 페이지에 적용되는 과정부터 알아봅시다. 네트..

  Read More
• React에서 TMap API 사용하기

  TECH 2023. 12. 30. 14:48

  이 글에서는 네이버 부스트캠프 내의 모각코 모집/관리 플랫폼인 모락 서비스를 개발하며 TMap API를 사용했던 후기를 담아 보았습니다. GitHub - boostcampwm2023/web17_morak: Morak | 네이버 부스트캠프 내 모각코 모집/관리 플랫폼 🧑🏻‍💻 Morak | 네이버 부스트캠프 내 모각코 모집/관리 플랫폼 🧑🏻‍💻👩🏻‍💻👨🏻‍💻. Contribute to boostcampwm2023/web17_morak development by creating an account on GitHub. github.com TMAP Open API는 웹 개발 또는 어플리케이션 개발에 다양하게 활용될 수 있도록, Javascript 형태로 제공되는 TMAP 지도 플랫폼입니다. TMap API는 이..

  Read More
• 2023 회고

  ETC 2023. 12. 28. 23:23

  💫 올해 이룬 것사내 Frontend Renaissance이전 재직하던 직장에서 프론트엔드 개발자 경험을 개선하기 위한 프로젝트를 진행했다. 프론트엔드 르네상스라는 네이밍은 정말 멋지지 않은가? 하하. 가장 시급하다고 생각했던 모노레포 구축부터, Vite 마이그레이션, Storybook, 테스트 코드 도입, 자잘하게는 Google Spread를 활용한 기획자와의 협업 경험 개선까지 다양한 시도와 개선으로 개발자 경험을 개선할 수 있었다. 키워드로 하나하나 써 놓으니 간결한데, 모노레포 마이그레이션만 한두 달은 족히 썼던 것 같다. 다시 생각해도 베일리가 아니었더라면 끈질기게 이 프로젝트를 계속 가져갈 수 있었을까? 하는 생각이 든다. 처음에는 도입해야 할 것, 하고 싶은 것이 너무 많아 멘붕이 올 뻔했는..

  Read More