한 회사의 기술 인터뷰에서 리액트의 key에 대한 질문을 받았다. 해당 질문에 대한 대답을 하는 과정에서 그동안에 프로젝트를 진행하면서 리스트의 각 항목에 key를 할당하는 것을 너무 당연시한 것 같다는 생각이 들어 이에 대해 알아보려고 한다. 배열에서 데이터 렌더링 const people = [ { id: 0, name: 'Creola Katherine Johnson', profession: 'mathematician', }, { id: 1, name: 'Mario José Molina-Pasquel Henríquez', profession: 'chemist', }, ]; export default function List() { const listItems = people.map((person) =>..

🔥 발생한 문제 텍스트를 입력하고 엔터(Enter) 키를 누르면 목록에 새롭게 추가되고 input 창은 비워지도록 구현했는데 왠지 모르게 함수가 두 번 실행되면서 기존 텍스트의 마지막 글자가 목록에 추가되는 문제가 발생했다❗️ 원인 분석 검색해본 결과 이러한 문제는 크롬 브라우저에서 한글을 사용하는 경우에만 문제가 발생한다. (영어로 입력하면 키 이벤트가 중복으로 발생하지 ❌) 구체적으로 위 GIF를 보면 한글 입력 시 입력 중인 글자 아래 검은 밑줄이 생기는데 해당 밑줄이 있는 상황에서 키 이벤트가 발생하면 함수가 두 번 실행되는 문제가 발생한다. 한글의 경우 자음과 모음의 조합으로 만들어지는 조합 문자이기 때문에 글자가 조합 중인지 조합이 끝난 상태인지를 알 수 없어 생기는 문제이다. 🧯 해결 방법 ..

무한 스크롤(Infinite Scroll)이란? 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식이다. 한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주게 되고 이로 인해 많은 양의 콘텐츠를 스크롤 해서 볼 수 있다. 페이지네이션이 아닌 무한 스크롤로 구현하려는 이유❓ 상품 목록에서 상품을 보여주고자 할 때 페이지네이션, 무한 스크롤 중 무엇이 사용자 경험을 더욱 좋게 할 수 있을지 고민한 끝에 모바일 환경을 고려해서 무한 스크롤을 사용하기로 했다.(차후에 프로젝트를 반응형으로 리팩터링 할 계획🙇🏻) 또한, 다음 상품을 보기 위한 사용자의 클릭을 최소화하고 더 쉽게 다양한 상품을 볼 수 있을 것이라고 판단했다. 구현하는 과정 무한 스크롤을 구현하는 방법은 스크..

🔥 발생한 에러 Uncaught Error: [Immer] An immer producer returned a new value and modified its draft. Either return a new value or modify the draft. 에러를 번역하자면 immer 제작자는 새로운 값을 리턴하거나 기존 상태를 수정하거나 둘 중 하나만 해야된다는 것이다. 원인이 되는 코드 분석 immer 라이브러리를 사용하여 불변성 상태의 트리를 손쉽게 변경하던 중 위와 같은 에러가 발생했다. updatePerson((person) => person.mentors.push({ name, title })); 화살표 함수는 중괄호를 써주지 않으면 자동으로 return 키워드가 붙는다. 즉, 위의 코드는 기존..

인터셉터(Interceptors)란? then 또는 catch로 처리되기 전에 요청과 응답을 가로챌 수 있다. Axios 인터셉터를 적용하려는 이유❓ 토이 프로젝트를 진행하면서 서버에 토큰 인증을 필요로 하는 API 요청을 할때마다 HTTP Authorization 요청 헤더에 토큰을 넣어줘야하고 401(Unauthorized) 에러가 서버로부터 들어오면 토큰을 갱신해준 후 재요청을 보내는 과정을 한 곳에서 모두 처리하여 중복 코드를 제거하고 유지보수성을 향상시키기 위해 Axios 인터셉터를 적용하기로 했다. 사용자 지정 config로 새로운 Axios 인스턴스를 생성하여 사용하니 더욱 편리했다. (baseURL, timeout 설정) 적용하는 과정 1) Axios 인스턴스 생성 const instanc..

정규 표현식(Regular Expression)은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. RegExp RegExp 생성자는 패턴을 사용해 텍스트를 판별할 때 사용한다. 리터럴 표기법의 매개변수는 두 빗금으로 감싸야 하며 따옴표를 사용하지 않는다. 생성자 함수의 매개변수는 빗금으로 감싸지 않으나 따옴표를 사용한다. // 정규 표현식 생성하기 /ab/g new RegExp(/ab/, 'g') // 리터럴 new RegExp('ab', 'g') // 생성자 동적으로 정규 표현식 생성하기 const 변수 = 'JS'; const regex = new RegExp(`${변수}`, 'g'); console.log(regex); // /JS/g 🧐 응용하기 match() 메서드는 문자열이 정규식과 매치되는..

큐(Queue)란? 큐는 데이터를 일시적으로 저장하는 자료구조 중 하나로, 먼저 입력된 데이터가 먼저 출력되는 "선입선출(FIFO: First-In-First-Out)" 원칙을 따릅니다. 큐(Queue)의 구현 방법 2가지 큐는 배열(Array)이나 연결 리스트(Linked List)를 사용하여 구현할 수 있습니다. 1️⃣ 배열 배열을 사용할 경우, 크기가 고정되어 있어서 데이터의 추가 및 제거에 제한이 있을 수 있지만, 연산 속도가 빠릅니다. 2️⃣ 연결 리스트 연결 리스트를 사용할 경우, 크기에 제한이 없어서 데이터를 유동적으로 추가 및 제거할 수 있지만, 연산 속도가 느립니다. 🧐 배열로 큐(Queue)를 구현해도 되지만 굳이 ? 연결 리스트로 구현해야 하는 이유 JavaScript에서 배열을 사용..

🚨 오류 발생 AxiosError message: 'Network Error' const userInfoPatch = async (userInfo) => { try { // url: 서버 주소, id: 사용자 아이디, userInfo: 사용자 정보 객체 await axios.patch(`${url}/member/${id}`, userInfo).then(() => { alert('수정이 완료되었습니다.'); }); } catch (error) { console.log(error); } }; 클라이언트 코드에서는 별다른 문제가 없어 보였고, 서버 측에서 분명 접근을 허용하는 메서드로 PATCH에 대해 따로 처리를 해주었다. 프로젝트를 진행하면서 GET, POST, DELETE 등 여러 방식으로 서버에 요청할..