Web Frontend

Typescript의 연산자typescript에서 연산자를 이용한 타입 정의는 크게 union type과 intersection type으로 나눌 수 있습니다.오늘은 union type과 intersection type을 사용했을 때 각각 어떻게 type이 정의 되는지 알아보도록 하겠습니다. Union Type이란?union type은 | 를 사용하며 type이 A이거나 B라는 의미를 가집니다.function execute(text: string): void { console.log(text);}function execute(text: number): void { console.log(text);}union type을 사용하면 함수들을 합쳐 여러 개의 타입을 연결 할 수 있습니다.functio..

React-hook-form을 통한 예외처리여러 개의 input tag를 사용하여 컴포넌트를 만들 때에는 보통 react-hook-form을 통해 예외처리를 합니다.import { useForm } from 'react-hook-form';const { register, handleSubmit } = useForm();return ( );위의 코드에서 만약 사용자가 이름을 12자 이상 작성했다면const onValid = (data) => { //do something};const inValid = (e) => { const name = e.name; if (name.type === 'maxLength') { console.log(..

더 나은 폴더 구조 만들기개발을 하다 보면 누구나 한 번쯤은 더 단정된 폴더 구조를 만들기 위해 고민 해보곤 합니다.폴더 구조는 정해진 명확한 개념이 없고 주관적 기준이 많이 반영 되기 때문에 모두의 기준을 충족 시키는 것은 굉장히 어려운 일입니다.때문에 아직도 폴더 구조에는 어떠한 답이랄 것이 없는데요, 오늘은 이렇게 폴더 구조 설계를 고안하는 과정에서 조금이나마 도움을 주고자Atomic Design Pattern이라는 하나의 디자인 패턴을 소개해보려 합니다.Atomic Design Pattern 이란?그렇다면 Atomic Design Pattern은 정확히 어떤 것일까요? 위의 사진은 Atomic Design Pattern을 설명할 때 가장 널리 쓰이는 사진입니다.Atomic Design Patter..

들어가며동작 원리를 파악하기에 앞서 짚고 넘어가야 할 Javascript의 특징을 먼저 알아보려 합니다.바로 Javascript가 싱글쓰레드 언어라는 것 입니다. 이는 Javascript의 메인쓰레드를 담당하는 이벤트루프가 싱글쓰레드이기 때문이고,이에따라 Javascript는 한 번에 한 가지 일만 처리가 가능하다는 사실을 알 수 있습니다.그렇다면 정말 시간을 오래 소요해야 하는 하나의 작업이 있을 때, 이 하나의 작업이 다 끝나기 전까지 브라우저는 아무것도 할 수 없게 될까요?그렇진 않습니다. Javascript는 이러한 문제 상황을 대비해 비동기 콜백을 사용합니다.이번 글에서는 이런 Javascript의 비동기 콜백을 포함한 기본 동작 원리를 아주 간단하게 알아보겠습니다.동작 FlowJavascrip..

Nextjs에서 localStorage를 사용하다 보면 종종 아래와 같은 에러가 발생하곤 합니다.ReferenceError: localStorage is not defined저도 이러한 에러를 마주한 적이 있었는데요.이러한 에러가 야기되는 이유는 Nextjs의 렌더링 순서에서 알아볼 수 있습니다.Nextjs에서는 client-side 렌더를 수행하기 전에 server-side 렌더를 수행합니다.그렇게 server-side에서는 전역 객체(window, document)를 사용할 수 없게 되고이 때문에 server-side에서는 window 객체를 찾지 못하고 위와 같은 에러를 발생 시킵니다.해결하기보통 해결을 할 때에는 대표적으로 두가지 방법이 제시됩니다.1. window 객체의 존재 유무 살피기if (..

Optimistic UI란우선 시작하기에 앞서 Optimistic UI의 개념에 대해 짚고 넘어가겠습니다 Optimistic UI는 서버의 응답을 기다리지 않고 즉시 UI적인 반응을 보이는 것입니다. 쉽게 말해서 서버에 응답이 이미 성공했을 것이라고 가정하고 UI를 그리는 방식을 일컫는 말이라는 것입니다. 어떤 요청이 높은 확률로 성공한다는 보장이 있을 때, 그 요청이 늦지 않은 시간 안에 응답이 온다는 보장이 있을 때 사용할 수 있는 UI라고 생각하시면 됩니다. 이러한 Optimistic UI를 이용하여 댓글 기능을 구현해 보겠습니다. 구현데이터 가져오기댓글 기능을 구현하기 위해선 우선 현재 댓글의 리스트를 조회해야 합니다. 이러한 상황에서는 주로 useQuery를 사용해 data를 fetching 할..

오늘은 프로젝트를 진행하며 알게 된 'Batching'이라는 기법에 대해 알아보려고 합니다. 이번 포스팅에서는 Batching의 개념과 이점을 살펴보겠습니다.Batching이란?'Batch'는 '일괄'이라는 뜻을 가지고 있습니다. 그렇다면 'Batching'이란 무엇일까요? Batching은 '일괄 처리'라는 의미를 가집니다. 이 일괄 처리를 React에 적용시켜보면, 여러 개의 state 업데이트를 하나의 리랜더링으로 묶어 처리하는 것을 말합니다. 좀 더 자세한 이해를 위해 간단한 예제를 살펴보겠습니다. const [number, setNumber] = useState(0);const numberControler = () => { setNumber((number) => number + 1); set..