Web Frontend

'프로토타입과 프로토타입 체인에 대해 아는 대로 설명 부탁드립니다.' 최근에 기술 면접을 보면서 Javascript의 프로토타입에 대한 질문을 받았습니다. 평소 프로토타입에 대해 완전히 이해하지 못하고 있었기 때문에 결국 어정쩡하게 둘러댈 수밖에 없었는데요. 이번 글에서는 그때의 상황을 돌아보며, Javascript의 프로토타입에 대해 제대로 다시 공부하고 이해한 내용을 공유하려고 합니다. Javascript와 Prototype클래스(Class)는 객체지향에서 중요한 개념입니다. 때문에 대부분의 객체지향 언어(e.g. Java, C++)에서는 이러한 클래스가 기반이 되지만, Javascript는 객체지향 언어이긴 하나, 그 기반이 프로토타입(Prototype-Based)이 됩니다. 즉, 클래스 없이도 객..

이번 글에서는 React에서 새롭게 제시한 React 코드 작성에 대한 권장사항 9가지를 보고 그 중 새롭게 알게 된 몇가지 사실에 대해 정리해보려 합니다.1. 반복문에서 요소의 key를 지정해주는 경우에는 index 사용을 지양하자key는 list의 요소를 추적하기 위해 사용됩니다. 이때 index는 요소를 고유하게 식별하지 않으므로 사용하는 것이 좋지 않습니다// 🛑 WRONGreturn ( {items.map((item, index) => ( … ))} );// 🟢 RIGHT, item.id가 안정적인 고유한 식별자라고 가정return ( {items.map((item, index) => ( … ))} );key를 index로 지정하게 되면 배열..

Axios의 Interceptoraxios의 interceptor는 요청의 응답을 가로챈 후 그 응답을 미리 처리할 수 있는 기능을 지원합니다.그렇기에 인가가 필요한 요청에서 401(Unauthorized) 에러가 발생하면 응답(에러)을 먼저 가로채서 토큰 Refresh를 진행하고, refresh된 토큰을 에러가 발생했던 요청의 헤더에 다시 넣어서 요청을 retry 할 수 있습니다.이러한 interceptor은 모든 요청과 응답에 대해 공통적인 작업을 수행할 수 있어 중복되는 코드를 없애며, 효율적인 인가 처리를 도와줍니다. 다음은 interceptor의 base 코드입니다.export const instance = axios.create({ baseURL: NEXT_PUBLIC_BASE_URL,});..

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..