프론트엔드 2

[React] reverse() 함수 관련 크로스 브라우징 이슈

상위 컴포넌트에서 props로 배열을 받아 와 배열 요소를 뒤집어서 뿌려줘야하는 상황에서 크로스 브라우징 이슈가 발생했다. API에서 받아온 원본 배열의 무결성을 지키기 위해 하위 컴포넌트 내부에서 const copiedArr = [ ...apiArr, ].reverse(); 위와 같이 얕은 복사를 해주었다. chrome 환경에서는 reverse가 된 배열이 렌더되었지만, safari 환경에서는 reverse된 배열이 렌더되지 않았다. 디버깅 결과 copiedArr에 reverse된 데이터가 아닌 apiArr의 데이터가 있는 것을 확인하였고, 브라우저간의 렌더 과정에서 변수에 값을 할당하는 시점에 차이가 있을 것이라고 추측했다. dependancy를 걸어 apiArr의 값이 변할 경우 다시 얕은 복사를 ..

React.js 2024.04.18

[React] 리액트 Atomic Design Pattern 설계

프로젝트의 규모가 클수록, 또는 지속적인 버전 관리와 고도화가 필요할 경우 개발 전 프로젝트 설계는 매우 중요하다고 생각한다. 또한 컴포넌트를 구조적으로 설계하여 최하단에서 최대한 재사용이 가능한 컴포넌트들을 확장성 있게 만들어야 한다. 기능은 같지만 디자인이 조금씩 달라지는 Tab, Select box, Modal, Button, Input, 여러가지 Form들을 매번 새로 생성하는 것은 매우 비효율적이고 프로젝트의 코드를 지저분하게 만든다. https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/ 아토믹 디자인을 활용한 디자인 시스템 도입기 | 카카오엔터테인먼트 FE 기술블로그 정호일(harry) 카카오..

React.js 2023.03.10