👨💻📱✍️🎢314 async function 식별하기 📌 문제 상황 사내 프로젝트를 진행하다가 prop 으로 전달받은 함수의 반환값에 따라서 그 다음 호출되는 액션 핸들러를 제어하기 위한 경우가 생겼습니다. 아래는 이를 간략화한 예시 코드입니다. interface ComponentProps { onAction: () => void onClick: () => unknown } export default function Component({ onClose }: ComponentProps) { // ... const handleClick = () => { onClick ? onClick() && onAction() : onAction() } return ( try me! ) } 여기서 onClick 이 동기 함수라면 아무런 문제가 발생하지 않는데.. Promis.. 2022. 8. 8. Next.js API Routes 알아보기 📌 API Routes 란? API Routes 의 등장 배경 React 애플리케이션을 개발하다보면 backend API 가 필요한 시점이 오게됩니다. 예를 들어 DB 의 데이터를 조회하거나 사용자가 요청한 데이터를 처리하는 등의 작업이 있습니다. 이를 위해 이전에는 Node.js 등을 활용한 custom server 파이프라인을 구축해서 해당 작업을 위임하는 방식을 사용했지만, 이 경우 Next.js 의 성능 최적화 이점을 잃게 되는 문제와 TypeScript 및 ES6 방식의 모듈 시스템을 사용하지 못하는 문제가 있었습니다. 이러한 문제를 해결하며 개발자 경험을 향상시키기 위해서 Next.js 는 Next 9 버전 부터 API Routes 라는 기능을 지원하기 시작했습니다. 이를 통해 Next.js .. 2022. 7. 26. React 컴포넌트(children) 타이핑하기 📌 무슨 타입을 써야하지..? 🤔 TypeScript 와 함께 React 프로젝트를 개발하다보면 컴포넌트에서 children 을 prop 으로 받아서 사용하고 이에 대한 인터페이스를 정해줘야 하는 경우가 있습니다. export default function Component({ children }) { return ( 자식 컴포넌트를 렌더링합니다. { children } ) } 이럴때마다 항상 고민인 부분이 children 에 어떤 타입을 명시해야 하는 것인가? 에 대한 것입니다. 이번 포스트에서는 이 부분에 대한 고민을 해결하고자! React 컴포넌트의 children 에 할당 가능한 타입들에 대해서 간단하게 정리해보겠습니다. 📌 React 에서 제공하는 여러가지 children 타입들 1️⃣ JSX... 2022. 7. 23. [JavaScript] Debounce 와 Throttle 에 대해 알아보자 📌 Debounce 와 Throttle 을 이용한 이벤트 처리 debounce 와 throttle 은 과도한 이벤트 발생으로 인한 성능 저하를 방지하는 방법입니다. 이 둘은 일정 시간 간격을 두고 이벤트를 호출한다는 동일한 목표를 가지고 있지만 서로 동작 방식이 다릅니다. 📌 Debounce 의 동작 방식과 구현 1️⃣ Debounce 동작 예시 debounce 는 이벤트를 그룹화하여 하나의 이벤트만 호출되도록 합니다. 위 예시와 같이 debounce 는 일정 waiting time 동안 함수 호출이 없는 경우 가장 마지막 이벤트를 선택합니다. (trailing) 이 대신에 가장 처음 호출된 이벤트를 선택하는 방법도 있습니다. (leading) 2️⃣ Debounce 구현하기 function deboun.. 2022. 7. 9. [TypeScript] enum 과 union type, 언제 써야할까? 📌 TypeScript 에서 연관된 타입 정의하기 TypeScript 를 이용해서 개발을 하다보면 서로 연관된 값을 타입으로 정의할 때 enum 혹은 union type 을 이용해서 정의하게 됩니다. 두가지 방법 중에서 어떤것이 최선인지 항상 고민이 되었는데 이번 기회에 둘의 차이점에 대해서 알아두면 좋을 것 같아서 정리해봤습니다. 만약 디바이스의 종류에 대한 타입을 string union 으로 정의한다면 다음과 같습니다. type DeviceType = "phone" | "desktop" | "pad" | "watch" 이를 enum 을 이용해서 타입을 정의하면 다음과 같습니다. enum DeviceType { phone = 'phone', desktop = 'desktop', tablet = 'tab.. 2022. 7. 9. -webkit-overflow-scrolling 속성과 stacking context 이슈 📌 부드러운 overflow 스크롤을 위한 css 속성 간단한 overflow container 예시 이전부터 HTML 요소에 overflow 가 발생했을 경우 스크롤 형태로 컨텐츠를 보여주기 위해 다음과 같이 CSS 를 정의했습니다. .container { display: flex; flex-direction: row; overflow-x: scroll; flex-wrap: nowrap; width: 200px; } 특히 iOS 의 경우 스크롤 바운스 효과를 위해 다음과 같이 스크롤 관련 vendor prefix 를 포함한 CSS 코드를 작성하게 됩니다. -webkit-overflow-scrolling: touch; 여기서 touch 로 지정할 경우 모멘텀 기반 스크롤 방식으로 동작하기 때문에 일반적인.. 2022. 7. 4. 이전 1 ··· 8 9 10 11 12 13 14 ··· 53 다음
