TypeScript
-
다양한 파일 확장자 파일 미리보기 지원하기React.js & Next.js 2023. 4. 5. 21:25
목차 들어가며 text, image, pdf, video 대응하기 리팩터링 with ChatGPT 들어가며 실무에서 폼 양식을 작성할 때, 다양한 타입의 파일을 지원하게 됩니다. 아쉽게도 우리는 단순히 객체로만 파일을 가지고 있는 것이 아닌, UX를 위해 파일의 미리 보기를 요구받을 수 있습니다. 따라서 이번에는 다양한 확장자 파일에 대하여 미리 보기를 지원하는 방법 및 로직을 알아봅니다. text, image, pdf, video 대응하기 import React, { useState } from 'react'; const Test = () => { const [text, setText] = useState(''); const handleFileInputChange = (event: React.Chang..
-
스타일드 컴포넌트 조건부 렌더링 활용하기React.js & Next.js 2022. 8. 26. 22:51
스타일드 컴포넌트 조건부 렌더링 활용하기 프론트엔드 개발 환경에서 CSS-in-JS 를 사용하는 가장 큰 이점 중에 하나는 property를 css 에도 적용할 수 있다는 것일 것이다. 리액트에서 className 을 통해 조건부 렌더링 하는 것보다 state 를 전달하는 것이기 때문에 맥락을 파악하기 쉽고 이해하기도 쉽다. 이렇게 CSS-in-JS 중 스타일드 컴포넌트(styled-component) 를 잘 활용하는 방법을 소개해볼까 한다. CSS-in-JS의 장점은 재사용 가능한 컴포넌트로써 스타일링 코드의 양을 줄일 수 있고, 타입스크립트의 경우 props에 대한interface를 적극적으로 활용하여 더욱 가독성이 높은 코드를 만들 수 있다. 코드 상에서는 다음과 같이 사용된다 setIsHandsU..